Better login feedback

Author: tannerlinsley

src/routes/_libraries/login.tsx

@@ -5,9 +5,13 @@ import { FaGithub, FaGoogle } from 'react-icons/fa'
 import { BrandContextMenu } from '~/components/BrandContextMenu'
 import { redirect, createFileRoute } from '@tanstack/react-router'
 import { getCurrentUser } from '~/utils/auth.server'
+import { z } from 'zod'
 
 export const Route = createFileRoute('/_libraries/login')({
   component: LoginPage,
+  validateSearch: z.object({
+    error: z.string().optional(),
+  }),
   loader: async () => {
     // Call server function directly from loader (works in both SSR and client)
     const user = await getCurrentUser()
@@ -69,10 +73,23 @@ export function SignInForm() {
 }
 
 function LoginPage() {
+  const { error } = Route.useSearch()
+
+  const errorMessages: Record<string, string> = {
+    oauth_failed: 'Authentication failed. Please try again.',
+  }
+
+  const errorMessage = error ? errorMessages[error] || 'An error occurred. Please try again.' : null
+
   return (
     <div className="min-h-screen ">
       <div className="container mx-auto px-4 py-16">
         <div className="max-w-2xl mx-auto text-center w-fit">
+          {errorMessage && (
+            <div className="mb-4 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-600 dark:text-red-400">
+              {errorMessage}
+            </div>
+          )}
           <SignInForm />
         </div>
       </div>

src/routes/api/auth/callback/$provider.tsx

@@ -19,13 +19,13 @@ export const Route = createFileRoute('/api/auth/callback/$provider')({
           const error = url.searchParams.get('error')
 
           if (error) {
-            console.error('[OAuth Callback] OAuth error received')
-            return Response.redirect(new URL('/login', request.url), 302)
+            console.error(`[OAuth Callback] OAuth error received: ${error}`)
+            return Response.redirect(new URL('/login?error=oauth_failed', request.url), 302)
           }
 
           if (!code || !state) {
             console.error('[OAuth Callback] Missing code or state')
-            return Response.redirect(new URL('/login', request.url), 302)
+            return Response.redirect(new URL('/login?error=oauth_failed', request.url), 302)
           }
 
           // Validate state from HTTPS-only cookie (CSRF protection)
@@ -36,14 +36,14 @@ export const Route = createFileRoute('/api/auth/callback/$provider')({
 
           if (!stateCookie) {
             console.error('[OAuth Callback] No state cookie found')
-            return Response.redirect(new URL('/login', request.url), 302)
+            return Response.redirect(new URL('/login?error=oauth_failed', request.url), 302)
           }
 
           const cookieState = decodeURIComponent(stateCookie.split('=').slice(1).join('=').trim())
 
           if (cookieState !== state) {
             console.error('[OAuth Callback] State mismatch')
-            return Response.redirect(new URL('/login', request.url), 302)
+            return Response.redirect(new URL('/login?error=oauth_failed', request.url), 302)
           }
 
           // Clear state cookie (one-time use)