Skip to content

Instantly share code, notes, and snippets.

@jaredpalmer
Created November 8, 2016 21:52
Show Gist options
  • Save jaredpalmer/bab6ac92a9cd77fe42b60fec812e0e73 to your computer and use it in GitHub Desktop.
Save jaredpalmer/bab6ac92a9cd77fe42b60fec812e0e73 to your computer and use it in GitHub Desktop.
React SPA OAuth Login
module.exports = {
login (email, pass, cb) {
cb = arguments[arguments.length - 1]
if (localStorage.token) {
if (cb) cb(true)
this.onChange(true)
return
}
fetch('http://localhost:5000/api/oauth2/token', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: email,
password: pass,
grant_type: 'password',
client_id: 'imp_local_id',
client_secret: 'imp_local_secret'
})
}).then(res => res.json())
.then(res => {
localStorage.token = res.access_token.token
if (cb) cb(true)
this.onChange(true)
})
.catch(e => {
if (cb) cb(false)
this.onChange(false)
})
},
logout (cb) {
fetch('http://localhost:5000/logout')
.then((res) => {
delete localStorage.token
if (cb) cb()
this.onChange(false)
}).catch(e => {
console.log(e)
})
},
getToken () {
return localStorage.token
},
loggedIn () {
return !!localStorage.token
},
onChange () {}
}
import React, { Component } from 'react';
import {withRouter} from 'react-router';
import auth from '../auth';
class Login extends Component {
constructor() {
super()
this.state ={
error: true
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const email = this.refs.username.value;
const pass = this.refs.password.value;
auth.login(email, pass, (loggedIn) => {
if (!loggedIn)
return this.setState({ error: true });
const { location } = this.props;
if (location.state && location.state.nextPathname) {
this.props.router.replace(location.state.nextPathname);
} else {
this.props.router.replace('/dashboard');
}
})
}
render() {
return (
<div className="container">
<form onSubmit={this.handleSubmit} style={{maxWidth: '350px', margin: '2rem auto' }}>
<input type="text" ref="username" defaultValue="jared" placeholder="username"/>
<input type="password" ref="password" placeholder="password" />
<input type="submit" value="Login"/>
{this.state.error && (
<p>Bad login information</p>
)}
</form>
</div>
);
}
}
export default withRouter(Login);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment