@djangocfg/layouts 2.1.598 → 2.1.600

package/src/layouts/AuthLayout/components/oauth/oauthCallbackParams.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+
+import { readOAuthCallback, stripOAuthCallbackParams } from './oauthCallbackParams';
+
+const isProvider = (value: string): value is 'github' | 'google' => value === 'github' || value === 'google';
+const read = (query: string) => readOAuthCallback(new URLSearchParams(query), isProvider);
+
+describe('readOAuthCallback', () => {
+  it('ignores a page that is not a callback', () => {
+    expect(read('')).toEqual({ kind: 'none' });
+    expect(read('code=abc&state=xyz')).toEqual({ kind: 'none' });
+  });
+
+  it('asks for the exchange when provider, code and state are present', () => {
+    expect(read('provider=google&code=c1&state=s1&scope=openid&authuser=0&prompt=none')).toEqual({
+      kind: 'exchange',
+      provider: 'google',
+      code: 'c1',
+      state: 's1',
+    });
+  });
+
+  it('treats Cancel (access_denied, no code) as a cancellation', () => {
+    expect(read('provider=google&error=access_denied&state=s1')).toEqual({
+      kind: 'failure',
+      provider: 'google',
+      code: 'cancelled',
+      description: 'access_denied',
+    });
+  });
+
+  it('carries the description of another provider error without naming a cause', () => {
+    expect(read('provider=github&error=server_error&error_description=Oops')).toEqual({
+      kind: 'failure',
+      provider: 'github',
+      code: undefined,
+      description: 'Oops',
+    });
+  });
+
+  it('prefers the provider error over a code', () => {
+    expect(read('provider=google&error=access_denied&code=c1&state=s1').kind).toBe('failure');
+  });
+
+  it('rejects an unknown provider', () => {
+    expect(read('provider=myspace&code=c1&state=s1')).toMatchObject({
+      kind: 'failure',
+      provider: 'myspace',
+      code: 'unknown_provider',
+    });
+  });
+
+  it('rejects a callback without code or state as an invalid state', () => {
+    expect(read('provider=google&code=c1')).toMatchObject({ kind: 'failure', code: 'invalid_state' });
+    expect(read('provider=google&state=s1')).toMatchObject({ kind: 'failure', code: 'invalid_state' });
+    expect(read('provider=google')).toMatchObject({ kind: 'failure', code: 'invalid_state' });
+  });
+});
+
+describe('stripOAuthCallbackParams', () => {
+  it('removes every callback parameter and keeps the rest', () => {
+    const href =
+      'https://app.example.com/auth?provider=google&code=c1&state=s1&scope=openid+email&authuser=0&prompt=consent&hd=x.com&lang=de#top';
+    expect(stripOAuthCallbackParams(href)).toBe('/auth?lang=de#top');
+  });
+
+  it('removes error parameters', () => {
+    expect(
+      stripOAuthCallbackParams('https://a.example/auth?provider=google&error=access_denied&error_description=x'),
+    ).toBe('/auth');
+  });
+
+  it('leaves a clean URL alone', () => {
+    expect(stripOAuthCallbackParams('https://a.example/auth#x/y?z=1')).toBe('/auth#x/y?z=1');
+  });
+});

package/src/layouts/AuthLayout/components/oauth/oauthCallbackParams.ts

