@adonis-agora/authkit-server 0.34.0

package/build/src/schema/ensure.js

@@ -0,0 +1,262 @@
+/**
+ * Schema das tabelas que o PRÓPRIO authkit possui (nomes fixos). As tabelas
+ * do host (users, webauthn credentials, provider identities, PATs, audit)
+ * ficam de fora de propósito: nome e shape são decisão do host.
+ *
+ * `ensureAuthkitSchema()` é ADITIVO e idempotente:
+ *  - cria as tabelas que faltam;
+ *  - adiciona colunas novas em tabelas existentes (ALTER ADD);
+ *  - nunca dropa nada nem altera tipo de coluna existente.
+ *
+ * Roda automaticamente no boot quando `schema.autoManage` está ligado
+ * (default), ou manualmente dentro de uma migration do host:
+ *
+ * ```ts
+ * // database/migrations/xxxx_authkit_schema.ts
+ * import { BaseSchema } from '@adonisjs/lucid/schema'
+ * import { ensureAuthkitSchema } from '@adonis-agora/authkit-server'
+ *
+ * export default class extends BaseSchema {
+ *   async up() {
+ *     await ensureAuthkitSchema(this.db)
+ *   }
+ * }
+ * ```
+ */
+const TABLES = [
+    {
+        name: 'authkit_oidc_payloads',
+        create: (t) => {
+            t.string('id', 255).notNullable();
+            t.string('model_name', 100).notNullable();
+            t.text('payload').notNullable();
+            t.string('grant_id', 255).nullable().index();
+            t.string('user_code', 255).nullable().index();
+            t.string('uid', 255).nullable().index();
+            t.timestamp('expires_at', { useTz: true }).nullable();
+            t.primary(['model_name', 'id']);
+        },
+        columns: {
+            id: (t) => t.string('id', 255),
+            model_name: (t) => t.string('model_name', 100),
+            payload: (t) => t.text('payload'),
+            grant_id: (t) => t.string('grant_id', 255).nullable().index(),
+            user_code: (t) => t.string('user_code', 255).nullable().index(),
+            uid: (t) => t.string('uid', 255).nullable().index(),
+            expires_at: (t) => t.timestamp('expires_at', { useTz: true }).nullable(),
+        },
+    },
+    {
+        name: 'auth_settings',
+        create: (t) => {
+            t.string('key').notNullable();
+            t.string('organization_id').nullable();
+            t.text('value').notNullable();
+            t.timestamp('updated_at', { useTz: true }).nullable();
+            t.string('updated_by').nullable();
+            t.unique(['key', 'organization_id']);
+        },
+        columns: {
+            key: (t) => t.string('key'),
+            organization_id: (t) => t.string('organization_id').nullable(),
+            value: (t) => t.text('value'),
+            updated_at: (t) => t.timestamp('updated_at', { useTz: true }).nullable(),
+            updated_by: (t) => t.string('updated_by').nullable(),
+        },
+    },
+    {
+        name: 'auth_password_history',
+        create: (t) => {
+            t.increments('id').primary();
+            t.string('account_id').notNullable();
+            t.text('password_hash').notNullable();
+            /* o código sempre envia created_at no INSERT — default de banco desnecessário */
+            t.timestamp('created_at', { useTz: true }).notNullable();
+            t.index(['account_id', 'created_at']);
+        },
+        columns: {
+            account_id: (t) => t.string('account_id'),
+            password_hash: (t) => t.text('password_hash'),
+            created_at: (t) => t.timestamp('created_at', { useTz: true }).nullable(),
+        },
+    },
+    {
+        name: 'auth_mfa',
+        /**
+         * Estado de MFA/TOTP por conta — LIB-OWNED (substitui as colunas
+         * `totp_secret`/`mfa_enabled_at`/`recovery_codes`/`last_totp_step` que viviam
+         * na tabela `users` do host). Keyed por `account_id` (1:1 com a conta).
+         *
+         *  - `totp_secret`   — segredo TOTP encriptado em repouso (text, null = sem enrollment).
+         *  - `mfa_enabled_at`— instante do (re)enrollment confirmado (null = MFA desligado).
+         *  - `recovery_codes`— hashes (sha256) dos recovery codes, single-use (json, null = nenhum).
+         *  - `last_totp_step`— último step TOTP aceito (anti-replay M3; bigint, null = nenhum).
+         */
+        create: (t) => {
+            t.string('account_id').notNullable().primary();
+            t.text('totp_secret').nullable();
+            t.timestamp('mfa_enabled_at', { useTz: true }).nullable();
+            t.json('recovery_codes').nullable();
+            t.bigInteger('last_totp_step').nullable();
+        },
+        columns: {
+            totp_secret: (t) => t.text('totp_secret').nullable(),
+            mfa_enabled_at: (t) => t.timestamp('mfa_enabled_at', { useTz: true }).nullable(),
+            recovery_codes: (t) => t.json('recovery_codes').nullable(),
+            last_totp_step: (t) => t.bigInteger('last_totp_step').nullable(),
+        },
+    },
+    {
+        name: 'auth_organizations',
+        create: (t) => {
+            t.string('id').primary();
+            t.string('name').notNullable();
+            t.string('slug').notNullable().unique();
+            t.string('logo_url').nullable();
+            t.json('metadata').nullable();
+            t.timestamp('created_at', { useTz: true }).nullable();
+            t.timestamp('updated_at', { useTz: true }).nullable();
+        },
+        columns: {
+            name: (t) => t.string('name'),
+            slug: (t) => t.string('slug'),
+            logo_url: (t) => t.string('logo_url').nullable(),
+            metadata: (t) => t.json('metadata').nullable(),
+            created_at: (t) => t.timestamp('created_at', { useTz: true }).nullable(),
+            updated_at: (t) => t.timestamp('updated_at', { useTz: true }).nullable(),
+        },
+    },
+    {
+        name: 'auth_organization_members',
+        create: (t) => {
+            t.string('id').primary();
+            t.string('organization_id')
+                .notNullable()
+                .references('id')
+                .inTable('auth_organizations')
+                .onDelete('CASCADE');
+            t.string('account_id').notNullable();
+            t.string('role').notNullable().defaultTo('member');
+            t.timestamp('created_at', { useTz: true }).nullable();
+            t.timestamp('updated_at', { useTz: true }).nullable();
+            t.unique(['organization_id', 'account_id']);
+        },
+        columns: {
+            organization_id: (t) => t.string('organization_id'),
+            account_id: (t) => t.string('account_id'),
+            role: (t) => t.string('role').defaultTo('member'),
+            created_at: (t) => t.timestamp('created_at', { useTz: true }).nullable(),
+            updated_at: (t) => t.timestamp('updated_at', { useTz: true }).nullable(),
+        },
+    },
+    {
+        name: 'auth_session_revocations',
+        /**
+         * Log de revogações de Back-Channel Logout para clients com sessão cookie-based.
+         * Escrito pelo handler de BCL de cada client (e pela revogação em massa do admin);
+         * lido pelo BackchannelRevocationMiddleware em toda request. Vive no schema `auth`
+         * para ser compartilhável entre todos os apps que apontam para o MESMO banco.
+         */
+        create: (t) => {
+            t.increments('id').primary();
+            // sid do logout_token → revoga UMA sessão SSO específica (nullable: pode vir só sub).
+            t.string('sid').nullable().index();
+            // sub do logout_token → revoga TODAS as sessões do usuário antes de revoked_at.
+            t.string('sub').nullable().index();
+            t.timestamp('revoked_at', { useTz: true }).notNullable();
+            // Prune por idade (revogações mais velhas que o TTL máximo de sessão viram lixo).
+            t.index(['revoked_at']);
+        },
+        columns: {
+            sid: (t) => t.string('sid').nullable().index(),
+            sub: (t) => t.string('sub').nullable().index(),
+            revoked_at: (t) => t.timestamp('revoked_at', { useTz: true }).nullable(),
+        },
+    },
+    {
+        name: 'auth_organization_invitations',
+        create: (t) => {
+            t.string('id').primary();
+            t.string('organization_id')
+                .notNullable()
+                .references('id')
+                .inTable('auth_organizations')
+                .onDelete('CASCADE');
+            t.string('email').notNullable();
+            t.string('role').notNullable().defaultTo('member');
+            t.string('token_hash').notNullable().unique();
+            t.string('invited_by').notNullable();
+            t.timestamp('expires_at', { useTz: true }).notNullable();
+            t.timestamp('accepted_at', { useTz: true }).nullable();
+            t.timestamp('created_at', { useTz: true }).nullable();
+            t.timestamp('updated_at', { useTz: true }).nullable();
+        },
+        columns: {
+            organization_id: (t) => t.string('organization_id'),
+            email: (t) => t.string('email'),
+            role: (t) => t.string('role').defaultTo('member'),
+            token_hash: (t) => t.string('token_hash'),
+            invited_by: (t) => t.string('invited_by'),
+            expires_at: (t) => t.timestamp('expires_at', { useTz: true }).nullable(),
+            accepted_at: (t) => t.timestamp('accepted_at', { useTz: true }).nullable(),
+            created_at: (t) => t.timestamp('created_at', { useTz: true }).nullable(),
+            updated_at: (t) => t.timestamp('updated_at', { useTz: true }).nullable(),
+        },
+    },
+];
+/**
+ * Probe searchPath-aware: `schema.hasTable` no Postgres ignora o
+ * search_path, então testamos com um SELECT de verdade (mesma técnica do
+ * RuntimeSettings).
+ */
+async function tableExists(conn, table) {
+    try {
+        await conn.from(table).limit(1);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+async function columnExists(conn, table, column) {
+    try {
+        await conn.from(table).select(column).limit(1);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Garante que as tabelas do authkit existem e têm todas as colunas que esta
+ * versão da lib espera. Aditivo e idempotente — seguro de rodar em todo boot
+ * e dentro de migrations.
+ */
+export async function ensureAuthkitSchema(db, options = {}) {
+    const conn = options.connection ? db.connection(options.connection) : db.connection();
+    const report = { created: [], altered: {} };
+    for (const def of TABLES) {
+        if (!(await tableExists(conn, def.name))) {
+            try {
+                await conn.schema.createTable(def.name, def.create);
+                report.created.push(def.name);
+                continue;
+            }
+            catch (error) {
+                /**
+                 * Corrida entre instâncias subindo juntas: se outra instância criou
+                 * a tabela entre o probe e o CREATE, segue o jogo; senão, propaga.
+                 */
+                if (!(await tableExists(conn, def.name)))
+                    throw error;
+            }
+        }
+        for (const [column, add] of Object.entries(def.columns)) {
+            if (await columnExists(conn, def.name, column))
+                continue;
+            await conn.schema.alterTable(def.name, (t) => add(t));
+            (report.altered[def.name] ??= []).push(column);
+        }
+    }
+    return report;
+}

package/build/stubs/config/authkit.stub

@@ -0,0 +1,20 @@
+{{{
+  exports({ to: app.configPath('authkit.ts') })
+}}}
+import env from '#start/env'
+import AuthUser from '#models/auth_user'
+import { defineConfig, adapters, lucidAccountStore } from '@adonis-agora/authkit-server'
+
+const authServerConfig = defineConfig({
+  issuer: env.get('AUTHKIT_ISSUER'),
+  adapter: adapters.redis({ connection: 'main' }),
+  jwks: { source: 'managed', algorithm: 'RS256' },
+  ttl: { accessToken: '15m', refreshToken: '30d' },
+  globalRolesClaim: 'roles',
+  accountStore: lucidAccountStore(AuthUser),
+  // Clients são gerenciados em runtime via console admin (/admin/clients) ou
+  // Admin API, sem necessidade de redeploy.
+  // Use: node ace authkit:clients:create --redirect-uri=https://app/cb
+})
+
+export default authServerConfig

package/build/stubs/config/authkit_react.stub

@@ -0,0 +1,52 @@
+{{{
+  exports({ to: app.configPath('authkit.ts'), overwrite: true })
+}}}
+import env from '#start/env'
+import AuthUser from '#models/auth_user'
+import { defineConfig, adapters, inertiaRenderer } from '@adonis-agora/authkit-server'
+
+const authServerConfig = defineConfig({
+  issuer: env.get('AUTHKIT_ISSUER'),
+  adapter: adapters.redis({ connection: 'main' }),
+  jwks: { source: 'managed', algorithm: 'RS256' },
+  clients: [
+    // registre seus clients OIDC aqui
+  ],
+  ttl: { accessToken: '15m', refreshToken: '30d' },
+  globalRolesClaim: 'roles',
+  findAccount: async (sub) => {
+    const user = await AuthUser.find(sub)
+    if (!user) return null
+    return { id: user.id, email: user.email, globalRoles: user.globalRoles }
+  },
+  verifyCredentials: async (email, password) => {
+    const user = await AuthUser.query().where('email', email).first()
+    if (!user || !(await user.verifyPassword(password))) return null
+    return { id: user.id }
+  },
+  /**
+   * Renderer Inertia/React: apenas as views listadas em `views` vão ao Inertia;
+   * as demais (incluindo todas as telas admin/*) recaem silenciosamente no
+   * renderer Edge built-in da lib — evitando SSR crash por página inexistente.
+   *
+   * A lista abaixo corresponde exatamente às páginas que o scaffold gerou.
+   * Adicione entradas aqui somente se criar a página React correspondente.
+   */
+  render: inertiaRenderer({
+    prefix: 'authkit',
+    views: [
+      'login',
+      'consent',
+      'signup',
+      'forgot',
+      'reset',
+      'verify-email',
+      'mfa-challenge',
+      'account/login',
+      'account/tokens',
+      'account/mfa',
+    ],
+  }),
+})
+
+export default authServerConfig

package/build/stubs/main.d.ts

@@ -0,0 +1 @@
+export declare const stubsRoot: string;

package/build/stubs/main.js

@@ -0,0 +1,2 @@
+import { fileURLToPath } from 'node:url';
+export const stubsRoot = fileURLToPath(new URL('./', import.meta.url));

package/build/stubs/models/auth_user.stub

@@ -0,0 +1,22 @@
+{{{
+  exports({ to: app.makePath('app/models/auth_user.ts') })
+}}}
+import { BaseModel, column } from '@adonisjs/lucid/orm'
+import { compose } from '@adonisjs/core/helpers'
+import { withAuthUser, withCredentials } from '@adonis-agora/authkit-server'
+
+/**
+ * Por padrão o AuthKit cria/usa as tabelas na conexão DEFAULT da aplicação
+ * (config/database.ts) — não força nenhum banco/schema próprio.
+ *
+ * Se você quiser isolar o AuthKit num schema ou banco dedicado, defina uma
+ * conexão no config/database.ts do app e referencie aqui, ex.:
+ *
+ *   static connection = 'auth'
+ *
+ * (e aponte as migrations correspondentes para essa conexão).
+ */
+export default class AuthUser extends compose(BaseModel, withAuthUser(), withCredentials()) {
+  @column({ isPrimary: true })
+  declare id: string
+}

package/build/stubs/ui/edge/views/consent.edge

@@ -0,0 +1,13 @@
+{{{
+  exports({ to: app.makePath('resources/views/authkit/consent.edge') })
+}}}
+<!doctype html>
+<html lang="pt-br"><head><meta charset="utf-8"><title>Autorizar</title>
+<script src="https://cdn.tailwindcss.com"></script></head>
+<body class="min-h-screen flex items-center justify-center bg-gray-50">
+  <form method="POST" action="/auth/interaction/{{ uid }}/consent" class="w-full max-w-sm bg-white p-6 rounded-lg shadow">
+    <h1 class="text-lg font-semibold mb-2">Autorizar acesso</h1>
+    <p class="text-sm text-gray-600 mb-4">O app <strong>{{ params.client_id }}</strong> quer acessar sua conta.</p>
+    <button class="w-full bg-black text-white rounded py-2">Autorizar</button>
+  </form>
+</body></html>

package/build/stubs/ui/edge/views/login.edge

@@ -0,0 +1,19 @@
+{{{
+  exports({ to: app.makePath('resources/views/authkit/login.edge') })
+}}}
+<!doctype html>
+<html lang="pt-br"><head><meta charset="utf-8"><title>Entrar</title>
+<script src="https://cdn.tailwindcss.com"></script></head>
+<body class="min-h-screen flex items-center justify-center bg-gray-50">
+  <form method="POST" action="/auth/interaction/{{ uid }}/login" class="w-full max-w-sm bg-white p-6 rounded-lg shadow">
+    <h1 class="text-lg font-semibold mb-4">Entrar</h1>
+    @if(error)
+      <p class="text-red-600 text-sm mb-3">{{ error }}</p>
+    @end
+    <label class="block text-sm mb-1">E-mail</label>
+    <input name="email" type="email" required class="w-full border rounded px-3 py-2 mb-3" />
+    <label class="block text-sm mb-1">Senha</label>
+    <input name="password" type="password" required class="w-full border rounded px-3 py-2 mb-4" />
+    <button class="w-full bg-black text-white rounded py-2">Entrar</button>
+  </form>
+</body></html>

package/build/stubs/ui/react/components/auth_shell.tsx

@@ -0,0 +1,67 @@
+{{{
+  exports({ to: app.makePath('inertia/components/auth_shell.tsx') })
+}}}
+import type { ReactNode } from 'react'
+
+export interface AuthBrand {
+  appName: string
+  accent: string
+  accentSoft?: string
+  company?: string
+  tagline?: string
+  audienceLabel?: string
+}
+
+const COMPANY_FALLBACK = 'Acme'
+
+/**
+ * Layout de duas colunas para as telas de autenticacao do IdP.
+ * Painel esquerdo: marca (empresa guarda-chuva + produto). Painel direito: formulario.
+ */
+export default function AuthShell({
+  brand,
+  children,
+}: {
+  brand?: AuthBrand
+  children: ReactNode
+}) {
+  const accent = brand?.accent ?? '#111827'
+  const accentSoft = brand?.accentSoft ?? accent
+  const company = brand?.company ?? COMPANY_FALLBACK
+  const appName = brand?.appName ?? 'Sua conta'
+  const tagline = brand?.tagline ?? 'Acesso unificado'
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
+      <div className="w-full max-w-4xl overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-black/5 grid md:grid-cols-2">
+        {/* Painel da marca */}
+        <div
+          className="relative flex flex-col justify-between p-8 text-white md:p-10"
+          style={{ backgroundImage: `linear-gradient(135deg, ${accent} 0%, ${accentSoft} 100%)` }}
+        >
+          <div
+            className="text-xs font-semibold uppercase tracking-[0.2em] text-white/80"
+            aria-label="Empresa"
+          >
+            {company}
+          </div>
+
+          <div className="mt-10 md:mt-0">
+            <h2 className="text-2xl font-bold leading-tight md:text-3xl">{appName}</h2>
+            <p className="mt-2 text-sm text-white/85">{tagline}</p>
+            {brand?.audienceLabel && (
+              <span className="mt-4 inline-block rounded-full bg-white/20 px-3 py-1 text-xs font-medium uppercase tracking-wide text-white ring-1 ring-white/30">
+                {brand.audienceLabel}
+              </span>
+            )}
+          </div>
+
+          <div className="mt-10 text-xs text-white/60">© {company}</div>
+        </div>
+
+        {/* Painel do formulario */}
+        <div className="p-8 md:p-10">{children}</div>
+      </div>
+    </div>
+  )
+}

package/build/stubs/ui/react/pages/account/login.tsx

@@ -0,0 +1,56 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/account/login.tsx') })
+}}}
+interface Props {
+  csrfToken: string
+  error?: string
+}
+
+export default function AccountLogin({ csrfToken, error }: Props) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
+      <form
+        method="POST"
+        action="/account/login"
+        className="w-full max-w-sm rounded-2xl bg-white p-8 shadow-xl ring-1 ring-black/5"
+      >
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <div className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">Acme</div>
+        <h1 className="mt-2 text-xl font-semibold text-gray-900">Minha conta</h1>
+        <p className="mt-1 text-sm text-gray-500">Gerencie seus tokens de acesso.</p>
+
+        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+        <label htmlFor="email" className="mt-6 mb-1 block text-sm font-medium text-gray-700">
+          E-mail
+        </label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          required
+          autoFocus
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900"
+        />
+
+        <label htmlFor="password" className="mt-4 mb-1 block text-sm font-medium text-gray-700">
+          Senha
+        </label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          required
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900"
+        />
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+        >
+          Entrar
+        </button>
+      </form>
+    </div>
+  )
+}

