update better-auth and graceful auth error (#1279)

# 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

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Ahmet Kilinc
2025-06-10 21:53:24 +01:00
committed by GitHub
parent cc602257a5
commit 85c29ea10f
4 changed files with 28 additions and 11 deletions

View File

@@ -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<Record<string, boolean>>({});
const [error, _] = useQueryState('error');
useEffect(() => {
const missing = providers.find((p) => p.required && !p.enabled);
@@ -135,6 +138,13 @@ function LoginClientContent({ providers, isProd }: LoginClientProps) {
<div className="w-full space-y-4">
<p className="text-center text-4xl font-bold text-white md:text-5xl">Login to Zero</p>
{error && (
<Alert variant="default" className="border-orange-500/40 bg-orange-500/10">
<AlertTitle className="text-orange-400">Error</AlertTitle>
<AlertDescription>Failed to log you in. Please try again.</AlertDescription>
</Alert>
)}
{shouldShowDetailedConfig && (
<div className="rounded-lg border border-black/10 bg-black/5 p-5 dark:border-white/10 dark:bg-white/5">
<div className="flex flex-col space-y-4">

View File

@@ -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;
};

14
pnpm-lock.yaml generated
View File

@@ -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

View File

@@ -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