All Projects → alan2207 → Nextjs Jwt Authentication

alan2207 / Nextjs Jwt Authentication

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Nextjs Jwt Authentication

Nextjs Headless Wordpress
🔥 Nextjs Headless WordPress
Stars: ✭ 110 (-42.41%)
Mutual labels:  nextjs, authentication, jwt
Next Auth
Authentication for Next.js
Stars: ✭ 8,362 (+4278.01%)
Mutual labels:  nextjs, authentication, jwt
Sanic Jwt
Authentication, JWT, and permission scoping for Sanic
Stars: ✭ 189 (-1.05%)
Mutual labels:  authentication, jwt
Reactjs Authentication Tutorial
Chuck Norris World App - A sample app that shows how to add authentication to a ReactJS app
Stars: ✭ 139 (-27.23%)
Mutual labels:  authentication, jwt
Rodauth Rails
Rails integration for Rodauth authentication framework
Stars: ✭ 150 (-21.47%)
Mutual labels:  authentication, jwt
Auth
Authenticator via oauth2
Stars: ✭ 118 (-38.22%)
Mutual labels:  authentication, jwt
Django Auth Adfs
A Django authentication backend for Microsoft ADFS and AzureAD
Stars: ✭ 127 (-33.51%)
Mutual labels:  authentication, jwt
Auth0.swift
Swift toolkit for Auth0 API
Stars: ✭ 146 (-23.56%)
Mutual labels:  authentication, jwt
Spark Pac4j
Security library for Sparkjava: OAuth, CAS, SAML, OpenID Connect, LDAP, JWT...
Stars: ✭ 154 (-19.37%)
Mutual labels:  authentication, jwt
Next Apollo Auth
Authentication Boilerplate with Next.js and Apollo GraphQL
Stars: ✭ 159 (-16.75%)
Mutual labels:  nextjs, authentication
Api guard
JWT authentication solution for Rails APIs
Stars: ✭ 159 (-16.75%)
Mutual labels:  authentication, jwt
Vapor Auth Template
A Vapor 4 template with authentication, Fluent, JWT, Queues, repository pattern, testing and more.
Stars: ✭ 118 (-38.22%)
Mutual labels:  authentication, jwt
Jwt Auth
🔐 JSON Web Token Authentication for Laravel & Lumen
Stars: ✭ 10,305 (+5295.29%)
Mutual labels:  authentication, jwt
Next Advanced Apollo Starter
Advanced, but minimalistic Next.js pre-configured starter with focus on DX
Stars: ✭ 131 (-31.41%)
Mutual labels:  nextjs, authentication
Go Postgres Jwt React Starter
A go, gin, and postgres API with jwt auth, complete with a react frontend
Stars: ✭ 115 (-39.79%)
Mutual labels:  authentication, jwt
Gotrue
An SWT based API for managing users and issuing SWT tokens
Stars: ✭ 2,493 (+1205.24%)
Mutual labels:  authentication, jwt
Cognito Express
Authenticates API requests on a Node application by verifying the JWT signature of AccessToken or IDToken generated by Amazon Cognito.
Stars: ✭ 165 (-13.61%)
Mutual labels:  authentication, jwt
Spring Webmvc Pac4j
Security library for Spring Web MVC: OAuth, CAS, SAML, OpenID Connect, LDAP, JWT...
Stars: ✭ 110 (-42.41%)
Mutual labels:  authentication, jwt
Mern Boilerplate
Fullstack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Stars: ✭ 112 (-41.36%)
Mutual labels:  authentication, jwt
Express Mongodb Rest Api Boilerplate
A boilerplate for Node.js apps / Rest API / Authentication from scratch - express, mongodb (mongoose).
Stars: ✭ 153 (-19.9%)
Mutual labels:  authentication, 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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].