Docs

Read session and user data in your Remix app with Clerk

Clerk provides a set of hooks and helpers that you can use to access the active session and user data in your Remix application. Here are examples of how to use these helpers in both the client and server-side to get you started.

Server-side

getAuth()

The getAuth() helper allows you to access the Auth object, which includes the current user's userId. You can use the userId to protect your routes or get the user's data.

In the following example, the userId is passed to the Backend SDK's getUser() method to get the user's full User object. For information on how to use the Backend SDK, see the Backend SDK documentation.

routes/profile.tsx
import { LoaderFunction, redirect } from '@remix-run/node'
import { getAuth } from '@clerk/remix/ssr.server'
import { createClerkClient } from '@clerk/remix/api.server'

export const loader: LoaderFunction = async (args) => {
  // Use getAuth() to retrieve the user's ID
  const { userId } = await getAuth(args)

  // If there is no userId, then redirect to sign-in route
  if (!userId) {
    return redirect('/sign-in?redirect_url=' + args.request.url)
  }

  // Initialize clerkClient and perform an operation
  const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(
    userId,
  )

  // Return the retrieved user data
  return { serialisedUser: JSON.stringify(user) }
}
routes/profile.tsx
import { ActionFunction, redirect } from '@remix-run/node'
import { getAuth } from '@clerk/remix/ssr.server'
import { createClerkClient } from '@clerk/remix/api.server'

export const action: ActionFunction = async (args) => {
  // Use getAuth() to retrieve the user's ID
  const { userId } = await getAuth(args)

  // If there is no userId, then redirect to sign-in route
  if (!userId) {
    return redirect('/sign-in?redirect_url=' + args.request.url)
  }

  // Initialize clerkClient and perform an operation
  const updatedUser = await createClerkClient({
    secretKey: process.env.CLERK_SECRET_KEY,
  }).users.getUser(userId)

  // Return the retrieved user data
  return { serialisedUser: JSON.stringify(updatedUser) }
}

Client Side

useAuth()

The useAuth() hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns userId, which can be used to protect your routes.

routes/example.tsx
import { useAuth } from '@clerk/remix'

export default function Example() {
  const { isLoaded, userId } = useAuth()

  if (!isLoaded) {
    return <p>Loading...</p>
  }

  if (!userId) {
    // You could also add a redirect to the sign-in page here
    return null
  }

  return <div>Hello, {userId}!</div>
}

useUser()

The useUser() hook provides the current user's User object, which holds all of the information for a user of your application and provides a set of methods to manage their account.

routes/example.tsx
import { useUser } from '@clerk/remix'

export default function Example() {
  const { isLoaded, isSignedIn, user } = useUser()

  if (!isLoaded) {
    return <p>Loading...</p>
  }

  if (!isSignedIn) {
    // You could also add a redirect to the sign-in page here
    return null
  }

  return <div>Hello, {user.firstName}!</div>
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on