This is a sample of how to implement JWT authentication in React and Redux apps. It uses Auth0's NodeJS JWT Authentication Sample to authenticate users and retrieve quotes from a protected endpoint.
The sample is well-informed by the official Redux examples.
Check the auth0-lock branch for the Auth0 specific version
Clone the repo and run the installation commands, each in a new terminal window.
# Get the server submodule
git submodule update --init
# Install deps in the project root and in the server directory
npm install
cd server && npm install
cd ..
# Run the server
npm run server
# New terminal window
npm startThe app will be served at localhost:3000.
Users are authenticated by making a fetch request to localhost:3001/sessions/create. We have actions setup for this.
// actions.js
// There are three possible states for our login
// process and we need actions for each of them
export const LOGIN_REQUEST = 'LOGIN_REQUEST'
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const LOGIN_FAILURE = 'LOGIN_FAILURE'
function requestLogin(creds) {
return {
type: LOGIN_REQUEST,
isFetching: true,
isAuthenticated: false,
creds
}
}
function receiveLogin(user) {
return {
type: LOGIN_SUCCESS,
isFetching: false,
isAuthenticated: true,
id_token: user.id_token
}
}
function loginError(message) {
return {
type: LOGIN_FAILURE,
isFetching: false,
isAuthenticated: false,
message
}
}
// Three possible states for our logout process as well.
// Since we are using JWTs, we just need to remove the token
// from localStorage. These actions are more useful if we
// were calling the API to log the user out
export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'
function requestLogout() {
return {
type: LOGOUT_REQUEST,
isFetching: true,
isAuthenticated: true
}
}
function receiveLogout() {
return {
type: LOGOUT_SUCCESS,
isFetching: false,
isAuthenticated: false
}
}
// Calls the API to get a token and
// dispatches actions along the way
export function loginUser(creds) {
let config = {
method: 'POST',
headers: { 'Content-Type':'application/x-www-form-urlencoded' },
body: `username=${creds.username}&password=${creds.password}`
}
return dispatch => {
// We dispatch requestLogin to kickoff the call to the API
dispatch(requestLogin(creds))
return fetch('http://localhost:3001/sessions/create', config)
.then(response =>
response.json()
.then(user => ({ user, response }))
).then(({ user, response }) => {
if (!response.ok) {
// If there was a problem, we want to
// dispatch the error condition
dispatch(loginError(user.message))
return Promise.reject(user)
}
else {
// If login was successful, set the token in local storage
localStorage.setItem('id_token', user.id_token)
// Dispatch the success action
dispatch(receiveLogin(user))
}
}).catch(err => console.log("Error: ", err))
}
}
// Logs the user out
export function logoutUser() {
return dispatch => {
dispatch(requestLogout())
localStorage.removeItem('id_token')
dispatch(receiveLogout())
}
}We also have actions for retreiving the quotes that uses an API middleware.
// middleware/api.js
const BASE_URL = 'http://localhost:3001/api/'
function callApi(endpoint, authenticated) {
let token = localStorage.getItem('id_token') || null
let config = {}
if(authenticated) {
if(token) {
config = {
headers: { 'Authorization': `Bearer ${token}` }
}
} else {
throw "No token saved!"
}
}
return fetch(BASE_URL + endpoint, config)
.then(response =>
response.text()
.then(text => ({ text, response }))
).then(({ text, response }) => {
if (!response.ok) {
return Promise.reject(text)
}
return text
}).catch(err => console.log(err))
}
export const CALL_API = Symbol('Call API')
export default store => next => action => {
const callAPI = action[CALL_API]
// So the middleware doesn't get applied to every single action
if (typeof callAPI === 'undefined') {
return next(action)
}
let { endpoint, types, authenticated } = callAPI
const [ requestType, successType, errorType ] = types
// Passing the authenticated boolean back in our data will let us distinguish between normal and secret quotes
return callApi(endpoint, authenticated).then(
response =>
next({
response,
authenticated,
type: successType
}),
error => next({
error: error.message || 'There was an error.',
type: errorType
})
)
}// actions.js
// Uses the API middlware to get a quote
export function fetchQuote() {
return {
[CALL_API]: {
endpoint: 'random-quote',
types: [QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE]
}
}
}
// Same API middlware is used to get a
// secret quote, but we set authenticated
// to true so that the auth header is sent
export function fetchSecretQuote() {
return {
[CALL_API]: {
endpoint: 'protected/random-quote',
authenticated: true,
types: [QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE]
}
}
}The reducers return new objects with the data carried by the actions.
// reducers.js
import { combineReducers } from 'redux'
import {
LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS,
QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE
} from './actions'
// The auth reducer. The starting state sets authentication
// based on a token being in local storage. In a real app,
// we would also want a util to check if the token is expired.
function auth(state = {
isFetching: false,
isAuthenticated: localStorage.getItem('id_token') ? true : false
}, action) {
switch (action.type) {
case LOGIN_REQUEST:
return Object.assign({}, state, {
isFetching: true,
isAuthenticated: false,
user: action.creds
})
case LOGIN_SUCCESS:
return Object.assign({}, state, {
isFetching: false,
isAuthenticated: true,
errorMessage: ''
})
case LOGIN_FAILURE:
return Object.assign({}, state, {
isFetching: false,
isAuthenticated: false,
errorMessage: action.message
})
case LOGOUT_SUCCESS:
return Object.assign({}, state, {
isFetching: true,
isAuthenticated: false
})
default:
return state
}
}
// The quotes reducer
function quotes(state = {
isFetching: false,
quote: '',
authenticated: false
}, action) {
switch (action.type) {
case QUOTE_REQUEST:
return Object.assign({}, state, {
isFetching: true
})
case QUOTE_SUCCESS:
return Object.assign({}, state, {
isFetching: false,
quote: action.response,
authenticated: action.authenticated || false
})
case QUOTE_FAILURE:
return Object.assign({}, state, {
isFetching: false
})
default:
return state
}
}
// We combine the reducers here so that they
// can be left split apart above
const quotesApp = combineReducers({
auth,
quotes
})
export default quotesAppAuth0 helps you to:
If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
This project is licensed under the MIT license. See the LICENSE file for more info.