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
isSignedIn- Type
boolean- Description
A boolean that returns true if the user is signed in.
- Name
isLoaded- Type
boolean- Description
A boolean that until Clerk loads and initializes, will be set to
false. Once Clerk loads,isLoadedwill be set totrue.
- Name
userId- Type
string- Description
The current user's ID.
- Name
sessionId- Type
string- Description
The current user's session ID.
- Name
orgId- Type
string- Description
The current user's active organization ID.
- Name
orgRole- Type
string- Description
The current user's active organization role.
- Name
orgSlug- Type
string- Description
The current user's organization slug.
- Name
signOut()- Type
(options?: SignOutOptions) => Promise<void>- Description
A function that signs the user out. See the reference documentation for more information.
- Name
getToken()- Type
(options?: GetTokenOptions) => Promise\<string | null\>- Description
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.
- Name
has()- Type
(isAuthorizedParams: CheckAuthorizationParamsWithCustomPermissions) => boolean- Description
A function that returns a boolean based on the permission or role provided as parameter. Can be used for authorization. See the reference documentation 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.
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>;
}Feedback
Last updated on