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 + 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.
The setup script is designed to run on a newly installed FusionAuth instance with only one user and no tenants other than Default
. To follow this guide on a FusionAuth instance that does not meet these criteria, you may need to modify the above script.
Refer to the Typescript client library documentation for more information.
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.
If you are using a different port than 5173 for your React app, update the redirect URL in the setup script, or modify it manually. It needs to match.
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.
Feedback
How helpful was this page?
See a problem?
File an issue in our docs repo
Have a question or comment to share?
Visit the FusionAuth community forum.