React authentication, simplified

Authentication is one of those things that just always seems to take a lot more effort than we want it to.

To set up auth, you have to re-research topics you havenÔøΩt thought about since the last time you did authentication, and the fast-paced nature of the space means things have often changed in the meantime. New threats, new options, and new updates may have kept you guessing and digging through docs in your past projects.

In this tutorial, we lay out a different approach to authentication (and access control, SSO, and more) in React applications.

Rather than add a static library that you have to keep up to date or re-research each time you want to implement auth, weÔøΩll use a service that stays up to date automatically and is a much simpler alternative to Auth0, Okta, and others.

React authentication

We typically use a similar approach when writing authentication in React: our React app makes a request to our authentication server, which then returns an access token. That token is saved in the browser and can be used in subsequent requests to your server (or other servers, if needed).

Whether writing standard email & password authentication or using magic links or single sign on (SSO) logins like Google, Azure, or Facebook, we want our React app to send an initial request to an authentication server and have that server handle all the complexity of generating a token.

  1. Send the initial request to the authentication server
  2. Receive and store the access token
  3. Send the access token to your server with each subsequent request

JWTs (JSON Web Tokens)

JSON Web Tokens (JWTs) are compact, URL-safe tokens that can be used for authentication and access control in React applications.

Each JWT has a simple JSON-object as its "payload" and is signed such that your server can verify that the payload is authentic.

It's important to note that this payload is readable by anyone with the JWT, including your React application or a third party.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsImF1dGhvcml6YXRpb24iOiJhZG1pbiJ9.f7iKN-xi24qrQ5NQtOe0jiriotT-rve3ru6sskbQXnA

The payload for this JWT is the middle section (separated by periods):

eyJ1c2VySWQiOjEsImF1dGhvcml6YXRpb24iOiJhZG1pbiJ9

The JWT payload can be decoded from base64 to yield the JSON object:

JSON.parse(atob("eyJ1c2VySWQiOjEsImF1dGhvcml6YXRpb24iOiJhZG1pbiJ9"));

// =>
{
  "userId": 1,
  "authorization": "admin"
}

JWT access tokens

With modern cryptography like RSA, an authentication server can generate secure JWTs that any other machine can read and verify as authentic using a public key. This means that JWTs can be used as access tokens to allow users to log in.

Using this kind of JWT access token, your backend server can verify a JWT access token as authentic by checking it against the public key. This allows your backend server to reject any JWT access tokens that were not created by the authentication server (or that have expired).

  1. Your React app requests a JWT access token whenever the user wants to sign on.
  2. The authentication server generates a JWT access token using a private key and then sends the JWT access token back to your React app.
  3. Your React app stores this JWT access token and sends it to your backend server whenever your user needs to make a request.
  4. Your backend server verifies the JWT access token using a public key and then read the payload to determine which user is making the request.

Each of these steps is simple to write down, but each step has its own pitfalls when you actually want to implement it and keep it secure. Especially over time, as new threat vectors emerge and new platforms need to be patched or supported, the security overhead can add up quickly.

Userfront removes auth complexity in React apps

Userfront is a framework that abstracts away auth complexity.

This makes it much easier for you to work with authentication in a React application and, perhaps most importantly, keeps all the auth protocols updated for you automatically over time.

The underlying philosophy with Userfront is that world-class auth should not take effort ÔøΩ it should be easy to set up, and security updates should happen for you automatically.

Userfront has all the bells and whistles of authentication, Single Sign On (SSO), access control, and multi-tenancy, with a production-ready free tier up to 10,000 monthly active users. For most modern React applications, itÔøΩs a great solution.

Setting up authentication in React

Now we will go through building all the main aspects of authentication in a React application.

We will use Create React App for setup, along with React Router for client-side routing.

JWT access token flow

At a high level, ReactÔøΩs responsibility in authentication is to:

  1. Send an initial request to Userfront to get the JWT access token. This is what the signup and login forms do.

  2. Send the JWT access token to your server with each subsequent request.

React authentication diagram

Set up Create React App

To get React up and running, start by installing Create React App(opens new window) and React Router(opens new window).

Now our React application is available at http://localhost:3000(opens new window)

