Session management in NextJS - Mini Project: Build & Apply

Session Management in Next.js

📖 Scenario: You are building a simple Next.js app that needs to remember if a user is logged in or not during their visit. This is like when you log into a website and it keeps you logged in as you browse pages.

🎯 Goal: Create a Next.js app that manages a user session using React state and cookies. The app will let the user log in and log out, and remember their session across page reloads.

📋 What You'll Learn

Create a React state variable to hold the session status

Use a cookie to store the session token

Read the cookie on page load to restore session

Provide buttons to log in and log out that update session state and cookie

💡 Why This Matters

🌍 Real World

Session management is essential for websites that require users to log in and keep their login status while browsing or refreshing pages.

💼 Career

Understanding session management is important for frontend and full-stack developers to build secure and user-friendly web applications.

1

Set up session state

In the page.tsx file, create a React state variable called isLoggedIn using useState and set its initial value to false.

NextJS

import { useState } from 'react'

export default function Page() {
  // Create a state variable called isLoggedIn and set it to false
  // Your code here
}

Hint

Use const [isLoggedIn, setIsLoggedIn] = useState(false) inside the component.

2

Add cookie helper functions

Below the imports, add two helper functions: setSessionCookie that sets a cookie named session with value 'active', and removeSessionCookie that deletes the session cookie.

NextJS

import { useState } from 'react'

// Add setSessionCookie and removeSessionCookie functions here
// Your code here

export default function Page() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
}

Hint

Use document.cookie to set and remove cookies with proper path and max-age.

3

Implement login and logout logic

Inside the Page component, add two functions: handleLogin that sets isLoggedIn to true and calls setSessionCookie, and handleLogout that sets isLoggedIn to false and calls removeSessionCookie.

NextJS

import { useState } from 'react'

function setSessionCookie() {
  document.cookie = 'session=active; path=/; max-age=3600'
}

function removeSessionCookie() {
  document.cookie = 'session=; path=/; max-age=0'
}

export default function Page() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  // Add handleLogin and handleLogout functions here
  // Your code here
}

Hint

Define handleLogin and handleLogout inside the component to update state and cookies.

4

Restore session on page load and add buttons

Use useEffect inside Page to check if the session cookie exists on page load. If yes, set isLoggedIn to true. Then, add two buttons: one with onClick calling handleLogin labeled "Log In", and another with onClick calling handleLogout labeled "Log Out". Also display a message: "Logged in" if isLoggedIn is true, otherwise "Logged out".

NextJS

import { useState, useEffect } from 'react'

function setSessionCookie() {
  document.cookie = 'session=active; path=/; max-age=3600'
}

function removeSessionCookie() {
  document.cookie = 'session=; path=/; max-age=0'
}

export default function Page() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  function handleLogin() {
    setIsLoggedIn(true)
    setSessionCookie()
  }

  function handleLogout() {
    setIsLoggedIn(false)
    removeSessionCookie()
  }

  // Use useEffect to check cookie and add buttons with onClick handlers
  // Your code here
}

Hint

Use useEffect with an empty dependency array to run once on load. Parse document.cookie to find the session cookie. Add buttons with onClick calling your handlers and show login status in a paragraph.

Practice

1. What is the main purpose of session management in Next.js applications?

easy

A. To remember user information between page visits

B. To style components dynamically

C. To optimize image loading

D. To handle API request routing

Solution

1. Step 1: Understand session management concept

   Session management is about keeping track of user data across different pages or visits.

2. Step 2: Identify the main purpose in Next.js

   Next.js uses session management to remember users, so they don't have to log in repeatedly or lose their data.

3. Final Answer:

   To remember user information between page visits -> Option A

4. Quick Check:

   Session management = Remember user info [OK]

Hint: Sessions keep user info across pages and visits [OK]

Common Mistakes:

• Confusing session management with styling or routing
• Thinking sessions optimize images
• Believing sessions handle API routing only

2. Which of the following is the correct way to get the session on the server side in Next.js?

easy

A. const session = useSession();

B. const session = getServerSession();

C. const session = fetchSession();

D. const session = getSessionClient();

