Use Auth0 with React + Redux

import { AuthComponent, AuthMiddlewares, AuthReducer } from 'react-redux-auth0'

When starting your app, include the following environment variables:

AUTH0_CLIENTID=client-id-string AUTH0_DOMAIN=domain npm your-start-command

Include Auth0 from CDN in your template (believe me, you don't want to build it):

<script src="//cdn.auth0.com/js/lock/10.11/lock.min.js"></script>

Usage with Webpack

Make sure you have this webpack plugin so that webpack will compile in proper environment variables:

  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(env),
    'process.env.AUTH0_CLIENTID': JSON.stringify(AUTH0_CLIENTID),
    'process.env.AUTH0_DOMAIN': JSON.stringify(AUTH0_DOMAIN)
  })

...here is an example of reading those env variables in webpack config:

const env = process.env.NODE_ENV;
const AUTH0_CLIENTID = process.env.AUTH0_CLIENTID;
const AUTH0_DOMAIN = process.env.AUTH0_DOMAIN;

Usage with CreateReactApp

CreateReactApp has own webpack setup that is not easy to override, but it supports passing environment variables starting with REACT_APP_ to application code.

To make things easier for developers using CreateReactApp, we support REACT_APP_AUTH0_CLIENTID and REACT_APP_AUTH0_DOMAIN environment variables. If you need more information, please see CreateReactApp readme, custom env variables.

AuthComponent

Can be used to render either a 'Sigup' or 'Login' button:

<AuthComponent login />

<AuthComponent signup />

...or will render both:

<AuthComponent onAuthenticated={callback} />

The component will automatically return a Logout button when the user is authenticated.

Options

auth0: auth0 lock customization options detailed here https://auth0.com/docs/libraries/lock/v10/customization onAuthenticated (token, profile): A callback to receive when authentication has completed. credentials: Optional object that contains clientId and domain properties. You can use it if you have custom configuration setup not based on env variables, or if you want to override credentials for just one component instance.