useThunderID()

The use<ProductName /> 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 <ProductName />Provider.

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