React adapter

Install

pnpm add @vendidit/auth-client react

Wrap your app

import { AuthProvider } from '@vendidit/auth-client/react';

export function Root() {
    return (
        <AuthProvider
            config={{
                apiBaseUrl: 'https://auth.vendidit.com/api/v1',
                appCode: 'marketplace-buyer',
            }}
        >
            <App />
        </AuthProvider>
    );
}

Read auth state

import { useAuth } from '@vendidit/auth-client/react';

function Header() {
    const { user, isAuthenticated, isReady, logout } = useAuth();
    if (!isReady) return <Spinner />;
    if (!isAuthenticated) return <a href="/login">Sign in</a>;
    return (
        <div>
            <span>{user.email}</span>
            <button onClick={() => logout()}>Sign out</button>
        </div>
    );
}

Mutation hooks

import { useLogin, useStartSso, useVerifyEmail } from '@vendidit/auth-client/react';

const { mutate: login, isPending, error } = useLogin();
login({ email, password });

const { mutate: startSso } = useStartSso();
startSso({ provider: 'google', redirectUrl: location.origin + '/auth/sso/callback' });

Every hook returns the { data, error, isPending, mutate } shape familiar from React Query, but powered by the SDK’s internal event bus — no extra dependency required.

Gating UI

import { ProtectedRoute, RoleGate, PermissionGate } from '@vendidit/auth-client/react';

<ProtectedRoute redirectTo="/login">
    <Dashboard />
</ProtectedRoute>

<RoleGate roles={['org_admin']}>
    <AdminPanel />
</RoleGate>

<PermissionGate permissions={['listings:create']}>
    <NewListingButton />
</PermissionGate>