reactjsHow do I set up JWT authentication in ReactJS?

1. Install the necessary packages

In order to set up JWT authentication in ReactJS, we need to install the following packages:

npm install --save auth0-js react-router react-router-dom

2. Create a AuthService.js file

In the AuthService.js file, we need to add the following code which will handle the authentication process:

import auth0 from 'auth0-js';

class Auth {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      // the following three lines MUST be updated
      domain: '<AUTH0_DOMAIN>',
      audience: '<AUTH0_AUDIENCE>',
      clientID: '<AUTH0_CLIENT_ID>',
      redirectUri: '<REDIRECT_URI>',
      responseType: 'token id_token',
      scope: 'openid profile'
    });

    this.getProfile = this.getProfile.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.signIn = this.signIn.bind(this);
    this.signOut = this.signOut.bind(this);
  }

  getProfile() {
    return this.profile;
  }

  getIdToken() {
    return this.idToken;
  }

  isAuthenticated() {
    return new Date().getTime() < this.expiresAt;
  }

  signIn() {
    this.auth0.authorize();
  }

  handleAuthentication() {
    return new Promise((resolve, reject) => {
      this.auth0.parseHash((err, authResult) => {
        if (err) return reject(err);
        if (!authResult || !authResult.idToken) {
          return reject(err);
        }
        this.setSession(authResult);
        resolve();
      });
    })
  }

  setSession(authResult) {
    this.idToken = authResult.idToken;
    this.profile = authResult.idTokenPayload;
    // set the time that the id token will expire at
    this.expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
  }

  signOut() {
    this.auth0.logout({
      returnTo: '<REDIRECT_URI>',
      clientID: '<AUTH0_CLIENT_ID>'
    });
  }

  silentAuth() {
    return new Promise((resolve, reject) => {
      this.auth0.checkSession({}, (err, authResult) => {
        if (err) return reject(err);
        this.setSession(authResult);
        resolve();
      });
    });
  }
}

const auth0Client = new Auth();

export default auth0Client;

The code above does the following:

Instantiates an Auth0 WebAuth instance
Sets up the authentication parameters
Sets up the getProfile, handleAuthentication, isAuthenticated, signIn, and signOut functions
Sets up the setSession and silentAuth functions

3. Add the AuthService.js file to your React App

Next, we need to add the AuthService.js file to our React App. We can do this by importing the AuthService.js file into our App.js file.

import AuthService from './AuthService';

4. Create a callback component

We need to create a Callback component to handle the authentication callback. This component will be triggered when the authentication process is complete.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Callback extends Component {
  componentDidMount() {
    // Handles the authentication callback
    this.props.auth.handleAuthentication().then(() => {
      this.props.history.push('/');
    });
  }

  render() {
    return (
      <p>Loading profile...</p>
    );
  }
}

export default withRouter(Callback);

The code above handles the authentication callback and redirects the user to the home page upon successful authentication.

5. Add the callback route to your React App

Next, we need to add the callback route to our React App. We can do this by adding the following code to our App.js file:

import { Route, withRouter } from 'react-router-dom';
import Callback from './Callback/Callback';

<Route path="/callback" render={(props) => {
  handleAuthentication(props);
  return <Callback {...props} />
}}/>

6. Add authentication logic to your React App

Finally, we need to add the authentication logic to our React App. We can do this by adding the following code to our App.js file:

import { withRouter } from 'react-router-dom';
import AuthService from './AuthService';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: false
    }
    this.auth = new AuthService();
  }

  componentWillMount() {
    if (this.auth.isAuthenticated()) {
      this.setState({isAuthenticated: true});
    }
  }

  render() {
    return (
      <div>
        {this.state.isAuthenticated ? <Home auth={this.auth} /> : <Login auth={this.auth} />}
      </div>
    );
  }
}

export default withRouter(App);

The code above does the following:

Instantiates an AuthService instance
Checks if the user is authenticated
Renders the Home component if the user is authenticated, or the Login component if the user is not authenticated

7. Conclusion

By following the steps outlined above, we can easily set up JWT authentication in ReactJS.

Helpful links

Edit this code on GitHub

More of Reactjs

See more codes...