@djangocfg/layouts 2.1.599 → 2.1.600

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.599",
+  "version": "2.1.600",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -91,11 +91,11 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.599",
-    "@djangocfg/api": "^2.1.599",
-    "@djangocfg/devtools": "^2.1.599",
-    "@djangocfg/i18n": "^2.1.599",
-    "@djangocfg/ui-core": "^2.1.599",
+    "@djangocfg/analytics": "^2.1.600",
+    "@djangocfg/api": "^2.1.600",
+    "@djangocfg/devtools": "^2.1.600",
+    "@djangocfg/i18n": "^2.1.600",
+    "@djangocfg/ui-core": "^2.1.600",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,12 +125,12 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.599",
-    "@djangocfg/api": "^2.1.599",
-    "@djangocfg/devtools": "^2.1.599",
-    "@djangocfg/i18n": "^2.1.599",
-    "@djangocfg/typescript-config": "^2.1.599",
-    "@djangocfg/ui-core": "^2.1.599",
+    "@djangocfg/analytics": "^2.1.600",
+    "@djangocfg/api": "^2.1.600",
+    "@djangocfg/devtools": "^2.1.600",
+    "@djangocfg/i18n": "^2.1.600",
+    "@djangocfg/typescript-config": "^2.1.600",
+    "@djangocfg/ui-core": "^2.1.600",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/configurator/auth/defaults.ts

@@ -39,6 +39,7 @@ export const defaultCenteredConfig: AuthCenteredConfig = {
     showLogo: true,
     showTerms: true,
     showGithub: true,
+    showGoogle: true,
     showSupport: true,
   },
 };
@@ -60,6 +61,7 @@ export const defaultSplitConfig: AuthSplitConfig = {
     showLogo: true,
     showTerms: true,
     showGithub: true,
+    showGoogle: true,
     showSupport: true,
   },
 };

package/src/configurator/auth/schema.ts

@@ -64,6 +64,7 @@ export const authCenteredSchema: CustomJsonSchema7 = {
         showLogo: { type: 'boolean', title: 'Logo on success screen' },
         showTerms: { type: 'boolean', title: 'Terms checkbox' },
         showGithub: { type: 'boolean', title: 'GitHub OAuth button' },
+        showGoogle: { type: 'boolean', title: 'Google OAuth button' },
         showSupport: { type: 'boolean', title: 'Support link in footer' },
       },
     },
@@ -91,6 +92,7 @@ export const authCenteredUiSchema: CustomJsonUiSchema7 = {
     showLogo: { 'ui:widget': 'switch' },
     showTerms: { 'ui:widget': 'switch' },
     showGithub: { 'ui:widget': 'switch' },
+    showGoogle: { 'ui:widget': 'switch' },
     showSupport: { 'ui:widget': 'switch' },
   },
 };
@@ -161,6 +163,7 @@ export const authSplitSchema: CustomJsonSchema7 = {
         showLogo: { type: 'boolean', title: 'Logo on success screen' },
         showTerms: { type: 'boolean', title: 'Terms checkbox' },
         showGithub: { type: 'boolean', title: 'GitHub OAuth button' },
+        showGoogle: { type: 'boolean', title: 'Google OAuth button' },
         showSupport: { type: 'boolean', title: 'Support link in footer' },
       },
     },
@@ -200,6 +203,7 @@ export const authSplitUiSchema: CustomJsonUiSchema7 = {
     showLogo: { 'ui:widget': 'switch' },
     showTerms: { 'ui:widget': 'switch' },
     showGithub: { 'ui:widget': 'switch' },
+    showGoogle: { 'ui:widget': 'switch' },
     showSupport: { 'ui:widget': 'switch' },
   },
 };

package/src/configurator/auth/types.ts

@@ -23,6 +23,7 @@ export interface AuthFormConfig {
   showLogo: boolean;
   showTerms: boolean;
   showGithub: boolean;
+  showGoogle: boolean;
   showSupport: boolean;
 }
 

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -7,7 +7,7 @@
  * - `centered` — Apple-style frameless, centered, glow background
  * - `split` — Two-column frosted card on desktop, single-column on mobile
  *
