# Better Auth - Core Examples

> Essential patterns for authentication. See [SKILL.md](../SKILL.md) for core concepts and [reference.md](../reference.md) for decision frameworks.

**Additional Examples:**

- [oauth.md](oauth.md) - Social providers, Generic OAuth, OAuth Provider plugin
- [two-factor.md](two-factor.md) - TOTP setup and verification
- [organizations.md](organizations.md) - Multi-tenancy and invitations
- [sessions.md](sessions.md) - Session configuration, cookie caching, stateless

---

## Client-Side Sign Up

```typescript
// hooks/use-sign-up.ts
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

interface SignUpData {
  name: string;
  email: string;
  password: string;
}

export function useSignUp() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const signUp = async (data: SignUpData) => {
    setIsPending(true);
    setError(null);

    try {
      const result = await authClient.signUp.email({
        name: data.name,
        email: data.email,
        password: data.password,
        callbackURL: "/dashboard",
      });

      if (result.error) {
        setError(result.error.message);
        return { success: false };
      }

      return { success: true };
    } catch (err) {
      setError("An unexpected error occurred");
      return { success: false };
    } finally {
      setIsPending(false);
    }
  };

  return { signUp, isPending, error };
}
```

**Why good:** Handles loading and error states, callbackURL redirects after signup, error from Better Auth surfaced to UI

---

## Client-Side Sign In

```typescript
// hooks/use-sign-in.ts
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

interface SignInData {
  email: string;
  password: string;
  rememberMe?: boolean;
}

export function useSignIn() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [requires2FA, setRequires2FA] = useState(false);

  const signIn = async (data: SignInData) => {
    setIsPending(true);
    setError(null);

    try {
      const result = await authClient.signIn.email({
        email: data.email,
        password: data.password,
        rememberMe: data.rememberMe ?? false,
        callbackURL: "/dashboard",
      });

      // Handle 2FA requirement
      if (result.data?.twoFactorRedirect) {
        setRequires2FA(true);
        return { success: false, requires2FA: true };
      }

      if (result.error) {
        setError(result.error.message);
        return { success: false };
      }

      return { success: true };
    } catch (err) {
      setError("An unexpected error occurred");
      return { success: false };
    } finally {
      setIsPending(false);
    }
  };

  return { signIn, isPending, error, requires2FA };
}
```

**Why good:** rememberMe extends session duration, twoFactorRedirect flag enables 2FA flow, structured return type for component handling

---

## Drizzle Database Adapter

### Database Setup

```typescript
// lib/db.ts
import { drizzle } from "drizzle-orm/node-postgres";
import { Pool } from "pg";

import * as schema from "./schema";

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});

export const db = drizzle(pool, { schema });
```

### Auth Configuration

```typescript
// lib/auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle"; // or "@better-auth/drizzle-adapter" (v1.5+)

import { db } from "@/lib/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg", // or "sqlite" or "mysql"
    // Optional: use your existing schema table names
    // schema: {
    //   user: schema.users,
    //   session: schema.sessions,
    // },
  }),
  // Enable experimental joins for 2-3x faster queries
  experimental: {
    joins: true,
  },
});
```

### Schema Generation Commands

```bash
# For Drizzle adapter, use this 3-step workflow:

# Step 1: Generate Better Auth schema
npx auth@latest generate

# Step 2: Generate Drizzle migration file
npx drizzle-kit generate

# Step 3: Apply migration to database
npx drizzle-kit migrate

# NOTE: Better Auth's own `migrate` command only works with Kysely adapter
# For Drizzle, always use the 3-step workflow above
```

**Why good:** drizzleAdapter integrates with existing Drizzle setup, experimental joins improve performance, schema customization for existing tables

---

## Client Configuration

Better Auth provides framework-specific clients: `better-auth/react`, `better-auth/vue`, `better-auth/svelte`, `better-auth/solid`, and `better-auth/client` (vanilla). All share the same API -- only the import path differs. Examples below use the React client.

### Basic Client

```typescript
// lib/auth-client.ts
import { createAuthClient } from "better-auth/react"; // or /vue, /svelte, /solid, /client

export const authClient = createAuthClient({
  baseURL: process.env.APP_URL || "http://localhost:3000",
});
```

### With Plugins

```typescript
// lib/auth-client.ts
import { createAuthClient } from "better-auth/react";
import { twoFactorClient } from "better-auth/client/plugins";
import { organizationClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  baseURL: process.env.APP_URL || "http://localhost:3000",
  plugins: [
    twoFactorClient({
      twoFactorPage: "/auth/two-factor",
    }),
    organizationClient(),
  ],
});
```

