calvinfroedge / react-redux-auth0

React / Redux / Auth0

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;

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.

react-redux-auth0's Issues

Error when loading

I have the environment variables loaded using dotenv. I can verify that they're loading. Are there any steps missing from the README?

auth0 mount error Error: domain required as second parameter.(…)

There should be middleware for redirecting react router on signin / signout action

Should have some optional middleware like AuthRedirectorMiddleware that will send the user to a specific place on login / logout, which is configurable by user

Unable to import AuthMiddleware

import { AuthMiddleware } from 'react-redux-auth0'
let middlewares = applyMiddleware(routerMiddleware, thunk, AuthMiddleware)

I am getting the following error on the browser
bundle.js:30963 Uncaught TypeError: middleware is not a function