examples

Author: swyx

example/README.md

@@ -2,4 +2,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 This shows an example of how to use the `netlify-identity-widget` with React.
 
+The source code is at https://github.com/netlify/netlify-identity-widget/tree/master/example
+
+and it is deployed at: https://netlify-identity-widget-react-example.netlify.com
+
 For more info on the `netlify-identity-widget`, [find the repo here.](https://github.com/netlify/netlify-identity-widget/)

example/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

example/src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Protected from './Protected';
 import Public from './Public';
 import netlifyIdentity from 'netlify-identity-widget';
@@ -10,7 +10,7 @@ import {
   withRouter
 } from 'react-router-dom';
 
-// https://reacttraining.com/react-router/web/example/auth-workflow
+// copied straight from https://reacttraining.com/react-router/web/example/auth-workflow
 ////////////////////////////////////////////////////////////
 // 1. Click the public page
 // 2. Click the protected page
@@ -38,14 +38,30 @@ function AuthExample() {
   );
 }
 
+const fakeAuth = {
+  isAuthenticated: false,
+  authenticate(cb) {
+    this.isAuthenticated = true;
+    netlifyIdentity.open();
+    // setTimeout(cb, 100); // fake async
+    netlifyIdentity.on('login', cb);
+  },
+  signout(cb) {
+    this.isAuthenticated = false;
+    // setTimeout(cb, 100);
+    netlifyIdentity.logout();
+    netlifyIdentity.on('logout', cb);
+  }
+};
+
 const AuthButton = withRouter(
   ({ history }) =>
-    netlifyIdentity.currentUser() ? (
+    fakeAuth.isAuthenticated ? (
       <p>
         Welcome!{' '}
         <button
           onClick={() => {
-            netlifyIdentity.logout().then(() => history.push('/'));
+            fakeAuth.signout(() => history.push('/'));
           }}
         >
           Sign out
@@ -61,7 +77,7 @@ function PrivateRoute({ component: Component, ...rest }) {
     <Route
       {...rest}
       render={props =>
-        netlifyIdentity.currentUser() ? (
+        fakeAuth.isAuthenticated ? (
           <Component {...props} />
         ) : (
           <Redirect
@@ -78,14 +94,13 @@ function PrivateRoute({ component: Component, ...rest }) {
 
 class Login extends React.Component {
   state = { redirectToReferrer: false };
-  componentDidMount = () => {
-    netlifyIdentity.on('login', () =>
-      this.setState({ redirectToReferrer: true })
-    );
-  };
+
   login = () => {
-    netlifyIdentity.open();
+    fakeAuth.authenticate(() => {
+      this.setState({ redirectToReferrer: true });
+    });
   };
+
   render() {
     let { from } = this.props.location.state || { from: { pathname: '/' } };
     let { redirectToReferrer } = this.state;

example/src/Protected.js

@@ -1,4 +1,12 @@
 import React from 'react';
-export default function Public() {
-  return <h3>Public</h3>;
+import netlifyIdentity from 'netlify-identity-widget';
+export default function Protected() {
+  const user = netlifyIdentity.currentUser();
+  console.log({ user });
+  return (
+    <div>
+      <h3>Protected Page</h3>
+      You are logged in as <b>{user.email}</b>
+    </div>
+  );
 }

example/src/index.js

@@ -4,38 +4,10 @@ import './index.css';
 import App from './App';
 // import registerServiceWorker from './registerServiceWorker';
 import netlifyIdentity from 'netlify-identity-widget';
-// import {
-//   BrowserRouter as Router,
-//   Route,
-//   Link,
-//   Redirect,
-//   withRouter
-// } from 'react-router-dom';
 
 window.netlifyIdentity = netlifyIdentity;
 // You must run this once before trying to interact with the widget
 netlifyIdentity.init();
 
-// class AppWithAuth extends React.Component {
-//   state = {
-//     user: null
-//   };
-//   componentDidMount() {
-//     netlifyIdentity.on('login', user => this.setState({ user }));
-//   }
-//   render() {
-//     // // Get the current user:
-//     // const user = netlifyIdentity.currentUser();
-//     // you can also just use the user from the setState above
-
-//     return (
-//       <Router>
-//         <App />
-//       </Router>
-//     );
-//   }
-// }
-
-// ReactDOM.render(<AppWithAuth />, document.getElementById('root'));
 ReactDOM.render(<App />, document.getElementById('root'));
 // registerServiceWorker();