### useSession Hook

```typescript
// components/user-menu.tsx
import { authClient } from "@/lib/auth-client";

export function UserMenu() {
  // Reactive session - updates on auth state changes
  const { data: session, isPending, error } = authClient.useSession();

  if (isPending) {
    return <div>Loading...</div>;
  }

  if (!session?.user) {
    return <a href="/auth/sign-in">Sign In</a>;
  }

  return (
    <div>
      <span>{session.user.email}</span>
      <button
        onClick={() => authClient.signOut()}
        type="button"
      >
        Sign Out
      </button>
    </div>
  );
}
```

**Why good:** useSession is reactive and updates on auth changes, includes `refetch` method for manual refresh, signOut handles cookie cleanup

---

## Password Reset

Use `authClient.requestPasswordReset` (renamed from `forgotPassword` in v1.4).

```typescript
// hooks/use-password-reset.ts
import { useState } from "react";
import { authClient } from "@/lib/auth-client";

export function usePasswordReset() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const requestReset = async (email: string) => {
    setIsPending(true);
    setError(null);

    try {
      const result = await authClient.requestPasswordReset({
        email,
        redirectTo: "/auth/reset-password",
      });

      if (result.error) {
        setError(result.error.message);
        return;
      }

      setSuccess(true);
    } catch (err) {
      setError("Failed to send reset email");
    } finally {
      setIsPending(false);
    }
  };

  return { requestReset, isPending, error, success };
}
```

---

## Server-Side Password Verification

Use `auth.api.verifyPassword` to confirm identity before sensitive operations (e.g., email change, account deletion).

```typescript
// routes/settings.ts
import { auth } from "@/lib/auth";

const HTTP_STATUS_UNAUTHORIZED = 401;

app.post("/settings/change-email", async (c) => {
  const session = c.get("session");
  const { password, newEmail } = await c.req.json();

  const isValid = await auth.api.verifyPassword({
    body: { email: session.user.email, password },
  });

  if (!isValid) {
    return c.json({ error: "Invalid password" }, HTTP_STATUS_UNAUTHORIZED);
  }

  // Proceed with email change...
  return c.json({ success: true }, 200);
});
```

---

## Bundle Size Optimization

Use `better-auth/minimal` to reduce bundle size when using ORM adapters (excludes Kysely).

```typescript
// lib/auth.ts - Use minimal entry point for smaller bundles
import { betterAuth } from "better-auth/minimal";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/lib/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
});
```

**When to use:** Projects using Drizzle, Prisma, or MongoDB adapters (not direct database connections)

# Better Auth - OAuth Examples

> OAuth provider patterns for social login, Generic OAuth, and OAuth Provider plugin. See [SKILL.md](../SKILL.md) for core concepts.

**Additional Examples:**

- [core.md](core.md) - Sign up, sign in, client setup, database adapter
- [two-factor.md](two-factor.md) - TOTP setup and verification
- [organizations.md](organizations.md) - Multi-tenancy and invitations
- [sessions.md](sessions.md) - Session configuration, cookie caching, stateless

---

## Server Configuration

```typescript
// lib/auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/lib/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      // Always get refresh token (Google only issues on first consent)
      accessType: "offline",
      prompt: "consent",
    },
  },
});
```

**Why good:** Environment variables protect secrets, accessType: "offline" ensures refresh tokens from Google, prompt: "consent" forces token refresh

---

## Environment Variables

```bash
# .env.local
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Required for Better Auth
BETTER_AUTH_SECRET=your_32_character_random_string
BETTER_AUTH_URL=http://localhost:3000
```

---

## Client-Side OAuth Sign In

```typescript
// components/oauth-buttons.tsx
import { authClient } from "@/lib/auth-client";

export function OAuthButtons() {
  const handleGitHubSignIn = async () => {
    await authClient.signIn.social({
      provider: "github",
      callbackURL: "/dashboard",
    });
  };

  const handleGoogleSignIn = async () => {
    await authClient.signIn.social({
      provider: "google",
      callbackURL: "/dashboard",
    });
  };

  return (
    <div>
      <button onClick={handleGitHubSignIn} type="button">
        Continue with GitHub
      </button>
      <button onClick={handleGoogleSignIn} type="button">
        Continue with Google
      </button>
    </div>
  );
}

```

**Why good:** callbackURL handles post-auth redirect, social provider string is type-safe from Better Auth types

---

## Bad Example - Hardcoded Secrets

