AuthView

The AuthView component provides a complete authentication experience with automatic routing between sign-in, sign-up, forgot password, and password reset flows.

This is the recommended way to add auth to your app - one component handles all authentication flows.

Installation

import { AuthView } from '@bettercone/ui';

Features

✅ All Auth Flows - Sign-in, sign-up, forgot password, and reset password
✅ Auto-routing - Automatically shows the correct form based on URL/state
✅ Provider Support - Email/password, OAuth, magic links, passkeys, 2FA, anonymous, SIWE
✅ Customizable - Full control over styling and behavior
✅ Type-Safe - Full TypeScript support
✅ Localization - i18n support with custom labels
✅ Responsive - Works on all screen sizes

Usage

import { AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function SignInPage() {
  return <AuthView authClient={authClient} />;
}

import { AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function SignInPage() {
  return (
    <AuthView 
      authClient={authClient}
      socialProviders={["google", "github", "discord"]}
    />
  );
}

import { AuthUIProvider, AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function SignInPage() {
  return (
    <AuthUIProvider 
      authClient={authClient}
      anonymous={true}  // Enable guest sign-in
      siwe={true}       // Enable Web3 wallet sign-in
      passkey={true}    // Enable passkey authentication
    >
      <AuthView />
    </AuthUIProvider>
  );
}

import { AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';
import { useRouter } from 'next/navigation';

export default function SignInPage() {
  const router = useRouter();

  return (
    <AuthView 
      authClient={authClient}
      socialProviders={["google", "github"]}
      onSuccess={() => router.push('/dashboard')}
      className="max-w-md mx-auto"
    />
  );
}

Props

Prop	Type	Default	Description
`authClient`	`AnyAuthClient`	-	Required. Better Auth client instance
`socialProviders`	`string[]`	`[]`	List of OAuth providers to show
`onSuccess`	`() => void`	-	Callback when auth succeeds
`className`	`string`	-	Additional CSS classes
`labels`	`object`	-	Custom labels for internationalization

Authentication Methods

AuthView supports all Better Auth authentication methods. Enable them via AuthUIProvider:

Enable guest/anonymous authentication for users who want to try your app without creating an account.

<AuthUIProvider authClient={authClient} anonymous={true}>
  <AuthView />
</AuthUIProvider>

Features:

One-click guest access
No email or credentials required
Can convert to full account later
Perfect for demos and trials

Requires the Better Auth Anonymous plugin to be enabled on your server.

Enable Web3 wallet authentication for crypto-native applications.

<AuthUIProvider authClient={authClient} siwe={true}>
  <AuthView />
</AuthUIProvider>

Features:

Connect with MetaMask or any Web3 wallet
ERC-4361 compliant (industry standard)
Automatic wallet detection
Only shows when wallet is available
Multi-chain support

Requires the Better Auth SIWE plugin to be enabled on your server and a Web3 wallet (MetaMask, WalletConnect, etc.) in the browser.

Complete Example with All Methods

<AuthUIProvider
  authClient={authClient}
  // Traditional methods
  credentials={true}
  social={{ providers: ["google", "github"] }}
  
  // Modern methods
  passkey={true}
  magicLink={true}
  emailOTP={true}
  
  // Alternative methods
  anonymous={true}
  siwe={true}
>
  <AuthView />
</AuthUIProvider>

Examples

Next.js App Router

// app/sign-in/page.tsx
import { AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function SignInPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <AuthView authClient={authClient} />
    </div>
  );
}

"use client";

import { AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';
import { useRouter } from 'next/navigation';

export default function SignInPage() {
  const router = useRouter();

  return (
    <AuthView 
      authClient={authClient}
      onSuccess={() => {
        router.push('/dashboard');
        router.refresh();
      }}
    />
  );
}

Custom Styling

import { AuthView } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function SignInPage() {
  return (
    <div className="container">
      <AuthView 
        authClient={authClient}
        className="max-w-sm mx-auto border rounded-lg p-8 shadow-lg"
      />
    </div>
  );
}

AuthForm - Lower-level form component
SignInForm - Sign-in only
SignUpForm - Sign-up only
ProviderButton - OAuth buttons
AnonymousSignInButton - Guest authentication
SiweSignInButton - Web3 wallet authentication
PasskeyButton - Passkey authentication

AuthView

On this page