package/build/stubs/ui/react/pages/account/mfa.tsx

@@ -0,0 +1,132 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/account/mfa.tsx') })
+}}}
+interface Props {
+  csrfToken: string
+  enabled: boolean
+  enrolling?: boolean
+  secret?: string | null
+  qrDataUrl?: string | null
+  error?: string
+  recoveryCodes?: string[] | null
+}
+
+export default function AccountMfa({
+  csrfToken,
+  enabled,
+  enrolling,
+  secret,
+  qrDataUrl,
+  error,
+  recoveryCodes,
+}: Props) {
+  return (
+    <div className="min-h-screen bg-gray-100 p-4">
+      <div className="mx-auto max-w-2xl">
+        <div className="flex items-center justify-between py-6">
+          <div>
+            <div className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">Acme</div>
+            <h1 className="text-xl font-semibold text-gray-900">Verificação em duas etapas</h1>
+          </div>
+          <form method="POST" action="/account/logout">
+            <input type="hidden" name="_csrf" value={csrfToken} />
+            <button type="submit" className="text-sm text-gray-500 hover:underline">
+              Sair
+            </button>
+          </form>
+        </div>
+
+        {error && <p className="mb-4 text-sm text-red-600">{error}</p>}
+
+        {recoveryCodes && recoveryCodes.length > 0 && (
+          <div className="mb-6 rounded-lg border border-emerald-300 bg-emerald-50 p-4">
+            <p className="text-sm font-medium text-emerald-900">
+              Guarde seus códigos de recuperação — eles não serão mostrados de novo:
+            </p>
+            <ul className="mt-3 grid grid-cols-2 gap-2">
+              {recoveryCodes.map((rc) => (
+                <li key={rc}>
+                  <code className="block rounded bg-white px-3 py-2 text-sm text-emerald-800 ring-1 ring-emerald-200">
+                    {rc}
+                  </code>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {enrolling ? (
+          <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5">
+            <p className="text-sm text-gray-600">
+              Escaneie o QR code com seu app autenticador (Google Authenticator, 1Password, etc.).
+            </p>
+            {qrDataUrl && (
+              <img src={qrDataUrl} alt="QR code TOTP" className="mx-auto my-4 h-48 w-48" />
+            )}
+            {secret && (
+              <>
+                <p className="text-center text-xs text-gray-500">Ou informe manualmente:</p>
+                <code className="mx-auto mt-1 block w-fit break-all rounded bg-gray-100 px-3 py-2 text-sm text-gray-800">
+                  {secret}
+                </code>
+              </>
+            )}
+            <form method="POST" action="/account/mfa/confirm" className="mt-6">
+              <input type="hidden" name="_csrf" value={csrfToken} />
+              <label htmlFor="code" className="mb-1 block text-sm font-medium text-gray-700">
+                Código de confirmação
+              </label>
+              <input
+                id="code"
+                name="code"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={6}
+                autoFocus
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-center text-lg tracking-[0.4em] outline-none focus:border-gray-900"
+              />
+              <button
+                type="submit"
+                className="mt-4 w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white"
+              >
+                Ativar verificação em duas etapas
+              </button>
+            </form>
+          </div>
+        ) : enabled ? (
+          <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5">
+            <p className="text-sm text-gray-700">
+              A verificação em duas etapas está{' '}
+              <span className="font-semibold text-emerald-700">ativa</span> nesta conta.
+            </p>
+            <form method="POST" action="/account/mfa/disable" className="mt-4">
+              <input type="hidden" name="_csrf" value={csrfToken} />
+              <button
+                type="submit"
+                className="rounded-lg border border-red-300 px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50"
+              >
+                Desativar
+              </button>
+            </form>
+          </div>
+        ) : (
+          <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5">
+            <p className="text-sm text-gray-700">
+              A verificação em duas etapas está desativada. Ative-a para proteger sua conta com um app
+              autenticador.
+            </p>
+            <form method="POST" action="/account/mfa/enroll" className="mt-4">
+              <input type="hidden" name="_csrf" value={csrfToken} />
+              <button
+                type="submit"
+                className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
+              >
+                Ativar verificação em duas etapas
+              </button>
+            </form>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}