Just like it says, we can now edit the src/App.js file to start working.

Create React App authentication

Routing

We'll set up a small app with routing. This is all we need to start adding authentication.

RouteDescription
/Home page
/loginLogin page
/resetPassword reset page
/dashboardUser dashboard, for logged in users only

Replace the contents of src/App.js with the following, based on the React Router quickstart:

With our routes in place, we are ready to add authentication.

React Router authentication

Signup, login, and password reset

We'll start by adding a signup form to the home page.

In the Toolkit section of your dashboard, locate the instructions for installing your signup form.

It will look like this:

Userfront installation instructions

Keep your Toolkit open in another browser tab for later when we add the login form & password reset form.

Follow the instructions by installing the Userfront React package with:

Add the signup form to your home page by importing and initializing Userfront, and then updating the Home() function to render the form.

Now the home page has your signup form. Try signing up a user.

React signup form

Test mode

The form is in "Test mode" by default, which will create user records in a test environment you can view separately in your Userfront dashboard.

Userfront test mode

We'll continue by adding your login and password reset forms in the same way that you added your signup form. To allow a user to log out, we can call the built-in Userfront.logout method.

Make the following updates in src/App.js:

  • Update the Login() method to return the login form.

  • Update the PasswordReset() method to return the password reset form.

  • Update the Dashboard() method to display the user's data and a logout button.

    Note your toolId in your Toolkit for each form. The toolIds in this code example will not work for your application.

At this point, your signup, login, and password reset should all be functional. Note that the login form on the /login page will automatically redirect to /dashboard if you are logged in.

Your users can now sign up, log in, log out, and reset their password.

React signup, login, password reset

Protected route in React

We don't want users to be able to view the dashboard unless they are logged in. This is known as protecting a route.

Whenever a user is not logged in but tries to visit /dashboard, we can redirect them to the login screen.

We can accomplish this by wrapping the <DefaultLayout /> component in a <RequireAuth> component that checks to see if the user is logged in. When a user is logged in, their access token is available as Userfront.tokens.accessToken, so we check for this.

The RequireAuth component uses Navigate and useLocation from React Router to redirect the browser if no access token is present.

Now, when a user is logged in, they can view the dashboard. If the user is not logged in, they will be redirected to the login page.

We now have a web application with signup, login, logout, password reset, and a protected route.

React protected route

React authentication with an API

We saw above that the frontend has an access token available as Userfront.tokens.accessToken when the user is logged in. This is a JWT access token that you can also use on your backend to protect your API endpoints.

There are many libraries to read and verify JWTs across various languages. The list to the right contains some popular libraries for handling JWTs.

Your React application can send the JWT access token as a Bearer token inside the Authorization header. For example:

To handle a request like this, your backend should read the JWT access token from the Authorization header and verify that it is valid using the JWT public key found in your Userfront dashboard.

Here is an example of Node.js middleware to read and verify the JWT access token:

Using this approach, any invalid or missing tokens are rejected by your server. You can also reference the contents of the token later in the route handlers using the req.auth object:

With this information, you can perform further checks as desired, or use the userId or userUuid to look up information related to the user.

For example, if you wanted to limit a route to admin users, you could check against the authorization object from the verified access token:

React SSO (Single Sign On)

From here, you can add social identity providers like Google, Facebook, and LinkedIn to your React application, or business identity providers like Azure AD, Office365, and more.

To do this, create an application with the identity provider (e.g. Google), and then add those SSO credentials to the Userfront dashboard. The result is a modified sign on experience.

No additional code is needed to implement Single Sign On using this approach: you can add and remove providers without updating your forms or the way you handle JWT access tokens.

React SSO form

Final notes

Adding authentication and access control to your React application doesn't have to be a hassle. Both the setup step and, more importantly, the maintenance over time, are handled with modern platforms like Userfront.

JSON Web Tokens allow you to cleanly separate your auth token generation layer from the rest of your application, making it easier to reason about and more modular for future needs. This architecture also allows you to focus your efforts on your core application, where you are likely to create much more value for yourself or your clients.

For more details on adding auth to your React application, visit the Userfront guide, which covers everything from setting up your auth forms to API documentation, example repositories, working with different languages and frameworks, and more.