```typescript
// BAD Example - Hardcoded secrets
import { betterAuth } from "better-auth";

export const auth = betterAuth({
  socialProviders: {
    github: {
      clientId: "abc123", // BAD: Hardcoded in source
      clientSecret: "secret456", // BAD: Commits to git
    },
  },
});
```

**Why bad:** Hardcoded secrets committed to version control, exposed in build logs, impossible to rotate without code change

---

## Generic OAuth Plugin

Use any OAuth 2.0 or OIDC provider with the Generic OAuth plugin. Supports discovery URL for auto-configuration.

```typescript
// lib/auth.ts
import { betterAuth } from "better-auth";
import { genericOAuth } from "better-auth/plugins";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/lib/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  plugins: [
    genericOAuth({
      config: [
        {
          providerId: "custom-idp",
          discoveryUrl:
            "https://idp.example.com/.well-known/openid-configuration",
          clientId: process.env.CUSTOM_IDP_CLIENT_ID!,
          clientSecret: process.env.CUSTOM_IDP_CLIENT_SECRET!,
          scopes: ["openid", "email", "profile"],
          pkce: true,
          mapProfileToUser: (profile) => ({
            name: profile.name,
            email: profile.email,
            image: profile.picture,
          }),
        },
        // Pre-configured helpers: auth0(), keycloak(), okta(), microsoftEntraId(), slack()
      ],
    }),
  ],
});
```

Client-side usage with Generic OAuth:

```typescript
await authClient.signIn.oauth2({
  providerId: "custom-idp",
  callbackURL: "/dashboard",
});
```

**Why good:** Works with any OAuth2/OIDC provider, PKCE for enhanced security, pre-configured helpers for common providers

---

## OAuth Provider Plugin (Act as OAuth Server)

Use `oAuthProvider()` to let your app act as an OAuth 2.1 provider for other services. Replaces deprecated `oidcProvider`.

```typescript
import { oAuthProvider } from "better-auth/plugins";

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  plugins: [
    oAuthProvider({
      clients: [
        {
          clientId: "first-party-app",
          clientSecret: process.env.FIRST_PARTY_SECRET!,
          redirectUris: ["https://app.example.com/callback"],
          skipConsent: true, // Trusted clients skip consent screen
        },
        {
          clientId: "third-party",
          clientSecret: process.env.THIRD_PARTY_SECRET!,
          redirectUris: ["https://partner.example.com/oauth/callback"],
          skipConsent: false,
        },
      ],
    }),
  ],
});
```

**Why good:** OAuth 2.1 compliant, trusted client support for first-party apps, consent screen control

# Better Auth - Organization Multi-Tenancy Examples

> Organization and multi-tenancy patterns for team management. See [SKILL.md](../SKILL.md) for core concepts.

**Additional Examples:**

- [core.md](core.md) - Sign up, sign in, client setup, database adapter
- [oauth.md](oauth.md) - Social providers, Generic OAuth
- [two-factor.md](two-factor.md) - TOTP setup and verification
- [sessions.md](sessions.md) - Session configuration, cookie caching, stateless

---

## Server Configuration

```typescript
// lib/auth.ts
import { betterAuth } from "better-auth";
import { organization } from "better-auth/plugins";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/lib/db";
import { sendEmail } from "@/lib/email";

const ORG_LIMIT_PER_USER = 5;
const INVITATION_EXPIRY_SECONDS = 48 * 60 * 60; // 48 hours

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  plugins: [
    organization({
      organizationLimit: ORG_LIMIT_PER_USER,
      invitationExpiresIn: INVITATION_EXPIRY_SECONDS,
      sendInvitationEmail: async ({ email, invitationId, organization }) => {
        const inviteUrl = `${process.env.APP_URL}/accept-invite?id=${invitationId}`;
        await sendEmail({
          to: email,
          subject: `Join ${organization.name}`,
          html: `<a href="${inviteUrl}">Accept invitation</a>`,
        });
      },
    }),
  ],
});
```

---

## Client Configuration

```typescript
// lib/auth-client.ts
import { createAuthClient } from "better-auth/react";
import { organizationClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  baseURL: process.env.APP_URL || "http://localhost:3000",
  plugins: [organizationClient()],
});
```

---

## Create Organization

```typescript
// hooks/use-create-org.ts
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

interface CreateOrgData {
  name: string;
  slug: string;
}

export function useCreateOrg() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const createOrg = async (data: CreateOrgData) => {
    setIsPending(true);
    setError(null);

    try {
      const result = await authClient.organization.create({
        name: data.name,
        slug: data.slug,
      });

      if (result.error) {
        setError(result.error.message);
        return { success: false };
      }

      // Set as active organization
      await authClient.organization.setActive({
        organizationId: result.data.id,
      });

      return { success: true, organization: result.data };
    } catch (err) {
      setError("Failed to create organization");
      return { success: false };
    } finally {
      setIsPending(false);
    }
  };

  return { createOrg, isPending, error };
}
```

