auth0-authenticator v1.0.0

Shared Auth0 Authenticator

Contains the tools and components for using Auth0 Authentication in a React JS application. This encapsulates the Auth0 third party login flow and authorization scopes

Setup

• Install Dependancies
  • make install
• Build
  • make build
• Test
  • make test
• Watch and Build on save
  • make watch

Using the package

• Installing the package
  • Install local version
    • npm install npm install {absolute path}/shared-auth0-authenticator
  • Install release
    • npm install git+ssh://git@github.com/River-Island/shared-auth0-authenticator.git#{Release Version}

Configuration

• The package requires some basic configuration to be added for it to work. Ensure that your config has an Auth0 configuration set

• public/config.js

(function() {
  window.river_island = {
    config: {
      ...
      auth0: {
        signInRoute: '/sign-in',
        signOutRoute: '/logged-out',
        realm: '{AUTH0 User Realm}',

        tokens: {
          idToken: {
            domain: '{AUTH0 Domain}',
            clientID: '{AUTH0 Client ID}',
            redirectUri: 'http://localhost:3000/callback',
            responseType: 'id_token',
            scope: 'openid profile email',
          },
        },
      },
    },
  };
})();

• index.js

...
const config = { ... }
const auth = GetAuth(config);
...

Tokens

• Each API requires a valid access token to make requests to it. To get an access token for an API add the token to the config

tokens: {
    idToken: { ... },
    "{API name}": {
        audience: '{Auth0 API Audience}',
        scope: '{the scopes/permissions required from this API}',
    },
},

• Access tokens expire after a period of time defined by the API. This package handles the automatic renewal of tokens.

App Initialization

• app.jsx

import { BrowserRouter } from 'react-router-dom';
import { GetAuth, Authenticator } from 'auth0-authenticator';

render() {
    const { config } = this.props;
    const auth = GetAuth(config);

    return (
      <BrowserRouter>
      ...
          <Authenticator auth={auth}>
            // Your routes
          </Authenticator>
      ...
      </BrowserRouter>
    )
}

• Callback

You will need to create a callback route for Auth0 to redirect User to after authentication. The parent Authenticator component will handle the request so this page can simply redirect the User to another page once we have confirmed with Auth0 that they are authenticated.

Scopes

• Scopes define what UI a User can view or actions they have permissions a execute.
• Scopes are retrieved with each Auth0 access token for an API. When we receive the access token we extract the scopes and store them in the scopes reducer.
• Scopes can be used with the Can component to hide/show UI based on a users scopes
• To request scopes for an API add a space delimitated string to that API tokens configuration e.g. read:foo write:foo read:bar

tokens: {
    idToken: { ... },
    "foo": {
        audience: ...,
        scope: 'read:foo', // This is the permission to check we have access to with Auth0
    },
},

import { Can } from 'auth0-authenticator';

render() {
    return (
        <Can api="my api" scopes="read:foo">
            If the User has permission they can see this
        </Can>
    )
}

Routes

• You can secure React Route routs using the SecureRoute component. This component will only allow a route to be accessible if the User has been authenticated.
• If the user is not authenticated, the component will redirect to the User to the sign-in route specified in the config

import { Route, BrowserRouter } from 'react-router-dom';
import { Can, SecureRoute } from 'auth0-authenticator';

render() {
    return (
      <BrowserRouter>
        ...
            <Route exact path="/" component={HomeComponent} /> // Unsecure route
            <SecureRoute exact path="/foo/" component={FooComponent} /> // Secure route
            <Can api="bar" scopes="view:bar">
                <SecureRoute exact path="/bar/" component={BarComponent} /> // Route can only be access if the user has the correct permissions
            </Can>
        ...
      </BrowserRouter>
    )
}

auth0: {
    ...
    signInRoute: '/sign-in', // The URL slug of your SignIn page
    ...
},