nitrostack 1.0.1 → 1.0.3

package/src/studio/app/auth/page.tsx

@@ -0,0 +1,543 @@
+'use client';
+
+import { useState } from 'react';
+import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
+import { Shield, Key, CheckCircle2, XCircle, Lock, ExternalLink, AlertCircle } from 'lucide-react';
+
+export default function AuthPage() {
+  const { oauthState, setOAuthState, jwtToken, setJwtToken, apiKey, setApiKey } = useStudioStore();
+  const [serverUrl, setServerUrl] = useState('');
+  const [clientName, setClientName] = useState('NitroStack Studio');
+  const [redirectUri, setRedirectUri] = useState('http://localhost:3000/auth/callback');
+  const [manualToken, setManualToken] = useState('');
+  const [manualApiKey, setManualApiKey] = useState('');
+  const [discovering, setDiscovering] = useState(false);
+  const [registering, setRegistering] = useState(false);
+  const [manualClientId, setManualClientId] = useState('');
+  const [manualClientSecret, setManualClientSecret] = useState('');
+
+  const handleDiscover = async () => {
+    setDiscovering(true);
+    try {
+      const resourceMetadata = await api.discoverAuth(serverUrl, 'resource');
+      const authServerUrl = resourceMetadata.authorization_servers[0];
+      const authServerMetadata = await api.discoverAuth(authServerUrl, 'auth-server');
+
+      setOAuthState({
+        authServerUrl: serverUrl,
+        resourceMetadata,
+        authServerMetadata,
+      });
+
+      alert('Discovery successful!');
+    } catch (error) {
+      console.error('Discovery failed:', error);
+      alert('Discovery failed. See console for details.');
+    } finally {
+      setDiscovering(false);
+    }
+  };
+
+  const handleRegister = async () => {
+    if (!oauthState.authServerMetadata?.registration_endpoint) {
+      alert('Dynamic registration not supported');
+      return;
+    }
+
+    setRegistering(true);
+    try {
+      const registration = await api.registerClient(
+        oauthState.authServerMetadata.registration_endpoint,
+        {
+          client_name: clientName,
+          redirect_uris: [redirectUri],
+          grant_types: ['authorization_code', 'refresh_token'],
+          response_types: ['code'],
+          scope: oauthState.selectedScopes.join(' '),
+        }
+      );
+
+      setOAuthState({ clientRegistration: registration });
+      alert('Client registered successfully!');
+    } catch (error) {
+      console.error('Registration failed:', error);
+      alert('Registration failed. See console for details.');
+    } finally {
+      setRegistering(false);
+    }
+  };
+
+  const handleManualCredentials = () => {
+    if (!manualClientId.trim()) {
+      alert('Please enter Client ID');
+      return;
+    }
+
+    // Store manual credentials
+    setOAuthState({
+      ...oauthState,
+      clientRegistration: {
+        client_id: manualClientId.trim(),
+        client_secret: manualClientSecret.trim() || undefined,
+      },
+    });
+
+    alert('Client credentials saved!');
+  };
+
+  const handleUseManualToken = () => {
+    if (!manualToken.trim()) {
+      alert('Please enter a token');
+      return;
+    }
+
+    setJwtToken(manualToken);
+    setManualToken('');
+    alert('Token set successfully!');
+  };
+
+  const handleUseApiKey = () => {
+    if (!manualApiKey.trim()) {
+      alert('Please enter an API key');
+      return;
+    }
+
+    setApiKey(manualApiKey);
+    setManualApiKey('');
+    alert('API key set successfully!');
+  };
+
+  const handleStartOAuthFlow = async () => {
+    if (!oauthState.clientRegistration?.client_id) {
+      alert('Please register a client or enter manual credentials first');
+      return;
+    }
+
+    if (!oauthState.authServerMetadata?.authorization_endpoint) {
+      alert('Authorization endpoint not found in server metadata');
+      return;
+    }
+
+    try {
+      // Generate PKCE challenge
+      const codeVerifier = generateCodeVerifier();
+      const codeChallenge = await generateCodeChallenge(codeVerifier);
+      
+      // Store verifier for callback
+      sessionStorage.setItem('oauth_code_verifier', codeVerifier);
+      sessionStorage.setItem('oauth_state', Math.random().toString(36).substring(7));
+
+      // Build authorization URL
+      const authUrl = new URL(oauthState.authServerMetadata.authorization_endpoint);
+      authUrl.searchParams.set('client_id', oauthState.clientRegistration.client_id);
+      authUrl.searchParams.set('response_type', 'code');
+      authUrl.searchParams.set('redirect_uri', redirectUri);
+      authUrl.searchParams.set('scope', oauthState.resourceMetadata?.scopes_supported?.join(' ') || 'openid profile');
+      authUrl.searchParams.set('state', sessionStorage.getItem('oauth_state')!);
+      authUrl.searchParams.set('code_challenge', codeChallenge);
+      authUrl.searchParams.set('code_challenge_method', 'S256');
+
+      // Open authorization URL
+      window.location.href = authUrl.toString();
+    } catch (error) {
+      console.error('Failed to start OAuth flow:', error);
+      alert('Failed to start OAuth flow. See console for details.');
+    }
+  };
+
+  // PKCE helpers
+  const generateCodeVerifier = () => {
+    const array = new Uint8Array(32);
+    crypto.getRandomValues(array);
+    return base64UrlEncode(array);
+  };
+
+  const generateCodeChallenge = async (verifier: string) => {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(verifier);
+    const hash = await crypto.subtle.digest('SHA-256', data);
+    return base64UrlEncode(new Uint8Array(hash));
+  };
+
+  const base64UrlEncode = (buffer: Uint8Array) => {
+    const base64 = btoa(String.fromCharCode(...buffer));
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+  };
+
+  return (
+    <div className="min-h-screen bg-background p-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center">
+            <Shield className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">Authentication</h1>
+            <p className="text-muted-foreground mt-1">OAuth 2.1 / JWT / API Key authentication</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* JWT Token Management */}
+        <div className="card card-hover p-6">
+          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
+            <Key className="w-5 h-5 text-primary" />
+            JWT Token
+          </h2>
+          
+          {/* Status Badge */}
+          <div className="flex items-center gap-4 mb-6">
+            <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${jwtToken ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
+              {jwtToken ? (
+                <CheckCircle2 className="w-8 h-8 text-emerald-500" />
+              ) : (
+                <XCircle className="w-8 h-8 text-rose-500" />
+              )}
+            </div>
+            <div className="flex-1">
+              <p className="font-semibold text-foreground">
+                {jwtToken ? 'Token Active' : 'No Token Set'}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {jwtToken 
+                  ? 'Token is automatically included in all tool calls and chat requests' 
+                  : 'Set a token manually or login via tools to authenticate'}
+              </p>
+            </div>
+          </div>
+
+          {/* Token Input/Display */}
+          <div className="space-y-3">
+            <label className="block text-sm font-medium text-foreground">
+              Token Value
+              {jwtToken && <span className="ml-2 text-xs text-emerald-500">(Currently Active)</span>}
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={manualToken || jwtToken || ''}
+                onChange={(e) => setManualToken(e.target.value)}
+                placeholder="Paste or edit JWT token here..."
+                className="input flex-1 font-mono text-sm"
+              />
+              <button 
+                onClick={handleUseManualToken} 
+                className="btn btn-primary gap-2"
+                disabled={!manualToken.trim()}
+              >
+                <Key className="w-4 h-4" />
+                {jwtToken ? 'Update' : 'Set'} Token
+              </button>
+            </div>
+            
+            {jwtToken && (
+              <div className="flex gap-2">
+                <button
+                  onClick={() => {
+                    setManualToken(jwtToken);
+                    alert('Token copied to input for editing');
+                  }}
+                  className="btn btn-secondary btn-sm gap-2"
+                >
+                  <Lock className="w-3 h-3" />
+                  Edit Current Token
+                </button>
+                <button
+                  onClick={() => {
+                    setJwtToken(null);
+                    setManualToken('');
+                    alert('Token cleared');
+                  }}
+                  className="btn btn-secondary btn-sm gap-2"
+                >
+                  <XCircle className="w-3 h-3" />
+                  Clear Token
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Info Box */}
+          <div className="mt-4 p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" />
+              <div className="text-sm text-blue-200">
+                <p className="font-medium mb-1">How Token Management Works:</p>
+                <ul className="list-disc list-inside space-y-1 text-blue-300/80">
+                  <li>Login via tool execution automatically saves token here</li>
+                  <li>Login via chat automatically saves token here</li>
+                  <li>Manually paste token here to use it globally</li>
+                  <li>Token persists across page refresh</li>
+                  <li>Token is sent with all subsequent requests</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* API Key Management */}
+        <div className="card card-hover p-6">
+          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
+            <Key className="w-5 h-5 text-primary" />
+            API Key
+          </h2>
+          
+          {/* Status Badge */}
+          <div className="flex items-center gap-4 mb-6">
+            <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${apiKey ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
+              {apiKey ? (
+                <CheckCircle2 className="w-8 h-8 text-emerald-500" />
+              ) : (
+                <XCircle className="w-8 h-8 text-rose-500" />
+              )}
+            </div>
+            <div className="flex-1">
+              <p className="font-semibold text-foreground">
+                {apiKey ? 'API Key Active' : 'No API Key Set'}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {apiKey 
+                  ? 'API key is automatically included in all tool calls and chat requests' 
+                  : 'Set an API key to access protected tools'}
+              </p>
+            </div>
+          </div>
+
+          {/* API Key Input/Display */}
+          <div className="space-y-3">
+            <label className="block text-sm font-medium text-foreground">
+              API Key Value
+              {apiKey && <span className="ml-2 text-xs text-emerald-500">(Currently Active)</span>}
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="password"
+                value={manualApiKey || apiKey || ''}
+                onChange={(e) => setManualApiKey(e.target.value)}
+                placeholder="Enter your API key here (e.g., sk_...)..."
+                className="input flex-1 font-mono text-sm"
+              />
+              <button 
+                onClick={handleUseApiKey} 
+                className="btn btn-primary gap-2"
+                disabled={!manualApiKey.trim()}
+              >
+                <Key className="w-4 h-4" />
+                {apiKey ? 'Update' : 'Set'} Key
+              </button>
+            </div>
+            
+            {apiKey && (
+              <div className="flex gap-2">
+                <button
+                  onClick={() => {
+                    setManualApiKey(apiKey);
+                    alert('API key copied to input for editing');
+                  }}
+                  className="btn btn-secondary btn-sm gap-2"
+                >
+                  <Lock className="w-3 h-3" />
+                  Edit Current Key
+                </button>
+                <button
+                  onClick={() => {
+                    setApiKey(null);
+                    setManualApiKey('');
+                    alert('API key cleared');
+                  }}
+                  className="btn btn-secondary btn-sm gap-2"
+                >
+                  <XCircle className="w-3 h-3" />
+                  Clear Key
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Info Box */}
+          <div className="mt-4 p-4 bg-purple-500/10 border border-purple-500/20 rounded-lg">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="w-5 h-5 text-purple-400 mt-0.5 flex-shrink-0" />
+              <div className="text-sm text-purple-200">
+                <p className="font-medium mb-1">API Key Authentication:</p>
+                <ul className="list-disc list-inside space-y-1 text-purple-300/80">
+                  <li>API keys are simpler than JWT tokens</li>
+                  <li>Common format: sk_xxx (secret key) or pk_xxx (public key)</li>
+                  <li>Keys are sent in X-API-Key header or _meta.apiKey field</li>
+                  <li>Ideal for service-to-service authentication</li>
+                  <li>Can be used together with JWT tokens for multi-auth</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* OAuth 2.1 Flow */}
+        <div className="card card-hover p-6">
+          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
+            <Shield className="w-5 h-5 text-primary" />
+            OAuth 2.1 Flow
+          </h2>
+          <p className="text-sm text-muted-foreground mb-6">
+            For OpenAI Apps SDK and OAuth 2.1 compliant servers
+          </p>
+
+          {/* Step 1: Discovery */}
+          <div className="mb-6">
+            <h3 className="font-medium text-foreground mb-3">1. Discover Server Auth</h3>
+            <input
+              type="url"
+              value={serverUrl}
+              onChange={(e) => setServerUrl(e.target.value)}
+              placeholder="https://mcp.example.com"
+              className="input mb-3"
+            />
+            <button
+              onClick={handleDiscover}
+              className="btn btn-primary gap-2"
+              disabled={discovering || !serverUrl}
+            >
+              <ExternalLink className="w-4 h-4" />
+              {discovering ? 'Discovering...' : 'Discover Auth Config'}
+            </button>
+
+            {oauthState.resourceMetadata && (
+              <div className="mt-4 p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                  <p className="text-sm font-semibold text-emerald-600 dark:text-emerald-400">Discovery Successful</p>
+                </div>
+                <details className="text-sm text-muted-foreground">
+                  <summary className="cursor-pointer hover:text-foreground font-medium">
+                    View Metadata
+                  </summary>
+                  <pre className="mt-3 p-3 bg-background rounded-lg overflow-auto max-h-40 font-mono text-xs text-foreground border border-border">
+                    {JSON.stringify(oauthState.resourceMetadata, null, 2)}
+                  </pre>
+                </details>
+              </div>
+            )}
+          </div>
+
+          {/* Step 2a: Manual Client Credentials (Alternative to Registration) */}
+          {oauthState.resourceMetadata && !oauthState.clientRegistration && (
+            <div className="mb-6 border-t border-border pt-6">
+              <h3 className="font-medium text-foreground mb-3">2a. Use Existing Client (Optional)</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                If you already have a Client ID and Secret from your OAuth provider, enter them here instead of dynamic registration.
+              </p>
+              <div className="space-y-3 mb-4">
+                <input
+                  type="text"
+                  value={manualClientId}
+                  onChange={(e) => setManualClientId(e.target.value)}
+                  placeholder="Client ID"
+                  className="input font-mono"
+                />
+                <input
+                  type="password"
+                  value={manualClientSecret}
+                  onChange={(e) => setManualClientSecret(e.target.value)}
+                  placeholder="Client Secret (optional for public clients)"
+                  className="input font-mono"
+                />
+              </div>
+              <button
+                onClick={handleManualCredentials}
+                className="btn btn-primary gap-2"
+                disabled={!manualClientId.trim()}
+              >
+                <Key className="w-4 h-4" />
+                Save Client Credentials
+              </button>
+            </div>
+          )}
+
+          {/* Step 2b: Registration */}
+          {oauthState.authServerMetadata && !oauthState.clientRegistration && (
+            <div className="mb-6 border-t border-border pt-6">
+              <h3 className="font-medium text-foreground mb-3">2b. Register New Client (Dynamic)</h3>
+              <div className="space-y-3 mb-4">
+                <input
+                  type="text"
+                  value={clientName}
+                  onChange={(e) => setClientName(e.target.value)}
+                  placeholder="Client Name"
+                  className="input"
+                />
+                <input
+                  type="url"
+                  value={redirectUri}
+                  onChange={(e) => setRedirectUri(e.target.value)}
+                  placeholder="Redirect URI"
+                  className="input"
+                />
+              </div>
+              <button
+                onClick={handleRegister}
+                className="btn btn-primary gap-2"
+                disabled={registering}
+              >
+                <Shield className="w-4 h-4" />
+                {registering ? 'Registering...' : 'Register Client'}
+              </button>
+
+              {oauthState.clientRegistration && (
+                <div className="mt-4 p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                    <p className="text-sm font-semibold text-emerald-600 dark:text-emerald-400">Registration Successful</p>
+                  </div>
+                  <p className="text-sm text-muted-foreground font-mono">
+                    Client ID: {oauthState.clientRegistration.client_id}
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Start Flow */}
+          {oauthState.clientRegistration && (
+            <div className="border-t border-border pt-6">
+              <h3 className="font-medium text-foreground mb-3">3. Start OAuth Flow</h3>
+              <button 
+                onClick={handleStartOAuthFlow}
+                className="btn btn-primary gap-2"
+              >
+                <ExternalLink className="w-4 h-4" />
+                Start Authorization Flow
+              </button>
+              <p className="text-sm text-muted-foreground mt-2 flex items-center gap-1">
+                <AlertCircle className="w-4 h-4" />
+                This will redirect you to the authorization server for login
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* API Keys */}
+        <div className="card card-hover p-6">
+          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
+            <Key className="w-5 h-5 text-primary" />
+            API Keys
+          </h2>
+          <p className="text-sm text-muted-foreground mb-3">
+            For servers that use API key authentication
+          </p>
+          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
+              <p className="text-sm text-foreground">
+                API key authentication is typically configured per-tool in the server configuration.
+                Refer to your server's documentation for details.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}