---

## Invite Members

```typescript
// hooks/use-invite-member.ts
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

type Role = "owner" | "admin" | "member";

interface InviteData {
  email: string;
  role: Role;
  organizationId: string;
}

export function useInviteMember() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const inviteMember = async (data: InviteData) => {
    setIsPending(true);
    setError(null);

    try {
      const result = await authClient.organization.inviteMember({
        email: data.email,
        role: data.role,
        organizationId: data.organizationId,
      });

      if (result.error) {
        setError(result.error.message);
        return { success: false };
      }

      return { success: true };
    } catch (err) {
      setError("Failed to send invitation");
      return { success: false };
    } finally {
      setIsPending(false);
    }
  };

  return { inviteMember, isPending, error };
}
```

**Why good:** organizationLimit prevents abuse, invitation emails customizable, setActive switches org context for session

# Better Auth - Session Management Examples

> Session configuration and management patterns. See [SKILL.md](../SKILL.md) for core concepts.

**Additional Examples:**

- [core.md](core.md) - Sign up, sign in, client setup, database adapter
- [oauth.md](oauth.md) - Social providers, Generic OAuth
- [two-factor.md](two-factor.md) - TOTP setup and verification
- [organizations.md](organizations.md) - Multi-tenancy and invitations

---

## Server Configuration

```typescript
// lib/auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/lib/db";

const SESSION_EXPIRES_IN_SECONDS = 60 * 60 * 24 * 7; // 7 days
const SESSION_UPDATE_AGE_SECONDS = 60 * 60 * 24; // Refresh daily
const CACHE_MAX_AGE_SECONDS = 5 * 60; // 5 minutes
const FRESH_AGE_SECONDS = 60 * 5; // 5 minutes for sensitive operations

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  session: {
    expiresIn: SESSION_EXPIRES_IN_SECONDS,
    updateAge: SESSION_UPDATE_AGE_SECONDS,
    freshAge: FRESH_AGE_SECONDS,
    // Cookie caching reduces database hits
    cookieCache: {
      enabled: true,
      maxAge: CACHE_MAX_AGE_SECONDS,
      strategy: "compact", // or "jwt" or "jwe"
    },
  },
});
```

**Why good:** cookieCache reduces DB queries (verify signature instead), freshAge requires recent auth for sensitive ops, named constants make policy auditable

---

## Revoke Sessions

```typescript
// hooks/use-sessions.ts
import { authClient } from "@/lib/auth-client";

export async function listSessions() {
  const result = await authClient.session.listSessions();
  return result.data ?? [];
}

export async function revokeSession(token: string) {
  await authClient.session.revokeSession({ token });
}

export async function revokeOtherSessions() {
  await authClient.session.revokeOtherSessions();
}
```

**Why good:** listSessions enables "active sessions" UI, revokeOtherSessions useful after password change

---

## Cookie Cache Strategies

Three encoding strategies for session cookies:

```typescript
// lib/auth.ts
const CACHE_MAX_AGE_SECONDS = 5 * 60; // 5 minutes

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  session: {
    cookieCache: {
      enabled: true,
      maxAge: CACHE_MAX_AGE_SECONDS,
      // Choose based on requirements:
      strategy: "compact", // Default: smallest, fastest
      // strategy: "jwt",  // Readable, verifiable by third parties
      // strategy: "jwe",  // Encrypted, hides session data
    },
  },
});
```

| Strategy  | Size     | Security  | Use Case                                |
| --------- | -------- | --------- | --------------------------------------- |
| `compact` | Smallest | Signed    | Internal apps, performance-critical     |
| `jwt`     | Medium   | Signed    | API consumers, third-party verification |
| `jwe`     | Largest  | Encrypted | Sensitive data, hide from client        |

**Gotcha:** Revoked sessions persist in cache until `maxAge` expires on other devices.

---

## Session Versioning for Mass Invalidation

For stateless sessions, increment version to invalidate all sessions:

```typescript
// lib/auth.ts
export const auth = betterAuth({
  session: {
    cookieCache: {
      enabled: true,
      maxAge: CACHE_MAX_AGE_SECONDS,
      strategy: "jwe",
      // Increment to invalidate ALL stateless sessions
      version: 2, // Was 1
    },
  },
});
```