Solution

1. Step 1: Recall server-side session retrieval method

   In Next.js, the function getServerSession() is used on the server to get the current session.

2. Step 2: Check each option for correctness

   const session = useSession(); uses useSession(), which is client-side only. Options B and D are not valid Next.js functions.

3. Final Answer:

   const session = getServerSession(); -> Option B

4. Quick Check:

   Server session = getServerSession() [OK]

Hint: Use getServerSession() on server, useSession() on client [OK]

Common Mistakes:

• Using useSession() on the server side
• Assuming fetchSession() is a Next.js function
• Confusing client and server session methods

3. Given this Next.js client component code snippet, what will be the output if the user is not logged in?

import { useSession } from 'next-auth/react';

export default function Profile() {
  const { data: session } = useSession();
  if (!session) return <p>Please log in</p>;
  return <p>Welcome, {session.user.name}</p>;
}

medium

A. <p>Please log in</p>

B. <p>Welcome, undefined</p>

C. Error: session is undefined

D. <p>Welcome, Guest</p>

Solution

1. Step 1: Analyze the session check in the component

   The code checks if session is falsy (not logged in), then returns <p>Please log in</p> immediately.

2. Step 2: Determine output when user is not logged in

   Since the user is not logged in, session is null or undefined, so the component returns <p>Please log in</p>.

3. Final Answer:

   <p>Please log in</p> -> Option A

4. Quick Check:

   Not logged in shows 'Please log in' [OK]

Hint: If no session, component returns 'Please log in' [OK]

Common Mistakes:

• Assuming session.user.name exists when session is null
• Expecting an error instead of conditional return
• Thinking it shows 'Welcome, Guest' by default

4. Identify the error in this Next.js server-side session code:

import { getServerSession } from 'next-auth/next';

export async function getServerSideProps(context) {
  const session = await getServerSession(context);
  if (!session) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  return { props: { user: session.user } };
}

medium

A. Returning props instead of redirect is incorrect

B. Using await without async function

C. Redirect destination should be '/home' not '/login'

D. Missing passing context to getServerSession

Solution

1. Step 1: Check getServerSession usage

   The function getServerSession requires the request context to access cookies and headers, so it needs context.req and context.res or the full context passed.

2. Step 2: Identify missing argument

   The code calls getServerSession() without arguments, which causes it to fail to read session data.

3. Final Answer:

   Missing passing context to getServerSession -> Option D

4. Quick Check:

   getServerSession needs context argument [OK]

Hint: Always pass context to getServerSession on server [OK]

Common Mistakes:

• Forgetting to pass context to getServerSession
• Confusing async/await usage
• Incorrect redirect destination assumptions

5. You want to protect a Next.js page so only logged-in users can access it. Which approach correctly combines server and client session checks?

hard

A. Use getServerSession in the component to check session and redirect if missing.

B. Only use useSession in the component to check if user is logged in and redirect if not.

C. Use getServerSession in getServerSideProps to redirect unauthenticated users, and use useSession in the component to show loading or user info.

D. Use useSession in getServerSideProps to fetch session and redirect unauthenticated users.

Solution

1. Step 1: Understand server-side protection

   Using getServerSession in getServerSideProps allows redirecting users before the page loads if they are not logged in.

2. Step 2: Understand client-side session usage

   Using useSession in the component helps show loading states or user info once the page is loaded.

3. Step 3: Evaluate options

   Use getServerSession in getServerSideProps to redirect unauthenticated users, and use useSession in the component to show loading or user info. correctly combines server-side redirect and client-side session display. The other options misuse server/client functions or locations.

4. Final Answer:

   Use getServerSession in getServerSideProps to redirect unauthenticated users, and use useSession in the component to show loading or user info. -> Option C

5. Quick Check:

   Server redirect + client session hook = Use getServerSession in getServerSideProps to redirect unauthenticated users, and use useSession in the component to show loading or user info. [OK]

Hint: Protect server-side, then show session client-side [OK]

Common Mistakes:

• Trying to use client hooks on server
• Not redirecting unauthenticated users server-side
• Using server functions inside components