@agenus-io/auth-ui

UI de autenticação (login, cadastro, recuperação e reset de senha) para apps React/Next.js.

Instalação

npm i @agenus-io/auth-ui

Peer dependencies

Este pacote espera que seu app forneça (como peer deps): react, react-dom, next, @heroui/react, react-hook-form, @hookform/resolvers, zod, framer-motion, @iconify/react.

Uso

Next.js (App Router): configurar uma única vez no layout

No App Router, o recomendado é envolver todas as rotas de auth com o Layout do pacote uma única vez.

Exemplo em app/auth/layout.tsx:

import { Layout } from "@agenus-io/auth-ui";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Layout
      settings={{
        apiUrl: process.env.NEXT_PUBLIC_API_URL,
        appId: process.env.NEXT_PUBLIC_APP_ID,
        appName: process.env.NEXT_PUBLIC_APP_NAME,
        googleClientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
        facebookClientId: process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID,

        // Rotas do fluxo (opcionais — têm defaults)
        signInUrl: "/auth/sign-in",
        signUpUrl: "/auth/sign-up",
        forgotPasswordUrl: "/auth/forgot-password",

        // Redirects (opcionais — têm defaults)
        defaultRedirect: "/dashboard",
        redirectMap: {},
      }}
      layout={{
        // Branding (opcional)
        // logo: { light: "...", dark: "..." },
        // background: { light: "...", dark: "..." },
        // termsOfUseUrl: "https://...",
        // privacyPolicyUrl: "https://...",
      }}
    >
      {children}
    </Layout>
  );
}

Com isso, as telas (SignInScreen, SignUpScreen, etc.) viram somente UI e não precisam receber apiUrl/appId/....

Variáveis de ambiente suportadas

O pacote também tenta ler automaticamente (quando disponível):

• NEXT_PUBLIC_API_URL
• NEXT_PUBLIC_APP_ID
• NEXT_PUBLIC_APP_NAME
• NEXT_PUBLIC_GOOGLE_CLIENT_ID
• NEXT_PUBLIC_FACEBOOK_CLIENT_ID

Import pelo entrypoint principal:

import { SignInScreen } from "@agenus-io/auth-ui";

Ou pelos subpaths (recomendado para tree-shaking/clareza):

import { SignInScreen } from "@agenus-io/auth-ui/sign-in";
import { SignUpScreen } from "@agenus-io/auth-ui/sign-up";
import { ForgotPasswordScreen } from "@agenus-io/auth-ui/forgot-password";
import { ResetPasswordScreen } from "@agenus-io/auth-ui/reset-password";
import { MagicLinkScreen } from "@agenus-io/auth-ui/magic-link";

Migração (breaking)

• Antes: passava apiUrl/appId/appName/googleClientId/facebookClientId diretamente nas telas.\n- Agora: configure uma vez no Layout/LayoutProvider (ex.: app/auth/layout.tsx) e use as telas apenas para renderizar UI.