React SDK
Hooks
useAuth and useUser hooks for accessing authentication state.
useAuth
Access authentication state and methods.
import { useAuth } from '@zautha/react';
function NavBar() {
const { isLoaded, isSignedIn, signOut } = useAuth();
if (!isLoaded) return <Spinner />;
if (!isSignedIn) return <a href="/sign-in">Sign In</a>;
return <button onClick={() => signOut()}>Sign Out</button>;
}Return Values
| Property | Type | Description |
|---|---|---|
isLoaded | boolean | true once auth state has been determined |
isSignedIn | boolean | true if the user has an active session |
signIn | (params) => Promise | Sign in with email/password |
signUp | (params) => Promise | Create a new account |
signOut | () => Promise<void> | Sign the user out |
verifyMfa | (params) => Promise | Verify an MFA challenge |
getToken | () => Promise<string> | Get a valid access token (refreshes if needed) |
Sign In
const { signIn } = useAuth();
const result = await signIn({
identifier: 'user@example.com',
password: 'secure-password',
});
// Check if MFA is required
if (isMfaChallenge(result)) {
// Show MFA form, then call verifyMfa
}Sign Up
const { signUp } = useAuth();
await signUp({
email: 'user@example.com',
password: 'secure-password',
});useUser
Access the current user object.
import { useUser } from '@zautha/react';
function Profile() {
const { user } = useUser();
if (!user) return null;
return (
<div>
<p>{user.email}</p>
<p>{user.displayName}</p>
<img src={user.avatarUrl} alt="" />
</div>
);
}User Object
| Property | Type | Description |
|---|---|---|
id | string | User ID |
email | string | Primary email |
username | string? | Username |
displayName | string? | Display name |
avatarUrl | string? | Avatar URL |
status | string | "active", "suspended", "banned" |
is_admin | boolean | Whether this is a superadmin user |
metadata | object | Custom metadata |