Read user data
Clerk provides a set of hooks that you can use to read user data in your React application. Here are examples of how to use these hooks to get you started.
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'
export default function ExternalDataPage() {
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'
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>
}Create a custom sign-in-or-up page
Learn how to add a custom sign-in-or-up page to your React app with Clerk's prebuilt components.
Prebuilt components
Learn how to quickly add authentication to your app using Clerk's suite of components.
Customization & localization
Learn how to customize and localize the Clerk components.
Clerk React SDK Reference
Learn about the Clerk React SDK and how to integrate it into your app.
Feedback
Last updated on