Building Authentication & Authorization in a Full-stack React + Express.js App with Auth0

Authentication and authorization are two of the most important features in modern web applications.

• Authentication answers the question: "Who are you?"
• Authorization answers the question: "What are you allowed to access?"

In this tutorial, we'll explore the requirements to build a React frontend and an Express.js backend secured with Auth0. By the end, users will understand how to log in through Auth0, obtain access tokens, and access protected API routes securely.

---

Explored Themes

We'll explore:

• Setting up Single Page Applications on Auth0
• Setting up API instances on Auth0
• Auth0 login and logout
• Protected API endpoints
• JWT access token validation
• User-delegated access to backend APIs

---

Prerequisites

Before starting, you'll need:

• Node.js installed
• A React application (Setup with vite)
• An Express.js application
• An Auth0 account

---

Step 1: Create an Auth0 Account

Sign up for an Auth0 account and create a tenant.

A tenant is your isolated Auth0 environment where applications, APIs, users, and permissions are managed.

Once your tenant has been created, you'll be taken to the Auth0 dashboard.

---

Step 2: Create a Single Page Application (SPA)

Navigate to:

Applications → Applications

Click Create Application.

Provide:

• Name: My React App
• Application Type: Single Page Application

Click Create.

Auth0 will generate several values. you'll need the following later:

• Domain
• Client ID

Keep these handy.

---

Step 3: Configure Application URLs

Open your SPA settings and configure:

Allowed Callback URLs:

http://localhost:5173

Allowed Logout URLs:

http://localhost:5173

Allowed Web Origins:

http://localhost:5173

Save your changes.

NOTE: These URLs simply tell auth0 how to get back to the app when we've successfully authenticated. We use http://localhost:5173 because the app in question is only available on our local computer. This changes when the app has been deployed.

---

Step 4: Create an API in Auth0

Now we need to setup an independent API authorization system on auth0 that our React application can access.

Navigate to:

Applications → APIs

Click Create API.

Example:

Name: My Express API
Identifier: http://localhost:4000

The identifier is extremely important.

Auth0 uses this identifier as the API's Audience. So, keep it handy as well.

Click Create.

Understanding the Audience

Many developers get stuck here.

Suppose you create an API with an identifier like this:

Identifier: http://localhost:4000

Auth0 automatically treats that identifier as the API's audience.

That means your frontend must request access tokens specifically for:

http://localhost:4000

The value which you set for the audience is then encoded into the JWT access token sent to the backend for authorization. If the audience does not match, Auth0 will issue a token that your backend cannot use to authorize requests.

---

Step 5: Create API Permissions (OPTIONAL)

Inside your API settings, open the Permissions tab.

Create permissions such as:

read:messages
write:messages

These represent actions users can perform.

For example:

read:messages

means:

This user may read protected messages.

---

Step 6: Grant the Application Access to the API

This is one of the most commonly missed steps.

Creating an application and creating an API is not enough.

The application must also be granted access to the API.

Navigate to:

Applications → APIs → Your API → Machine to Machine Applications (for M2M scenarios)

and/or

Applications → Applications → Your SPA → APIs

depending on your Auth0 dashboard version.

This ensures that your React application is authorized to request tokens for the API you created.

Important: Application and API Must Be Linked

This is where many developers lose hours debugging.

Suppose:

Your API identifier is:

http://localhost:4000

And your React application requests tokens using:

authorizationParams: {
  audience: "http://localhost:4000"
}

Everything looks correct.

However, if the React application has not been granted access to that API in Auth0, every protected request will fail.

Common symptoms include:

401 Unauthorized

or

access_denied

or

Unauthorized

even though:

• Login works
• Tokens are being issued
• Frontend configuration appears correct

The reason is simple:

The SPA application and the API service are not linked in Auth0. So any token generated by auth0 on the SPA will fail to get authorized on the auth0 protected API because the token, when decoded, will not contain the appropriate Audience.

Always verify this relationship before debugging your code.

---

Step 7: Install Auth0 React SDK

Inside your React application:

npm install @auth0/auth0-react

---

Step 8: Configure Auth0Provider

In your src/main.jsx file, Wrap your application with Auth0Provider.

import React from "react";
import ReactDOM from "react-dom/client";
import { Auth0Provider } from "@auth0/auth0-react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <Auth0Provider
    domain="YOUR_DOMAIN"
    clientId="YOUR_CLIENT_ID"
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: "http://localhost:4000"
    }}
  >
    <App />
  </Auth0Provider>
);

