• Stars
    star
    271
  • Rank 151,299 (Top 3 %)
  • Language
    JavaScript
  • Created over 6 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A proof of concept app for demonstrating authentication of Next.js app with JWT.

Next.js JWT Authentication

A proof of concept app for demonstrating authentication of Next.js app with JWT.

The app is made under the assumption that the rendering server and the API server are decoupled.

It uses this API for authentication.

Demo

Idea:

Server side rendered apps are awesome. They make a sweet spot between monolithic apps and single page apps powered by microservices. But they also add complexity to their creation. Keeping state on the server and the client in sync, routing on the client and the server, loading data before server rendering, etc. are some of the things that make our apps more complex. That is why frameworks such as Next.js exist, to solve most of those problems. However, things such as authentication are left to us. This is an attempt to implement the authentication based on JWT. The thing is that we can't store tokens in localStorage as we would do with SPA.

The idea is to receive token from the server on the client, store it in cookies, and then whenever a page renders on the server, we would be able to access the token from the cookie.

How it works:

The client:

The user sends an auth request from the client. In the response, JWT is received, and stored in browser cookies and redux store. Then the user has access to the token from the client, and can use it to access protected routes.

The server:

When the user makes a page request, cookies are also sent along, so the server can read them. To read it, the user is using the getInitialProps lifecycle method, provided by Next.js. It gets an argument - the context object that contains some properties. You can read more about it here. On the req property, we can access headers property which contains the cookie with the token. An action creator is dispatched to save the token in the redux store, and the app now has access to the token again.

Usage:

Installation:

Make sure you have Node and NPM installed.

Also make sure you have the API server running.

git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install

Starting the app:

# Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start

More Repositories

1

bulletproof-react

🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
TypeScript
20,739
star
2

awesome-codebases

A collection of awesome open-source codebases worth exploring.
468
star
3

react-query-auth

⚛️ Authenticate your react applications easily with react-query.
TypeScript
270
star
4

blitzjs-realworld-app

Content Sharing App
TypeScript
45
star
5

express-server-jwt

A simple express server that handles JWT authentication
JavaScript
41
star
6

strapi-plugin-sync-roles-permissions

Store user roles and permissions configuration as a JSON file and then import and reuse it any time.
JavaScript
39
star
7

epic-stack-with-user-impersonation

An example Remix application showcasing how to implement user impersonation in the Epic Stack.
TypeScript
26
star
8

react-multistep-wizard

🧙 React wizard component
TypeScript
11
star
9

MERN-starter

Starter boilerplate for creating full stack MERN apps
JavaScript
7
star
10

react-scrollable-pagination

📜 Paginate your application's data by scrolling...
JavaScript
5
star
11

e-shop-with-mf

Micro frontend based E-shop app composed with Module Federation
TypeScript
4
star
12

data-visualization

Data Visualization with D3 and React
JavaScript
3
star
13

mobx-async-toolkit

Toolkit for handling async operations in MobX stores
TypeScript
3
star
14

crypto-watcher

App for tracking cryptocurrencies built with React Native
JavaScript
2
star
15

alan2207

2
star
16

tailwindcss-static-starter

TailwindCSS Static Starter
HTML
2
star
17

multistep-formik

Example app showing how to handle multistep forms with Formik.
JavaScript
2
star
18

interest

Fullstack Pinterest clone app
JavaScript
1
star
19

book-trading-app

Fullstack app for trading books
JavaScript
1
star
20

stock-market-monitor

Fullstack app for tracking stocks.
JavaScript
1
star
21

voting-app

Fullstack voting app
JavaScript
1
star
22

Towers-of-Hanoi-Solver

Simulation of solving Towers of Hanoi.
JavaScript
1
star
23

apexcharts-react

Unofficial react wrapper for apexcharts.js
JavaScript
1
star