useAsgardeo()

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

Usage

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

src/MyComponent.jsx

import { useAsgardeo } from '@asgardeo/react'

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

  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 AsgardeoProvider. Otherwise, it will throw an error.

Return Values

The hook returns all properties and methods provided by AsgardeoContextProps:

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 useAsgardeo is called outside of an AsgardeoProvider, it throws:

Error: useAsgardeo must be used within an AsgardeoProvider