JWT vs session strategy in NextJS - Quick Revision & Key Differences

Recall & Review

beginner

What is a JWT (JSON Web Token)?

A JWT is a compact, URL-safe token that securely transmits information between parties as a JSON object. It is often used for stateless authentication in web apps.

beginner

How does session-based authentication work?

Session-based authentication stores user data on the server after login. The server creates a session ID and sends it to the client as a cookie. The client sends this cookie with requests to prove identity.

intermediate

What is one main advantage of JWT over sessions?

JWTs are stateless, meaning the server does not need to store session data. This makes scaling easier because any server can verify the token without shared storage.

intermediate

What is a key security concern with JWTs compared to sessions?

JWTs are stored on the client side, often in localStorage or cookies, which can be vulnerable to theft via XSS attacks. Sessions keep sensitive data on the server, reducing this risk.

intermediate

When might you prefer session strategy over JWT in Next.js apps?

Use sessions when you want simple, secure authentication with server-side control, especially if you need to easily revoke access or store complex user data securely.

Which of these is true about JWT?

A It stores user data on the client and is stateless.

B It requires server-side storage for each user session.

C It cannot be used in Next.js apps.

D It automatically encrypts user passwords.

JWTs store data on the client and do not require server-side session storage.

What does a session ID cookie do?

A Encrypts the user's password.

B Stores the entire user profile on the client.

C Identifies the user session on the server.

D Expires immediately after login.

The session ID cookie tells the server which session data belongs to the user.

Which is a security risk specific to JWTs?

A Server overload from storing sessions.

B XSS attacks stealing tokens from client storage.

C Cookies being sent automatically with requests.

D Sessions timing out too quickly.

JWTs stored on the client can be stolen by malicious scripts via XSS.

Why might sessions be easier to revoke than JWTs?

A Sessions do not use cookies.

B JWTs expire instantly after logout.

C JWTs are encrypted and cannot be revoked.

D Sessions are stored on the server and can be deleted anytime.

Since sessions live on the server, the server can delete them to revoke access immediately.

In Next.js, which strategy is better for scaling across many servers?

A JWT strategy because it is stateless.

B Session strategy without shared storage.

C Session strategy with local server storage only.

D Neither can scale well.

JWTs are stateless and do not require shared session storage, making scaling easier.

Explain the main differences between JWT and session strategies for authentication.

Think about where data is stored and how that affects security and scaling.

Describe a scenario in a Next.js app where you would choose sessions over JWTs.

Consider security and control needs.

Practice

1. What is a key difference between JWT and session strategies in Next.js authentication?

easy

A. JWT stores user info on the client, sessions store it on the server

B. JWT requires server storage, sessions do not

C. Sessions are better for scaling across devices than JWT

D. JWT tokens expire immediately after login

Solution

1. Step 1: Understand JWT storage

   JWT stores user information inside a token on the client side, allowing stateless authentication.

2. Step 2: Understand session storage

   Sessions keep user information on the server, maintaining state and control centrally.

3. Final Answer:

   JWT stores user info on the client, sessions store it on the server -> Option A

4. Quick Check:

   Storage location difference = B [OK]

Hint: Remember: JWT = client, session = server [OK]

Common Mistakes:

• Thinking sessions store data on client
• Believing JWT requires server storage
• Confusing scaling benefits

2. Which code snippet correctly initializes a session in Next.js using a session strategy?

easy

A. const session = localStorage.getItem('session');

B. const token = jwt.sign(payload, secret);

C. import { getSession } from 'next-auth/react'; const session = await getSession();

D. import jwt from 'jsonwebtoken'; const token = jwt.verify(tokenString, secret);

Solution

1. Step 1: Identify session initialization

   Using 'getSession' from 'next-auth/react' is the correct way to get session data in Next.js.

2. Step 2: Check other options

   Options B and D relate to JWT token creation and verification, not sessions. const session = localStorage.getItem('session'); uses localStorage, which is client-side and not a session strategy.

3. Final Answer:

   import { getSession } from 'next-auth/react'; const session = await getSession(); -> Option C

4. Quick Check:

   Session retrieval uses getSession() [OK]

Hint: Sessions use getSession(), JWT uses jwt.sign() [OK]

Common Mistakes:

• Confusing JWT token code with session code
• Using localStorage as session storage
• Missing async/await with getSession

3. Given this Next.js API route using JWT, what will be the response if the token is expired?

import jwt from 'jsonwebtoken';
export default function handler(req, res) {
  try {
    const token = req.headers.authorization?.split(' ')[1];
    jwt.verify(token, process.env.JWT_SECRET);
    res.status(200).json({ message: 'Access granted' });
  } catch (err) {
    res.status(401).json({ error: 'Invalid or expired token' });
  }
}

medium

A. 200 with message 'Access granted'

B. 401 with error 'Invalid or expired token'

C. 500 server error

D. 403 forbidden without message

Solution

1. Step 1: Understand jwt.verify behavior

   If the token is expired, jwt.verify throws an error caught by the catch block.

2. Step 2: Check catch block response

   The catch block sends a 401 status with error message 'Invalid or expired token'.

3. Final Answer:

   401 with error 'Invalid or expired token' -> Option B

4. Quick Check:

   Expired token triggers 401 error [OK]

Hint: Expired JWT triggers catch block with 401 [OK]

Common Mistakes:

• Assuming expired token returns 200
• Confusing 403 and 401 status codes
• Missing try-catch around jwt.verify

4. Identify the bug in this Next.js session handling code snippet:

import { getSession } from 'next-auth/react';
export default async function handler(req, res) {
  const session = getSession();
  if (!session) {
    res.status(401).json({ error: 'Not authenticated' });
  } else {
    res.status(200).json({ message: 'Welcome!' });
  }
}

medium

A. Missing await before getSession()

B. Using getSession() instead of getServerSession()

C. No error handling for session retrieval

D. Incorrect status code for authenticated user

Solution

1. Step 1: Check the context

   This is a Next.js API route (server-side).

2. Step 2: Identify correct function for server-side

   While getServerSession() is recommended for server-side session retrieval, the immediate bug in the code is missing await before the async getSession() call, causing session to be a Promise instead of resolved value.

3. Final Answer:

   Missing await before getSession() -> Option A

4. Quick Check:

   Async function requires await to get session value [OK]

Hint: Async calls need await [OK]

Common Mistakes:

• Forgetting await on async functions
• Confusing getSession and getServerSession
• Ignoring promise returned by getSession

5. You want to build a Next.js app that supports multiple devices per user and scales easily without server state. Which strategy fits best and why?

hard

A. Use sessions because they store data on the server for better control

B. Use sessions with database storage for multi-device support

C. Use JWT but store tokens only on the server

D. Use JWT because tokens store user info on client, enabling stateless scaling

Solution

1. Step 1: Analyze multi-device and scaling needs

   Supporting multiple devices and easy scaling requires stateless authentication without server session storage.

2. Step 2: Match strategy to needs

   JWT stores user info in tokens on the client, allowing stateless, scalable authentication across devices.

3. Final Answer:

   Use JWT because tokens store user info on client, enabling stateless scaling -> Option D

4. Quick Check:

   Stateless multi-device = JWT [OK]

Hint: Stateless multi-device apps use JWT [OK]

Common Mistakes:

• Choosing sessions for stateless scaling
• Thinking JWT tokens must be stored on server
• Assuming sessions easily scale without extra setup