@apim/auth0-lock-redux NPM

auth0-lock-redux

Auth Lock Redux Middleware

This middleware facilitates Auth0 Lock & Redux integration.

Installation

npm install --save @apim/auth0-lock-redux

Features

Use your own action to trigger authentication by passing the right meta information.
Right after authentication, the user's profile is fetched automatically and made available for reduction. Use the bundled reducer to grab the full profile or write your own.
Auth0 Lock first gives us an authentication payload (with the token and auth-only data) and then gives us profile data (via another call). This middleware returns both in one object by moving the auth object to be under profile.auth
All Auth0 Lock events are mapped to actions. Only "authenticated" is really being used but I am planning to add more.
Nicely formatted for redux-logger.
I intentionally leave out any routing changes and localStorage. Use your own middleware to do either. Yes, I consider this a feature.

Usage

Middleware Setup

import auth0LockReduxMiddleware from '@apim/auth0-lock-redux'

// Auth0 Lock key (see auth0-lock docs)
const options = {
  key: '...',
  domain: '...',
  options: {}
}

// Add it to your middleware array
const middlewares = [
  auth0LockReduxMiddleware(options)
]

// Apply as usual
applyMiddleware(...middlewares)

Alternatively, if you already have an instance of auth0-lock with your settings, pass the instance and it'll be used instead:

import Auth0Lock from 'auth0-lock'
import auth0LockReduxMiddleware from '@apim/auth0-lock-redux'

const auth0lock = new Auth0Lock(/* key */, /* domain */, /* options */)

// Add it to your middleware array
const middlewares = [
  auth0LockReduxMiddleware(auth0lock)
]

// Apply as usual
applyMiddleware(...middlewares)

Triggering Authentication

For now, the way to trigger authentication if you don't do it directly with your own instance of auth0-lock is to set the meta value for your action of choice to the value of the AUTHENTICATE constant.

import { AUTHENTICATE } from '@apim/auth0-lock-redux'

const SIGN_IN = () => ({
  type: 'SIGN_IN',
  meta: AUTHENTICATE // Internally it looks like this: '@@auth0Lock/AUTHENTICATE'
})

Reducer (optional)

Add a reducer to reduce the received user profile. You have two options:

Use the bundled reducer and get the full object:

import { AUTHENTICATED, auth0LockReducer } from '@apim/auth0-lock-redux'
const reducers = combineReducers({
  user: auth0LockReducer
})

Add your own reducer to the PROFILE action:

This lets you customize the reduction. I'm using redux-actions in this example.

import {
  AUTHENTICATED,
  REVOKED,
  PROFILE,
  auth0LockReducer
} from '@apim/auth0-lock-redux'

const user = handleActions({
  [REVOKED]: () => null,
  [PROFILE]: (state, action) => ({
    ...state,
    token: action.payload.auth.accessToken, // Grab only the token
    name: action.payload.name // ...and the user's name
  })
}, state.user)

Reduce noise in `redux-logger`

Add a reducer to reduce the received user profile. You have two options:

// Collapse these entries...
createLogger({
  collapsed: (getState, action) => /auth0Lock/.test(action.type)
});

// Or omit it completely...
createLogger({
  predicate: (getState, action) => !/router/.test(action.type)
});

Constants

// [TODO] Some initialization may be added in the future.
const INITIALIZE = '@@auth0Lock/INITIALIZE'
// Trigger authentication.
const AUTHENTICATE = '@@auth0Lock/AUTHENTICATE'
// When profile is received.
const PROFILE = '@@auth0Lock/PROFILE'
// When profile load fails.
const PROFILE_ERROR = '@@auth0Lock/PROFILE_ERROR'
// [TODO] Dispatched when token revoked (aka: sign out)
const REVOKED = '@@auth0Lock/REVOKED'
// [TODO] Dispatched when token is checked.
const CHECK = '@@auth0Lock/CHECK'
// Dispatched when sign in form is shown.*
const SHOW = '@@auth0Lock/SHOW'
// Dispatched when sign in form is hidden.*
const HIDE = '@@auth0Lock/HIDE'
// Dispatched when lock emits an unrecoverable_error.*
const UNRECOVERABLE_ERROR = '@@auth0Lock/UNRECOVERABLE_ERROR'
// Dispatched when token is received.*
const AUTHENTICATED = '@@auth0Lock/AUTHENTICATED'
// Dispatched when authentication fails.*
const AUTHORIZATION_ERROR = '@@auth0Lock/AUTHORIZATION_ERROR'
// Dispatched when a hash parse attempt is done.*
const HASH_PARSED = '@@auth0Lock/HASH_PARSED'