@@ -0,0 +1,70 @@
+import type { OAuthFailureCode, OAuthProviderId } from '@djangocfg/api/auth';
+
+/** Query parameters a provider round trip leaves on the callback URL. */
+export const OAUTH_CALLBACK_PARAMS = [
+  'provider',
+  'code',
+  'state',
+  'scope',
+  'authuser',
+  'prompt',
+  'hd',
+  'iss',
+  'error',
+  'error_description',
+  'error_uri',
+] as const;
+
+/** What the callback URL asks the page to do. */
+export type OAuthCallbackIntent =
+  | { kind: 'none' }
+  | { kind: 'exchange'; provider: OAuthProviderId; code: string; state: string }
+  /** The provider returned without a code. `code` is set when we know the cause (Cancel). */
+  | { kind: 'failure'; provider: string; code?: OAuthFailureCode; description?: string };
+
+/**
+ * Decide what a callback URL means. Pure: no storage, no network.
+ *
+ * `provider` is the only trigger, so a normal visit to the sign-in page is
+ * `none`. A provider `error` wins over a `code`: it is a refusal, whatever
+ * else rides along.
+ */
+export const readOAuthCallback = (
+  params: URLSearchParams,
+  isOAuthProviderId: (value: string) => value is OAuthProviderId,
+): OAuthCallbackIntent => {
+  const provider = params.get('provider');
+  if (!provider) return { kind: 'none' };
+
+  if (!isOAuthProviderId(provider)) {
+    return { kind: 'failure', provider, code: 'unknown_provider' };
+  }
+
+  const providerError = params.get('error');
+  if (providerError) {
+    return {
+      kind: 'failure',
+      provider,
+      // Google answers Cancel with `access_denied`; every other provider error is not ours to explain.
+      code: providerError === 'access_denied' ? 'cancelled' : undefined,
+      description: params.get('error_description') || providerError,
+    };
+  }
+
+  const code = params.get('code');
+  const state = params.get('state');
+  if (!code || !state) return { kind: 'failure', provider, code: 'invalid_state' };
+
+  return { kind: 'exchange', provider, code, state };
+};
+
+/**
+ * The same URL without the callback parameters. The code and state are single
+ * use and must not stay in the address bar, history or a shared link; every
+ * other parameter and the hash are kept.
+ */
+export const stripOAuthCallbackParams = (href: string): string => {
+  const url = new URL(href);
+  for (const key of OAUTH_CALLBACK_PARAMS) url.searchParams.delete(key);
+  return `${url.pathname}${url.search}${url.hash}`;
+};

package/src/layouts/AuthLayout/components/oauth/oauthErrors.ts

@@ -0,0 +1,64 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import type { OAuthFailureCode } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+
+/**
+ * Copy for each failure code. Exhaustive on purpose: a code the backend adds
+ * fails typecheck here until someone decides what to tell the visitor.
+ */
+export const OAUTH_ERROR_KEYS = {
+  invalid_state: 'layouts.auth.oauth.error.invalid_state',
+  oauth_exchange_failed: 'layouts.auth.oauth.error.oauth_exchange_failed',
+  invalid_id_token: 'layouts.auth.oauth.error.invalid_id_token',
+  email_missing: 'layouts.auth.oauth.error.email_missing',
+  email_not_verified: 'layouts.auth.oauth.error.email_not_verified',
+  hosted_domain_not_allowed: 'layouts.auth.oauth.error.hosted_domain_not_allowed',
+  account_inactive: 'layouts.auth.oauth.error.account_inactive',
+  link_not_allowed: 'layouts.auth.oauth.error.link_not_allowed',
+  rate_limited: 'layouts.auth.oauth.error.rate_limited',
+  provider_unavailable: 'layouts.auth.oauth.error.provider_unavailable',
+  cancelled: 'layouts.auth.oauth.error.cancelled',
+  generic: 'layouts.auth.oauth.error.generic',
+} as const;
+
+type OAuthErrorKey = (typeof OAUTH_ERROR_KEYS)[keyof typeof OAUTH_ERROR_KEYS];
+
+/** Maps every failure code to one of the keys above. Configuration faults the visitor cannot fix read as "unavailable" or generic. */
+export const OAUTH_CODE_TO_KEY: Record<OAuthFailureCode, OAuthErrorKey> = {
+  invalid_state: OAUTH_ERROR_KEYS.invalid_state,
+  oauth_exchange_failed: OAUTH_ERROR_KEYS.oauth_exchange_failed,
+  invalid_id_token: OAUTH_ERROR_KEYS.invalid_id_token,
+  email_missing: OAUTH_ERROR_KEYS.email_missing,
+  email_not_verified: OAUTH_ERROR_KEYS.email_not_verified,
+  hosted_domain_not_allowed: OAUTH_ERROR_KEYS.hosted_domain_not_allowed,
+  account_inactive: OAUTH_ERROR_KEYS.account_inactive,
+  link_not_allowed: OAUTH_ERROR_KEYS.link_not_allowed,
+  rate_limited: OAUTH_ERROR_KEYS.rate_limited,
+  provider_unavailable: OAUTH_ERROR_KEYS.provider_unavailable,
+  cancelled: OAUTH_ERROR_KEYS.cancelled,
+  oauth_disabled: OAUTH_ERROR_KEYS.provider_unavailable,
+  github_oauth_disabled: OAUTH_ERROR_KEYS.provider_unavailable,
+  origin_not_allowed: OAUTH_ERROR_KEYS.generic,
+  missing_redirect_uri: OAUTH_ERROR_KEYS.generic,
+  server_error: OAUTH_ERROR_KEYS.generic,
+  not_found: OAUTH_ERROR_KEYS.generic,
+  unknown_provider: OAUTH_ERROR_KEYS.generic,
+};
+
+/**
+ * The visitor-facing sentence for a failure: the translated copy of its code,
+ * else the text the hook carried (server prose), else the generic sentence.
+ */
+export const useOAuthErrorText = () => {
+  const t = useAppT();
+  return useCallback(
+    (code?: OAuthFailureCode | null, fallback?: string | null): string => {
+      if (code) return t(OAUTH_CODE_TO_KEY[code]);
+      return fallback || t(OAUTH_ERROR_KEYS.generic);
+    },
+    [t],
+  );
+};

