Pages (getServerSideProps)

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>).

Optionally, use the Preload User example to make user profile data available during server-side rendering.

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
  if (!userId) {
7
    // handle user is not logged in.
8
  }
9
  return { props: { ...buildClerkProps(ctx.req) } }
10
}

1
import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
2

3
export const getServerSideProps = ({ req }) => {
4
  const { userId } = getAuth(req);
5
  // ...
6
  return { props: { ...buildClerkProps(req) } };
7
};

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
}

1
import { clerkClient, getAuth, buildClerkProps } from "@clerk/nextjs/server";
2

3
export const getServerSideProps = async ({ req }) => {
4
  const { userId } = getAuth(req);
5
  
6
  const user = userId ? await clerkClient.users.getUser(userId) : undefined;
7
  // ...
8
  return { props: { ...buildClerkProps(req, { user }) } };
9
};

Before Next.js 12.2

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2
import type { GetServerSideProps } from "next";
3

4
export const getServerSideProps: GetServerSideProps = withServerSideAuth(({ req, resolvedUrl }) => {
5
  const { sessionId } = req.auth;
6

7
  if (!sessionId) {
8
    return { 
9
      redirect: { 
10
        destination: "/sign-in?redirect_url=" + resolvedUrl,
11
        permanent: false
12
      } 
13
    };
14
  }
15

16
  return { props: {} };
17
});

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2

3
export const getServerSideProps = withServerSideAuth(({ req, resolvedUrl }) => {
4
  const { sessionId } = req.auth;
5

6
  if (!sessionId) {
7
    return { 
8
      redirect: { 
9
        destination: "/sign-in?redirect_url=" + resolvedUrl,
10
        permanent: false
11
      } 
12
    };
13
  }
14

15
  return { props: {} };
16
});

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2
import type { GetServerSideProps } from "next";
3

4
export const getServerSideProps: GetServerSideProps = withServerSideAuth({ loadUser: true });
5

6
// or, if you also need a custom getServerSideProps handler:
7
export const getServerSideProps: GetServerSideProps = withServerSideAuth(
8
  ({ req }) => {
9
    const { userId } = req.auth;
10
    // fetch data
11
    return { props: { yourData: "here" } };
12
  },
13
  { loadUser: true }
14
);

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2

3
export const getServerSideProps = withServerSideAuth({ loadUser: true });
4

5
// or, if you also need a custom getServerSideProps handler:
6
export const getServerSideProps = withServerSideAuth(
7
  ({ req }) => {
8
    const { userId } = req.auth;
9
    // fetch data
10
    return { props: { yourData: "here" } };
11
  },
12
  { loadUser: true }
13
);

Example Response

{
  sessionId: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
  userId: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj',
  orgId: null,
  getToken: [AsyncFunction (anonymous)],
  claims: {
    azp: 'http://localhost:3000',
    exp: 1666622607,
    iat: 1666622547,
    iss: 'https://clerk.quiet.muskox-85.lcl.dev',
    nbf: 1666622537,
    sid: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
    sub: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj'
  }
}

More detailed information about the fields in this object can be found in the Authentication Object documentation.