# Protect content and read user data

Clerk provides a set of [hooks](https://clerk.com/docs/react/reference/hooks/overview.md) that you can use to protect content and read user data in your React application. Here are examples of how to use these hooks to get you started.

### `useAuth()`

The following example uses the [useAuth()](https://clerk.com/docs/react/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/reference/hooks/use-user.md) hook to access the [User](https://clerk.com/docs/react/reference/objects/user.md) object, which contains the current user's data such as their ID.

filename: src/pages/Example.tsx
```tsx
import { useUser } from '@clerk/react'

export default function Example() {
  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>
}
```

## Next steps

- [Protect content and read user data](https://clerk.com/docs/guides/users/reading.md?sdk=react): Learn how to use Clerk's hooks to protect content and read user data in your React app.
- [Prebuilt components](https://clerk.com/docs/reference/components/overview.md?sdk=react): Learn how to quickly add authentication to your app using Clerk's suite of components.
- [Customization & localization](https://clerk.com/docs/guides/customizing-clerk/appearance-prop/overview.md?sdk=react): Learn how to customize and localize the Clerk components.
- [Clerk React SDK Reference](https://clerk.com/docs/reference/react/overview.md?sdk=react): Learn about the Clerk React SDK and how to integrate it into your app.

---

## Sitemap

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