Integrate Your React Application With FusionAuth

Integrate Your React Application With FusionAuth

In this article, you are going to learn how to integrate a React application with FusionAuth.

Here’s a typical application login flow before integrating FusionAuth into your React application.

Here’s the same application login flow when FusionAuth is introduced.

Prerequisites

For this tutorial, you’ll need to have nodejs installed.

You’ll also need Docker, since that is how you’ll install FusionAuth.

The commands below are for macOS, but are limited to mkdir and cd, which have equivalents in Windows and Linux.

Download and Install FusionAuth

First, make a project directory:

   
mkdir integrate-fusionauth && cd integrate-fusionauth

Then, install FusionAuth:

   
curl -o docker-compose.yml https://raw.githubusercontent.com/FusionAuth/fusionauth-containers/master/docker/fusionauth/docker-compose.yml
curl -o .env https://raw.githubusercontent.com/FusionAuth/fusionauth-containers/master/docker/fusionauth/.env
docker-compose up -d

Create a User and an API Key

Next, log into your FusionAuth instance. You’ll need to set up a user and a password, as well as accept the terms and conditions.

Then, you’re at the FusionAuth admin UI. This lets you configure FusionAuth manually. But for this tutorial, you’re going to create an API key and then you’ll configure FusionAuth using our JavaScript client library.

Navigate to Settings -> API Keys. Click the + button to add a new API Key. Copy the value of the Key field and then save the key. It might be a value like CY1EUq2oAQrCgE7azl3A2xwG-OEwGPqLryDRBCoz-13IqyFYMn1_Udjt.

Doing so creates an API key that can be used for any FusionAuth API call. Save that key value off as you’ll be using it later.

Configure FusionAuth

Next, you need to set up FusionAuth. This can be done in different ways, but we’re going to use the Typescript client library. The below instructions use npm on the command line, but you can use the client library with an IDE of your preference as well.

First, make a directory:

   
mkdir setup-fusionauth && cd setup-fusionauth

Now, copy and paste the following file into package.json.

   
{
  "name": "fusionauth-example-typescript-client",
  "version": "1.0.0",
  "description": "Example of setting up an application with typescript.",
  "scripts": {
    "setup": "node setup.js"
  },
  "author": "Dan Moore",
  "license": "Apache-2.0",
  "dependencies": {
    "@fusionauth/typescript-client": "^1.45.0"
  }
}

Now you need to install the dependencies in package.json.

   
npm install

Then copy and paste the following file into setup-react.js. This file uses the FusionAuth API to configure an Application, CORS and more to allow for easy integration.

   
404: Not Found

Then, you can run the setup script.

   
fusionauth_api_key=YOUR_API_KEY_FROM_ABOVE npm run setup-react

If you are using PowerShell, you will need to set the environment variable in a separate command before executing the script.

   
$env:fusionauth_api_key='YOUR_API_KEY_FROM_ABOVE'
npm run setup-react

If you want, you can log into your instance and examine the new Application the script created for you.

Create Your React Application

Now you are going to create a React application. While this section uses a simple React application, you can use the same steps to integrate any React application with FusionAuth.

First, make a directory:

   
mkdir ../setup-react && cd ../setup-react

Next, create a simple React template using vite. Using this lets you easily integrate FusionAuth. For a production application you’ll probably use something like NextJS or Remix.

   
npm create vite@latest react-app -- --template react

Now, change into the react-app directory and install the needed packages.

   
cd react-app && npm install

You can start up the server and visit the URL displayed to ensure the default application works.

   
npm run dev

You’ll want to open another terminal window to continue. Edit src/App.jsx to make changes to the view to test out the automatic reloading.

Now, let’s install the FusionAuth React SDK.

   
npm install @fusionauth/react-sdk

Update src/main.jsx to wrap your app with FusionAuthProvider. This file should look similar to this, but make sure you update the attributes of the provider if you modify the port:

   
import React from 'react'
import ReactDOM from 'react-dom/client'
import { FusionAuthProvider } from '@fusionauth/react-sdk';
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
        <FusionAuthProvider
            clientID="e9fdb985-9173-4e01-9d73-ac2d60d1dc8e"
            serverUrl="http://localhost:9011"
            redirectUri="http://localhost:5173"
        >
            <App />
        </FusionAuthProvider>

  </React.StrictMode>
)

Now, let’s add a login and logout button to your React application. Open up src/App.jsx and replace the content with the following:

   
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import {
  FusionAuthLoginButton,
  FusionAuthLogoutButton,
  RequireAuth,
  useFusionAuth
} from '@fusionauth/react-sdk';

function App() {
  const { isAuthenticated, user } = useFusionAuth();

  return (
    <>
      <h1>Vite + React + FusionAuth</h1>
      <div className="card">
        <p>
          {isAuthenticated ? <FusionAuthLogoutButton />:<FusionAuthLoginButton />}
          <RequireAuth>
          Welcome {user.name}
          </RequireAuth>
        </p>
      </div>
    </>
  )
}

export default App

In this code, you are adding in the FusionAuth login and logout buttons, as well as a welcome message which will only show up if the user is logged in.

Testing the Authentication Flow

You can now open up an incognito window and visit the React app. View the page and log in with the user you configured. If you used the setup script, it will be richard@example.com.

You’ve successfully added login and logout to a React application.

You now have an access token safely stored as a cookie. Any requests you make to an API on the same domain will receive the access token. The API can then validate the token and return data or otherwise offer functionality.