- * Supports: email/phone OTP, OAuth (GitHub). A 2FA challenge opens as a dialog
+ * Supports: email/phone OTP and OAuth (Google, GitHub: the buttons come from the server). A 2FA challenge opens as a dialog
  * over the page (`TwoFactorChallengeDialog`), not as a step of this layout.
  */
 
@@ -57,7 +57,6 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
     background,
     sidebar,
     logo,
-    enableGithubAuth,
     // No default here — an unset prop falls through to the saved back-url /
     // resolved routes.defaultCallback chain at navigation time (AuthSuccess).
     redirectUrl,
@@ -97,18 +96,15 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
   // the layout so it does not depend on `logo` or `sidebar`, which are optional.
   const topBar = useMemo(() => <AuthTopBar brandPanel={hasBrandPanel} />, [hasBrandPanel]);
 
-  const oauthCallback = useMemo(() => {
-    if (!enableGithubAuth) return null;
-    return (
+  // Always mounted: it renders nothing unless the URL carries `?provider=<id>`.
+  const oauthCallback = useMemo(
+    () => (
       <Suspense fallback={null}>
-        <OAuthCallback
-          redirectUrl={redirectUrl}
-          onSuccess={onOAuthSuccess ? (user, isNewUser) => onOAuthSuccess(user, isNewUser, 'github') : undefined}
-          onError={onError}
-        />
+        <OAuthCallback redirectUrl={redirectUrl} onSuccess={onOAuthSuccess} onError={onError} />
       </Suspense>
-    );
-  }, [enableGithubAuth, redirectUrl, onOAuthSuccess, onError]);
+    ),
+    [redirectUrl, onOAuthSuccess, onError],
+  );
 
   return (
     <Suspense>
@@ -127,7 +123,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
             topBar={topBar}
             className={className}
           >
-            {/* Handle OAuth callback when GitHub auth is enabled */}
+            {/* Finishes a provider sign-in when the URL carries one */}
             {oauthCallback}
 
             <AuthHeaderSlot>{children}</AuthHeaderSlot>

package/src/layouts/AuthLayout/README.md

@@ -134,7 +134,6 @@ import { AuthLayout } from '@djangocfg/layouts';
 <AuthLayout
   sourceUrl="https://myapp.com"
   redirectUrl="/private"
-  enableGithubAuth
   termsUrl="/terms"
   privacyUrl="/privacy"
 >
@@ -184,7 +183,8 @@ import { AuthLayout } from '@djangocfg/layouts';
 | `sidebar` | `ReactNode` | — | Media/side column content. On `fullsplit`, omitting it with `logo` set yields the default `AuthBrandPanel` |
 | `sourceUrl` | `string` | — | App URL for analytics/tracking |
 | `redirectUrl` | `string` | `/private` | Where to redirect after auth |
-| `enableGithubAuth` | `boolean` | `false` | Show GitHub OAuth button |
+| `oauthProviders` | `('github' \| 'google')[]` | server list | Buttons come from the server (`GET /oauth/providers/`); this only narrows or orders them |
+| `enableGithubAuth` | `boolean` | — | Deprecated, no effect |
 | `enablePhoneAuth` | `boolean` | `false` | Allow phone number input |
 | `logo` | `ReactNode` | — | Brand node. Placed by variant (see [Where the brand goes](#where-the-brand-goes)); the slot caps its height and keeps its aspect ratio |
 | `termsUrl` | `string` | — | Terms link — rendered in the passive consent line (opens in a new tab) |
@@ -263,6 +263,21 @@ only component that could draw it also navigated away 1.5s later, so nobody
 could sit and look at it — which is how it kept showing the brand instead of a
 confirmation. See `Success` in `AuthFlow.stories.tsx`.
 
+## Provider sign-in stories
+
+`AuthFlow.stories.tsx` runs the real hooks against a faked network. One place
+fakes it: `oauthApiMock` (`@djangocfg/layouts/testing`, `testing/mockOAuthApi.ts`),
+used as a story `beforeEach`. It answers `GET /oauth/providers/`, the two
+`authorize` and `callback` POSTs (any of the 16 error codes, with its HTTP
+status) at the `fetch` level, refuses every other request, and holds back
+full-page navigations (the redirect to the provider, the redirect after
+sign-in) so the iframe stays put; `getOAuthApiMock()` exposes the recorded
+calls and navigations for `play` assertions. Pair it with
+`MockAuthFormProvider oauthFromServer` for the button list, or run the whole
+`AuthLayout` for a callback round trip. The callback stories put the provider's
+parameters in the address bar and the stored state in `sessionStorage`
+(`seedOAuthBrowser`), as a real return leaves them.
+
 ## Errors
 
 The form never shows a raw transport string. `@djangocfg/api`'s

package/src/layouts/AuthLayout/components/oauth/GithubIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+/**
+ * GitHub's mark in one colour: `currentColor`, so the button's `--foreground`
+ * token makes it dark on light themes and light on dark ones.
+ */
+export function GithubIcon() {
+  return (
+    <svg
+      className="auth-oauth-icon"
+      width="20"
+      height="20"
+      viewBox="0 -3.1 2490.3 2493"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="m1245.2 1.6c-687.6 0-1245.2 557.4-1245.2 1245.1 0 550.2 356.8 1016.9 851.5 1181.5 62.2 11.5 85.1-27 85.1-59.9 0-29.7-1.2-127.8-1.7-231.8-346.4 75.3-419.5-146.9-419.5-146.9-56.6-143.9-138.3-182.2-138.3-182.2-113-77.3 8.5-75.7 8.5-75.7 125 8.8 190.9 128.3 190.9 128.3 111.1 190.4 291.3 135.3 362.3 103.5 11.2-80.5 43.4-135.4 79.1-166.5-276.6-31.5-567.3-138.3-567.3-615.4 0-135.9 48.6-247 128.3-334.2-12.9-31.3-55.5-157.9 12.1-329.4 0 0 104.6-33.5 342.5 127.6 99.3-27.6 205.8-41.4 311.7-41.9 105.8.5 212.4 14.3 311.9 41.9 237.7-161.1 342.1-127.6 342.1-127.6 67.8 171.5 25.1 298.2 12.2 329.5 79.8 87.2 128.1 198.3 128.1 334.2 0 478.2-291.3 583.6-568.6 614.4 44.7 38.6 84.5 114.4 84.5 230.6 0 166.6-1.4 300.7-1.4 341.7 0 33.1 22.4 72 85.5 59.7 494.5-164.8 850.8-631.4 850.8-1181.4 0-687.7-557.5-1245.1-1245.1-1245.1" />
+    </svg>
+  );
+}

package/src/layouts/AuthLayout/components/oauth/GoogleIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Google's multi-colour "G". Fixed colours on purpose: Google's branding rules
+ * forbid recolouring and monochrome variants, and require the mark on the
+ * button boundary with the text beside it.
+ */
+export function GoogleIcon() {
+  return (
+    <svg className="auth-oauth-icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path
+        fill="#EA4335"
+        d="M5.27 9.76A7.08 7.08 0 0 1 16.42 6.5L19.9 3A11.97 11.97 0 0 0 1.24 6.65l4.03 3.11Z"
+      />
+      <path
+        fill="#34A853"
+        d="M16.04 18.01A7.4 7.4 0 0 1 12 19.1a7.08 7.08 0 0 1-6.72-4.82l-4.04 3.06A11.96 11.96 0 0 0 12 24a11.4 11.4 0 0 0 7.83-3l-3.79-2.99Z"
+      />
+      <path
+        fill="#4A90E2"
+        d="M19.83 21c2.2-2.05 3.62-5.1 3.62-9 0-.7-.1-1.47-.27-2.18H12v4.63h6.44a5.4 5.4 0 0 1-2.4 3.56l3.8 2.99Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.28 14.27a7.12 7.12 0 0 1-.01-4.5L1.24 6.64A11.93 11.93 0 0 0 0 12c0 1.92.44 3.73 1.24 5.33l4.04-3.06Z"
+      />
+    </svg>
+  );
+}

package/src/layouts/AuthLayout/components/oauth/OAuthButtons.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { memo, useCallback, useMemo } from 'react';
+
+import { type OAuthProviderId, useOAuthLogin } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+
+import { AuthButton, type AuthButtonProps } from '../shared';
+import { GithubIcon } from './GithubIcon';
+import { GoogleIcon } from './GoogleIcon';
+import { useOAuthErrorText } from './oauthErrors';
+
+interface OAuthProviderEntry {
+  Icon: React.FC;
+  variant: NonNullable<AuthButtonProps['variant']>;
+  labelKey: 'layouts.auth.identifier.oauth.github' | 'layouts.auth.identifier.oauth.google';
+}
+
+/** One entry per provider the client can run; keyed by the API package's id type, so a new provider fails typecheck until it has a button. */
+export const OAUTH_PROVIDER_UI: Record<OAuthProviderId, OAuthProviderEntry> = {
+  github: { Icon: GithubIcon, variant: 'secondary', labelKey: 'layouts.auth.identifier.oauth.github' },
+  google: { Icon: GoogleIcon, variant: 'google', labelKey: 'layouts.auth.identifier.oauth.google' },
+};
+
+export interface OAuthButtonsProps {
+  providers: readonly OAuthProviderId[];
+  sourceUrl?: string;
+  /** Disables every button, e.g. while the email form is submitting. */
+  disabled?: boolean;
+  onError?: (message: string) => void;
+}
+
+/**
+ * The provider buttons: same size and weight each, progress only on the one
+ * clicked, the rest disabled while its flow is in flight.
+ */
+function OAuthButtonsRaw({ providers, sourceUrl, disabled, onError }: OAuthButtonsProps) {
+  const t = useAppT();
+  const errorText = useOAuthErrorText();
+
+  const { start, loadingProvider, isLoading } = useOAuthLogin({
+    sourceUrl,
+    onError: (message, code) => onError?.(errorText(code, message)),
+  });
+
+  const labels = useMemo(
+    () => Object.fromEntries(providers.map((id) => [id, t(OAUTH_PROVIDER_UI[id].labelKey)])) as Record<string, string>,
+    [providers, t],
+  );
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      const id = event.currentTarget.dataset.provider as OAuthProviderId;
+      void start(id);
+    },
+    [start],
+  );
+
+  return (
+    <div className="auth-oauth" role="group">
+      {providers.map((id) => {
+        const { Icon, variant } = OAUTH_PROVIDER_UI[id];
+        return (
+          <AuthButton
+            key={id}
+            type="button"
+            variant={variant}
+            data-provider={id}
+            loading={loadingProvider === id}
+            disabled={disabled || (isLoading && loadingProvider !== id)}
+            onClick={handleClick}
+          >
+            <Icon />
+            {labels[id]}
+          </AuthButton>
+        );
+      })}
+    </div>
+  );
+}
+
+export const OAuthButtons = memo(OAuthButtonsRaw);

package/src/layouts/AuthLayout/components/oauth/OAuthCallback.tsx

@@ -2,14 +2,20 @@
 
 import { AlertCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 
-import { beginTwoFactorChallenge, useAuth, useGithubAuth } from '@djangocfg/api/auth';
+import {
+    beginTwoFactorChallenge, clearOAuthAttempt, isOAuthProviderId, type OAuthFailureCode, useAuth,
+    useOAuthLogin
+} from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
 import {
     Card, CardContent, CardDescription, CardHeader, CardTitle
 } from '@djangocfg/ui-core/components';
 
 import { useAuthFormContext } from '../../context';
+import { readOAuthCallback, stripOAuthCallbackParams } from './oauthCallbackParams';
+import { useOAuthErrorText } from './oauthErrors';
 
 export interface OAuthCallbackProps {
   /** `user` is the provider callback's user payload, untyped upstream — narrow it before reading fields. */
@@ -18,158 +24,135 @@ export interface OAuthCallbackProps {
   redirectUrl?: string;
 }
 
-type CallbackStatus = 'processing' | 'error' | 'challenge';
+type CallbackStatus = 'idle' | 'processing' | 'error' | 'challenge';
+
+interface Failure {
+  message: string;
+  /** Google refused to open on its own page, which we never see; point at the likely cause. */
+  browserHint: boolean;
+}
 
 /**
- * OAuth Callback Handler Component
- *
- * Processes OAuth callback from providers (GitHub, etc.).
- * Reads code, state, and provider from URL params and exchanges for tokens.
- *
- * Usage:
- * Place this component on your /auth page to handle OAuth callbacks.
+ * Finishes a provider sign-in on the page the provider returned to.
  *
- * @example
- * ```tsx
- * // app/auth/page.tsx
- * import { OAuthCallback, AuthLayout } from '@djangocfg/layouts';
+ * Mounted by `AuthLayout`; it renders nothing unless the URL carries
+ * `?provider=<id>`. It reads the URL once, strips the single-use parameters
+ * from the address bar, then either exchanges the code (the stored `state`
+ * must match, see `useOAuthLogin`) or shows why there is no code (Cancel,
+ * a provider error, an unknown provider).
  *
- * export default function AuthPage() {
- *   return (
- *     <>
- *       <OAuthCallback
- *         onSuccess={(user) => console.log('OAuth success:', user)}
- *         onError={(error) => console.error('OAuth error:', error)}
- *       />
- *       <AuthLayout enableGithubAuth>
- *         {/* Your auth content *\/}
- *       </AuthLayout>
- *     </>
- *   );
- * }
- * ```
+ * Success hands over to the layout's success screen, which consumes the saved
+ * return URL; this component never navigates itself.
  *
  * Memoised: re-renders only when `onSuccess`, `onError`, or `redirectUrl`
- * change. `onSuccess` and `onError` are compared by reference — callers
- * should stabilise them with useCallback.
+ * change. Callbacks are compared by reference; stabilise them with useCallback.
  */
-function OAuthCallbackRaw({
-  onSuccess,
-  onError,
-  redirectUrl,
-}: OAuthCallbackProps) {
+function OAuthCallbackRaw({ onSuccess, onError, redirectUrl }: OAuthCallbackProps) {
   const searchParams = useSearchParams();
   const { routes } = useAuth();
   const { setStep } = useAuthFormContext();
-  const [status, setStatus] = useState<CallbackStatus | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  const provider = searchParams.get('provider');
-  const code = searchParams.get('code');
-  const state = searchParams.get('state');
-  const error = searchParams.get('error');
-  const errorDescription = searchParams.get('error_description');
-
-  const {
-    handleGithubCallback,
-    isLoading: _isLoading,
-    error: githubError,
-  } = useGithubAuth({
-    onSuccess: (user, isNewUser) => {
-      // Show success screen with logo instead of redirecting
-      setStep('success');
-      onSuccess?.(user, isNewUser, 'github');
-    },
-    onError: (err) => {
+  const t = useAppT();
+  const errorText = useOAuthErrorText();
+
+  const [status, setStatus] = useState<CallbackStatus>('idle');
+  const [provider, setProvider] = useState<string | null>(null);
+  const [failure, setFailure] = useState<Failure | null>(null);
+
+  // One attempt per page load: strict mode runs effects twice, and the
+  // stripped URL re-renders this component with no provider left to read.
+  const handledRef = useRef(false);
+
+  const fail = useCallback(
+    (providerId: string, code: OAuthFailureCode | undefined, message?: string) => {
+      const text = errorText(code, message);
+      setFailure({
+        message: text,
+        browserHint: providerId === 'google' && (code === undefined || code === 'server_error'),
+      });
       setStatus('error');
-      setErrorMessage(err);
-      onError?.(err);
+      onError?.(text);
+    },
+    [errorText, onError],
+  );
+
+  const failRef = useRef(fail);
+  failRef.current = fail;
+  const providerRef = useRef<string | null>(null);
+
+  const { complete } = useOAuthLogin({
+    redirectUrl,
+    skipRedirect: true, // The success screen navigates.
+    onSuccess: (user, isNewUser, providerId) => {
+      setStep('success');
+      onSuccess?.(user, isNewUser, providerId);
     },
+    onError: (message, code) => failRef.current(providerRef.current ?? '', code, message),
     onRequires2FA: (sessionId) => {
       // The dialog needs the page; this overlay would cover it.
       setStatus('challenge');
       beginTwoFactorChallenge({ sessionId });
     },
-    redirectUrl,
-    skipRedirect: true, // We handle navigation via success screen
   });
 
-  // Process OAuth callback on mount
   useEffect(() => {
-    // Check if this is an OAuth callback
-    if (!provider || !code || !state) {
-      // Not an OAuth callback, don't show anything
+    if (handledRef.current) return;
+    const intent = readOAuthCallback(searchParams, isOAuthProviderId);
+    if (intent.kind === 'none') return;
+    handledRef.current = true;
+
+    window.history.replaceState(window.history.state, '', stripOAuthCallbackParams(window.location.href));
+    providerRef.current = intent.provider;
+    setProvider(intent.provider);
+
+    if (intent.kind === 'failure') {
+      // The attempt is over: no exchange will spend the stored state.
+      clearOAuthAttempt();
+      fail(intent.provider, intent.code, intent.description);
       return;
     }
 
-    // Check for error from provider
-    if (error) {
-      setStatus('error');
-      setErrorMessage(errorDescription || error);
-      onError?.(errorDescription || error);
-      return;
-    }
+    setStatus('processing');
+    void complete(intent.provider, intent.code, intent.state);
+  }, [searchParams, complete, fail]);
+
+  if (status === 'idle' || status === 'challenge') return null;
 
-    // Process based on provider
-    const processCallback = async () => {
-      setStatus('processing');
-
-      if (provider === 'github') {
-        await handleGithubCallback(code, state);
-      } else {
-        setStatus('error');
-        setErrorMessage(`Unsupported OAuth provider: ${provider}`);
-        onError?.(`Unsupported OAuth provider: ${provider}`);
-      }
-    };
-
-    processCallback();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [provider, code, state, error]);
-
-  // Don't render if not an OAuth callback
-  if (!provider || (!code && !error) || status === 'challenge') {
-    return null;
-  }
-
-  // Only show UI for processing or error states
-  // Success state is handled by AuthSuccess component via setStep('success')
+  // Success is the layout's success screen (setStep('success')); this overlay
+  // only covers waiting and failing.
   return (
     <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
       <Card className="w-full max-w-md mx-4 shadow-lg">
         <CardHeader className="text-center">
           {status === 'processing' && (
-            <>
+            <div role="status" aria-live="polite">
               <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
-                <Loader2 className="w-6 h-6 text-primary animate-spin" />
+                <Loader2 className="w-6 h-6 text-primary animate-spin" aria-hidden="true" />
               </div>
-              <CardTitle>Signing you in...</CardTitle>
+              <CardTitle>{t('layouts.auth.oauth.signingIn')}</CardTitle>
               <CardDescription>
-                Please wait while we complete your {provider} authentication.
+                {t('layouts.auth.oauth.signingInBody', { provider: providerLabel(provider) })}
               </CardDescription>
-            </>
+            </div>
           )}
 
           {status === 'error' && (
-            <>
+            <div role="alert">
               <div className="mx-auto w-12 h-12 bg-destructive/10 rounded-full flex items-center justify-center mb-4">
-                <AlertCircle className="w-6 h-6 text-destructive" />
+                <AlertCircle className="w-6 h-6 text-destructive" aria-hidden="true" />
               </div>
-              <CardTitle>Authentication Failed</CardTitle>
-              <CardDescription className="text-destructive">
-                {errorMessage || githubError || 'An error occurred during authentication.'}
-              </CardDescription>
-            </>
+              <CardTitle>{t('layouts.auth.oauth.failedTitle')}</CardTitle>
+              <CardDescription className="text-destructive">{failure?.message}</CardDescription>
+              {failure?.browserHint && (
+                <CardDescription className="mt-2">{t('layouts.auth.oauth.browserHint')}</CardDescription>
+              )}
+            </div>
           )}
         </CardHeader>
 
         {status === 'error' && (
           <CardContent className="text-center">
-            <a
-              href={routes.auth}
-              className="text-primary hover:underline text-sm"
-            >
-              Try again
+            <a href={routes.auth} className="text-primary hover:underline text-sm" autoFocus>
+              {t('layouts.auth.oauth.tryAgain')}
             </a>
           </CardContent>
         )}
@@ -178,4 +161,11 @@ function OAuthCallbackRaw({
   );
 }
 
+/** Brand names are not translated; an id we do not know is shown as it came. */
+const providerLabel = (id: string | null): string => {
+  if (id === 'github') return 'GitHub';
+  if (id === 'google') return 'Google';
+  return id ?? '';
+};
+
 export const OAuthCallback = memo(OAuthCallbackRaw);

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

@@ -1 +1,3 @@
 export { OAuthCallback, type OAuthCallbackProps } from './OAuthCallback';
+export { OAuthButtons, type OAuthButtonsProps } from './OAuthButtons';
+export { resolveOAuthProviders } from './oauthProviders';