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

Readme

Keywords

none

Package Sidebar

Install

npm i auth0-react

Weekly Downloads

590

Version

3.1.0

License

Apache-2.0

Unpacked Size

81.1 kB

Total Files

25

Last publish

Collaborators

  • mattvague