@chaaskit/client 0.1.0

package/src/pages/LoginPage.tsx

@@ -0,0 +1,232 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router';
+import { useAuth } from '../contexts/AuthContext';
+import { useConfig } from '../contexts/ConfigContext';
+import { useTheme } from '../contexts/ThemeContext';
+import { useAppPath } from '../hooks/useAppPath';
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+  const { login, sendMagicLink } = useAuth();
+  const config = useConfig();
+  const { theme } = useTheme();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [magicLinkSent, setMagicLinkSent] = useState(false);
+
+  const hasEmailPassword = config.auth.methods.includes('email-password');
+  const hasMagicLink = config.auth.magicLink.enabled;
+  const hasGoogle = config.auth.methods.includes('google');
+  const hasGitHub = config.auth.methods.includes('github');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const { requiresVerification } = await login(email, password);
+      if (requiresVerification) {
+        navigate('/verify-email');
+      } else {
+        navigate(appPath('/'));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleMagicLink() {
+    if (!email) {
+      setError('Please enter your email');
+      return;
+    }
+
+    setError('');
+    setIsLoading(true);
+
+    try {
+      await sendMagicLink(email);
+      setMagicLinkSent(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send magic link');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (magicLinkSent) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="w-full max-w-md text-center">
+          <h1 className="mb-4 text-2xl font-bold text-text-primary">
+            Check your email
+          </h1>
+          <p className="mb-6 text-text-secondary">
+            We've sent a magic link to <strong>{email}</strong>. Click the link
+            in the email to sign in.
+          </p>
+          <button
+            onClick={() => setMagicLinkSent(false)}
+            className="text-primary hover:underline"
+          >
+            Use a different email
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md">
+        <div className="mb-8 text-center">
+          {config.ui.logo && (
+            <img
+              src={typeof config.ui.logo === 'string' ? config.ui.logo : (theme === 'dark' ? config.ui.logo.dark : config.ui.logo.light)}
+              alt={config.app.name}
+              className="mx-auto mb-4 h-16 w-16 rounded-lg object-contain"
+            />
+          )}
+          <h1 className="text-3xl font-bold text-text-primary">Welcome back</h1>
+          <p className="mt-2 text-text-secondary">Sign in to {config.app.name}</p>
+        </div>
+
+        {error && (
+          <div className="mb-4 rounded-lg bg-error/10 p-3 text-sm text-error">
+            {error}
+          </div>
+        )}
+
+        {/* OAuth buttons */}
+        {(hasGoogle || hasGitHub) && (
+          <div className="mb-6 space-y-3">
+            {hasGoogle && (
+              <a
+                href="/api/auth/oauth/google"
+                className="flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-text-primary hover:bg-background-secondary"
+              >
+                <svg className="h-5 w-5" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  />
+                  <path
+                    fill="currentColor"
+                    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.84C3.99 20.53 7.7 23 12 23z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  />
+                </svg>
+                Continue with Google
+              </a>
+            )}
+
+            {hasGitHub && (
+              <a
+                href="/api/auth/oauth/github"
+                className="flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-text-primary hover:bg-background-secondary"
+              >
+                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                </svg>
+                Continue with GitHub
+              </a>
+            )}
+          </div>
+        )}
+
+        {(hasGoogle || hasGitHub) && hasEmailPassword && (
+          <div className="relative mb-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-background px-2 text-text-muted">
+                Or continue with email
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Email/Password form */}
+        {hasEmailPassword && (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-text-primary"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="mt-1 w-full rounded-lg border border-input-border bg-input-background px-4 py-2 text-text-primary focus:border-primary focus:outline-none"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-text-primary"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="mt-1 w-full rounded-lg border border-input-border bg-input-background px-4 py-2 text-text-primary focus:border-primary focus:outline-none"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full rounded-lg bg-primary px-4 py-2 font-medium text-white hover:bg-primary-hover disabled:opacity-50"
+            >
+              {isLoading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </form>
+        )}
+
+        {/* Magic Link */}
+        {hasMagicLink && hasEmailPassword && (
+          <button
+            onClick={handleMagicLink}
+            disabled={isLoading}
+            className="mt-4 w-full text-center text-sm text-primary hover:underline disabled:opacity-50"
+          >
+            Sign in with magic link instead
+          </button>
+        )}
+
+        {/* Register link */}
+        <p className="mt-6 text-center text-sm text-text-secondary">
+          Don't have an account?{' '}
+          <Link to="/register" className="text-primary hover:underline">
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/pages/OAuthConsentPage.tsx

@@ -0,0 +1,234 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate, Navigate } from 'react-router';
+import { Shield, Check, X, Loader2, ExternalLink } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useConfig } from '../contexts/ConfigContext';
+import { useTheme } from '../contexts/ThemeContext';
+import { useAppPath } from '../hooks/useAppPath';
+
+interface ClientInfo {
+  clientId: string;
+  clientName: string;
+  clientUri?: string;
+}
+
+export default function OAuthConsentPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+  const { user, isLoading: authLoading } = useAuth();
+  const config = useConfig();
+  const { theme } = useTheme();
+
+  const [clientInfo, setClientInfo] = useState<ClientInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Get params from URL
+  const clientId = searchParams.get('client_id');
+  const redirectUri = searchParams.get('redirect_uri');
+  const scope = searchParams.get('scope');
+  const state = searchParams.get('state');
+  const codeChallenge = searchParams.get('code_challenge');
+  const codeChallengeMethod = searchParams.get('code_challenge_method');
+
+  // Get logo
+  const logo = typeof config.ui.logo === 'string'
+    ? config.ui.logo
+    : (theme === 'dark' ? config.ui.logo.dark : config.ui.logo.light);
+
+  // Load client info
+  useEffect(() => {
+    async function loadClientInfo() {
+      if (!clientId) {
+        setError('Missing client_id parameter');
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        // For now, we'll just display the client_id
+        // In a full implementation, we'd fetch client details from the server
+        setClientInfo({
+          clientId,
+          clientName: clientId.startsWith('mcp_') ? 'MCP Client' : clientId,
+        });
+        setIsLoading(false);
+      } catch (err) {
+        setError('Failed to load client information');
+        setIsLoading(false);
+      }
+    }
+
+    loadClientInfo();
+  }, [clientId]);
+
+  // Handle consent decision
+  async function handleConsent(approved: boolean) {
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      // OAuth endpoints are at the API root level, not under /api
+      // In dev mode with separate servers, detect localhost:5173 and route to localhost:3000
+      // In production, same-origin requests work since API and client are served together
+      let apiUrl = import.meta.env.VITE_API_URL || '';
+      if (!apiUrl && window.location.hostname === 'localhost' && window.location.port === '5173') {
+        apiUrl = 'http://localhost:3000';
+      }
+      const response = await fetch(`${apiUrl}/oauth/authorize`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          client_id: clientId,
+          redirect_uri: redirectUri,
+          scope,
+          state,
+          code_challenge: codeChallenge,
+          code_challenge_method: codeChallengeMethod || 'S256',
+          consent: approved ? 'approve' : 'deny',
+        }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ message: 'Request failed' }));
+        throw new Error(error.error?.message || error.message || 'Authorization failed');
+      }
+
+      const data = await response.json() as { redirect: string };
+      // Redirect to the client's redirect URI
+      window.location.href = data.redirect;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Authorization failed');
+      setIsSubmitting(false);
+    }
+  }
+
+  // Redirect to login if not authenticated
+  if (!authLoading && !user) {
+    const returnUrl = `/oauth/consent?${searchParams.toString()}`;
+    return <Navigate to={`/login?returnTo=${encodeURIComponent(returnUrl)}`} replace />;
+  }
+
+  // Parse scopes for display
+  const scopeList = scope ? scope.split(' ') : [];
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="mb-8 text-center">
+          <img
+            src={logo}
+            alt={config.app.name}
+            className="mx-auto h-12 w-auto"
+          />
+        </div>
+
+        {/* Consent Card */}
+        <div className="rounded-2xl border border-border bg-background-secondary p-6 shadow-lg">
+          {isLoading || authLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            </div>
+          ) : error ? (
+            <div className="text-center">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-error/10">
+                <X className="h-6 w-6 text-error" />
+              </div>
+              <h2 className="text-lg font-semibold text-text-primary">Authorization Error</h2>
+              <p className="mt-2 text-sm text-text-secondary">{error}</p>
+              <button
+                onClick={() => navigate(appPath('/'))}
+                className="mt-4 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover"
+              >
+                Return Home
+              </button>
+            </div>
+          ) : (
+            <>
+              {/* Header */}
+              <div className="mb-6 text-center">
+                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+                  <Shield className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-lg font-semibold text-text-primary">
+                  Authorize Application
+                </h2>
+                <p className="mt-1 text-sm text-text-secondary">
+                  <span className="font-medium text-text-primary">{clientInfo?.clientName}</span>
+                  {' '}wants to access your account
+                </p>
+              </div>
+
+              {/* Client Info */}
+              {clientInfo?.clientUri && (
+                <a
+                  href={clientInfo.clientUri}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mb-4 flex items-center justify-center gap-1 text-sm text-primary hover:underline"
+                >
+                  Visit application website
+                  <ExternalLink size={14} />
+                </a>
+              )}
+
+              {/* Scopes */}
+              {scopeList.length > 0 && (
+                <div className="mb-6 rounded-lg border border-border bg-background p-4">
+                  <p className="mb-3 text-sm font-medium text-text-primary">
+                    This application will be able to:
+                  </p>
+                  <ul className="space-y-2">
+                    {scopeList.map((s) => (
+                      <li key={s} className="flex items-center gap-2 text-sm text-text-secondary">
+                        <Check size={16} className="text-success" />
+                        {s === 'mcp:tools' && 'Use available tools on your behalf'}
+                        {s === 'mcp:resources' && 'Read resources on your behalf'}
+                        {!['mcp:tools', 'mcp:resources'].includes(s) && s}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {/* User Info */}
+              <div className="mb-6 rounded-lg border border-border bg-background p-3">
+                <p className="text-xs text-text-muted">Authorizing as</p>
+                <p className="text-sm font-medium text-text-primary">{user?.email}</p>
+              </div>
+
+              {/* Actions */}
+              <div className="flex gap-3">
+                <button
+                  onClick={() => handleConsent(false)}
+                  disabled={isSubmitting}
+                  className="flex-1 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium text-text-secondary hover:bg-background-secondary hover:text-text-primary disabled:opacity-50"
+                >
+                  Deny
+                </button>
+                <button
+                  onClick={() => handleConsent(true)}
+                  disabled={isSubmitting}
+                  className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-hover disabled:opacity-50"
+                >
+                  {isSubmitting && <Loader2 size={16} className="animate-spin" />}
+                  Authorize
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-text-muted">
+          By authorizing, you allow this application to access your account
+          according to its terms of service and privacy policy.
+        </p>
+      </div>
+    </div>
+  );
+}