Neodymium Plated Magnet

    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

    Keywords

    none

    Install

    npm i auth0-react

    DownloadsWeekly Downloads

    61

    Version

    3.1.0

    License

    Apache-2.0

    Unpacked Size

    81.1 kB

    Total Files

    25

    Last publish

    Collaborators

    • mattvague