@yohangel / auth-react

1.0.0 ▾

1.0.0

MIT

GitHub

Better Auth용 React 로그인 UI: 2FA 로그인, 회원가입, 소셜 버튼, 세션 훅

코드파일 6개컨텍스트약 468토큰검사 통과

설치

$genpm add @yohangel/auth-react

포함 내용

src/lib/auth-react/에 소스 코드, 파일 6개. (10.4kB)
src/lib/auth-react/AGENTS.md에 AI 규칙, 그리고 IDE 규칙 파일.

README

이 패키지에는 README가 없습니다.

약 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.