Read user data
Clerk provides a set of hooks and helpers that you can use to read user data in your React Router application. This guide demonstrates how to use these helpers in both the client and server-side to get you started.
Server-side
To access active session and user data on the server-side, use the getAuth() helper.
Server data loading
The getAuth() helper returns the Auth object of the currently active user, which contains important information like the current user's session ID, user ID, and Organization ID, and the isAuthenticated property, which can be used to protect your API routes.
In some cases, you may need the full Backend User object of the currently active user. This is helpful if you want to render information, like their first and last name, directly from the server. The clerkClient() helper returns an instance of clerkClient, which exposes Clerk's Backend API resources through methods such as the getUser() method. This method returns the full Backend User object.
In the following example, the userId is passed to the getUser() method to get the user's full Backend User object.
import { redirect } from 'react-router'
import { clerkClient, getAuth } from '@clerk/react-router/server'
import type { Route } from './+types/profile'
export async function loader(args: Route.LoaderArgs) {
// Use `getAuth()` to access `isAuthenticated` and the user's ID
const { isAuthenticated, userId } = await getAuth(args)
// Protect the route by checking if the user is signed in
if (!isAuthenticated) {
return redirect('/sign-in?redirect_url=' + args.request.url)
}
// Get the user's full `Backend User` object
const user = await clerkClient(args).users.getUser(userId)
return {
user: JSON.stringify(user),
}
}
export default function Profile({ loaderData }: Route.ComponentProps) {
return (
<div>
<h1>Profile Data</h1>
<pre>
<code>{JSON.stringify(loaderData, null, 2)}</code>
</pre>
</div>
)
}Server action
Unlike the previous example that loads data when the page loads, the following example uses getAuth() to only fetch user data after submitting the form. The helper runs on form submission, authenticates the user, and processes the form data.
import { redirect, Form } from 'react-router'
import { clerkClient, getAuth } from '@clerk/react-router/server'
import type { Route } from './+types/profile-form'
export async function action(args: Route.ActionArgs) {
// Use `getAuth()` to access `isAuthenticated` and the user's ID
const { isAuthenticated, userId } = await getAuth(args)
// Protect the route by checking if the user is signed in
if (!isAuthenticated) {
return redirect('/sign-in?redirect_url=' + args.request.url)
}
// Get the form data
const formData = await args.request.formData()
const name = formData.get('name')?.toString()
// Get the user's full `Backend User` object
const user = await clerkClient(args).users.getUser(userId)
return {
name,
user: JSON.stringify(user),
}
}
export default function ProfileForm({ actionData }: Route.ComponentProps) {
return (
<div>
<h1>Profile Data</h1>
<Form method="post">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" />
<button type="submit">Submit</button>
</Form>
{actionData ? (
<pre>
<code>{JSON.stringify(actionData, null, 2)}</code>
</pre>
) : null}
</div>
)
}Client-side
To access session and user data on the client-side, you can use the useAuth() and useUser() hooks.
useAuth()
The following example demonstrates how to use the useAuth() hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the getToken() method to retrieve a session token for fetching data from an external resource.
import { useAuth } from '@clerk/react-router'
export default function Home() {
const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
const fetchExternalData = async () => {
const token = await getToken()
// Fetch data from an external API
const response = await fetch('https://api.example.com/data', {
headers: {
Authorization: `Bearer ${token}`,
},
})
return response.json()
}
// Handle loading state
if (!isLoaded) return <div>Loading...</div>
// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>
return (
<div>
<p>
Hello, {userId}! Your current active session is {sessionId}.
</p>
<button onClick={fetchExternalData}>Fetch Data</button>
</div>
)
}useUser()
The following example demonstrates how to use the useUser() hook to access the User object, which contains the current user's data such as their ID.
import { useUser } from '@clerk/react-router'
export default function Home() {
const { isSignedIn, user, isLoaded } = useUser()
// Handle loading state
if (!isLoaded) return <div>Loading...</div>
// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>
return <div>Hello {user.id}!</div>
}Feedback
Last updated on