fix: Clearer OAuth error feedback

Author: hhvrc

src/lib/auth/oauth-errors.ts

@@ -0,0 +1,16 @@
+export const OAUTH_ERROR_MESSAGES: Record<string, string> = {
+  oauthFlowNotStarted:
+    'No active sign-in attempt was found. The flow may have expired — please try again.',
+  providerMismatch:
+    'The sign-in attempt did not match the provider you returned from. Please try again.',
+  mustBeAnonymous: 'You are already signed in. Sign out before starting a new sign-in attempt.',
+  mustBeAuthenticated: 'You must be signed in to link an external account.',
+  emailAlreadyRegistered:
+    'An account with this email already exists. Sign in to that account to link this provider.',
+  internalError: 'Something went wrong on our end. Please try again in a moment.',
+  unknown: 'Unknown error occurred.',
+};
+
+export function getOAuthErrorMessage(code: string | null | undefined): string {
+  return (code && OAUTH_ERROR_MESSAGES[code]) ?? OAUTH_ERROR_MESSAGES.unknown;
+}

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

@@ -21,9 +21,13 @@
   import { backendMetadata } from '$lib/state/backend-metadata-state.svelte';
   import { userState } from '$lib/state/user-state.svelte';
   import { Skeleton } from '$lib/components/ui/skeleton';
+  import { page } from '$app/state';
+  import { getOAuthErrorMessage } from '$lib/auth/oauth-errors';
 
   registerBreadcrumbs(() => [{ label: 'Login' }]);
 
+  const oauthError = $derived(page.url.searchParams.get('error'));
+
   let usernameOrEmail = $state('');
   let password = $state('');
   let turnstileResponse = $state<string | null>(null);
@@ -87,6 +91,11 @@
     </Card.Description>
   </Card.Header>
   <Card.Content>
+    {#if oauthError}
+      <p class="text-destructive mb-4 text-center text-sm" role="alert">
+        {getOAuthErrorMessage(oauthError)}
+      </p>
+    {/if}
     <FieldGroup>
       {#if backendMetadata.state === null}
         <Skeleton class="h-9 w-full"></Skeleton>

src/routes/(auth)/oauth/error/+page.svelte

@@ -1,24 +1,39 @@
 <script lang="ts">
+  import { afterNavigate, goto, replaceState } from '$app/navigation';
   import { resolve } from '$app/paths';
   import { page } from '$app/state';
   import * as Card from '$lib/components/ui/card/index.js';
   import { FieldDescription } from '$lib/components/ui/field/index.js';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { getOAuthErrorMessage } from '$lib/auth/oauth-errors';
+  import { tick } from 'svelte';
 
   registerBreadcrumbs(() => [{ label: 'Authentication Error' }]);
 
-  let error = $derived(page.url.searchParams.get('error'));
+  let errorCode = $state<string>();
+
+  afterNavigate(async () => {
+    const err = page.url.searchParams.get('error');
+    if (err === 'emailAlreadyRegistered') {
+      await goto(resolve(`/login?error=${encodeURIComponent(err)}`), { replaceState: true });
+      return;
+    }
+    errorCode = err ?? 'unknown';
+    await tick();
+    replaceState(resolve('/oauth/error'), {});
+  });
 </script>
 
-<Card.Root>
-  <Card.Header class="text-center">
-    <Card.Title class="text-xl">Authentication Error</Card.Title>
-    <Card.Description>Something went wrong during authentication</Card.Description>
-  </Card.Header>
-  <Card.Content>
-    <p class="text-destructive text-center" role="alert">{error}</p>
-    <FieldDescription class="mt-4 text-center">
-      <a href={resolve('/login')}>Back to login</a>
-    </FieldDescription>
-  </Card.Content>
-</Card.Root>
+{#if errorCode}
+  <Card.Root>
+    <Card.Header class="text-center">
+      <Card.Title class="text-xl">Authentication Error</Card.Title>
+    </Card.Header>
+    <Card.Content>
+      <p class="text-destructive text-center" role="alert">{getOAuthErrorMessage(errorCode)}</p>
+      <FieldDescription class="mt-4 text-center">
+        <a href={resolve('/login')}>Back to login</a>
+      </FieldDescription>
+    </Card.Content>
+  </Card.Root>
+{/if}