@djangocfg/layouts 2.1.605 → 2.1.606

package/src/layouts/AuthLayout/components/oauth/errors/errorCopy.ts

@@ -0,0 +1,95 @@
+import type { OAuthFailureCode } from '@djangocfg/api/auth';
+
+/** Translation keys of the visitor-facing sentences, one per kind of failure. */
+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',
+  not_configured: 'layouts.auth.oauth.error.not_configured',
+  cancelled: 'layouts.auth.oauth.error.cancelled',
+  generic: 'layouts.auth.oauth.error.generic',
+} as const;
+
+export type OAuthErrorKey = (typeof OAUTH_ERROR_KEYS)[keyof typeof OAUTH_ERROR_KEYS];
+
+/** The one next step a notice offers: reveal the email field, run the provider again, or nothing the visitor can do. */
+export type OAuthNoticeAction = 'email' | 'retry' | 'none';
+
+interface Rule {
+  /** Which sentence the visitor reads. */
+  copy: keyof typeof OAUTH_ERROR_KEYS;
+  /** What they can do about it. A retry is only offered where trying again can change the outcome. */
+  action: OAuthNoticeAction;
+  /** Site misconfiguration: a developer line is shown under the sentence. */
+  developerHint?: boolean;
+}
+
+const retry = (copy: Rule['copy']): Rule => ({ copy, action: 'retry' });
+const email = (copy: Rule['copy']): Rule => ({ copy, action: 'email' });
+const nothing = (copy: Rule['copy']): Rule => ({ copy, action: 'none' });
+
+/**
+ * Every failure code, once: what is said and what is offered.
+ *
+ * Exhaustive on purpose: a code the backend adds fails typecheck here until
+ * someone decides what to tell the visitor. Faults only a developer can fix
+ * (`origin_not_allowed`, a missing redirect) read as "not available on this
+ * site" and point at email.
+ */
+const RULES: Record<OAuthFailureCode, Rule> = {
+  invalid_state: retry('invalid_state'),
+  oauth_exchange_failed: retry('oauth_exchange_failed'),
+  invalid_id_token: retry('invalid_id_token'),
+  email_missing: email('email_missing'),
+  email_not_verified: email('email_not_verified'),
+  hosted_domain_not_allowed: email('hosted_domain_not_allowed'),
+  account_inactive: nothing('account_inactive'),
+  link_not_allowed: email('link_not_allowed'),
+  rate_limited: nothing('rate_limited'),
+  provider_unavailable: retry('provider_unavailable'),
+  cancelled: nothing('cancelled'),
+  oauth_disabled: email('not_configured'),
+  github_oauth_disabled: email('not_configured'),
+  origin_not_allowed: { copy: 'not_configured', action: 'email', developerHint: true },
+  missing_redirect_uri: email('not_configured'),
+  server_error: retry('generic'),
+  not_found: retry('generic'),
+  unknown_provider: retry('generic'),
+};
+
+/** The sentence for a code; the generic one when the cause is unknown. */
+export const oauthErrorKey = (code?: OAuthFailureCode | null): OAuthErrorKey =>
+  OAUTH_ERROR_KEYS[code ? RULES[code].copy : 'generic'];
+
+export interface OAuthNoticeCopy {
+  /** Only the code that needs a heading has one; the rest are a single sentence. */
+  titleKey?: 'layouts.auth.oauth.notice.linkNotAllowedTitle';
+  bodyKey: OAuthErrorKey;
+  action: OAuthNoticeAction;
+  /** Present when the page's own configuration is at fault: a line for whoever deploys it. */
+  developerHintKey?: 'layouts.auth.oauth.notice.originNotAllowedHint';
+}
+
+/**
+ * What the sign-in form tells a visitor whose provider round trip failed.
+ *
+ * `null` means "say nothing": the visitor cancelled on the provider's page and
+ * is back at the form they started from. An absent code is the unknown case.
+ */
+export const describeOAuthFailure = (code?: OAuthFailureCode | null): OAuthNoticeCopy | null => {
+  const rule: Rule = code ? RULES[code] : retry('generic');
+  if (rule.copy === 'cancelled') return null;
+  return {
+    titleKey: rule.copy === 'link_not_allowed' ? 'layouts.auth.oauth.notice.linkNotAllowedTitle' : undefined,
+    bodyKey: OAUTH_ERROR_KEYS[rule.copy],
+    action: rule.action,
+    developerHintKey: rule.developerHint ? 'layouts.auth.oauth.notice.originNotAllowedHint' : undefined,
+  };
+};

package/src/layouts/AuthLayout/components/oauth/errors/useOAuthErrorText.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import type { OAuthFailureCode } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+
+import { providerName } from '../providers/registry';
+import { OAUTH_ERROR_KEYS, oauthErrorKey } from './errorCopy';
+
+/**
+ * The visitor-facing sentence for a failure: the translated copy of its code
+ * (`{provider}` filled with the brand name), 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, provider?: string | null): string => {
+      if (code) return t(oauthErrorKey(code), { provider: providerName(provider ?? '') });
+      return fallback || t(OAUTH_ERROR_KEYS.generic);
+    },
+    [t],
+  );
+};

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

@@ -1,4 +1,29 @@
-export { OAuthCallback, type OAuthCallbackProps } from './OAuthCallback';
-export { OAuthButtons, type OAuthButtonsProps } from './OAuthButtons';
-export { resolveOAuthProviders } from './oauthProviders';
-export { OAuthNotice, type OAuthNoticeProps } from './OAuthNotice';
+/**
+ * Provider sign-in (GitHub, Google, ...). One folder, one job per subfolder:
+ *
+ *   providers/  what a provider is: registry (name, icon), icons, which ones to show
+ *   buttons/    the buttons: one provider button, the list, the list wired to the hook
+ *   notice/     the inline message after a failed round trip
+ *   callback/   finishing the round trip on /auth?provider=<id>: URL parsing, the wait overlay
+ *   errors/     failure code -> copy and next step, in one table
+ *
+ * `OAuthSection` is what `IdentifierStep` mounts: notice, buttons, "or".
+ * Only `OAuthCallback` is part of the package's public API; the rest is internal.
+ * To add a provider, edit `providers/registry.ts` only.
+ */
+export { OAuthSection, type OAuthSectionProps } from './OAuthSection';
+
+export { OAuthCallback, type OAuthCallbackProps } from './callback/OAuthCallback';
+export { OAuthCallbackOverlay, type OAuthCallbackOverlayProps } from './callback/OAuthCallbackOverlay';
+
+export { OAuthButtons, type OAuthButtonsProps } from './buttons/OAuthButtons';
+export { OAuthButtonList, type OAuthButtonListProps } from './buttons/OAuthButtonList';
+export { OAuthProviderButton, type OAuthProviderButtonProps } from './buttons/OAuthProviderButton';
+
+export { OAuthNotice, type OAuthNoticeProps } from './notice/OAuthNotice';
+export { OAuthNoticeView, type OAuthNoticeViewProps } from './notice/OAuthNoticeView';
+
+export { describeOAuthFailure, oauthErrorKey, type OAuthNoticeCopy } from './errors/errorCopy';
+export { useOAuthErrorText } from './errors/useOAuthErrorText';
+
+export { OAUTH_PROVIDERS, providerName, resolveOAuthProviders, type OAuthProviderEntry } from './providers';

