Skip to content

Commit 1b3252f

Browse files
author
swyx
committed
fix
1 parent e50408c commit 1b3252f

File tree

12 files changed

+5954
-3244
lines changed

12 files changed

+5954
-3244
lines changed

‎example/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.netlify

‎example/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app) and uses [Netlify Identity](https://www.netlify.com/docs/identity/) for authentication.
22

3-
<!-- Markdown snippet -->
4-
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bcomnes/react-identity-widget-demo)
3+
This shows an example of how to use the `netlify-identity-widget` with React.
54

5+
For more info on the `netlify-identity-widget`, [find the repo here.](https://github.com/netlify/netlify-identity-widget/)

‎example/package.json

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"netlify-identity-widget": "^1.1.2",
7-
"react": "^15.6.1",
8-
"react-dom": "^15.6.1",
9-
"react-scripts": "1.0.13"
6+
"netlify-identity-widget": "^1.4.2",
7+
"react": "^16.6.0",
8+
"react-dom": "^16.6.0",
9+
"react-router-dom": "^4.3.1",
10+
"react-scripts": "^2.0.0"
1011
},
1112
"scripts": {
12-
"start": "react-scripts start",
13+
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
1314
"build": "react-scripts build",
1415
"test": "react-scripts test --env=jsdom",
1516
"eject": "react-scripts eject"
16-
}
17+
},
18+
"browserslist": [
19+
">0.2%",
20+
"not dead",
21+
"not ie <= 11",
22+
"not op_mini all"
23+
]
1724
}

‎example/src/App.css

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎example/src/App.js

Lines changed: 92 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,103 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
4-
import netlifyIdentity from 'netlify-identity-widget'
2+
import Protected from './Protected';
3+
import Public from './Public';
4+
import netlifyIdentity from 'netlify-identity-widget';
5+
import {
6+
BrowserRouter as Router,
7+
Route,
8+
Link,
9+
Redirect,
10+
withRouter
11+
} from 'react-router-dom';
512

6-
class App extends Component {
7-
constructor() {
8-
super()
13+
// https://reacttraining.com/react-router/web/example/auth-workflow
14+
////////////////////////////////////////////////////////////
15+
// 1. Click the public page
16+
// 2. Click the protected page
17+
// 3. Log in
18+
// 4. Click the back button, note the URL each time
919

10-
this.handleLogIn = this.handleLogIn.bind(this)
11-
}
20+
function AuthExample() {
21+
return (
22+
<Router>
23+
<div>
24+
<AuthButton />
25+
<ul>
26+
<li>
27+
<Link to="/public">Public Page</Link>
28+
</li>
29+
<li>
30+
<Link to="/protected">Protected Page</Link>
31+
</li>
32+
</ul>
33+
<Route path="/public" component={Public} />
34+
<Route path="/login" component={Login} />
35+
<PrivateRoute path="/protected" component={Protected} />
36+
</div>
37+
</Router>
38+
);
39+
}
1240

13-
handleLogIn () {
14-
// You can import the widget into any component and interact with it.
15-
netlifyIdentity.open()
16-
}
41+
const AuthButton = withRouter(
42+
({ history }) =>
43+
netlifyIdentity.currentUser() ? (
44+
<p>
45+
Welcome!{' '}
46+
<button
47+
onClick={() => {
48+
netlifyIdentity.logout().then(() => history.push('/'));
49+
}}
50+
>
51+
Sign out
52+
</button>
53+
</p>
54+
) : (
55+
<p>You are not logged in.</p>
56+
)
57+
);
58+
59+
function PrivateRoute({ component: Component, ...rest }) {
60+
return (
61+
<Route
62+
{...rest}
63+
render={props =>
64+
netlifyIdentity.currentUser() ? (
65+
<Component {...props} />
66+
) : (
67+
<Redirect
68+
to={{
69+
pathname: '/login',
70+
state: { from: props.location }
71+
}}
72+
/>
73+
)
74+
}
75+
/>
76+
);
77+
}
1778

79+
class Login extends React.Component {
80+
state = { redirectToReferrer: false };
81+
componentDidMount = () => {
82+
netlifyIdentity.on('login', () =>
83+
this.setState({ redirectToReferrer: true })
84+
);
85+
};
86+
login = () => {
87+
netlifyIdentity.open();
88+
};
1889
render() {
90+
let { from } = this.props.location.state || { from: { pathname: '/' } };
91+
let { redirectToReferrer } = this.state;
92+
93+
if (redirectToReferrer) return <Redirect to={from} />;
94+
1995
return (
20-
<div className="App">
21-
<div className="App-header">
22-
<img src={logo} className="App-logo" alt="logo" />
23-
<h2>Welcome to React</h2>
24-
</div>
25-
<p className="App-intro">
26-
To get started, edit <code>src/App.js</code> and save to reload.
27-
</p>
28-
<div>
29-
<button onClick={this.handleLogIn} >Log in with netlify</button>
30-
</div>
96+
<div>
97+
<p>You must log in to view the page at {from.pathname}</p>
98+
<button onClick={this.login}>Log in</button>
3199
</div>
32100
);
33101
}
34102
}
35-
36-
export default App;
103+
export default AuthExample;

‎example/src/App.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎example/src/Protected.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
export default function Public() {
3+
return <h3>Public</h3>;
4+
}

‎example/src/Public.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
export default function Public() {
3+
return <h3>Public</h3>;
4+
}

‎example/src/index.js

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,40 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
44
import App from './App';
5-
import registerServiceWorker from './registerServiceWorker';
5+
// import registerServiceWorker from './registerServiceWorker';
66
import netlifyIdentity from 'netlify-identity-widget';
7+
// import {
8+
// BrowserRouter as Router,
9+
// Route,
10+
// Link,
11+
// Redirect,
12+
// withRouter
13+
// } from 'react-router-dom';
714

8-
window.netlifyIdentity = netlifyIdentity
15+
window.netlifyIdentity = netlifyIdentity;
916
// You must run this once before trying to interact with the widget
10-
netlifyIdentity.init()
17+
netlifyIdentity.init();
1118

19+
// class AppWithAuth extends React.Component {
20+
// state = {
21+
// user: null
22+
// };
23+
// componentDidMount() {
24+
// netlifyIdentity.on('login', user => this.setState({ user }));
25+
// }
26+
// render() {
27+
// // // Get the current user:
28+
// // const user = netlifyIdentity.currentUser();
29+
// // you can also just use the user from the setState above
30+
31+
// return (
32+
// <Router>
33+
// <App />
34+
// </Router>
35+
// );
36+
// }
37+
// }
38+
39+
// ReactDOM.render(<AppWithAuth />, document.getElementById('root'));
1240
ReactDOM.render(<App />, document.getElementById('root'));
13-
registerServiceWorker();
41+
// registerServiceWorker();

‎example/src/logo.svg

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)