Auth Drawer

What it replaces

The auth UI is usually the part every app rebuilds.

Use Auth Drawer when authentication is already handled by a provider or API, but the product still needs a cohesive sign-in surface. It keeps this high-friction, highly repeated UI out of every individual app.

• Provider-agnostic adapter boundary for Better Auth, Supabase, Auth.js, Clerk, Firebase, Passport, and custom JWT or REST APIs.
• Drawer and modal presentation with responsive mobile behavior, focus management, overlays, and configurable motion.
• Email/password, registration, password reset, OAuth providers, session hooks, and controlled trigger APIs.
• Typed end to end: the AuthConfig and AuthAdapter contracts drive autocomplete for every config key, provider name, and error code.

Quick start

Start with one small integration.

1import { AuthDrawer, AuthProvider } from '@remcostoeten/auth-drawer'2import { createBetterAuthAdapter } from '@remcostoeten/auth-drawer/adapters/better-auth'34const adapter = createBetterAuthAdapter({ client })56export function Auth() {7  return (8    <AuthProvider adapter={adapter}>9      <AuthDrawer adapter={adapter} />10    </AuthProvider>11  )12}

Integration shape

A small path from install to product behavior.

1. 01

   Connect adapter

   Map existing auth client to typed adapter once.

2. 02

   Mount surface

   Place AuthProvider and AuthDrawer near application root.

3. 03

   Open anywhere

   Use hook or trigger API from navigation, paywalls, or protected actions.

API examples

Start with one call. Add the pieces when you need them.

AuthDrawer renders the surface, useAuth opens it and reads session state, and the adapter connects those calls to your existing auth client. Your auth client still owns credentials, sessions, and requests. The whole surface is typed: config keys, provider names, adapter methods, and error codes autocomplete in the editor, so most integrations never need the docs open.

1import { AuthDrawer } from '@remcostoeten/auth-drawer'23export function Auth() {4  return <AuthDrawer adapter={adapter} />5}

1import { AuthDrawer, AuthProvider } from '@remcostoeten/auth-drawer'23export function Auth() {4  return (5    <AuthProvider adapter={adapter}>6      <AuthDrawer adapter={adapter} />7    </AuthProvider>8  )9}

1import { useAuth } from '@remcostoeten/auth-drawer'23export function SignInButton() {4  const { open } = useAuth()56  return <button onClick={() => open('sign-in')}>Sign in</button>7}

1<AuthDrawer2  adapter={adapter}3  config={{4    ui: {5      auth: {6        providers: ['github', 'google'],7        allowRegister: true,8        emailAutocomplete: { domains: ['company.com'] }9      },10      presentation: { variant: 'modal' }11    }12  }}13/>

1import { createAdapter } from '@remcostoeten/auth-drawer'23export const adapter = createAdapter({4  id: 'my-api',5  async signIn({ email, password }) {6    const res = await fetch('/api/login', {7      method: 'POST',8      body: JSON.stringify({ email, password })9    })1011    if (!res.ok) {12      const rateLimited = res.status === 4291314      return {15        success: false,16        error: {17          code: rateLimited ? 'rate_limited' : 'invalid_credentials',18          target: 'form',19          message: rateLimited20            ? 'Too many attempts. Wait a moment and try again.'21            : 'Email or password is incorrect.'22        }23      }24    }2526    return { success: true, data: await res.json() }27  }28})

AuthProvider

Shares adapter and session state through app tree.

AuthDrawer

Renders sign-in, sign-up, OAuth, and recovery flows.

useAuth()

Reads user state and exposes sign-out plus drawer controls.