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

1. Make sure you have access to the ollieorder organization on npm
2. Run yarn publish
3. 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.
4. Commit the generated documentation git commit
5. Push up the latest changes including the generated tags: git push --follow-tags master