useThunderID()

The useThunderID hook provides access to the ThunderID authentication context in React applications. It allows you to retrieve authentication state, user information, and other context values managed by the ThunderIDProvider.

Usage

Import and use the hook in any functional component to access authentication data:

src/MyComponent.jsx

import { useThunderID } from '@thunderid/react'

function MyComponent() {
  const { isSignedIn, user, signIn, signOut } = useThunderID()

  return (
    <div>
      {isSignedIn ? (
        <>
          <p>Welcome, {user?.displayName}!</p>
          <button onClick={() => signOut()}>Sign Out</button>
        </>
      ) : (
        <button onClick={() => signIn()}>Sign In</button>
      )}
    </div>
  )
}

export default MyComponent

note

This hook must be used inside a component rendered within ThunderIDProvider. Otherwise, it will throw an error.

Return Values

The hook returns all properties and methods provided by ThunderIDContextProps:

Property	Type	Description
isSignedIn	boolean	Whether the user is currently signed in
user	User | null	The authenticated user object, or null if not signed in
signIn	() => Promise<void>	Initiates the sign-in flow
signOut	() => Promise<void>	Initiates the sign-out flow
loading	boolean	Indicates if an authentication operation is in progress
error	Error | null	The last error encountered during authentication, if any

Error Handling

If useThunderID is called outside of a ThunderIDProvider, it throws:

Error: useThunderID must be used within a ThunderIDProvider