Docs

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, isLoaded will be set to true.

  • 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.

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>;
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on