Notice the audience:

audience: "http://localhost:4000"

This value must match the API identifier exactly.

NOTE: I expose the Audience value in this case for clarity. But in a real-world setting, it should be an environment variable. This applies to your domain and client ID as well.

---

Step 9: Add Login and Logout

You can then proceed to create your Login and Logout buttons on the frontend of your app.

NOTE: The following code snippets are intended as examples. They're not intended for direct copy-paste usage.

Login Button example:

import { useAuth0 } from "@auth0/auth0-react";

export default function LoginButton() {
  const { loginWithRedirect } = useAuth0();

  return (
    <button onClick={() => loginWithRedirect()}>
      Login
    </button>
  );
}

NOTE: The loginWithRedirect function causes our app to redirect to auth0's universal login page when click on the button.

Logout:

import { useAuth0 } from "@auth0/auth0-react";

export default function LogoutButton() {
  const { logout } = useAuth0();

  return (
    <button
      onClick={() =>
        logout({
          logoutParams: {
            returnTo: window.location.origin
          }
        })
      }
    >
      Logout
    </button>
  );
}

---

Step 10: Retrieve an Access Token

When calling protected APIs, request an access token.

const { getAccessTokenSilently } = useAuth0();

const token = await getAccessTokenSilently();

getAccessTokenSilently, as it's name implies, silently retrieves the access token generated by auth0 whenever we log in. We can then send it in the Authorization header of any protected requests we make later on in our code.

fetch("http://localhost:4000/api/messages/protected", {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

---

Step 11: Install Backend Dependencies

Inside the Express application:

npm install express cors dotenv express-oauth2-jwt-bearer

---

Step 12: Configure Express

import express from "express";
import cors from "cors";

const app = express();

app.use(cors());
app.use(express.json());

app.listen(4000, () => {
  console.log("Server running");
});

---

Step 13: Protect Routes with express-oauth2-jwt-bearer

Create middleware.

import { auth } from "express-oauth2-jwt-bearer";

export const checkJwt = auth({
  audience: "http://localhost:4000",
  issuerBaseURL: "https://YOUR_DOMAIN/"
  tokenSigningAlg: ['RS256'],
});

Again, notice:

audience: "http://localhost:4000"

This must match:

• API Identifier
• Frontend Audience

all exactly.

---

Step 14: Protect API Routes

NOTE: Again, this is example code and is not intended to be used as is.

import express from "express";
import { checkJwt } from "./auth.js";

const router = express.Router();

router.get(
  "/api/messages/protected",
  checkJwt,
  (req, res) => {
    res.json({
      message: "Protected data"
    });
  }
);

export default router;

Now only authenticated users with valid access tokens can access the route.

---

Step 15: Test the Flow

1. Open React application.
2. Click Login.
3. Authenticate with Auth0.
4. Obtain access token.
5. Call protected API.
6. Express validates the token.
7. Protected response is returned.

Expected response:

{
  "message": "Protected data"
}

---

Common Causes of 401 Unauthorized Errors

If you're seeing 401 errors, check these first:

Audience Mismatch

Frontend:

audience: "http://localhost:4000"

Backend:

audience: "http://localhost:4000"

API Identifier (on auth0 API dashboard):

http://localhost:4000

All three must match.

---

SPA Not Linked to API

This is one of the most common mistakes.

Even if:

• Login succeeds
• Tokens are generated
• Audience is configured

You may still receive:

401 Unauthorized

if the SPA application has not been granted access to the API in Auth0.

Always verify that:

• The API exists
• Permissions exist
• The SPA is authorized to use the API

---

Wrong Issuer URL

Ensure:

issuerBaseURL:
  "https://YOUR_DOMAIN/"

matches your Auth0 tenant domain.

---

Missing Bearer Token

Always send:

Authorization: Bearer ACCESS_TOKEN

without typos.

---

Final Thoughts

Auth0 handles a lot of security complexity for us, but there are a few relationships that must be configured correctly.

The most important thing to remember is:

1. Create an SPA application.
2. Create an API.
3. Use the API Identifier as the audience.
4. Configure the same audience on both frontend and backend.
5. Grant the application access to the API.
6. Protect Express routes using express-oauth2-jwt-bearer.

If any of these pieces are missing, you'll often encounter 401 Unauthorized errors even though authentication itself appears to be working.

Once everything is connected properly, Auth0 provides a secure and scalable authentication and authorization solution that works beautifully with React and Express.js applications.