This repo is out of date and is archived. Check out an updated tutorial on using FusionAuth with React or the updated GitHub repository.

Example: Using React with FusionAuth

This project contains an example project that illustrates using FusionAuth with React.

This uses vite to create a minimal react project.

If you'd rather use an Express backend for additional flexibility, please visit our React sample application with an Express backend repo.

Prerequisites

You will need the following things properly installed on your computer.

• Git: Presumably you already have this on your machine if you are looking at this project locally; if not, use your platform's package manager to install git, and git clone this repo.
• nodejs: Nodejs can be installed via a variety of methods
• Docker: For standing up FusionAuth from within a Docker container. (You can install it other ways, but for this example you'll need Docker.)

Installation

• git clone https://github.com/FusionAuth/fusionauth-example-react-guide
• cd fusionauth-example-react-guide
• docker compose up (this will block the current terminal, so open a new one)
• npm install

FusionAuth Configuration

This example assumes that you will run FusionAuth from a Docker container. In the root of this project directory (next to this README) are two files a Docker compose file and an environment variables configuration file. Assuming you have Docker installed on your machine, a docker-compose up will bring FusionAuth up on your machine.

The FusionAuth configuration files also make use of a unique feature of FusionAuth, called Kickstart: when FusionAuth comes up for the first time, it will look at the Kickstart file and mimic API calls to configure FusionAuth for use. It will perform all the necessary setup to make this demo work correctly, but if you are curious as to what the setup would look like by hand, the "FusionAuth configuration (by hand)" section of this README describes it in detail.

For now, get FusionAuth in Docker up and running (via docker-compose up) if it is not already running; to see, click here to verify it is up and running.

NOTE: If you ever want to reset the FusionAuth system, delete the volumes created by docker-compose by executing docker-compose down -v. FusionAuth will only apply the Kickstart settings when it is first run (e.g., it has no data configured for it yet).

Running / Development

• npm run dev (this will block the current terminal)
• Open a browser and log in using our user's credentials ("richard@example.com"/"password").

You can also register a new user for this application and will be automatically logged in after.

Log into the FusionAuth admin screen with a different browser or incognito window using the admin user credentials ("admin@example.com"/"password") to explore the admin user experience.

Additional Resources

You can work through a tutorial here: https://fusionauth.io/docs/v1/tech/tutorials/integrate-react