@yohangel / auth-react

1.0.0 ▾

1.0.0

MIT

GitHub

Better Auth 的 React 登录界面：支持双重验证的登录、注册、社交按钮和会话 Hook

代码6 个文件上下文约 468 个 token扫描通过

安装

$genpm add @yohangel/auth-react

你将获得

源代码位于 src/lib/auth-react/，共 6 个文件。 (10.4 kB)
AI 规则位于 src/lib/auth-react/AGENTS.md，另附 IDE 规则文件。

README

此包没有 README。

约 468 个 token→ 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.