Instantly share code, notes, and snippets.

@bati11 /App.js
Created Jun 24, 2018

Embed
What would you like to do?
Google SignIn + React + React Router v2 ( http://blog.bati11.info/entry/2018/05/20/085324 )
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
const PrivateRoute = ({authenticated, render, ...rest}) => (
authenticated ? (
<Route {...rest} render={render} />
) : (
<Route
{...rest}
render={props =>
<Redirect
to={{
pathname: "/login",
state: {from: props.location}
}}
/>
}
/>
)
);
class App extends Component {
state = {
authenticated: false,
gapi: null
}
componentDidMount() {
this.downloadGoogleScript(this.initSignInButton)
}
downloadGoogleScript = (callback) => {
const element = document.getElementsByTagName('script')[0];
const js = document.createElement('script');
js.id = 'google-platform';
js.src = '//apis.google.com/js/platform.js';
js.async = true;
js.defer = true;
element.parentNode.insertBefore(js, element);
js.onload = () => callback(window.gapi);
}
initSignInButton = (gapi) => {
gapi.load('auth2', () => {
gapi.auth2.init({client_id: <CLIENT_ID>})
.then(
(result) => {
if (result.isSignedIn.get()) {
this.setState({authenticated: true, gapi})
} else {
this.setState({authenticated: false, gapi})
}
},
(err) => console.error(err)
);
})
}
onSignIn = (googleUser) => {
console.log('ID: ' + googleUser.getBasicProfile().getId());
this.setState({authenticated: true})
}
onSignOut = () => {
const auth2 = this.state.gapi.auth2.getAuthInstance();
auth2.signOut().then(() => console.log('sign out'));
this.setState({authenticated: false})
}
render() {
if (!this.state.gapi) {
return ('Loading...')
}
return (
<Router>
<Switch>
<Route exact path="/" render={props =>
<Top {...props} authenticated={this.state.authenticated} onSignOut={this.onSignOut} />
}/>
<Route path="/login" render={props =>
<Login {...props} onSignIn={this.onSignIn} gapi={this.state.gapi} authenticated={this.state.authenticated} />
}/>
<PrivateRoute path="/private" authenticated={this.state.authenticated} render={props =>
<div>プライベートなページ</div>
}/>
</Switch>
</Router>
)
}
}
export default App;
class Login extends Component {
componentDidMount() {
if (this.props.gapi) {
this.props.gapi.signin2.render('google-signin-button', {
'onsuccess': this.props.onSignIn,
'onfailure': (err) => console.error(err)
});
}
}
render() {
if (this.props.authenticated) {
const { from } = this.props.location.state || { from: { pathname: "/" } };
return (<Redirect to={from} />)
}
return (
<div>
<h1>ようこそ!</h1>
<div id="google-signin-button"></div>
<Link to='/'>Topへ</Link>
</div>
)
}
}
class Top extends Component {
render() {
if (this.props.authenticated) {
return (
<div>
<h1>ログイン済み:Topページ</h1>
<button onClick={this.props.onSignOut}>ログアウト</button>
</div>
)
} else {
return (
<div>
<h1>ログイン前:Topページ</h1>
<Link to='/login'>サインイン</Link>
</div>
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment