Add OAuth consent page

app/oauth/authorize/page.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { Suspense } from 'react';
+import Image from 'next/image';
+import { useSearchParams } from 'next/navigation';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { useOAuthConsent } from '@/hooks/useOAuthConsent';
+
+function OAuthConsent() {
+  const searchParams = useSearchParams();
+  const { request, error, isSubmitting, decide } = useOAuthConsent(searchParams.toString());
+
+  if (error) {
+    return (
+      <>
+        <h1 className="text-xl font-bold text-gray-900 text-center">Can’t connect this app</h1>
+        <p className="mt-3 text-sm text-gray-600 text-center">{error}</p>
+      </>
+    );
+  }
+
+  if (!request) {
+    return <Loader2 className="mx-auto h-6 w-6 animate-spin text-gray-400" />;
+  }
+
+  return (
+    <>
+      <h1 className="text-xl font-bold text-gray-900 text-center">
+        {request.clientName} wants to access your ResearchHub account
+      </h1>
+      <p className="mt-6 text-sm text-gray-700">This will allow it to:</p>
+      <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-gray-900">
+        {request.scopes.map((scope) => (
+          <li key={scope.name}>{scope.description}</li>
+        ))}
+      </ul>
+      <p className="mt-4 text-sm text-gray-600">
+        You’ll be sent back to{' '}
+        <span className="font-medium text-gray-900">{request.redirectHost}</span>.
+      </p>
+      {request.loopbackRedirect && (
+        <div className="mt-4 flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
+          <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <p>
+            This app runs on your own computer. Only allow access if you just started connecting it
+            to ResearchHub.
+          </p>
+        </div>
+      )}
+      <div className="mt-6 flex gap-3">
+        <Button
+          variant="outlined"
+          className="flex-1"
+          disabled={isSubmitting}
+          onClick={() => decide(false)}
+        >
+          Deny
+        </Button>
+        <Button className="flex-1" disabled={isSubmitting} onClick={() => decide(true)}>
+          Allow
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default function OAuthAuthorizePage() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="bg-white w-full max-w-md rounded-lg shadow-sm border border-gray-200 p-8">
+        <Image
+          src="/RSC.webp"
+          alt="ResearchHub Logo"
+          width={40}
+          height={40}
+          className="mx-auto mb-4"
+        />
+        <Suspense>
+          <OAuthConsent />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

hooks/useOAuthConsent.ts

@@ -0,0 +1,63 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { OAuthService } from '@/services/oauth.service';
+import { ApiError } from '@/services/types';
+import type { OAuthConsentRequest } from '@/types/oauth';
+
+// A 400 means the client or its redirect URI is invalid, so the error stays on
+// the page instead of going back to the client.
+function getErrorMessage(error: unknown): string {
+  if (error instanceof ApiError && error.status === 400) {
+    const description = (error.errors as Record<string, unknown> | undefined)?.error_description;
+    if (typeof description === 'string') return description;
+    return 'This app sent an invalid authorization request.';
+  }
+  return 'Something went wrong. Please try again.';
+}
+
+/**
+ * Loads a client's authorization request for the consent page and sends the
+ * user back to the client with their decision.
+ */
+export function useOAuthConsent(query: string) {
+  const [request, setRequest] = useState<OAuthConsentRequest | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    OAuthService.getConsentRequest(query)
+      .then((result) => {
+        if (cancelled) return;
+        if (result.kind === 'redirect') {
+          window.location.assign(result.url);
+          return;
+        }
+        setRequest(result.request);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(getErrorMessage(err));
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [query]);
+
+  const decide = useCallback(
+    async (allow: boolean) => {
+      setIsSubmitting(true);
+      try {
+        window.location.assign(await OAuthService.decide(query, allow));
+      } catch (err) {
+        setError(getErrorMessage(err));
+        setIsSubmitting(false);
+      }
+    },
+    [query]
+  );
+
+  return { request, error, isSubmitting, decide };
+}

next.config.js

@@ -249,6 +249,15 @@ const nextConfig = {
         },
       ],
     },
+    {
+      // The OAuth consent page must never be framed or indexed
+      source: '/oauth/authorize',
+      headers: [
+        { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
+        { key: 'X-Frame-Options', value: 'DENY' },
+        { key: 'X-Robots-Tag', value: 'noindex' },
+      ],
+    },
   ],
   images: {
     unoptimized: false,

proxy.ts

@@ -60,5 +60,6 @@ export const config = {
     '/lists',
     '/list/:path*',
     '/proposal/:path*',
+    '/oauth/authorize',
   ],
 };

services/oauth.service.ts

@@ -0,0 +1,45 @@
+import { ApiClient } from './client';
+import {
+  transformOAuthConsentRequest,
+  type OAuthConsentRequest,
+  type OAuthConsentRequestApiResponse,
+  type OAuthRedirectApiResponse,
+} from '@/types/oauth';
+
+type ConsentApiResponse = OAuthConsentRequestApiResponse | OAuthRedirectApiResponse;
+
+export type OAuthConsentResult =
+  | { kind: 'consent'; request: OAuthConsentRequest }
+  | { kind: 'redirect'; url: string };
+
+/**
+ * Service for handling OAuth consent requests and decisions.
+ * Both calls forward the client's authorization request unchanged as
+ * the query string, and the backend validates it each time,
+ * so redirect URLs only ever come from the backend.
+ */
+export class OAuthService {
+  private static readonly BASE_PATH = '/api/oauth/authorize/';
+
+  /**
+   * Fetches the OAuth consent request based on the query string.
+   * Returns either a consent request or a redirect URL.
+   */
+  static async getConsentRequest(query: string): Promise<OAuthConsentResult> {
+    const response = await ApiClient.get<ConsentApiResponse>(`${this.BASE_PATH}?${query}`);
+    if ('redirect_url' in response) {
+      return { kind: 'redirect', url: response.redirect_url };
+    }
+    return { kind: 'consent', request: transformOAuthConsentRequest(response) };
+  }
+
+  /**
+   * Returns the URL that takes the user back to the client with their decision.
+   */
+  static async decide(query: string, allow: boolean): Promise<string> {
+    const response = await ApiClient.post<OAuthRedirectApiResponse>(`${this.BASE_PATH}?${query}`, {
+      allow,
+    });
+    return response.redirect_url;
+  }
+}

types/oauth.ts

@@ -0,0 +1,34 @@
+import { createTransformer } from './transformer';
+
+export interface OAuthScope {
+  name: string;
+  description: string;
+}
+
+export interface OAuthConsentRequestApiResponse {
+  client_name: string;
+  redirect_host: string;
+  loopback_redirect: boolean;
+  scopes: OAuthScope[];
+}
+
+export interface OAuthRedirectApiResponse {
+  redirect_url: string;
+}
+
+export interface OAuthConsentRequest {
+  clientName: string;
+  redirectHost: string;
+  loopbackRedirect: boolean;
+  scopes: OAuthScope[];
+}
+
+export const transformOAuthConsentRequest = createTransformer<
+  OAuthConsentRequestApiResponse,
+  OAuthConsentRequest
+>((raw) => ({
+  clientName: raw.client_name,
+  redirectHost: raw.redirect_host,
+  loopbackRedirect: raw.loopback_redirect,
+  scopes: raw.scopes,
+}));