edwinjue/311-data-v2-jwt

Learn how to do JWT authentication at the edge

• Framework: Next.js
• useCase:
  • Edge Functions
  • Edge Middleware
  • Documentation
• css: Tailwind
• Demo: https://311-data-v2-jwt.vercel.app/
• relatedTemplates:
  • nextjs-boilerplate
  • blog-starter-kit
  • platforms-starter-kit

JWT Authentication

The example shows how to do JWT authentication at the edge using Edge Middleware and Edge Functions.

Quick Demo

1. Initially, you should not be authorized to view request data.
   Visit: https://311-data-v2-jwt.vercel.app/api/requests?startDate=2023-04-01&endDate=2023-04-20
2. Get authorized.
   Click the button on this page: https://311-data-v2-jwt.vercel.app/
3. Now you should be authorized to view the request data.
   Visit and reload: https://311-data-v2-jwt.vercel.app/api/requests?startDate=2023-04-01&endDate=2023-04-20
4. To revoke authorization, remove the user-token cookie from the client browser.
   (Dev Tools > Application > Storage > Cookies)
5. Now, you should no longer be authorized to view the request data.
   Visit and reload: https://311-data-v2-jwt.vercel.app/api/requests?startDate=2023-04-01&endDate=2023-04-20

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

After setting up your JWT secret, deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with npm or Yarn to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/jwt-authentication

Set up environment variables

Rename .env.example to .env.local:

cp .env.example .env.local

then, update JWT_SECRET_KEY with your a random secret that'll be used to sign JWTs.

Next, run Next.js in development mode:

pnpm dev

The app should be up and running at http://localhost:3000.

Deploy it to the cloud with Vercel (Documentation).