stdNullPtr/nextjs-react-authentication-example-jwt

This project demonstrates a login flow using JSON Web Tokens (JWT), React, Next.js, and NextAuth. It shows how to obtain access and refresh tokens for secure authentication. The setup works with a Spring Boot backend for user signup and authentication. The example features key callbacks, protected paths, and instructions for running.

Reactjs (Nextjs with NextAuth) JWT login example with refreshtoken

• Introduction
• Requirements
• Running the application locally
• Docker
• Copyright
• Author

Introduction

This project is a simple example of how you would implement a login flow using JSON WebTokens, React, Nextjs, NextAuth.

The example was developed and tested using this backend setup (make sure you invoke the signup endpoint first)

There are a lot of TODOs to turn this PoC into an MVP. Including Functionality polishing, a clean UI for testing, etc.

Requirements

• Node
• (Optional(TODO)) Docker

Running the application locally

Clone this backend

Follow the instructions to set it up, preferably with Docker.

Afterward, run npm run dev to start the server locally. It should be configured to connect to the backend we set up previously

Navigate to http://localhost:3000 to get to the landing, unprotected page.

Having followed the instructions to register in the backend service, use the account to explore the authentication functionality.

A typical flow:

1. Sign up with Postman against the backend
2. Use the UI (from this project) to login
3. Receive an access token that can be used to access further resources, alongside with a refresh token that can be used to silently refresh the access token.

Things to note in this project:

• async jwt({ token, user }) callback
• async session({ session, token }) callback
• Protected path

Docker

There is a Dockerfile present, but a docker-compose is needed with a network setup(to be in the same network as the backend) to function properly. Right now, it cannot connect to the backend if started as a docker container.

Copyright

License: BSD-4-Clause

Author

Antonio - LinkedIn