@vetaui/auth-kit

Provider-agnostic authentication for Veta. One unified API that works with Firebase, Supabase, Clerk, NextAuth, Amazon Cognito, and any custom backend — swap the adapter without rewriting your UI.

Install

pnpm add @vetaui/foundations @vetaui/atoms @vetaui/auth-kit

Pick a provider strategy:

pnpm add firebase        # for Firebase
pnpm add @supabase/supabase-js  # for Supabase
pnpm add @clerk/nextjs   # for Clerk

Setup

// app/providers.tsx
import { AuthProvider, firebaseAuthStrategy } from "@vetaui/auth-kit";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider adapter={firebaseAuthStrategy({ auth, api: firebaseAuth })}>
      {children}
    </AuthProvider>
  );
}

You can also register the strategy once through @vetaui/foundations/runtime and omit the adapter prop from AuthProvider.

Usage

import { useAuth, useSession, useUser } from "@vetaui/auth-kit";

export function Profile() {
  const { user } = useUser();
  const { signOut } = useAuth();

  if (!user) return <p>Not signed in</p>;

  return (
    <div>
      <p>Hello, {user.displayName}</p>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

Supported strategies

| Strategy | Import | | -------------- | --------------------------------------------------------------------------- | | Firebase Auth | firebaseAuthStrategy from @vetaui/auth-kit or @vetaui/auth-kit/strategies | | Supabase | supabaseAuthStrategy from @vetaui/auth-kit or @vetaui/auth-kit/strategies | | Clerk | clerkAuthStrategy from @vetaui/auth-kit or @vetaui/auth-kit/strategies | | NextAuth | nextAuthStrategy from @vetaui/auth-kit or @vetaui/auth-kit/strategies | | Amazon Cognito | cognitoAuthStrategy from @vetaui/auth-kit or @vetaui/auth-kit/strategies | | Mock (tests) | mockAuthStrategy from @vetaui/auth-kit or @vetaui/auth-kit/strategies |

Production QR for 2FA

TwoFactorSetupPage ships a deterministic placeholder QR so docs and generated apps work without an extra dependency. Production apps should pass a real renderer:

import { TwoFactorSetupPage } from "@vetaui/auth-kit/screens";
import QRCode from "react-qr-code";

<TwoFactorSetupPage
  renderQr={({ otpauthUrl }) => (
    <QRCode value={otpauthUrl} aria-label="Authenticator QR code" />
  )}
/>;

Exports

| Export | Description | | -------------- | -------------------------------------------------------------------------------- | | AuthProvider | React context provider — wraps your app | | useAuth | { signIn, signOut, signUp, ... } | | useSession | Current session + status ("loading" / "authenticated" / "unauthenticated") | | useUser | Resolved User object | | useHasRole | Role-based guard hook |

License

MIT — Dambert Munoz