Read Session & User 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.

Client Side

`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

Server Side

API Routes

You can protect your API routes by using the auth helper and retrieve data from your own systems.

1
// app/api/route.ts
2

3
import type { NextApiRequest, NextApiResponse } from "next";
4
import { auth } from "@clerk/nextjs";
5

6
export default function handler(req: NextApiRequest, res: NextApiResponse) {
7
  const { userId } = auth(req);
8
  if (!userId) {
9
    res.status(401).json({ error: "Unauthorized" });
10
    return;
11
  }
12
  // retrieve data from your database
13
  res.status(200).json({});
14
}

1
// pages/api/auth.ts
2

3
import type { NextApiRequest, NextApiResponse } from "next";
4
import { getAuth } from "@clerk/nextjs";
5

6
export default function handler(req: NextApiRequest, res: NextApiResponse) {
7
  const { userId } = getAuth(req);
8
  if (!userId) {
9
    res.status(401).json({ error: "Unauthorized" });
10
    return;
11
  }
12
  // retrieve data from your database
13
  res.status(200).json({});
14
}

In some cases, you may need the full user object, for example, if you want to access the user's email address or name. You can use the clerkClient helper to get the full user object.

1
// app/api/route.ts
2

3
import { auth, clerkClient } from "@clerk/nextjs";
4
import type { NextApiRequest, NextApiResponse } from "next";
5

6
export default async function handler(
7
  req: NextApiRequest,
8
  res: NextApiResponse
9
) {
10
  const { userId } = auth(req);
11

12
  if (!userId) {
13
    return res.status(401).json({ error: "Unauthorized" });
14
  }
15

16
  const user = userId ? await clerkClient.users.getUser(userId) : null;
17

18
  // use the user object to decide what data to return
19

20
  return res.status(200).json({});
21
}

1
// pages/api/auth.ts
2

3
import { getAuth, clerkClient } from "@clerk/nextjs";
4
import type { NextApiRequest, NextApiResponse } from "next";
5

6
export default async function handler(
7
  req: NextApiRequest,
8
  res: NextApiResponse
9
) {
10
  const { userId } = getAuth(req);
11

12
  if (!userId) {
13
    return res.status(401).json({ error: "Unauthorized" });
14
  }
15

16
  const user = userId ? await clerkClient.users.getUser(userId) : null;
17

18
  // use the user object to decide what data to return
19

20
  return res.status(200).json({});
21
}

Server Side Rendering (Pages Router only)

You can access the active session and user data in your getServerSideProps using the getAuth helper.

Please note the addition of buildClerkProps in the return statement, which informs our React helpers of the authentication state during server-side rendering (like useAuth(), <SignedIn>, and <SignedOut>).

pages/example.tsx1

You can also access the full user object before passing it to the page using the clerkClient helper.

pages/example.tsx1