@dudousxd/adonis-authkit-server 0.1.0

package/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">educ(a)ção</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/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">educ(a)ção</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>
+  )
+}

package/stubs/ui/react/pages/account/tokens.tsx

@@ -0,0 +1,88 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/account/tokens.tsx') })
+}}}
+interface TokenRow {
+  id: string
+  name: string
+  scopes: string[]
+  audience: string | null
+  lastUsedAt: string | null
+  createdAt: string
+}
+interface Props {
+  csrfToken: string
+  createdToken: string | null
+  tokens: TokenRow[]
+}
+
+export default function AccountTokens({ csrfToken, createdToken, tokens }: 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">educ(a)ção</div>
+            <h1 className="text-xl font-semibold text-gray-900">Tokens de acesso</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>
+
+        {createdToken && (
+          <div className="mb-6 rounded-lg border border-emerald-300 bg-emerald-50 p-4">
+            <p className="text-sm font-medium text-emerald-900">
+              Token criado — copie agora, não será mostrado de novo:
+            </p>
+            <code className="mt-2 block break-all rounded bg-white px-3 py-2 text-sm text-emerald-800 ring-1 ring-emerald-200">
+              {createdToken}
+            </code>
+          </div>
+        )}
+
+        <form
+          method="POST"
+          action="/account/tokens"
+          className="mb-6 flex gap-2 rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5"
+        >
+          <input type="hidden" name="_csrf" value={csrfToken} />
+          <input
+            name="name"
+            placeholder="Nome do token (ex.: CI deploy)"
+            className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900"
+          />
+          <button type="submit" className="rounded-lg bg-gray-900 px-4 text-sm font-semibold text-white">
+            Criar
+          </button>
+        </form>
+
+        <div className="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-black/5">
+          {tokens.length === 0 ? (
+            <p className="p-6 text-sm text-gray-500">Nenhum token ainda.</p>
+          ) : (
+            tokens.map((t) => (
+              <div key={t.id} className="flex items-center justify-between border-b border-gray-100 p-4 last:border-0">
+                <div>
+                  <p className="text-sm font-medium text-gray-900">{t.name}</p>
+                  <p className="text-xs text-gray-500">
+                    Criado em {new Date(t.createdAt).toLocaleDateString('pt-BR')}
+                    {t.lastUsedAt ? ` · último uso ${new Date(t.lastUsedAt).toLocaleDateString('pt-BR')}` : ' · nunca usado'}
+                  </p>
+                </div>
+                <form method="POST" action={`/account/tokens/${t.id}/revoke`}>
+                  <input type="hidden" name="_csrf" value={csrfToken} />
+                  <button type="submit" className="text-sm text-red-600 hover:underline">
+                    Revogar
+                  </button>
+                </form>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/stubs/ui/react/pages/consent.tsx

@@ -0,0 +1,39 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/consent.tsx') })
+}}}
+import AuthShell, { type AuthBrand } from '../../components/auth_shell'
+
+export default function AuthkitConsent({
+  uid,
+  params,
+  csrfToken,
+  brand,
+}: {
+  uid: string
+  params: { client_id: string }
+  csrfToken: string
+  brand?: AuthBrand
+}) {
+  const accent = brand?.accent ?? '#111827'
+  const appName = brand?.appName ?? params.client_id
+
+  return (
+    <AuthShell brand={brand}>
+      <form method="POST" action={'/auth/interaction/' + uid + '/consent'}>
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <h1 className="text-xl font-semibold text-gray-900">Autorizar acesso</h1>
+        <p className="mt-2 text-sm text-gray-600">
+          O app <strong>{appName}</strong> quer acessar sua conta.
+        </p>
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+          style={{ backgroundColor: accent }}
+        >
+          Autorizar
+        </button>
+      </form>
+    </AuthShell>
+  )
+}

package/stubs/ui/react/pages/forgot.tsx

@@ -0,0 +1,44 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/forgot.tsx') })
+}}}
+import AuthShell from '../../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-transparent focus:ring-2 focus:ring-gray-800'
+
+export default function AuthkitForgot({ csrfToken, sent }: { csrfToken: string; sent?: boolean }) {
+  if (sent) {
+    return (
+      <AuthShell>
+        <h1 className="text-xl font-semibold text-gray-900">E-mail enviado</h1>
+        <p className="mt-2 text-sm text-gray-600">
+          Se o e-mail existir, enviaremos instruções de redefinição.
+        </p>
+      </AuthShell>
+    )
+  }
+
+  return (
+    <AuthShell>
+      <form method="POST" action="/auth/forgot-password">
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <h1 className="text-xl font-semibold text-gray-900">Recuperar senha</h1>
+        <p className="mt-1 text-sm text-gray-500">Enviaremos um link para redefinir sua senha.</p>
+
+        <div className="mt-6">
+          <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
+            E-mail
+          </label>
+          <input id="email" name="email" type="email" required className={inputClass} />
+        </div>
+
+        <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"
+        >
+          Enviar link
+        </button>
+      </form>
+    </AuthShell>
+  )
+}

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

