Skip to main content
Docs

buildClerkProps

The buildClerkProps() function is used in your Next.js application's getServerSideProps to pass authentication state from the server to the client. It returns props that get spread into the <ClerkProvider> component. This enables Clerk's client-side helpers, such as useAuth(), to correctly determine the user's authentication status during server-side rendering.

pages/example.tsx
import { getAuth, buildClerkProps } from '@clerk/nextjs/server'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // Use `getAuth()` to access `isAuthenticated` and the user's ID
  const { isAuthenticated } = getAuth(ctx.req)

  // Protect the route by checking if the user is signed in
  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/sign-in',
        permanent: false,
      },
    }
  }

  // Initialize the Backend SDK
  const client = await clerkClient()

  // Get the user's full `Backend User` object
  const user = await client.users.getUser(userId)

  // Pass the `user` object to buildClerkProps()
  return { props: { ...buildClerkProps(ctx.req, { user }) } }
}

Feedback

What did you think of this content?

Last updated on