package/src/layouts/AuthLayout/components/oauth/oauthProviders.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+
+import { resolveOAuthProviders } from './oauthProviders';
+
+describe('resolveOAuthProviders', () => {
+  it('shows everything the server lists, in the server order', () => {
+    expect(resolveOAuthProviders(['github', 'google'])).toEqual(['github', 'google']);
+  });
+
+  it('narrows to the requested ids', () => {
+    expect(resolveOAuthProviders(['github', 'google'], ['google'])).toEqual(['google']);
+  });
+
+  it('orders by the request', () => {
+    expect(resolveOAuthProviders(['github', 'google'], ['google', 'github'])).toEqual(['google', 'github']);
+  });
+
+  it('never shows a provider the server did not list', () => {
+    expect(resolveOAuthProviders(['github'], ['google', 'github'])).toEqual(['github']);
+    expect(resolveOAuthProviders([], ['google'])).toEqual([]);
+  });
+
+  it('shows nothing for an empty request and drops duplicates', () => {
+    expect(resolveOAuthProviders(['github', 'google'], [])).toEqual([]);
+    expect(resolveOAuthProviders(['github', 'google'], ['google', 'google'])).toEqual(['google']);
+  });
+});

package/src/layouts/AuthLayout/components/oauth/oauthProviders.ts

@@ -0,0 +1,17 @@
+import type { OAuthProviderId } from '@djangocfg/api/auth';
+
+/**
+ * The providers to show: the server's list, narrowed and ordered by the app's
+ * `oauthProviders` prop when it gives one.
+ *
+ * The server owns availability, so the prop can only remove or reorder; an id
+ * the server did not list is never shown, whatever the prop says.
+ */
+export const resolveOAuthProviders = (
+  server: readonly OAuthProviderId[],
+  requested?: readonly OAuthProviderId[],
+): OAuthProviderId[] => {
+  if (!requested) return [...server];
+  const enabled = new Set(server);
+  return [...new Set(requested)].filter((id) => enabled.has(id));
+};

package/src/layouts/AuthLayout/components/shared/AuthButton.tsx

@@ -3,7 +3,8 @@
 import React, { memo } from 'react';
 
 export interface AuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary';