@@ -0,0 +1,171 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/login.tsx') })
+}}}
+import AuthShell, { type AuthBrand } from '../../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-transparent focus:ring-2'
+
+export default function AuthkitLogin({
+  uid,
+  csrfToken,
+  step = 'identifier',
+  email,
+  account,
+  error,
+  brand,
+}: {
+  uid: string
+  csrfToken: string
+  step?: 'identifier' | 'password'
+  email?: string
+  account?: { fullName: string | null; globalRoles: string[] } | null
+  error?: string
+  brand?: AuthBrand
+}) {
+  const accent = brand?.accent ?? '#111827'
+  const focusStyle = { ['--tw-ring-color' as any]: accent }
+
+  if (step === 'identifier') {
+    return (
+      <AuthShell brand={brand}>
+        <form method="POST" action={'/auth/interaction/' + uid + '/identifier'}>
+          <input type="hidden" name="_csrf" value={csrfToken} />
+          <h1 className="text-xl font-semibold text-gray-900">Entrar</h1>
+          <p className="mt-1 text-sm text-gray-500">Informe seu e-mail para continuar.</p>
+
+          {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+          <div className="mt-6">
+            <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
+              E-mail
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              autoFocus
+              className={inputClass}
+              style={focusStyle}
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="mt-6 w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+            style={{ backgroundColor: accent }}
+          >
+            Continuar
+          </button>
+
+          <div className="mt-4 flex justify-between text-sm text-gray-600">
+            <a href={'/auth/interaction/' + uid + '/signup'} className="hover:underline">
+              Criar conta
+            </a>
+            <a href="/auth/forgot-password" className="hover:underline">
+              Esqueci a senha
+            </a>
+          </div>
+        </form>
+
+        <div className="my-6 flex items-center gap-3 text-xs text-gray-400">
+          <span className="h-px flex-1 bg-gray-200" />
+          ou
+          <span className="h-px flex-1 bg-gray-200" />
+        </div>
+
+        <a
+          href={'/auth/google/redirect/' + uid}
+          className="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="#4285F4"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z"
+            />
+            <path
+              fill="#34A853"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z"
+            />
+            <path
+              fill="#EA4335"
+              d="M12 4.75c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 1.46 14.97.5 12 .5A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 4.75 12 4.75Z"
+            />
+          </svg>
+          Entrar com Google
+        </a>
+      </AuthShell>
+    )
+  }
+
+  // step === 'password'
+  const isAdmin = account?.globalRoles?.includes('ADMIN') ?? false
+
+  return (
+    <AuthShell brand={brand}>
+      <form method="POST" action={'/auth/interaction/' + uid + '/login'}>
+        <input type="hidden" name="_csrf" value={csrfToken} />
+
+        {account?.fullName ? (
+          <h1 className="text-xl font-semibold text-gray-900">
+            Olá, {account.fullName}
+            {isAdmin && (
+              <span className="ml-2 inline-block rounded bg-amber-100 px-1.5 py-0.5 align-middle text-xs font-semibold uppercase text-amber-800">
+                ADMIN
+              </span>
+            )}
+          </h1>
+        ) : (
+          <h1 className="text-xl font-semibold text-gray-900">Entrar</h1>
+        )}
+
+        <div className="mt-1 flex items-center gap-2">
+          <span className="text-sm text-gray-500">{email}</span>
+          <a
+            href={'/auth/interaction/' + uid + '/switch'}
+            className="text-xs font-medium hover:underline"
+            style={{ color: accent }}
+          >
+            Trocar de conta
+          </a>
+        </div>
+
+        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+        <div className="mt-6">
+          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
+            Senha
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            autoFocus
+            className={inputClass}
+            style={focusStyle}
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+          style={{ backgroundColor: accent }}
+        >
+          Entrar
+        </button>
+
+        <div className="mt-4 flex justify-end text-sm text-gray-600">
+          <a href="/auth/forgot-password" className="hover:underline">
+            Esqueci a senha
+          </a>
+        </div>
+      </form>
+    </AuthShell>
+  )
+}

package/stubs/ui/react/pages/mfa-challenge.tsx

@@ -0,0 +1,72 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/mfa-challenge.tsx') })
+}}}
+import AuthShell from '../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-center text-lg tracking-[0.4em] outline-none transition focus:border-transparent focus:ring-2 focus:ring-gray-800'
+
+export default function AuthkitMfaChallenge({
+  uid,
+  csrfToken,
+  error,
+}: {
+  uid: string
+  csrfToken: string
+  error?: string
+}) {
+  return (
+    <AuthShell>
+      <form method="POST" action={`/auth/interaction/${uid}/mfa`}>
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <h1 className="text-xl font-semibold text-gray-900">Verificação em duas etapas</h1>
+        <p className="mt-1 text-sm text-gray-500">
+          Abra seu app autenticador e informe o código de 6 dígitos.
+        </p>
+
+        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+        <div className="mt-6">
+          <label htmlFor="code" className="mb-1 block text-sm font-medium text-gray-700">
+            Código
+          </label>
+          <input
+            id="code"
+            name="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="[0-9]*"
+            maxLength={6}
+            autoFocus
+            className={inputClass}
+          />
+        </div>
+
+        <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"
+        >
+          Verificar
+        </button>
+      </form>
+
+      <details className="mt-6 text-sm text-gray-600">
+        <summary className="cursor-pointer hover:underline">Usar um código de recuperação</summary>
+        <form method="POST" action={`/auth/interaction/${uid}/mfa`} className="mt-3">
+          <input type="hidden" name="_csrf" value={csrfToken} />
+          <input
+            name="recoveryCode"
+            placeholder="xxxxx-xxxxx"
+            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-3 w-full rounded-lg border border-gray-300 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50"
+          >
+            Entrar com código de recuperação
+          </button>
+        </form>
+      </details>
+    </AuthShell>
+  )
+}

package/stubs/ui/react/pages/reset.tsx

@@ -0,0 +1,58 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/reset.tsx') })
+}}}
+import AuthShell from '../../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-transparent focus:ring-2 focus:ring-gray-800'
+
+export default function AuthkitReset({
+  token,
+  csrfToken,
+  done,
+}: {
+  token: string
+  csrfToken: string
+  done?: boolean
+}) {
+  if (done) {
+    return (
+      <AuthShell>
+        <h1 className="text-xl font-semibold text-gray-900">Senha redefinida</h1>
+        <p className="mt-2 text-sm text-gray-600">Você já pode entrar com a nova senha.</p>
+      </AuthShell>
+    )
+  }
+
+  return (
+    <AuthShell>
+      <form method="POST" action="/auth/reset-password">
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <input type="hidden" name="token" value={token} />
+        <h1 className="text-xl font-semibold text-gray-900">Nova senha</h1>
+        <p className="mt-1 text-sm text-gray-500">Escolha uma nova senha para sua conta.</p>
+
+        <div className="mt-6">
+          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
+            Senha
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            minLength={8}
+            className={inputClass}
+          />
+        </div>
+
+        <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"
+        >
+          Redefinir
+        </button>
+      </form>
+    </AuthShell>
+  )
+}