Client-side session access in NextJS - Step-by-Step Execution

Concept Flow - Client-side session access

User visits page

↓

Browser loads React component

↓

Component runs useEffect

↓

Fetch session data from client-side API

↓

Session data received

↓

Update component state with session

↓

Component re-renders with session info

↓

User sees session-dependent UI

This flow shows how a Next.js React component fetches and uses session data on the client side after the page loads.

Execution Sample

NextJS

import { useState, useEffect } from 'react';
import { getSession } from 'next-auth/react';

export default function Profile() {
  const [session, setSession] = useState(null);
  useEffect(() => {
    getSession().then(data => setSession(data));
  }, []);
  return <div>{session ? `Hello, ${session.user.name}` : 'Loading...'}</div>;
}

This React component fetches the user session on the client side and shows a greeting or loading text.

Execution Table

Step	Action	Session State Before	Session State After	Component Output
1	Component mounts, useState initializes session=null	N/A	null	Displays 'Loading...'
2	useEffect runs, calls getSession()	null	null	Still 'Loading...'
3	getSession() resolves with session data	null	{ user: { name: 'Alice' } }	Triggers state update
4	setSession updates session state	null	{ user: { name: 'Alice' } }	Component re-renders
5	Component renders with session data	{ user: { name: 'Alice' } }	{ user: { name: 'Alice' } }	Displays 'Hello, Alice'
6	No further changes	{ user: { name: 'Alice' } }	{ user: { name: 'Alice' } }	Output stable

💡 Session data loaded and component shows user greeting; no more state changes.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
session	null	null	{ user: { name: 'Alice' } }	{ user: { name: 'Alice' } }	{ user: { name: 'Alice' } }

Key Moments - 2 Insights

Why does the component show 'Loading...' first before greeting the user?

Because the session state starts as null (see Step 1 and 2 in execution_table), so the UI shows 'Loading...' until getSession() fetches the data asynchronously.

What triggers the component to re-render with the session data?

When setSession updates the session state (Step 4), React re-renders the component to show the new session info (Step 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the session state after Step 3?

A null

B { user: { name: 'Alice' } }

C undefined

D Loading...

💡 Hint

Check the 'Session State After' column for Step 3 in the execution_table.

At which step does the component output change from 'Loading...' to greeting the user?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look at the 'Component Output' column in execution_table for when the greeting appears.

If getSession() returned null (no session), what would the component display after Step 4?

A 'Loading...' or fallback UI

B 'Loading...'

C Empty string

D 'Hello, Alice'

💡 Hint

Refer to how the component renders when session is null in the code and execution_table Step 1 and 2.

Concept Snapshot

Client-side session access in Next.js:
- Use useEffect to fetch session after component mounts
- Use getSession() from next-auth/react to get session data
- Store session in useState to trigger re-render
- Show loading UI while session is null
- Update UI with user info once session loads

Full Transcript

This example shows how a Next.js React component accesses session data on the client side. When the component loads, it starts with session state as null, so it shows 'Loading...'. Then, inside useEffect, it calls getSession() asynchronously. When getSession() returns the session data, the component updates its state with setSession. This triggers a re-render, and the UI updates to greet the user by name. This flow ensures the session is accessed only on the client side after the page loads, avoiding server-side session access. The execution table traces each step, showing how the session state changes and how the component output updates accordingly.