Skip to content
Vendidit Auth

Browser quickstart

The 80% case in under 30 lines of code.

Prerequisites

  • An app registered in the auth-server. See App registration.
  • You know your app_code (e.g. marketplace-buyer).
  • You know your auth-server URL (typically https://auth.vendidit.com/api/v1).

Install

Terminal window
pnpm add @vendidit/auth-client
# Plus your framework (peer dep):
pnpm add preact     # or react, solid-js, vue

Vanilla

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


const auth = createAuthClient({
    apiBaseUrl: 'https://auth.vendidit.com/api/v1',
    appCode: 'marketplace-buyer',
    bootstrap: 'auto', // validates cached session at boot
});


// Wait for the boot-time session check
await auth.ready();


if (auth.isAuthenticated()) {
    console.log('signed in as', auth.getCurrentUser());
} else {
    await auth.loginWithPassword({ email, password });
}


// Subscribe to lifecycle events
auth.on('logged_out', () => router.push('/login'));

Preact

import { AuthProvider, useAuth } from '@vendidit/auth-client/preact';


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


function Profile() {
    const { user, isAuthenticated, logout } = useAuth();
    if (!isAuthenticated) return null;
    return (
        <div>
            <p>Hello {user.first_name}</p>
            <button onClick={() => logout()}>Sign out</button>
        </div>
    );
}

Drop-in flows

The SDK ships CompleteLoginFlow, CompleteSignupFlow, and others — fully-styled multi-step flows you can drop into a route:

import { CompleteLoginFlow } from '@vendidit/auth-client/preact/ui/flows';


<Route path="/login">
    <CompleteLoginFlow
        onSuccess={() => navigate('/')}
        onSwitchToRegister={() => navigate('/register')}
    />
</Route>

Every flow is composed from atoms + forms in the same package — start with the flow, drop down to forms when you need to customize, drop down to atoms when you need full control. See Component catalog for every component live.

Next reads