This example shows how to implement Login and SignUp features to your ReactJS application using auth0-lock
widget. It also shows how to setup react-router to require authentication for urls with restricted access.
The library auth0-lock
provides the user authentication, and we also have src/utils/AuthService.js
class to wrap Lock Widget usage and manage the localStorage items.
In order to get started, run the three commands below. Make sure your .env
file has the correct values from your auth0 account.
# Install the dependencies
npm install
# copy configuration and replace with your own
cp .env.example .env
# Run
npm start
The npm start command uses webpack to compile the application code and run a simple server for the development environment. It also keeps watching for file changes, updating the browser tab properly.
Shut it down manually with Ctrl-C.
/* ===== ./src/utils/AuthService.js ===== */
import Auth0Lock from 'auth0-lock'
export default class AuthService {
constructor(clientId, domain) {
// Configure Auth0
this.lock = new Auth0Lock(clientId, domain, {})
// Add callback for lock `authenticated` event
this.lock.on('authenticated', this._doAuthentication.bind(this))
// binds login functions to keep this context
this.login = this.login.bind(this)
}
_doAuthentication(authResult){
// Saves the user token
this.setToken(authResult.idToken)
}
login() {
// Call the show method to display the widget.
this.lock.show()
}
loggedIn(){
// Checks if there is a saved token and it's still valid
return !!this.getToken()
}
setToken(idToken){
// Saves user token to localStorage
localStorage.setItem('id_token', idToken)
}
getToken(){
// Retrieves the user token from localStorage
return localStorage.getItem('id_token')
}
}
/* ===== ./src/views/Main/routes.js ===== */
import React from 'react'
import {Route, IndexRedirect} from 'react-router'
import AuthService from 'utils/AuthService'
import Container from './Container'
import Home from './Home/Home'
import Login from './Login/Login'
const auth = new AuthService(__AUTH0_CLIENT_ID__, __AUTH0_DOMAIN__);
// onEnter callback to validate authentication in private routes
const requireAuth = (nextState, replace) => {
if (!auth.loggedIn()) {
replace({ pathname: '/login' })
}
}
export const makeMainRoutes = () => {
return (
<Route path="/" component={Container} auth={auth}>
<IndexRedirect to="/home" />
<Route path="home" component={Home} onEnter={requireAuth} />
<Route path="login" component={Login} />
</Route>
)
}
export default makeMainRoutes
Auth0 helps you to:
- Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
- Add authentication through more traditional username/password databases.
- Add support for linking different user accounts with the same user.
- Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
- Analytics of how, when and where users are logging in.
- Pull data from other sources and add it to the user profile, through JavaScript rules.
- Go to Auth0 and click Sign Up.
- Use Google, GitHub or Microsoft Account to login.
If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
This project is licensed under the MIT license. See the LICENSE file for more info.