# Protect content and read user data

Clerk provides a set of [hooks and helpers](https://clerk.com/docs/react-router/reference/react-router/overview.md#client-side-helpers) that you can use to protect content and 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()](https://clerk.com/docs/react-router/reference/react-router/get-auth.md) helper.

### Server data loading

The [getAuth()](https://clerk.com/docs/react-router/reference/react-router/get-auth.md) helper returns the [`Auth`](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=react-router) 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`](https://clerk.com/docs/reference/backend/types/backend-user.md?sdk=react-router) 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`](https://clerk.com/docs/reference/backend/overview.md?sdk=react-router), which exposes Clerk's Backend API resources through methods such as the [`getUser()`](https://clerk.com/docs/reference/backend/user/get-user.md?sdk=react-router){{ target: '_blank' }} 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.

filename: app/routes/profile.tsx
```tsx
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>
        `{JSON.stringify(loaderData, null, 2)}`
      </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.

filename: app/routes/profile-form.tsx
```tsx
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>
          `{JSON.stringify(actionData, null, 2)}`
        </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 uses the [useAuth()](https://clerk.com/docs/react-router/reference/hooks/use-auth.md) hook to access the current auth state, as well as helper methods to manage the current session.

filename: example.tsx
```tsx
export default function Example() {
  const { isLoaded, isSignedIn, userId, sessionId, getToken } = useAuth()

  const fetchExternalData = async () => {
    // Use `getToken()` to get the current user's session token
    const token = await getToken()

    // Use `token` to fetch data from an external API
    const response = await fetch('https://api.example.com/data', {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })

    return response.json()
  }

  // Use `isLoaded` to check if Clerk is loaded
  if (!isLoaded) {
    return <div>Loading...</div>
  }

  // Use `isSignedIn` to check if the user is signed in
  if (!isSignedIn) {
    // You could also add a redirect to the sign-in page here
    return <div>Sign in to view this page</div>
  }

  return (
    <div>
      Hello, {userId}! Your current active session is {sessionId}.
    </div>
  )
}
```

### `useUser()`

The following example demonstrates how to use the [useUser()](https://clerk.com/docs/react-router/reference/hooks/use-user.md) hook to access the [User](https://clerk.com/docs/react-router/reference/objects/user.md) object, which contains the current user's data such as their ID.

filename: app/routes/home.tsx
```tsx
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>
}
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)