Use POST forms instead of fetch for OAuth redirects

Author: hhvrc

src/lib/api/next/base.ts

@@ -65,34 +65,4 @@ export async function PostJson<T>(
   const data = await res.json();
 
   return transformer(data);
-}
-
-export async function PostRedirect(
-  path: Path,
-  expectedStatus: 302 | 303 | 307 | 308 = 302
-): Promise<void> {
-  const url = BaseUrl + path;
-  const res = await fetch(url, { method: 'POST', redirect: 'manual' });
-
-  if (res.status !== expectedStatus) {
-    throw new ResponseError(res, `Unexpected status ${res.status} for POST ${url}`);
-  }
-
-  const loc = res.headers.get('Location');
-  if (!loc) throw new ResponseError(res, 'Missing Location header');
-
-  const target = new URL(loc, url); // handles absolute or relative
-
-  // Restrict which domains we can be redirected to
-  const allowedHosts = new Set([PUBLIC_BACKEND_API_DOMAIN, 'accounts.google.com', 'github.com']);
-
-  if (!allowedHosts.has(target.hostname)) {
-    throw new ResponseError(res, `Blocked redirect to disallowed host ${target.href}`);
-  }
-
-  if (target.protocol !== 'https:') {
-    throw new ResponseError(res, `Blocked non-HTTPS redirect to ${target.href}`);
-  }
-
-  window.location.assign(target.toString());
-}
+}

src/lib/api/next/oauth.ts

@@ -1,4 +1,4 @@
-import { GetJson, PostJson, PostRedirect } from './base';
+import { GetBackendUrl, GetJson, PostJson } from './base';
 import type { LoginOkResponse, OAuthFinalizeRequest, OAuthSignupData } from './models';
 import {
   TransformLoginOkResponse,
@@ -10,10 +10,10 @@ export function OAuthListProviders(): Promise<string[]> {
   return GetJson<string[]>('/1/oauth/providers', 200, ValidateStringArray);
 }
 
-export function OAuthAuthorize(provider: string, flow: 'LoginOrCreate' | 'Link') {
+export function GetOAuthAuthorizeUrl(provider: string, flow: 'LoginOrCreate' | 'Link') {
   const providerEnc = encodeURIComponent(provider);
   const flowEnc = encodeURIComponent(flow);
-  return PostRedirect(`/1/oauth/${providerEnc}/authorize?flow=${flowEnc}`, 302);
+  return GetBackendUrl(`/1/oauth/${providerEnc}/authorize?flow=${flowEnc}`);
 }
 
 export async function OAuthSignupGetData(provider: string) {

src/routes/(anonymous)/login/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { PUBLIC_BACKEND_API_DOMAIN } from '$env/static/public';
   import { accountV2Api } from '$lib/api';
-  import { OAuthAuthorize } from '$lib/api/next/oauth';
+  import { GetOAuthAuthorizeUrl } from '$lib/api/next/oauth';
   import Container from '$lib/components/Container.svelte';
   import Turnstile from '$lib/components/Turnstile.svelte';
   import PasswordInput from '$lib/components/input/PasswordInput.svelte';
@@ -54,11 +53,6 @@
     }
   }
 
-  async function startOAuth() {
-    const provider = 'discord';
-    await OAuthAuthorize(provider, 'LoginOrCreate');
-  }
-
   let canSubmit = $derived(
     usernameOrEmail.length > 0 && password.length > 0 && turnstileResponse != null
   );
@@ -89,7 +83,9 @@
     <Button type="submit" disabled={!canSubmit}>Log In</Button>
 
     <a class=" text-sm opacity-75 hover:underline" href="/forgot-password">Forgot your password?</a>
-
-    <Button type="button" onclick={startOAuth}>Log In With Discord</Button>
+  </form>
+  
+  <form action={GetOAuthAuthorizeUrl('discord', 'LoginOrCreate')} method="POST">
+    <Button type="submit">Log In With Discord</Button>
   </form>
 </Container>

src/routes/(authenticated)/settings/connections/+page.svelte

@@ -6,7 +6,7 @@
   import { page } from '$app/state';
   import { accountV1Api } from '$lib/api';
   import type { OAuthConnectionResponse } from '$lib/api/internal/v1/models';
-  import { OAuthAuthorize, OAuthListProviders } from '$lib/api/next/oauth';
+  import { OAuthListProviders } from '$lib/api/next/oauth';
   import Container from '$lib/components/Container.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as Card from '$lib/components/ui/card';
@@ -21,7 +21,6 @@
   let loading = $state(false); // overall refresh button state
   let loadingProviders = $state(true);
   let loadingConnections = $state(true);
-  let actionBusy = $state<string | null>(null); // providerKey currently acting on
 
   // From redirect (?status=)
   let queryStatus = $derived(page.url.searchParams.get('status'));
@@ -82,18 +81,6 @@
     return connections.find((c) => c.providerKey === key)?.displayName ?? null;
   }
 
-  // Start an OAuth flow via your backend redirect
-  async function beginLink(providerKey: string) {
-    actionBusy = providerKey;
-    try {
-      await OAuthAuthorize(providerKey, 'Link');
-    } catch (err) {
-      await handleApiError(err);
-    } finally {
-      actionBusy = null;
-    }
-  }
-
   // Open confirm dialog for disconnect
   function confirmDisconnect(providerKey: string) {
     const existing = connections.find((c) => c.providerKey === providerKey);
@@ -145,13 +132,8 @@
           {:else}
             {#each providers as p}
               {#if !isConnected(p)}
-                <Dropdown.Item
-                  onclick={() => beginLink(p)}
-                  data-provider={p}
-                  disabled={actionBusy === p}
-                >
-                  <Link2 class="mr-2 size-4" />
-                  {actionBusy === p ? `Starting ${p}…` : p}
+                <Dropdown.Item>
+                  <Link2 class="mr-2 size-4" /> <!-- TODO: Form + button [POST] -->
                 </Dropdown.Item>
               {/if}
             {/each}