This package has been deprecated

Author message:

This package is deprecated in favor of @auth0/auth0-react — the official SDK for React Single Page Applications provided directly by Auth0 that should be used instead: https://www.npmjs.com/package/@auth0/auth0-react

auth0-react
TypeScript icon, indicating that this package has built-in type declarations

3.1.0 • Public • Published

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

/auth0-react/

    Package Sidebar

    Install

    npm i auth0-react

    Weekly Downloads

    588

    Version

    3.1.0

    License

    Apache-2.0

    Unpacked Size

    81.1 kB

    Total Files

    25

    Last publish

    Collaborators

    • mattvague