āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/users/reading.remix ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Clerk provides a set of hooks and helpers that you can use to protect content and read 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.
getAuth()The getAuth() helper allows you to access the Auth object{{ target: '_blank' }}, which includes the current user's userId and the isAuthenticated property, which can be used to protect your routes.
In the following example, the userId is passed to the JS Backend SDK's getUser(){{ target: '_blank' }} method to get the user's full User object. For information on how to use the JS Backend SDK, see the JS Backend documentation{{ target: '_blank' }}.
<Tabs items={["Loader Function", "Action Function"]}> <Tab> ```tsx {{ filename: '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 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)
}
// Initialize the JS Backend SDK and get the user's full `Backend User` object
const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(
userId,
)
// Return the retrieved user data
return { serialisedUser: JSON.stringify(user) }
}
```
export const action: ActionFunction = async (args) => {
// 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)
}
// Initialize the JS Backend SDK and get the user's full `Backend User` object
const updatedUser = await createClerkClient({
secretKey: process.env.CLERK_SECRET_KEY,
}).users.getUser(userId)
// Return the retrieved user data
return { serialisedUser: JSON.stringify(updatedUser) }
}
```
useAuth()useUser()ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā