feat(auth): inline, specific error states on login and signup (#1440)

* feat(auth): inline, specific error states on login and signup Auth failures now render inline next to the form instead of as a top-right toast: a persistent alert with role=alert, aria-invalid field highlighting, and focus returned to the offending field. Login maps GoTrue error codes (invalid_credentials, email_not_confirmed, rate limits, user_banned) to specific Swedish/English messages, with a reset-password link embedded in the credentials error. The credentials message stays 'wrong email or password' by design: GoTrue returns one code for both cases to prevent account enumeration. Signup gets a live password-requirements checklist, field-level errors for weak/mismatched passwords, and inline handling of email-exists, invalid-email and rate-limit responses with a sign-in link where that is the recovery path. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(auth): treat email_provider_disabled as signup-disabled with specific copy Review follow-up: GoTrue signals disabled email/password signups with email_provider_disabled as well as signup_disabled; classify both (plus the message-string fallback for older GoTrue) and give the register form a specific inline message instead of the generic fallback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-08-06 21:24:36 +02:00
parent a0ca692fed
commit 0bb0b89353
9 changed files with 420 additions and 99 deletions
@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { classifyAuthError } from '../classify-auth-error'
+
+describe('classifyAuthError', () => {
+  it('maps GoTrue error codes', () => {
+    expect(classifyAuthError({ code: 'invalid_credentials', message: 'Invalid login credentials', status: 400 }))
+      .toBe('invalid_credentials')
+    expect(classifyAuthError({ code: 'email_not_confirmed', message: 'Email not confirmed', status: 400 }))
+      .toBe('email_not_confirmed')
+    expect(classifyAuthError({ code: 'over_request_rate_limit', message: 'Request rate limit reached', status: 429 }))
+      .toBe('rate_limited')
+    expect(classifyAuthError({ code: 'over_email_send_rate_limit', message: '...', status: 429 }))
+      .toBe('rate_limited')
+    expect(classifyAuthError({ code: 'user_banned', message: 'User is banned', status: 403 }))
+      .toBe('user_banned')
+    expect(classifyAuthError({ code: 'user_already_exists', message: 'User already registered', status: 422 }))
+      .toBe('email_exists')
+    expect(classifyAuthError({ code: 'weak_password', message: 'Password is too weak', status: 422 }))
+      .toBe('weak_password')
+    expect(classifyAuthError({ code: 'email_address_invalid', message: 'Email address is invalid', status: 400 }))
+      .toBe('email_invalid')
+    expect(classifyAuthError({ code: 'signup_disabled', message: 'Signups not allowed', status: 400 }))
+      .toBe('signup_disabled')
+    expect(classifyAuthError({ code: 'email_provider_disabled', message: 'Email signups are disabled', status: 400 }))
+      .toBe('signup_disabled')
+  })
+
+  it('falls back on message strings when code is missing (older self-hosted GoTrue)', () => {
+    expect(classifyAuthError({ message: 'Invalid login credentials', status: 400 }))
+      .toBe('invalid_credentials')
+    expect(classifyAuthError({ message: 'Email not confirmed', status: 400 }))
+      .toBe('email_not_confirmed')
+    expect(classifyAuthError({ message: 'User already registered', status: 422 }))
+      .toBe('email_exists')
+    expect(classifyAuthError({ message: 'Signups not allowed for this instance', status: 400 }))
+      .toBe('signup_disabled')
+    expect(classifyAuthError({ message: 'Email signups are disabled', status: 400 }))
+      .toBe('signup_disabled')
+    expect(classifyAuthError({ message: 'Email rate limit exceeded', status: 429 }))
+      .toBe('rate_limited')
+  })
+
+  it('falls back on HTTP 429 when neither code nor message identifies the error', () => {
+    expect(classifyAuthError({ message: 'something opaque', status: 429 })).toBe('rate_limited')
+  })
+
+  it('returns unknown for unrecognized or malformed input', () => {
+    expect(classifyAuthError({ code: 'mfa_totp_verify_not_enabled', message: 'x', status: 400 })).toBe('unknown')
+    expect(classifyAuthError({ message: 'fetch failed' })).toBe('unknown')
+    expect(classifyAuthError(new Error('network down'))).toBe('unknown')
+    expect(classifyAuthError('a string')).toBe('unknown')
+    expect(classifyAuthError(null)).toBe('unknown')
+    expect(classifyAuthError(undefined)).toBe('unknown')
+  })
+
+  it('never leaks which credential part failed: unknown email and wrong password share a kind', () => {
+    const unknownEmail = { code: 'invalid_credentials', message: 'Invalid login credentials', status: 400 }
+    const wrongPassword = { code: 'invalid_credentials', message: 'Invalid login credentials', status: 400 }
+    expect(classifyAuthError(unknownEmail)).toBe(classifyAuthError(wrongPassword))
+  })
+})
@@ -0,0 +1,62 @@
+/**
+ * Classifies Supabase GoTrue auth errors into a small set of kinds the auth
+ * pages can map to specific, localized inline messages.
+ *
+ * Security note: GoTrue deliberately returns the same `invalid_credentials`
+ * code for "unknown email" and "wrong password" so the login form cannot be
+ * used to probe which addresses have accounts (anti-enumeration). The UI must
+ * keep that ambiguity: "wrong email or password", never "wrong password".
+ *
+ * Hosted runs a current GoTrue where `error.code` is always set; self-hosted
+ * installations may run older images without `code`, so the classifier falls
+ * back on the stable English message strings, then on HTTP status.
+ */
+
+export type AuthErrorKind =
+  | 'invalid_credentials'
+  | 'email_not_confirmed'
+  | 'rate_limited'
+  | 'user_banned'
+  | 'email_exists'
+  | 'weak_password'
+  | 'email_invalid'
+  | 'signup_disabled'
+  | 'unknown'
+
+const CODE_MAP: Record<string, AuthErrorKind> = {
+  invalid_credentials: 'invalid_credentials',
+  email_not_confirmed: 'email_not_confirmed',
+  over_request_rate_limit: 'rate_limited',
+  over_email_send_rate_limit: 'rate_limited',
+  user_banned: 'user_banned',
+  user_already_exists: 'email_exists',
+  email_exists: 'email_exists',
+  weak_password: 'weak_password',
+  email_address_invalid: 'email_invalid',
+  signup_disabled: 'signup_disabled',
+  email_provider_disabled: 'signup_disabled',
+}
+
+export function classifyAuthError(error: unknown): AuthErrorKind {
+  if (typeof error !== 'object' || error === null) return 'unknown'
+  const { code, message, status } = error as {
+    code?: unknown
+    message?: unknown
+    status?: unknown
+  }
+
+  if (typeof code === 'string' && CODE_MAP[code]) return CODE_MAP[code]
+
+  if (typeof message === 'string') {
+    if (/invalid login credentials/i.test(message)) return 'invalid_credentials'
+    if (/email not confirmed/i.test(message)) return 'email_not_confirmed'
+    if (/already registered/i.test(message)) return 'email_exists'
+    if (/signups? not allowed/i.test(message)) return 'signup_disabled'
+    if (/signups? (are )?disabled/i.test(message)) return 'signup_disabled'
+    if (/rate limit/i.test(message)) return 'rate_limited'
+  }
+
+  if (status === 429) return 'rate_limited'
+
+  return 'unknown'
+}