**Why good:** Mass invalidation without database, useful for security incidents

---

## Full Stateless Mode (No Database)

Omit the `database` option entirely for fully stateless sessions stored in encrypted cookies.

```typescript
// lib/auth.ts - No database dependency
import { betterAuth } from "better-auth";

const CACHE_MAX_AGE_SECONDS = 60 * 5;

export const auth = betterAuth({
  // No database option = stateless mode
  emailAndPassword: { enabled: true },
  session: {
    cookieCache: {
      enabled: true,
      maxAge: CACHE_MAX_AGE_SECONDS,
      strategy: "jwe", // Encrypted for security
      refreshCache: true, // Auto-refresh before expiry
    },
  },
});
```

**Why good:** No database dependency, works with edge functions, auto-refresh prevents expiration during active sessions

**Trade-off:** Individual sessions cannot be revoked - increment `version` to invalidate all sessions at once

# Better Auth - Two-Factor Authentication Examples

> TOTP-based two-factor authentication patterns. See [SKILL.md](../SKILL.md) for core concepts.

**Additional Examples:**

- [core.md](core.md) - Sign up, sign in, client setup, database adapter
- [oauth.md](oauth.md) - Social providers, Generic OAuth
- [organizations.md](organizations.md) - Multi-tenancy and invitations
- [sessions.md](sessions.md) - Session configuration, cookie caching, stateless

---

## Server Configuration

```typescript
// lib/auth.ts
import { betterAuth } from "better-auth";
import { twoFactor } from "better-auth/plugins";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/lib/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  emailAndPassword: { enabled: true },
  plugins: [
    twoFactor({
      issuer: "MyApp", // Shown in authenticator app
      // Optional: skip verification on enable (not recommended)
      // skipVerificationOnEnable: false,
    }),
  ],
});
```

After adding the plugin, run:

```bash
# Step 1: Generate Better Auth schema
npx auth@latest generate

# Step 2: Generate Drizzle migration
npx drizzle-kit generate

# Step 3: Apply migration
npx drizzle-kit migrate
```

---

## Client Configuration

```typescript
// lib/auth-client.ts
import { createAuthClient } from "better-auth/react";
import { twoFactorClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  baseURL: process.env.APP_URL || "http://localhost:3000",
  plugins: [
    twoFactorClient({
      twoFactorPage: "/auth/two-factor", // Redirect for 2FA verification
    }),
  ],
});
```

---

## Enable 2FA Flow

```typescript
// components/enable-2fa.tsx
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

export function Enable2FA() {
  const [totpUri, setTotpUri] = useState<string | null>(null);
  const [backupCodes, setBackupCodes] = useState<string[]>([]);
  const [error, setError] = useState<string | null>(null);

  const handleEnable = async (password: string) => {
    try {
      const result = await authClient.twoFactor.enable({
        password,
      });

      if (result.error) {
        setError(result.error.message);
        return;
      }

      // Get TOTP URI for QR code generation
      setTotpUri(result.data?.totpURI ?? null);
      setBackupCodes(result.data?.backupCodes ?? []);
    } catch (err) {
      setError("Failed to enable 2FA");
    }
  };

  return (
    <div>
      {/* Render QR code from totpUri */}
      {/* Display backup codes for user to save */}
    </div>
  );
}

```

---

## Verify 2FA on Sign In

```typescript
// components/verify-2fa.tsx
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

export function Verify2FA() {
  const [code, setCode] = useState("");
  const [error, setError] = useState<string | null>(null);

  const handleVerify = async () => {
    try {
      const result = await authClient.twoFactor.verifyTOTP({
        code,
        trustDevice: true, // Skip 2FA on this device for future logins
      });

      if (result.error) {
        setError("Invalid code. Please try again.");
        return;
      }

      // Redirect to dashboard on success
      window.location.href = "/dashboard";
    } catch (err) {
      setError("Verification failed");
    }
  };

  return (
    <div>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="Enter 6-digit code"
        maxLength={6}
      />
      <button onClick={handleVerify} type="button">
        Verify
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

```

**Why good:** trustDevice reduces friction for trusted devices, backup codes stored for recovery, TOTP secrets encrypted in database

# Better Auth - v1.4+ Features (Relocated)

> Content from this file has been merged into the appropriate topic files:

- Stateless sessions, cookie cache strategies -> [sessions.md](sessions.md)
- Generic OAuth, OAuth Provider plugin -> [oauth.md](oauth.md)
- Password reset, verifyPassword, bundle optimization -> [core.md](core.md)
- Experimental joins -> [core.md](core.md) (Drizzle adapter section)