package/src/layouts/AuthLayout/components/oauth/notice/OAuthNotice.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React, { memo, useCallback } from 'react';
+
+import { isOAuthProviderId, useOAuthLogin } from '@djangocfg/api/auth';
+
+import type { OAuthFailure } from '../../../types';
+import { OAuthNoticeView } from './OAuthNoticeView';
+
+export interface OAuthNoticeProps {
+  failure: OAuthFailure;
+  sourceUrl?: string;
+  /** Closes the notice (button or Escape). */
+  onDismiss: () => void;
+  /** Takes the visitor to the email field; the notice closes with it. */
+  onUseEmail: () => void;
+}
+
+/** The failure notice with its retry wired to `useOAuthLogin`. */
+function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoticeProps) {
+  const { start, isLoading } = useOAuthLogin({ sourceUrl });
+  const { provider } = failure;
+
+  const handleRetry = useCallback(() => {
+    if (isOAuthProviderId(provider)) void start(provider);
+  }, [start, provider]);
+
+  return (
+    <OAuthNoticeView
+      provider={provider}
+      code={failure.code}
+      origin={typeof window === 'undefined' ? undefined : window.location.origin}
+      onRetry={isOAuthProviderId(provider) ? handleRetry : undefined}
+      retrying={isLoading}
+      onDismiss={onDismiss}
+      onUseEmail={onUseEmail}
+    />
+  );
+}
+
+export const OAuthNotice = memo(OAuthNoticeRaw);

package/src/layouts/AuthLayout/components/oauth/notice/OAuthNoticeView.test.tsx

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, expect, it, vi } from 'vitest';
+
+import { OAuthNoticeView, type OAuthNoticeViewProps } from './OAuthNoticeView';
+
+vi.mock('@djangocfg/i18n', () => ({
+  useAppT: () => (key: string, params?: Record<string, string>) =>
+    params ? `${key} ${JSON.stringify(params)}` : key,
+}));
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function render(props: Partial<OAuthNoticeViewProps> = {}) {
+  const host = document.createElement('div');
+  document.body.append(host);
+  const root = createRoot(host);
+  const handlers = { onDismiss: vi.fn(), onUseEmail: vi.fn(), onRetry: vi.fn() };
+  act(() => root.render(<OAuthNoticeView provider="github" code="invalid_state" {...handlers} {...props} />));
+  return { host, ...handlers, buttons: () => [...host.querySelectorAll('button')] };
+}
+
+describe('OAuthNoticeView', () => {
+  it('says nothing for a cancelled sign-in', () => {
+    expect(render({ code: 'cancelled' }).host.innerHTML).toBe('');
+  });
+
+  it('is a polite status, not an alert', () => {
+    expect(render().host.querySelector('[role="status"]')).not.toBeNull();
+  });
+
+  it('offers a retry that runs the provider again', () => {
+    const { buttons, onRetry } = render();
+    const retry = buttons().find((b) => b.textContent!.includes('notice.retry'))!;
+    act(() => retry.click());
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it('offers email instead of a retry when the provider has no button', () => {
+    const { buttons } = render({ onRetry: undefined });
+    expect(buttons().some((b) => b.textContent!.includes('notice.retry'))).toBe(false);
+    expect(buttons().some((b) => b.textContent === 'layouts.auth.oauth.notice.useEmail')).toBe(true);
+  });
+
+  it('closes with the dismiss button and with Escape', () => {
+    const { buttons, onDismiss } = render();
+    act(() => buttons().find((b) => b.getAttribute('aria-label') === 'layouts.auth.oauth.notice.dismiss')!.click());
+    act(() => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    });
+    expect(onDismiss).toHaveBeenCalledTimes(2);
+  });
+
+  it('gives a developer the origin to allow when the origin is refused', () => {
+    const { host } = render({ code: 'origin_not_allowed', origin: 'https://app.example.com' });
+    expect(host.querySelector('.auth-oauth-hint')!.textContent).toContain('"origin":"https://app.example.com"');
+    expect(host.querySelector('.auth-oauth-hint')!.textContent).toContain('"id":"github"');
+  });
+
+  it('shows no developer hint for other failures', () => {
+    expect(render({ origin: 'https://app.example.com' }).host.querySelector('.auth-oauth-hint')).toBeNull();
+  });
+});

package/src/layouts/AuthLayout/components/oauth/{OAuthNotice.tsx → notice/OAuthNoticeView.tsx}

@@ -1,31 +1,30 @@
 'use client';
 
 import { Info, X } from 'lucide-react';
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 
-import { isOAuthProviderId, useOAuthLogin } from '@djangocfg/api/auth';
+import type { OAuthFailureCode } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Alert, AlertDescription, AlertTitle, Button } from '@djangocfg/ui-core/components';
 
