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

Example: Using Next.js with FusionAuth

This project contains an example project that illustrates using FusionAuth with Nextjs

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-nextjs-single-sign-on
• cd fusionauth-example-nextjs-single-sign-on
• docker compose up (this will block the current terminal)
• In a new terminal:
  • cd app
  • npm install
  • Copy .env.local.dist to .env.local.

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](./docker compose.yml) 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.

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).

If you are already have a FusionAuth instance running, you need to make sure that your application (or your tenant) is using RSA keys instead of HMAC when issuing JWTs. Edit your application (or tenant) JWT settings and set Access token signing key to "Auto generate a new key on save...".

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.