getAuth()
The getAuth() helper retrieves the current user's authentication state from the request object.
Parameters
- Name
request- Description
The request object.
- Name
opts?- Description
An optional object that can be used to configure the behavior of the
getAuth()function. It accepts the following properties:secretKey?: A string that represents the secret key used to sign the session token. If not provided, the secret key is retrieved from the environment variableCLERK_SECRET_KEY.
Returns
getAuth() returns the Auth object.
Usage
Server data loading
The following example demonstrates how to use getAuth() to protect a profile page route and load user data.
If the user is authenticated, their userId is passed to the Backend SDK's getUser() method to retrieve the user's information.
import { redirect } from 'react-router'
import { getAuth } from '@clerk/react-router/ssr.server'
import { createClerkClient } from '@clerk/react-router/api.server'
import type { Route } from './+types/profile'
export async function loader(args: Route.LoaderArgs) {
const { userId } = await getAuth(args)
if (!userId) {
return redirect('/sign-in?redirect_url=' + args.request.url)
}
const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).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 { getAuth } from '@clerk/react-router/ssr.server'
import { createClerkClient } from '@clerk/react-router/api.server'
import type { Route } from './+types/profile-form'
export async function action(args: Route.ActionArgs) {
const { userId } = await getAuth(args)
if (!userId) {
return redirect('/sign-in?redirect_url=' + args.request.url)
}
const formData = await args.request.formData()
const name = formData.get('name')?.toString()
const user = await createClerkClient({
secretKey: process.env.CLERK_SECRET_KEY,
}).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>
)
}Feedback
Last updated on