@authagonal/login 0.1.97

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App';
+import { loadBranding, BrandingContext } from './branding';
+import './i18n';
+import i18n from './i18n';
+
+loadBranding().then((config) => {
+  document.title = i18n.t('signInTitle', { appName: config.appName });
+
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <BrandingContext.Provider value={config}>
+        <App />
+      </BrandingContext.Provider>
+    </StrictMode>,
+  );
+});

package/src/pages/ConsentPage.tsx

@@ -0,0 +1,144 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import AuthLayout from '../components/AuthLayout';
+import { CardTitle, CardFooter } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import { Alert } from '../components/ui/alert';
+
+const SCOPE_LABELS: Record<string, string> = {
+  openid: 'consent.scopeOpenid',
+  profile: 'consent.scopeProfile',
+  email: 'consent.scopeEmail',
+  offline_access: 'consent.scopeOfflineAccess',
+  address: 'consent.scopeAddress',
+  phone: 'consent.scopePhone',
+};
+
+interface ConsentInfo {
+  clientId: string;
+  clientName: string;
+  description?: string;
+  clientUri?: string;
+  logoUri?: string;
+  scopes: string[];
+}
+
+export default function ConsentPage() {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const clientId = searchParams.get('client_id') ?? '';
+  const scope = searchParams.get('scope') ?? 'openid';
+  const returnUrl = searchParams.get('returnUrl') ?? '/';
+
+  const [info, setInfo] = useState<ConsentInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    fetch(`/consent/info?client_id=${encodeURIComponent(clientId)}&scope=${encodeURIComponent(scope)}`)
+      .then(async (res) => {
+        if (!res.ok) throw new Error('Failed to load');
+        setInfo(await res.json());
+      })
+      .catch(() => setError(t('consent.loadError')))
+      .finally(() => setLoading(false));
+  }, [clientId, scope, t]);
+
+  async function handleDecision(decision: 'allow' | 'deny') {
+    setSubmitting(true);
+    setError('');
+    try {
+      const res = await fetch('/consent', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          clientId,
+          decision,
+          scopes: info?.scopes ?? scope.split(' '),
+          returnUrl,
+        }),
+      });
+      const data = await res.json();
+      if (data.redirect) {
+        window.location.href = data.redirect;
+      }
+    } catch {
+      setError(t('consent.submitError'));
+      setSubmitting(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <AuthLayout>
+        <p className="text-sm text-gray-500 dark:text-gray-400 text-center">{t('consent.loading')}</p>
+      </AuthLayout>
+    );
+  }
+
+  return (
+    <AuthLayout>
+      {info?.logoUri && (
+        <div className="flex justify-center mb-4">
+          <img
+            src={info.logoUri}
+            alt={info.clientName}
+            className="h-12 w-12 rounded-lg object-contain"
+            onError={(e) => {
+              (e.currentTarget as HTMLImageElement).style.display = 'none';
+            }}
+          />
+        </div>
+      )}
+      <CardTitle>{t('consent.title', { appName: info?.clientName ?? clientId })}</CardTitle>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t('consent.subtitle', { appName: info?.clientName ?? clientId })}</p>
+
+      {info?.description && (
+        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{info.description}</p>
+      )}
+      {info?.clientUri && (
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+          <a
+            href={info.clientUri}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline"
+          >
+            {info.clientUri}
+          </a>
+        </p>
+      )}
+
+      {error && <Alert variant="error">{error}</Alert>}
+
+      <div className="space-y-2 mb-6">
+        {(info?.scopes ?? scope.split(' ')).map((s) => {
+          const labelKey = SCOPE_LABELS[s];
+          return (
+            <div key={s} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/60 rounded-lg">
+              <div className="w-2 h-2 bg-primary rounded-full shrink-0" />
+              <span className="text-sm text-gray-700 dark:text-gray-300">
+                {labelKey ? t(labelKey) : s}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex gap-3">
+        <Button onClick={() => handleDecision('allow')} loading={submitting} className="flex-1">
+          {t('consent.allow')}
+        </Button>
+        <Button variant="secondary" onClick={() => handleDecision('deny')} disabled={submitting} className="flex-1">
+          {t('consent.deny')}
+        </Button>
+      </div>
+
+      <CardFooter>
+        <p className="text-xs text-gray-400 dark:text-gray-500">{t('consent.hint')}</p>
+      </CardFooter>
+    </AuthLayout>
+  );
+}

package/src/pages/DevicePage.tsx

@@ -0,0 +1,145 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { getSession } from '../api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert } from '@/components/ui/alert';
+import { CardTitle } from '@/components/ui/card';
+
+const API_URL = import.meta.env.VITE_API_URL || '';
+
+export default function DevicePage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [userCode, setUserCode] = useState(searchParams.get('user_code') || '');
+  const [loading, setLoading] = useState(false);
+  const [checking, setChecking] = useState(true);
+  const [authenticated, setAuthenticated] = useState(false);
+  const [approved, setApproved] = useState(false);
+  const [error, setError] = useState('');
+
+  // Check if user is already authenticated
+  useEffect(() => {
+    getSession()
+      .then((session) => {
+        setAuthenticated(!!session?.userId);
+      })
+      .catch(() => setAuthenticated(false))
+      .finally(() => setChecking(false));
+  }, []);
+
+  async function handleApprove(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    const code = userCode.trim().toUpperCase();
+    if (!code) {
+      setError('Please enter the code shown on your device.');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const res = await fetch(`${API_URL}/api/auth/device/approve`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        credentials: 'include',
+        body: `user_code=${encodeURIComponent(code)}`,
+      });
+
+      if (res.ok) {
+        setApproved(true);
+      } else {
+        const body = await res.json().catch(() => ({}));
+        if (body.error === 'invalid_user_code') {
+          setError('Invalid or expired code. Check the code on your device and try again.');
+        } else {
+          setError(body.message || 'Failed to approve. Please try again.');
+        }
+      }
+    } catch {
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (checking) {
+    return <p className="text-sm text-gray-500 dark:text-gray-400 text-center">Loading...</p>;
+  }
+
+  // Not authenticated — redirect to login with returnUrl back to this page
+  if (!authenticated) {
+    const returnUrl = userCode
+      ? `/device?user_code=${encodeURIComponent(userCode)}`
+      : '/device';
+
+    return (
+      <div className="text-center">
+        <CardTitle className="mb-4">Sign in to continue</CardTitle>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+          Sign in to approve access for your device.
+        </p>
+        <Button
+          className="w-full"
+          onClick={() => navigate(`/login?returnUrl=${encodeURIComponent(returnUrl)}`)}
+        >
+          Sign In
+        </Button>
+      </div>
+    );
+  }
+
+  // Approved
+  if (approved) {
+    return (
+      <div className="text-center">
+        <CardTitle className="mb-4">Device approved</CardTitle>
+        <div className="flex justify-center mb-4">
+          <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
+            <svg className="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+        </div>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          You can close this window. Your device should be signed in momentarily.
+        </p>
+      </div>
+    );
+  }
+
+  // Enter code form
+  return (
+    <div>
+      <CardTitle className="mb-2 text-center">Authorize device</CardTitle>
+      <p className="text-sm text-gray-500 dark:text-gray-400 text-center mb-6">
+        Enter the code displayed on your device.
+      </p>
+
+      {error && <Alert variant="error" className="mb-4">{error}</Alert>}
+
+      <form onSubmit={handleApprove}>
+        <div className="mb-4">
+          <Label htmlFor="user_code">Device code</Label>
+          <Input
+            id="user_code"
+            type="text"
+            value={userCode}
+            onChange={(e) => setUserCode(e.target.value.toUpperCase())}
+            placeholder="ABCD-1234"
+            className="text-center text-2xl font-mono tracking-widest"
+            maxLength={9}
+            autoFocus
+            autoComplete="off"
+          />
+        </div>
+        <Button type="submit" className="w-full" loading={loading}>
+          Approve
+        </Button>
+      </form>
+    </div>
+  );
+}

package/src/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { forgotPassword } from '../api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert } from '@/components/ui/alert';
+import { CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
+
+export default function ForgotPasswordPage() {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const returnUrl = searchParams.get('returnUrl') || '';
+
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState('');
+
+  const loginLink = returnUrl
+    ? `/login?returnUrl=${encodeURIComponent(returnUrl)}`
+    : '/login';
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await forgotPassword(email);
+      setSubmitted(true);
+    } catch {
+      // The API always returns 200 for anti-enumeration, but handle errors just in case
+      setError(t('errorUnexpected'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (submitted) {
+    return (
+      <div>
+        <CardTitle>{t('checkYourEmail')}</CardTitle>
+        <Alert variant="success">{t('resetEmailSent')}</Alert>
+        <CardFooter>
+          <Link to={loginLink} className="text-sm font-medium text-primary hover:underline no-underline">
+            {t('backToSignIn')}
+          </Link>
+        </CardFooter>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <CardTitle>{t('resetYourPassword')}</CardTitle>
+      <CardDescription className="mb-5">{t('resetSubtitle')}</CardDescription>
+
+      {error && <Alert variant="error">{error}</Alert>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <Label htmlFor="email">{t('email')}</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder={t('emailPlaceholder')}
+            autoComplete="email"
+            autoFocus
+            maxLength={256}
+            required
+          />
+        </div>
+
+        <Button type="submit" loading={loading}>
+          {loading ? t('sending') : t('sendResetLink')}
+        </Button>
+
+        <CardFooter>
+          <Link to={loginLink} className="text-sm font-medium text-primary hover:underline no-underline">
+            {t('backToSignIn')}
+          </Link>
+        </CardFooter>
+      </form>
+    </div>
+  );
+}

package/src/pages/GrantsPage.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import AuthLayout from '../components/AuthLayout';
+import { CardTitle } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import { Alert } from '../components/ui/alert';
+
+interface ConsentGrant {
+  clientId: string;
+  clientName: string;
+  scopes: string[];
+  consentedAt: string;
+}
+
+export default function GrantsPage() {
+  const { t } = useTranslation();
+  const [grants, setGrants] = useState<ConsentGrant[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [revoking, setRevoking] = useState('');
+
+  useEffect(() => {
+    fetch('/consent/grants')
+      .then(async (res) => {
+        if (!res.ok) throw new Error();
+        setGrants(await res.json());
+      })
+      .catch(() => setError(t('grants.loadError')))
+      .finally(() => setLoading(false));
+  }, [t]);
+
+  async function handleRevoke(clientId: string) {
+    if (!confirm(t('grants.revokeConfirm'))) return;
+    setRevoking(clientId);
+    try {
+      const res = await fetch(`/consent/grants/${encodeURIComponent(clientId)}`, { method: 'DELETE' });
+      if (res.ok) {
+        setGrants(g => g.filter(x => x.clientId !== clientId));
+      } else {
+        setError(t('grants.revokeFailed'));
+      }
+    } catch {
+      setError(t('grants.revokeFailed'));
+    } finally {
+      setRevoking('');
+    }
+  }
+
+  return (
+    <AuthLayout>
+      <CardTitle>{t('grants.title')}</CardTitle>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t('grants.subtitle')}</p>
+
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {loading ? (
+        <p className="text-sm text-gray-500 dark:text-gray-400">{t('grants.loading')}</p>
+      ) : grants.length === 0 ? (
+        <p className="text-sm text-gray-500 dark:text-gray-400">{t('grants.noGrants')}</p>
+      ) : (
+        <div className="space-y-3">
+          {grants.map((g) => (
+            <div key={g.clientId} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800/60 rounded-lg">
+              <div>
+                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{g.clientName}</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                  {g.scopes.join(', ')}
+                </p>
+                <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                  {t('grants.grantedOn', { date: new Date(g.consentedAt).toLocaleDateString() })}
+                </p>
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                loading={revoking === g.clientId}
+                onClick={() => handleRevoke(g.clientId)}
+              >
+                {t('grants.revoke')}
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </AuthLayout>
+  );
+}