@yohangel / auth-react

1.0.0 ▾

1.0.0

MIT

GitHub

Better Auth 用 React ログイン UI：2FA 付きサインイン、サインアップ、ソーシャルボタン、フック

コード6 ファイルコンテキスト約 468 トークンスキャン合格

約 468 トークン→ src/lib/auth-react/AGENTS.md→ .cursor/rules/genpm-yohangel-auth-react.mdc

これは AI が src/lib/auth-react で作業するときに読む内容そのものです。それ以外はコンテキストに追加されません。

@yohangel/auth-react — rules for AI agents

Purpose

React client for a server running @yohangel/auth (Next.js, Express, NestJS…): useSession, unstyled accessible forms (sign-in with TOTP second step, sign-up, social buttons) and UI guards. Client-only; it never decides access by itself.

Module map

index.ts — public API.
client.ts — authClient (Better Auth React client + 2FA plugin), useSession, signIn, signUp, signOut, AUTH_BASE_URL.
forms.tsx — SignInForm, SignUpForm, SocialButtons, defaultLabels / AuthLabels.
guard.tsx — SignedIn (render with/without session), SignOutButton.

Integration (do this after installing)

Same origin as the API (Next.js, or SPA served by the same server): nothing to configure.
API on another origin: set AUTH_BASE_URL in client.ts to the API URL, add this app's origin to AUTH_TRUSTED_ORIGINS on the server, and enable CORS with credentials: true there.
Pages: <SignInForm redirectTo="/dashboard" />, <SignUpForm redirectTo="/welcome" />, <SocialButtons providers={['github']} /> (only providers configured on the server).
In Next.js these are Client Components: put 'use client' in the file that renders them.
Translate by passing labels={{ signIn: '…', password: '…' }}; style via className and the [data-auth-error] attribute.

Conventions

Use useSession() for UI state only (show name, hide buttons). Every protected API/page must check the session on the server.
Keep the password minLength in sync with the server (12).

Don't

Don't store tokens in localStorage/sessionStorage: the session lives in an HttpOnly cookie managed by Better Auth.
Don't pass absolute URLs from query params to redirectTo (the components only follow internal paths).
Don't log form values or errors that may contain the password.

# @yohangel/auth-react — rules for AI agents

## Purpose
React client for a server running `@yohangel/auth` (Next.js, Express, NestJS…): `useSession`, unstyled accessible forms (sign-in with TOTP second step, sign-up, social buttons) and UI guards. Client-only; it never decides access by itself.

## Module map
- `index.ts` — public API.
- `client.ts` — `authClient` (Better Auth React client + 2FA plugin), `useSession`, `signIn`, `signUp`, `signOut`, `AUTH_BASE_URL`.
- `forms.tsx` — `SignInForm`, `SignUpForm`, `SocialButtons`, `defaultLabels` / `AuthLabels`.
- `guard.tsx` — `SignedIn` (render with/without session), `SignOutButton`.

## Integration (do this after installing)
1. Same origin as the API (Next.js, or SPA served by the same server): nothing to configure.
2. API on another origin: set `AUTH_BASE_URL` in `client.ts` to the API URL, add this app's origin to `AUTH_TRUSTED_ORIGINS` on the server, and enable CORS with `credentials: true` there.
3. Pages: `<SignInForm redirectTo="/dashboard" />`, `<SignUpForm redirectTo="/welcome" />`, `<SocialButtons providers={['github']} />` (only providers configured on the server).
4. In Next.js these are Client Components: put `'use client'` in the file that renders them.
5. Translate by passing `labels={{ signIn: '…', password: '…' }}`; style via `className` and the `[data-auth-error]` attribute.

## Conventions
- Use `useSession()` for UI state only (show name, hide buttons). Every protected API/page must check the session on the server.
- Keep the password `minLength` in sync with the server (12).

## Don't
- Don't store tokens in `localStorage`/`sessionStorage`: the session lives in an HttpOnly cookie managed by Better Auth.
- Don't pass absolute URLs from query params to `redirectTo` (the components only follow internal paths).
- Don't log form values or errors that may contain the password.

.genpmignore 適用後に組み込まれる正確なツリーです。固定先:

src/lib/auth-react/client.ts読み取り専用 · 7145b9d

// Cliente de Better Auth para React (Next.js, Vite, Remix…). Mismo origen por defecto: si tu API vive en otro
// dominio, pon aquí su URL y añade el origen de esta app a AUTH_TRUSTED_ORIGINS en el servidor.
import { twoFactorClient } from 'better-auth/client/plugins';
import { createAuthClient } from 'better-auth/react';

export const AUTH_BASE_URL: string | undefined = undefined;

export const authClient = createAuthClient({
  ...(AUTH_BASE_URL ? { baseURL: AUTH_BASE_URL } : {}),
  plugins: [twoFactorClient()],
});

export const { useSession, signIn, signUp, signOut } = authClient;