-import type { OAuthFailure } from '../../types';
-import { describeOAuthFailure } from './oauthNoticeCopy';
+import { describeOAuthFailure } from '../errors/errorCopy';
+import { providerName } from '../providers/registry';
 
-export interface OAuthNoticeProps {
-  failure: OAuthFailure;
-  sourceUrl?: string;
+export interface OAuthNoticeViewProps {
+  /** Provider id as it came back in the URL. */
+  provider: string;
+  code?: OAuthFailureCode;
+  /** The page origin, shown in the developer hint for `origin_not_allowed`. */
+  origin?: string;
+  /** Runs the provider again. Absent when this client has no button for the provider: the notice offers email instead. */
+  onRetry?: () => void;
+  retrying?: boolean;
   /** Closes the notice (button or Escape). */
   onDismiss: () => void;
   /** Takes the visitor to the email field; the notice closes with it. */
   onUseEmail: () => void;
 }
 
-/** Brand names are not translated; an id we do not know is shown as it came. */
-const providerLabel = (id: string): string => {
-  if (id === 'github') return 'GitHub';
-  if (id === 'google') return 'Google';
-  return id;
-};
-
 /**
  * What the sign-in form says after a provider round trip failed: one calm
  * sentence, at most one next step, and a way to close it. Not a dialog: the
@@ -34,16 +33,9 @@ const providerLabel = (id: string): string => {
  * `role="status"` (polite): the visitor did nothing wrong, so it informs
  * without interrupting. Renders nothing for a cancelled sign-in.
  */
-function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoticeProps) {
+function OAuthNoticeViewRaw({ provider, code, origin, onRetry, retrying = false, onDismiss, onUseEmail }: OAuthNoticeViewProps) {
   const t = useAppT();
-  const copy = describeOAuthFailure(failure.code);
-  const provider = providerLabel(failure.provider);
-  const canRetry = isOAuthProviderId(failure.provider);
-
-  const { start, isLoading } = useOAuthLogin({ sourceUrl });
-  const handleRetry = useCallback(() => {
-    if (isOAuthProviderId(failure.provider)) void start(failure.provider);
-  }, [start, failure.provider]);
+  const copy = describeOAuthFailure(code);
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
@@ -55,25 +47,27 @@ function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoti
 
   if (!copy) return null;
 
+  const name = providerName(provider);
   // A retry for a provider this client has no button for would go nowhere: send the visitor to email instead.
-  const action = copy.action === 'retry' && !canRetry ? 'email' : copy.action;
-  const title = copy.titleKey ? t(copy.titleKey) : null;
-  const body = t(copy.bodyKey, { provider });
+  const action = copy.action === 'retry' && !onRetry ? 'email' : copy.action;
 
   return (
-    <Alert role="status" className="auth-oauth-notice relative pr-10">
+    <Alert role="status" className="relative pr-10">
       <Info className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
       <div>
-        {title && <AlertTitle>{title}</AlertTitle>}
-        <AlertDescription className="text-muted-foreground">{body}</AlertDescription>
+        {copy.titleKey && <AlertTitle>{t(copy.titleKey)}</AlertTitle>}
+        <AlertDescription className="text-muted-foreground">{t(copy.bodyKey, { provider: name })}</AlertDescription>
+        {copy.developerHintKey && origin && (
+          <p className="auth-oauth-hint">{t(copy.developerHintKey, { origin, id: provider })}</p>
+        )}
         {action === 'email' && (
           <Button type="button" size="sm" className="mt-3" onClick={onUseEmail}>
             {t('layouts.auth.oauth.notice.useEmail')}
           </Button>
         )}
         {action === 'retry' && (
-          <Button type="button" size="sm" className="mt-3" disabled={isLoading} onClick={handleRetry}>
-            {t('layouts.auth.oauth.notice.retry', { provider })}
+          <Button type="button" size="sm" className="mt-3" disabled={retrying} onClick={onRetry}>
+            {t('layouts.auth.oauth.notice.retry', { provider: name })}
           </Button>
         )}
       </div>
@@ -91,4 +85,4 @@ function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoti
   );
 }
 
-export const OAuthNotice = memo(OAuthNoticeRaw);
+export const OAuthNoticeView = memo(OAuthNoticeViewRaw);

package/src/layouts/AuthLayout/components/oauth/{GithubIcon.tsx → providers/icons/GithubIcon.tsx}

@@ -7,7 +7,6 @@ import React from 'react';
 export function GithubIcon() {
   return (
     <svg
-      className="auth-oauth-icon"
       width="20"
       height="20"
       viewBox="0 -3.1 2490.3 2493"

package/src/layouts/AuthLayout/components/oauth/{GoogleIcon.tsx → providers/icons/GoogleIcon.tsx}

@@ -7,7 +7,7 @@ import React from 'react';
  */
 export function GoogleIcon() {
   return (
-    <svg className="auth-oauth-icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    <svg 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"

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

@@ -0,0 +1,2 @@
+export { OAUTH_PROVIDERS, providerName, type OAuthProviderEntry } from './registry';
+export { resolveOAuthProviders } from './resolveProviders';

package/src/layouts/AuthLayout/components/oauth/providers/registry.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { OAUTH_PROVIDERS, providerName } from './registry';
+
+describe('providerName', () => {
+  it('returns the brand name of a known provider', () => {
+    expect(providerName('github')).toBe('GitHub');
+    expect(providerName('google')).toBe('Google');
+  });
+
+  it('shows an unknown id as it came, never an inherited property', () => {
+    expect(providerName('gitlab')).toBe('gitlab');
+    expect(providerName('constructor')).toBe('constructor');
+    expect(providerName('')).toBe('');
+  });
+
+  it('gives every provider an icon and a name', () => {
+    for (const entry of Object.values(OAUTH_PROVIDERS)) {
+      expect(entry.name).not.toBe('');
+      expect(typeof entry.Icon).toBe('function');
+    }
+  });
+});

package/src/layouts/AuthLayout/components/oauth/providers/registry.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+
+import type { OAuthProviderId } from '@djangocfg/api/auth';
+
+import { GithubIcon } from './icons/GithubIcon';
+import { GoogleIcon } from './icons/GoogleIcon';
+
+export interface OAuthProviderEntry {
+  /** Brand name. Never translated: it fills `{provider}` in the button and message copy. */
+  name: string;
+  /** The provider's mark, an svg component. */
+  Icon: React.FC;
+}
+
+/**
+ * The one place that knows what a provider looks like.
+ *
+ * Keyed by the API package's id type, so a provider the backend adds fails
+ * typecheck here until it has a name and an icon. Nothing else changes: the
+ * button list, labels, notices and error copy all read this table.
+ *
+ * To add a provider: draw `icons/<Name>Icon.tsx`, add one line below.
+ */
+export const OAUTH_PROVIDERS: Record<OAuthProviderId, OAuthProviderEntry> = {
+  github: { name: 'GitHub', Icon: GithubIcon },
+  google: { name: 'Google', Icon: GoogleIcon },
+};
+
+const isKnown = (id: string): id is OAuthProviderId => Object.prototype.hasOwnProperty.call(OAUTH_PROVIDERS, id);
+
+/** Brand name for an id; an id this client does not know is shown as it came. */
+export const providerName = (id: string): string => (isKnown(id) ? OAUTH_PROVIDERS[id].name : id);

package/src/layouts/AuthLayout/components/oauth/{oauthProviders.test.ts → providers/resolveProviders.test.ts}

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { resolveOAuthProviders } from './oauthProviders';
+import { resolveOAuthProviders } from './resolveProviders';
 
 describe('resolveOAuthProviders', () => {
   it('shows everything the server lists, in the server order', () => {

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

@@ -3,8 +3,7 @@
 import React, { memo } from 'react';
 
 export interface AuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** `google` follows Google's button branding and is not themed by `--secondary`. */
-  variant?: 'primary' | 'secondary' | 'google';
+  variant?: 'primary' | 'secondary';
   loading?: boolean;
   children: React.ReactNode;
 }

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

@@ -7,12 +7,11 @@ import { Checkbox, Input } from '@djangocfg/ui-core/components';
 
 import { useAuthLayoutContext } from '../../layoutContext';
 import { useAuthFormContext } from '../../context';
-import { OAuthButtons, OAuthNotice } from '../oauth';
+import { OAuthSection } from '../oauth';
 import {
   AuthButton,
   AuthConsent,
   AuthContainer,
-  AuthDivider,
   AuthError,
   AuthHeader,
 } from '../shared';
@@ -46,8 +45,6 @@ function IdentifierStepRaw() {
     termsUrl,
     privacyUrl,
     oauth,
-    oauthNotice,
-    setOAuthNotice,
     sourceUrl,
     marketingConsent,
     marketingConsentConfig,
@@ -108,12 +105,8 @@ function IdentifierStepRaw() {
     }
   }, [oauth.isReady, hasOAuth]);
 
-  // The notice's one next step: close it and put the cursor in the email field.
-  const dismissNotice = useCallback(() => setOAuthNotice(null), [setOAuthNotice]);
-  const useEmail = useCallback(() => {
-    setOAuthNotice(null);
-    emailRef.current?.focus();
-  }, [setOAuthNotice]);
+  // The notice's one next step: the cursor goes to the email field.
+  const focusEmail = useCallback(() => emailRef.current?.focus(), []);
 
   return (
     <AuthContainer step="identifier">
@@ -126,22 +119,7 @@ function IdentifierStepRaw() {
         />
       )}
 
-      {oauthNotice && (
-        <OAuthNotice failure={oauthNotice} sourceUrl={sourceUrl} onDismiss={dismissNotice} onUseEmail={useEmail} />
-      )}
-
-      {hasOAuth && (
-        <>
-          <OAuthButtons
-            providers={oauth.providers}
-            sourceUrl={sourceUrl}
-            disabled={isLoading}
-            onError={setError}
-          />
-          <AuthDivider />
-        </>
-      )}
-      {!oauth.isReady && <div className="auth-oauth-reserve" aria-hidden="true" />}
+      <OAuthSection sourceUrl={sourceUrl} disabled={isLoading} onError={setError} onUseEmail={focusEmail} />
 
       <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
         <Input

package/src/layouts/AuthLayout/context.tsx

@@ -4,7 +4,7 @@ import React, { createContext, useContext, useMemo, useState } from 'react';
 
 import { useAuthForm, useOAuthProviders } from '@djangocfg/api/auth';
 
-import { resolveOAuthProviders } from './components/oauth/oauthProviders';
+import { resolveOAuthProviders } from './components/oauth/providers/resolveProviders';
 import type { AuthFormContextType, AuthLayoutProps, OAuthFailure } from './types';
 
 // Exported so test/mock providers (storybook) can supply their own value

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

@@ -322,9 +322,9 @@ a.auth-logo:focus-visible {
   color: var(--auth-muted);
 }
 
-/* GitHub / OAuth: a quiet outline button so the email path (primary) stays
-   the single loudest action. `--secondary` in light is near-black, which made
-   the secondary path shout louder than the primary one — HIG wants one accent. */
+/* Secondary: a quiet outline button so the primary path stays the single
+   loudest action. `--secondary` in light is near-black, which made the
+   secondary path shout louder than the primary one — HIG wants one accent. */
 .auth-button-secondary {
   background: transparent;
   color: var(--foreground);
@@ -344,43 +344,6 @@ 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;
@@ -388,10 +351,6 @@ a.auth-logo:focus-visible {
   pointer-events: none;
 }
 
-.auth-button-loading > .auth-oauth-icon {
-  opacity: 0;
-}
-
 .auth-button-loading::after {
   content: "";
   position: absolute;
@@ -417,32 +376,6 @@ 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 {