From 85c29ea10f1351aea833484d47f9d14fa93fe7a2 Mon Sep 17 00:00:00 2001 From: Ahmet Kilinc Date: Tue, 10 Jun 2025 21:53:24 +0100 Subject: [PATCH] update better-auth and graceful auth error (#1279) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Improved Authentication Error Handling ## Description This PR enhances the login experience by adding proper error handling for authentication failures. It adds an error alert component to the login page that displays when authentication fails, and configures the auth system to redirect users back to the login page with an error parameter when authentication errors occur. The changes include: - Added an error alert component on the login page that shows when the 'error' query parameter is present - Configured `onAPIError` in the auth config to redirect to the login page on authentication failures - Updated the better-auth dependency from 1.2.8 to 1.2.9 ## Type of Change - [x] 🎨 UI/UX improvement ## Areas Affected - [x] User Interface/Experience - [x] Authentication/Authorization ## Summary by CodeRabbit - **New Features** - Added an alert message on the login page to inform users when a login attempt fails. - **Chores** - Updated the version of the authentication package to improve reliability. --- apps/mail/app/(auth)/login/login-client.tsx | 16 +++++++++++++--- apps/server/src/lib/auth.ts | 7 +++++++ pnpm-lock.yaml | 14 +++++++------- pnpm-workspace.yaml | 2 +- 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/apps/mail/app/(auth)/login/login-client.tsx b/apps/mail/app/(auth)/login/login-client.tsx index 42f608f4a..eadf4f07e 100644 --- a/apps/mail/app/(auth)/login/login-client.tsx +++ b/apps/mail/app/(auth)/login/login-client.tsx @@ -1,11 +1,13 @@ -import { useEffect, type ReactNode, useState, Suspense } from 'react'; +import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; +import { Suspense, useEffect, useState, type ReactNode } from 'react'; import type { EnvVarInfo } from '@zero/server/auth-providers'; -import ErrorMessage from '@/app/(auth)/login/error-message'; -import { signIn, useSession } from '@/lib/auth-client'; import { Google, Microsoft } from '@/components/icons/icons'; +import ErrorMessage from '@/app/(auth)/login/error-message'; import { Button } from '@/components/ui/button'; import { TriangleAlert } from 'lucide-react'; +import { signIn } from '@/lib/auth-client'; import { useNavigate } from 'react-router'; +import { useQueryState } from 'nuqs'; import { toast } from 'sonner'; interface EnvVarStatus { @@ -68,6 +70,7 @@ const getProviderIcon = (providerId: string, className?: string): ReactNode => { function LoginClientContent({ providers, isProd }: LoginClientProps) { const navigate = useNavigate(); const [expandedProviders, setExpandedProviders] = useState>({}); + const [error, _] = useQueryState('error'); useEffect(() => { const missing = providers.find((p) => p.required && !p.enabled); @@ -135,6 +138,13 @@ function LoginClientContent({ providers, isProd }: LoginClientProps) {

Login to Zero

+ {error && ( + + Error + Failed to log you in. Please try again. + + )} + {shouldShowDetailedConfig && (
diff --git a/apps/server/src/lib/auth.ts b/apps/server/src/lib/auth.ts index 9d0c6aeb9..82b65c331 100644 --- a/apps/server/src/lib/auth.ts +++ b/apps/server/src/lib/auth.ts @@ -283,6 +283,13 @@ const createAuthConfig = () => { trustedProviders: ['google', 'microsoft'], }, }, + onAPIError: { + onError: (error, ctx) => { + console.error('API Error', error); + }, + errorURL: `${env.VITE_PUBLIC_APP_URL}/login`, + throw: true, + }, } satisfies BetterAuthOptions; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b555847ee..527b5fe54 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,8 +19,8 @@ catalogs: specifier: ^0.0.48 version: 0.0.48 better-auth: - specifier: ^1.2.8 - version: 1.2.8 + specifier: ^1.2.9 + version: 1.2.9 drizzle-kit: specifier: ^0.31.1 version: 0.31.1 @@ -207,7 +207,7 @@ importers: version: 19.1.0-rc.2 better-auth: specifier: 'catalog:' - version: 1.2.8 + version: 1.2.9 canvas-confetti: specifier: 1.9.3 version: 1.9.3 @@ -529,7 +529,7 @@ importers: version: 1.5.1 better-auth: specifier: 'catalog:' - version: 1.2.8 + version: 1.2.9 date-fns: specifier: ^4.1.0 version: 4.1.0 @@ -3840,8 +3840,8 @@ packages: base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} - better-auth@1.2.8: - resolution: {integrity: sha512-y8ry7ZW3/3ZIr82Eo1zUDtMzdoQlFnwNuZ0+b0RxoNZgqmvgTIc/0tCDC7NDJerqSu4UCzer0dvYxBsv3WMIGg==} + better-auth@1.2.9: + resolution: {integrity: sha512-WLqBXDzuaCQetQctLGC5oTfGmL32zUvxnM4Y+LZkhwseMaZWq5EKI+c/ZATgz2YkFt7726q659PF8CfB9P1VuA==} better-call@1.0.9: resolution: {integrity: sha512-Qfm0gjk0XQz0oI7qvTK1hbqTsBY4xV2hsHAxF8LZfUYl3RaECCIifXuVqtPpZJWvlCCMlQSvkvhhyuApGUba6g==} @@ -10727,7 +10727,7 @@ snapshots: base64-js@1.5.1: {} - better-auth@1.2.8: + better-auth@1.2.9: dependencies: '@better-auth/utils': 0.2.5 '@better-fetch/fetch': 1.1.18 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 69a647433..bf4126e60 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -4,7 +4,7 @@ packages: - scripts/* catalog: zod: ^3.25.42 - better-auth: ^1.2.8 + better-auth: ^1.2.9 autumn-js: ^0.0.48 superjson: ^2.2.2 '@trpc/server': ^11.1.4