useAuth Hook

The useAuth hook provides access to authentication state and actions from any component within the AuthProvider.

Basic Usage#

TSX

Return Values#

user#

The current user object, or null if not authenticated.

TSX

isAuthenticated#

Boolean indicating if user is authenticated (non-guest).

TSX

isGuest#

Boolean indicating if current session is a guest.

TSX

isLoading#

Boolean indicating if auth state is being fetched.

TSX

error#

Error object if authentication failed.

TSX

Logs in with credentials. Returns a Promise<AuthResult> ({ success, message?, user?, errors? }).

TSX

logout#

Logs out the current user and clears the session. Returns Promise<void>. To redirect after logout, set the logoutRedirect prop on AuthProvider.

TSX

mutate#

SWR mutate function to manually revalidate auth state.

TSX

register#

Registers a new user. Returns a Promise<AuthResult>. Field validation errors (if any) are available on result.errors.

TSX

refresh#

Re-fetches the current user from the backend. Returns Promise<void>.

TSX

Examples#

TSX

Protected Component#

TSX

Role-Based Access#

TSX

Guest Upgrade Prompt#

TSX

Logout with Confirmation#

TSX

TypeScript#

Custom User Type#

TSX

Full Return Type#

useAuth() returns AuthContextValue<TUser>:

TypeScript

Requirements#

The useAuth hook must be used within an AuthProvider:

TSX