`useAuth()`

The useAuth() hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session.

`useAuth()` returns

Name	Type	Description
`isSignedIn`	`boolean`	A boolean that returns true if the user is signed in.
`isLoaded`	`boolean`	A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`.
`userId`	`string`	The current user's ID.
`sessionId`	`string`	The current user's session ID.
`orgId`	`string`	The current user's active organization ID.
`orgRole`	`string`	The current user's active organization role.
`orgSlug`	`string`	The current user's organization slug.
`signOut()`	`(options?: SignOutOptions) => Promise<void>`	A function that signs the user out. See the reference documentation for more information.
`getToken()`	`(options?: GetTokenOptions) => Promise\<string \| null\>`	A function that returns a promise that resolves to the current user's session token. Can also be used to retrieve a custom JWT template. See the reference documentation for more information.
`has()`	`(isAuthorizedParams: CheckAuthorizationParamsWithCustomPermissions) => boolean`	A function that returns a boolean based on the permission or role provided as parameter. Can be used for authorization. See the reference documentation(opens in a new tab) for more information.

How to use the `useAuth()` hook

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 demonstrates a basic example of how you could use the getToken() method to retrieve a session token for fetching data from an external resource.

external-data-page.tsx
import { useAuth } from '@clerk/clerk-react';
 
export default function ExternalDataPage() {
  const { getToken, isLoaded, isSignedIn } = useAuth();
 
  if (!isLoaded) {
    // Handle loading state however you like
    return <div>Loading...</div>;
  }
 
  if (!isSignedIn) {
    // Handle signed out state however you like
    return <div>Sign in to view this page</div>;
  }
 
  const fetchDataFromExternalResource = async () => {
    const token = await getToken();
    // Add logic to fetch your data
    return data;
  }
 
  return <div>...</div>;
}

Last updated on March 1, 2024

useAuth() returns

How to use the useAuth() hook

`useAuth()` returns

How to use the `useAuth()` hook