Giter VIP home page Giter VIP logo

redux-auth's Introduction

Redux JWT Authentication Sample

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

Installation

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 start

The app will be served at localhost:3000.

Important Snippets

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 quotesApp

What is Auth0?

Auth0 helps you to:

  • Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
  • Add authentication through more traditional username/password databases.
  • Add support for linking different user accounts with the same user.
  • Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
  • Analytics of how, when and where users are logging in.
  • Pull data from other sources and add it to the user profile, through JavaScript rules.

Create a Free Auth0 Account

  1. Go to Auth0 and click Sign Up.
  2. Use Google, GitHub or Microsoft Account to login.

Issue Reporting

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.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.

redux-auth's People

Contributors

annyv2 avatar chenkie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redux-auth's Issues

Post-login behaviour (for items requiring token)

Hi,

So I'm getting my token on the actions.js page by doing this:

localStorage.setItem('id_token', JSON.stringify(user.token).replace(/\"/g, ""))

Then in Quotes.js, I've got some custom code (with a fetch).

However, the Quotes.js seems to get called even before the user is logged in. This creates a problem as my 'fetch` requires the token that is created at the login page.

The only way I can get it working is to refresh the page.

Is there a way around this?

I tried adding react-router but this didn't help.

Here's a sample of Quotes.js

componentWillMount () {
    return fetch(DATA_API, 
      {
      headers: {
        'Authorization': 'JWT  ' + localStorage.getItem('id_token'),
        'Content-Type': 'application/json'}
      }
      )
      .then((response) => response.json())
      .then((json) => {
        this.setState({testapi: json, uniqueCategories: this.getUniqueCategories(json) })
      })
    },

Make example for react-native

Enhancement would be to have a working react native project that uses Lock. Also that shows a integration with Firebase and/or Parse.

Is there a point to the params?

Given:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}

and:

case LOGIN_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
        isAuthenticated: false,
        creds: action.creds
      })

Isn't it simpler to just have the action defined as:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    creds
  }
}

Since the isFetching and isAuthenticated params on the action are ignored? This had me wondering what the point was and why all the duplication. The other option is to do:

case LOGIN_REQUEST:
      return Object.assign({}, state, action)

...and just treat the action params as new state (except that would put the "type" property into state). But, the way it is in the repo is confusing. This goes for all of the actions, this was just a simple example. It'll help simplify the code to remove code that is ignored.

Too much info on actions.js

Hello,

What the point to set isAuthenticated & isFetching in your Actions ?

For example:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}

In the action, isFetching & isAuthenticated are set, but not used. This is the role of the reducer. Your action could be simplify to:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    creds
  }
}

or am I missing something ?

Show use of Auth0-lock

It seems that all of Auth0's examples with Flux or Redux resort to assuming a custom JWT provider, which I find bizarre given that they have their Lock product. Why is that? It would be really great if these examples showed how Lock could work with Redux. In my attempts, they seem to be at odds (since Lock works with a roundabout callbackURL), but surely something is possible.

How to access the JWT token

Hi,

Looks like a great repo.

I have this connected to a server which generates a JWT. The URL response simply contains:
{"token":"123242"}

Ideally I could export const and use the token to send with headers elsewhere in my app.

However, in actions.js my console.log just returns undefined

        else {
          localStorage.setItem('id_token', user.id_token)
          console.log('The user token is' + user.id_token)
          dispatch(receiveLogin(user))
        }

I also checked in my local storage (in chrome) and it says it is undefined there too.

How is it possible to access the token and store it for later use?

Logout reducers

There are some issues with your Logout reducers:

case LOGOUT_SUCCESS:
      return Object.assign({}, state, {
        isFetching: true,
        isAuthenticated: false
      })

In case of success, isFetching shall be set to false.

Moreover, LOGOUT_REQUEST is missing.

Error in App.js file. As 'login' and 'actions' are imported & It has not used.

I am using React-Redux starter kit & trying to implement only Login Authentication.
In the App page: I am getting error. 'login' defined but never used & same error for 'loginUser' action.

Even I am getting error:
Uncaught TypeError: Cannot read property 'isAuthenticated' of undefined

This is my code:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Navbar from './Navbar'
import Login from './Login'
import { loginUser } from './redux/module/action'

class App extends Component {
render () {
const { dispatch, isAuthenticated, errorMessage } = this.props
return (




)
}
}

App.propTypes = {
dispatch: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool.isRequired,
errorMessage: PropTypes.string
}

function mapStateToProps (state) {
const{ auth } = state
const { isAuthenticated, errorMessage } = auth

return {
isAuthenticated,
errorMessage
}
}

export default connect(mapStateToProps)(App)

Auth0-lock branch should be updated

I think that the current example is not working anymore. I am currently using v 10.6.1. And for redux, react, and auth0 working together I did some change to the login function in action.js.
First you have to set redirect:falsewhen declaring Auth0Lock. If you are not doing it the page will be refreshed and your async function will never be called.
Then you need to use lock.on to get event from Auth0Lock and calling your actions. Below a short example.

export function login() {
	console.log("login()")
  const lock = new Auth0Lock('xx', 'xx.eu.auth0.com',{auth:{redirect:false}});
  return dispatch => {
  	lock.show()
  	lock.on('authenticated', function(authResult){
  		localStorage.setItem('idToken', authResult.idToken);
  		dispatch(lockSuccess(authResult.profile, authResult.token))
  	})
  }
}

What do you think?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.