Docs

useAuth()

The useAuth() hook provides information about the current auth state, as well as 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

Note

For Next.js apps, it's recommended to use the auth() helper instead of the useAuth() hook. Since auth() is used in server components, you'll need to pass the auth data to Client Components as needed. If you prefer to use the useAuth() hook, pass the dynamic prop to the <ClerkProvider> component, but note that this switches the app to dynamic rendering. Learn more here.

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