+  /** `google` follows Google's button branding and is not themed by `--secondary`. */
+  variant?: 'primary' | 'secondary' | 'google';
   loading?: boolean;
   children: React.ReactNode;
 }
@@ -23,7 +24,7 @@ function AuthButtonRaw({
   className = '',
   ...props
 }: AuthButtonProps) {
-  const variantClass = variant === 'primary' ? 'auth-button-primary' : 'auth-button-secondary';
+  const variantClass = `auth-button-${variant}`;
   const loadingClass = loading ? 'auth-button-loading' : '';
 
   return (
@@ -31,6 +32,7 @@ function AuthButtonRaw({
       type="submit"
       className={`auth-button ${variantClass} ${loadingClass} ${className}`}
       disabled={disabled || loading}
+      aria-busy={loading || undefined}
       {...props}
     >
       {children}

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { Github } from 'lucide-react';
 import React, { memo, useEffect, useMemo, useRef } from 'react';
 
-import { useGithubAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Checkbox, Input } from '@djangocfg/ui-core/components';
 
 import { useAuthLayoutContext } from '../../layoutContext';
 import { useAuthFormContext } from '../../context';
+import { OAuthButtons } from '../oauth';
 import {
   AuthButton,
   AuthConsent,
@@ -24,8 +23,9 @@ import {
  * Clean, minimal design with:
  * - Optional logo, stood down on desktop when the media half carries the brand
  * - Single email input field, with its error directly beneath it
- * - Passive consent line (continuing = consent; no opt-in checkbox)
- * - OAuth options
+ * - Provider buttons first (only those the server enables), then "or", then
+ *   the email path: one tap signs a returning visitor in
+ * - Passive consent line under both (continuing = consent; no opt-in checkbox)
  *
  * Memoised: this component has no props; it reads everything from
  * context. The memo wrapper prevents re-renders when the parent
@@ -45,7 +45,7 @@ function IdentifierStepRaw() {
     logo,
     termsUrl,
     privacyUrl,
-    enableGithubAuth,
+    oauth,
     sourceUrl,
     marketingConsent,
     marketingConsentConfig,
@@ -92,16 +92,19 @@ function IdentifierStepRaw() {
       email: t('layouts.auth.identifier.placeholder.email'),
     },
     button: t('layouts.auth.identifier.button'),
-    oauth: {
-      github: t('layouts.auth.identifier.oauth.github'),
-    },
   }), [t]);
 
-  // GitHub OAuth
-  const { isLoading: isGithubLoading, startGithubAuth } = useGithubAuth({
-    sourceUrl,
-    onError: setError,
-  });
+  const hasOAuth = oauth.providers.length > 0;
+
+  // With buttons above it, the field must not grab focus: on a phone the
+  // keyboard would cover them. Without providers the page behaves as it always
+  // did, once we know that (the list arrives after mount).
+  const emailRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (oauth.isReady && !hasOAuth && document.activeElement === document.body) {
+      emailRef.current?.focus();
+    }
+  }, [oauth.isReady, hasOAuth]);
 
   return (
     <AuthContainer step="identifier">
@@ -114,8 +117,22 @@ function IdentifierStepRaw() {
         />
       )}
 
+      {hasOAuth && (
+        <>
+          <OAuthButtons
+            providers={oauth.providers}
+            sourceUrl={sourceUrl}
+            disabled={isLoading}
+            onError={setError}
+          />
+          <AuthDivider />
+        </>
+      )}
+      {!oauth.isReady && <div className="auth-oauth-reserve" aria-hidden="true" />}
+
       <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
         <Input
+          ref={emailRef}
           type="email"
           name="email"
           value={identifier}
@@ -123,7 +140,6 @@ function IdentifierStepRaw() {
           placeholder={content.placeholder.email}
           disabled={isLoading}
           required
-          autoFocus
           autoComplete="email"
           inputMode="email"
           autoCapitalize="off"
@@ -162,20 +178,6 @@ function IdentifierStepRaw() {
         <AuthConsent termsUrl={termsUrl} privacyUrl={privacyUrl} />
       </form>
 
-      {enableGithubAuth && (
-        <>
-          <AuthDivider />
-          <AuthButton
-            type="button"
-            variant="secondary"
-            loading={isGithubLoading}
-            onClick={startGithubAuth}
-          >
-            <Github className="w-5 h-5" />
-            {content.oauth.github}
-          </AuthButton>
-        </>
-      )}
     </AuthContainer>
   );
 }

package/src/layouts/AuthLayout/context.tsx

@@ -2,8 +2,9 @@
 
 import React, { createContext, useContext, useMemo } from 'react';
 
-import { useAuthForm } from '@djangocfg/api/auth';
+import { useAuthForm, useOAuthProviders } from '@djangocfg/api/auth';
 
+import { resolveOAuthProviders } from './components/oauth/oauthProviders';
 import type { AuthFormContextType, AuthLayoutProps } from './types';
 
 // Exported so test/mock providers (storybook) can supply their own value
@@ -24,7 +25,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   supportUrl,
   termsUrl,
   privacyUrl,
-  enableGithubAuth = false,
+  oauthProviders,
   logo,
   redirectUrl,
   marketingConsent,
@@ -37,6 +38,16 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   // Require terms acceptance only if terms or privacy URL is provided
   const requireTermsAcceptance = Boolean(termsUrl || privacyUrl);
 
+  // The server's provider list, narrowed by the optional `oauthProviders` prop.
+  const { providers: serverProviders, isReady: oauthReady } = useOAuthProviders();
+  const oauth = useMemo(
+    () => ({
+      providers: resolveOAuthProviders(serverProviders.map((p) => p.id), oauthProviders),
+      isReady: oauthReady,
+    }),
+    [serverProviders, oauthProviders, oauthReady],
+  );
+
   // Use the auth form hook
 
   const authForm = useAuthForm({
@@ -60,7 +71,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       supportUrl,
       termsUrl,
       privacyUrl,
-      enableGithubAuth,
+      oauth,
       logo,
       redirectUrl,
       // Renamed: `marketingConsent` (the name) is the checkbox STATE from the form hook.
@@ -72,7 +83,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       supportUrl,
       termsUrl,
       privacyUrl,
-      enableGithubAuth,
+      oauth,
       logo,
       redirectUrl,
       marketingConsent,

package/src/layouts/AuthLayout/styles/auth.css

@@ -13,6 +13,10 @@
   --spring-snappy: cubic-bezier(0.2, 0, 0, 1);
   --auth-radius: 0.75rem;
   --auth-radius-sm: 0.5rem;
+  /* Secondary text of the sign-in page. The theme's `--muted-foreground` is
+     4.2:1 on the light surface (AA needs 4.5:1; axe rejects it), so the page
+     pulls it 18% toward `--foreground`: darker in light, lighter in dark. */
+  --auth-muted: color-mix(in oklab, var(--muted-foreground) 82%, var(--foreground));
   --auth-radius-xs: 0.375rem;
   /* The single vertical step of the auth column. */
   --auth-gap: 1rem;
@@ -59,7 +63,7 @@
   padding-inline: 0.5rem 0.75rem;
   border-radius: var(--auth-radius-sm);
   font-size: 0.875rem;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   transition: color 0.15s var(--spring-snappy);
 }
 .auth-topbar__home:hover {
@@ -92,7 +96,7 @@
   height: 2.75rem;
   padding-inline: 0.75rem;
   font-size: 0.75rem;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   transition: color 0.15s var(--spring-snappy);
 }
 .auth-locale-trigger:hover,
@@ -199,7 +203,7 @@ a.auth-logo:focus-visible {
 .auth-subtitle {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   margin: 0.125rem 0 0;
 }
 
@@ -315,7 +319,7 @@ a.auth-logo:focus-visible {
    the old `opacity: .45` produced (it still looked clickable). */
 .auth-button-primary:disabled {
   background: var(--muted);
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
 }
 
 /* GitHub / OAuth: a quiet outline button so the email path (primary) stays
@@ -340,6 +344,43 @@ a.auth-logo:focus-visible {
   opacity: 0.88;
 }
 
+/* Google: Google's branding rules, not the app theme. Light uses a white fill
+   with a 1px #747775 stroke and #1F1F1F text; dark uses #131314, #8E918F and
+   #E3E3E3. Padding is 12px before the logo, 10px to the text, 12px after.
+   Weight and size come from the app font (Google Sans cannot be loaded). Keyed
+   on `.dark` because the logo and text must not follow `--foreground`. */
+.auth-button-google {
+  gap: 0.625rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  background: #ffffff;
+  color: #1f1f1f;
+  border: 1px solid #747775;
+}
+
+.dark .auth-button-google {
+  background: #131314;
+  color: #e3e3e3;
+  border-color: #8e918f;
+}
+
+.auth-button-google:disabled {
+  opacity: 0.45;
+}
+
+.auth-button-google.auth-button-loading::after {
+  border-color: #747775;
+  border-right-color: transparent;
+}
+
+.dark .auth-button-google.auth-button-loading::after {
+  border-color: #8e918f;
+  border-right-color: transparent;
+}
+
 /* Loading state */
 .auth-button-loading {
   color: transparent !important;
@@ -347,6 +388,10 @@ a.auth-logo:focus-visible {
   pointer-events: none;
 }
 
+.auth-button-loading > .auth-oauth-icon {
+  opacity: 0;
+}
+
 .auth-button-loading::after {
   content: "";
   position: absolute;
@@ -358,6 +403,11 @@ a.auth-logo:focus-visible {
   animation: authSpin 0.55s linear infinite;
 }
 
+.auth-button-secondary.auth-button-loading::after {
+  border-color: var(--foreground);
+  border-right-color: transparent;
+}
+
 .auth-button-primary.auth-button-loading::after {
   border-color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
   border-right-color: transparent;
@@ -367,13 +417,39 @@ a.auth-logo:focus-visible {
   to { transform: rotate(360deg); }
 }
 
+.auth-oauth {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.auth-oauth-icon {
+  flex: none;
+}
+
+/* The provider buttons share one type size and weight (Google's 14/20 medium),
+   so GitHub is never the louder of the two. */
+.auth-oauth .auth-button {
+  gap: 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* Holds the room of two buttons, the gap and the divider while the server's
+   provider list loads, so the email field does not jump when it arrives. */
+.auth-oauth-reserve {
+  height: calc(2 * 3rem + 0.75rem + var(--auth-gap) + 1rem);
+}
+
 /* ===== DIVIDER ===== */
 
 .auth-divider {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   font-size: 0.75rem;
   letter-spacing: 0.02em;
   text-transform: uppercase;
@@ -460,7 +536,7 @@ a.auth-logo:focus-visible {
   justify-content: center;
   gap: 0.75rem;
   font-size: 0.75rem;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
 }
 
 .auth-footer a {
@@ -495,11 +571,11 @@ a.auth-logo:focus-visible {
   text-align: center;
   font-size: 0.6875rem;
   line-height: 1.5;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
 }
 
 .auth-consent-link {
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-color: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
@@ -527,7 +603,7 @@ a.auth-logo:focus-visible {
   text-align: left;
   font-size: 0.75rem;
   line-height: 1.5;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   cursor: pointer;
   user-select: none;
 }
@@ -562,7 +638,7 @@ a.auth-logo:focus-visible {
   font-size: 0.8125rem;
   font-weight: 500;
   letter-spacing: -0.005em;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
   background: transparent;
   border: none;
   border-radius: calc(var(--auth-radius-sm) - 2px);
@@ -692,7 +768,7 @@ a.auth-logo:focus-visible {
 .auth-success-hint {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--muted-foreground);
+  color: var(--auth-muted);
 }
 
 /* ===== DEV NOTICE ===== */