auth0-react

auth0-react

NOTE: Very much a WIP

Drop-in auth0 integration for react apps

Example usage

your-app/src/routes.js

Use Auth0CallbackRoute to catch Auth's redirect after a login, with optional success and error redirects

import React, { ReactPropTypes } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import { Auth0Provider, Auth0CallbackRoute } from 'auth0-react'

const AUTH0_CONFIG = {
  audience: ...
  domain: ...
  clientId: ...
  callbackUrl: ...
  logoutUrl: ...
}

export default () =>
  <Router>
    <Auth0Provider {...AUTH0_CONFIG}>
      <Switch>
        { /* .... your routes .... */ }
        
        <Route path='/login' component={Login} />

        { /* Auth0 redirects here after login */ }
        <Auth0CallbackRoute path='/auth/callback' successTo='/' errorTo='/login' />
        
        { /* .... your routes .... */ }
      </Switch>
    </Auth0Provider>
  <Router>

your-app/src/LoginRoute.js

Provide a login button

import React from 'react'
import { useAuth0 } from 'auth0-react'

export default () => {
  const { login } = useAuth0()

  return (
    <div>
      <p>Welcome to Some App</p>
      <button onClick={login}>Log In</Button>
    </div>
  )
}

your-app/src/Header.js

Display current user's email and provide a logout button

import React from 'react'
import { useAuth0 } from 'auth0-react'

export default () => {
  const { logout, currentUser } = useAuth0()

  return (
    <div>
      <p>{currentUser.email}</p>
      <button onClick={logout}>Log Out</Button>
    </div>
  )
}

How to deploy

• Make sure you have access to the ollieorder organization on npm
• Run yarn publish
• Specify a carefully chosen semantic version number for your deploy. During the publish step, yarn will update the version number and make a commit for you. It also generates the docs for you, but those need to be commited manually.
• Commit the generated documentation git commit
• Push up the latest changes including the generated tags: git push --follow-tags master