Auth Surface

Экран авторизации — вход/passkey/SSO/magic-link с состояниями. Двухколоночный шелл + карточка.

Переключайте состояния кнопками над превью.

OraculПравовые документы

Войдите или создайте новый аккаунт

или

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { AuthSurface, type AuthView } from "@/components/ui/auth-surface";

const VIEWS: { id: AuthView; label: string }[] = [
  { id: "form", label: "Вход" },
  { id: "passkey-prompt", label: "Passkey" },
  { id: "sso-email", label: "SSO" },
  { id: "passkey-stage", label: "Passkey · email" },
  { id: "magic-link-sent", label: "Письмо" },
  { id: "magic-link-expired", label: "Ссылка истекла" },
  { id: "forgot-password", label: "Сброс пароля" },
  { id: "forgot-password-sent", label: "Сброс · отправлен" },
];

export default function Particle() {
  const [view, setView] = React.useState<AuthView>("form");
  const [email, setEmail] = React.useState("anna@yandex.ru");
  const [ssoEmail, setSsoEmail] = React.useState("");

  return (
    <div className="flex w-full flex-col gap-3">
      <div className="flex flex-wrap gap-1.5">
        {VIEWS.map((v) => (
          <button
            className={cn(
              "rounded-md px-2.5 py-1 text-xs transition-colors",
              view === v.id
                ? "bg-accent text-foreground"
                : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
            )}
            key={v.id}
            onClick={() => setView(v.id)}
            type="button"
          >
            {v.label}
          </button>
        ))}
      </div>
      <div className="h-130 w-full overflow-hidden rounded-xl border">
        <AuthSurface
          email={email}
          mailProvider={{ label: "Яндекс Почту" }}
          onBack={() => setView("form")}
          onChangeEmail={() => setView("form")}
          onEmailChange={setEmail}
          onSkipPasskey={() => setView("form")}
          onSsoEmailChange={setSsoEmail}
          onSsoTrigger={() => setView("sso-email")}
          ssoEmail={ssoEmail}
          view={view}
        />
      </div>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/auth-surface

Использование

import { AuthSurface } from "@/components/ui/auth-surface";
 
<AuthSurface
  view={view}
  email={email}
  onEmailChange={setEmail}
  onContinue={submitEmail}
  onProvider={(p) => signInWith(p.id)}
  onPasskey={passkeySignIn}
  onSsoTrigger={() => setView("sso-email")}
  media={<VideoBackground />}
/>

Презентационный (plain-props): приложение владеет authClient, видео-фоном (media), OAuth/passkey/magic-link. Компонент рендерит экраны и их состояния. Раскладка на container-queries (@3xl) — две колонки на широком экране, одна узкая колонка на узком (в т.ч. в превью). Без хардкода — шкала и токены ДС.

Prop	Тип	Описание
`view`	`AuthView`	`form` / `passkey-prompt` / `sso-email` / `passkey-stage` / `magic-link-sent` / `magic-link-expired`
`media`	`ReactNode`	Левая панель (видео/брендинг); по умолчанию — приглушённый блок.
`email` / `onEmailChange`	`string` / `(v)=>void`	Почта.
`onContinue` / `continuePending`	`()=>void` / `bool`	Сабмит почты.
`foreignEmail`	`bool`	Показать предупреждение об иностранной почте.
`providers`	`AuthProvider[]`	OAuth-кнопки (по умолчанию Яндекс ID, VK ID).
`hasPasskey` / `onPasskey` / `passkeyPending`	—	Быстрый вход по passkey.
`onSsoTrigger` / `ssoEmail` / `onSsoEmailChange` / `ssoError` / `ssoPending` / `onSsoSubmit`	—	SSO-поток.
`magicLinkPending` / `onResend` / `mailProvider`	—	Magic-link отправка/повтор + кнопка «Открыть почту».
`onBack` / `onChangeEmail`	`()=>void`	Назад / сменить email.

На этой странице

Установка Использование API