Read User and Session Data

Clerk provides a set of hooks and helpers that you can use to access the active session and user data in your Next.js application. We have included examples of how to use these helpers in both the client and server side to get you started.

Server Side

App Router

`auth()`

The auth() helper provides lightweight access to the current auth state, this is great for managing state and loading data from external sources.

1
import { auth } from '@clerk/nextjs';
2

3
export default function Home() {
4
  const { userId } = auth();
5
  return <div>User Id: {userId}</div>;
6
}
7

1
import { auth } from "@clerk/nextjs";
2
import { NextResponse } from 'next/server';
3

4
export async function GET(request: Request) {
5
  const { userId } = auth()
6
  return NextResponse.json({ data });
7
}

1
'use server'
2
import { auth } from '@clerk/nextjs'
3
export async function getUserId() {
4
  const userid = auth().userId
5
  console.log(userid)
6
}
7

For in depth examples of data fetching check out our documentation on router handlers and server actions.

currentUser()

The `currentUser()` helper retrieves the user object for the current user allowing you to enrich your application with user data.

1
import { currentUser } from '@clerk/nextjs';
2

3
export default async function Home() {
4
  const user = await currentUser();
5
  if (!user) return <div>Not logged in</div>;
6
  return <div>Hello {user?.firstName}</div>;
7
}
8

1
import { currentUser } from "@clerk/nextjs";
2
import { NextResponse } from 'next/server';
3

4
export async function GET(request: Request) {
5
  const user = await currentUser()
6
  return NextResponse.json({ user });
7
}

1
'use server'
2
import { currentUser } from '@clerk/nextjs'
3
export async function getUser() {
4
  const user = await currentUser()
5
  if(!user) return null
6
  console.log(user)
7
}
8

Pages Router

`getAuth`

The getAuth() helper retrieves the authentication state allowing you to protect your API routes or gather relevant data.

1
import { getAuth } from "@clerk/nextjs/server";
2
import type { NextApiRequest, NextApiResponse } from "next";
3
 
4
export default async function handler(
5
  req: NextApiRequest,
6
  res: NextApiResponse
7
) {
8
  const { userId } = getAuth(req);
9
  // Load any data your application needs for the API route
10
  return res.status(200).json({ userId: userId });
11
}

1
import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
2
import { GetServerSideProps } from "next";
3
 
4
export const getServerSideProps: GetServerSideProps = async (ctx) => {
5
  const { userId } = getAuth(ctx.req);
6
 
7
  if (!userId) {
8
    // handle user is not logged in.
9
  }
10
 
11
  // Load any data your application needs for the page using the userId
12
  return { props: { ...buildClerkProps(ctx.req) } };
13
};

`clerkClient`

Our `clerkClient` helper allows you to directly interact with the Clerk API, this is useful for updating data or retrieving the full User object.

1
import { getAuth, clerkClient } from "@clerk/nextjs/server";
2
import type { NextApiRequest, NextApiResponse } from "next";
3
 
4
export default async function handler(
5
  req: NextApiRequest,
6
  res: NextApiResponse
7
) {
8
  const { userId } = getAuth(req);
9
 
10
  if (!userId) {
11
    return res.status(401).json({ error: "Unauthorized" });
12
  }
13
 
14
  const user = userId ? await clerkClient.users.getUser(userId) : null;
15
 
16
  // use the user object to decide what data to return
17
 
18
  return res.status(200).json({});
19
}

1
import { clerkClient, getAuth, buildClerkProps } from "@clerk/nextjs/server";
2
import { GetServerSideProps } from "next";
3
 
4
export const getServerSideProps: GetServerSideProps = async (ctx) => {
5
  const { userId } = getAuth(ctx.req);
6
 
7
  const user = userId ? await clerkClient.users.getUser(userId) : undefined;
8
 
9
  return { props: { ...buildClerkProps(ctx.req, { user }) } };
10
};

For a full list of options check out our documentation on accessing the API

Client Side

These client side hooks within both the App Router and the Pages Router.

`useAuth`

The useAuth hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session.

app/page.tsx or pages/example.tsx1

`useUser`

The useUser hook is a convenient way to access the current user data where you need it. This hook provides the user data and helper methods to manage the current active session.

app/page.tsx or pages/example.tsx1