Add Facebook social login

2026-01-23 20:19:15 +01:00
parent 6701b48cc8
commit 6a056b199c
29 changed files with 991 additions and 88 deletions
--- a/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
+++ b/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
@@ -4,7 +4,7 @@ import { Steps } from "@/components/ui/Steps";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
-import type { CheckoutPackage, CheckoutStepId, GoogleProfilePrefill } from "./types";
+import type { CheckoutPackage, CheckoutStepId, OAuthProfilePrefill } from "./types";
 import { PackageStep } from "./steps/PackageStep";
 import { AuthStep } from "./steps/AuthStep";
 import { ConfirmationStep } from "./steps/ConfirmationStep";
@@ -25,7 +25,8 @@ interface CheckoutWizardProps {
    pending_purchase?: boolean;
  } | null;
  initialStep?: CheckoutStepId;
-  googleProfile?: GoogleProfilePrefill | null;
+  googleProfile?: OAuthProfilePrefill | null;
+  facebookProfile?: OAuthProfilePrefill | null;
  paddle?: {
    environment?: string | null;
    client_token?: string | null;
@@ -68,9 +69,9 @@ const PaymentStepFallback: React.FC = () => (

 const WizardBody: React.FC<{
  privacyHtml: string;
-  googleProfile?: GoogleProfilePrefill | null;
-  onClearGoogleProfile?: () => void;
-}> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
+  prefillProfile?: OAuthProfilePrefill | null;
+  onClearPrefill?: () => void;
+}> = ({ privacyHtml, prefillProfile, onClearPrefill }) => {
  const primaryCtaClassName = "min-w-[160px] disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted disabled:hover:text-muted-foreground";
  const { t } = useTranslation('marketing');
  const {
@@ -246,8 +247,8 @@ const WizardBody: React.FC<{
        {currentStep === "auth" && (
          <AuthStep
            privacyHtml={privacyHtml}
-            googleProfile={googleProfile ?? undefined}
-            onClearGoogleProfile={onClearGoogleProfile}
+            prefill={prefillProfile ?? undefined}
+            onClearPrefill={onClearPrefill}
          />
        )}
        {currentStep === "payment" && (
@@ -288,9 +289,10 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
  initialAuthUser,
  initialStep,
  googleProfile,
+  facebookProfile,
  paddle,
 }) => {
-  const [storedProfile, setStoredProfile] = useState<GoogleProfilePrefill | null>(() => {
+  const [storedGoogleProfile, setStoredGoogleProfile] = useState<OAuthProfilePrefill | null>(() => {
    if (typeof window === 'undefined') {
      return null;
    }
@@ -301,7 +303,7 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
    }

    try {
-      return JSON.parse(raw) as GoogleProfilePrefill;
+      return JSON.parse(raw) as OAuthProfilePrefill;
    } catch (error) {
      console.warn('Failed to parse checkout google profile from storage', error);
      window.localStorage.removeItem('checkout-google-profile');
@@ -314,21 +316,64 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
      return;
    }

-    setStoredProfile(googleProfile);
+    setStoredGoogleProfile(googleProfile);

    if (typeof window !== 'undefined') {
      window.localStorage.setItem('checkout-google-profile', JSON.stringify(googleProfile));
    }
  }, [googleProfile]);

-  const clearStoredProfile = useCallback(() => {
-    setStoredProfile(null);
+  const clearStoredGoogleProfile = useCallback(() => {
+    setStoredGoogleProfile(null);
    if (typeof window !== 'undefined') {
      window.localStorage.removeItem('checkout-google-profile');
    }
  }, []);

-  const effectiveProfile = googleProfile ?? storedProfile;
+  const [storedFacebookProfile, setStoredFacebookProfile] = useState<OAuthProfilePrefill | null>(() => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
+    const raw = window.localStorage.getItem('checkout-facebook-profile');
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      return JSON.parse(raw) as OAuthProfilePrefill;
+    } catch (error) {
+      console.warn('Failed to parse checkout facebook profile from storage', error);
+      window.localStorage.removeItem('checkout-facebook-profile');
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    if (!facebookProfile) {
+      return;
+    }
+
+    setStoredFacebookProfile(facebookProfile);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('checkout-facebook-profile', JSON.stringify(facebookProfile));
+    }
+  }, [facebookProfile]);
+
+  const clearStoredFacebookProfile = useCallback(() => {
+    setStoredFacebookProfile(null);
+    if (typeof window !== 'undefined') {
+      window.localStorage.removeItem('checkout-facebook-profile');
+    }
+  }, []);
+
+  const clearStoredProfiles = useCallback(() => {
+    clearStoredGoogleProfile();
+    clearStoredFacebookProfile();
+  }, [clearStoredFacebookProfile, clearStoredGoogleProfile]);
+
+  const effectiveProfile = facebookProfile ?? storedFacebookProfile ?? googleProfile ?? storedGoogleProfile;

  return (
    <CheckoutWizardProvider
@@ -341,8 +386,8 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
    >
      <WizardBody
        privacyHtml={privacyHtml}
-        googleProfile={effectiveProfile}
-        onClearGoogleProfile={clearStoredProfile}
+        prefillProfile={effectiveProfile}
+        onClearPrefill={clearStoredProfiles}
      />
    </CheckoutWizardProvider>
  );
--- a/resources/js/pages/marketing/checkout/tests/AuthStep.google.test.tsx
+++ b/resources/js/pages/marketing/checkout/tests/AuthStep.google.test.tsx
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';

 vi.mock('@inertiajs/react', () => ({
-  usePage: () => ({ props: { locale: 'de', googleAuth: {} } }),
+  usePage: () => ({ props: { locale: 'de', googleAuth: {}, facebookAuth: {} } }),
 }));

 vi.mock('react-i18next', () => ({
@@ -77,14 +77,16 @@ vi.mock('lucide-react', () => ({

 import { AuthStep } from '../steps/AuthStep';

-describe('AuthStep Google controls', () => {
-  it('hides the top Google button when switching to login mode', () => {
+describe('AuthStep OAuth controls', () => {
+  it('hides the OAuth buttons when switching to login mode', () => {
    render(<AuthStep privacyHtml="" />);

    expect(screen.getByText('checkout.auth_step.continue_with_google')).toBeInTheDocument();
+    expect(screen.getByText('checkout.auth_step.continue_with_facebook')).toBeInTheDocument();

    fireEvent.click(screen.getByText('checkout.auth_step.switch_to_login'));

    expect(screen.queryByText('checkout.auth_step.continue_with_google')).not.toBeInTheDocument();
+    expect(screen.queryByText('checkout.auth_step.continue_with_facebook')).not.toBeInTheDocument();
  });
 });
--- a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
@@ -3,7 +3,7 @@ import { usePage } from "@inertiajs/react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
-import type { GoogleProfilePrefill } from '../types';
+import type { OAuthProfilePrefill } from '../types';
 import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
 import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
 import { Trans, useTranslation } from 'react-i18next';
@@ -14,11 +14,11 @@ import { cn } from "@/lib/utils";

 interface AuthStepProps {
  privacyHtml: string;
-  googleProfile?: GoogleProfilePrefill;
-  onClearGoogleProfile?: () => void;
+  prefill?: OAuthProfilePrefill;
+  onClearPrefill?: () => void;
 }

-type GoogleAuthFlash = {
+type OAuthAuthFlash = {
  status?: string | null;
  error?: string | null;
 };
@@ -34,26 +34,55 @@ const GoogleIcon: React.FC<{ className?: string }> = ({ className }) => (
  </svg>
 );

-export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
+const FacebookIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill="#1877F2"
+      d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.312 0 2.686.236 2.686.236v2.96h-1.513c-1.49 0-1.954.93-1.954 1.887v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
+    />
+  </svg>
+);
+
+export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClearPrefill }) => {
  const { t } = useTranslation('marketing');
  const page = usePage<{ locale?: string }>();
  const locale = page.props.locale ?? "de";
-  const googleAuth = useMemo<GoogleAuthFlash>(() => {
-    const props = page.props as { googleAuth?: GoogleAuthFlash };
+  const googleAuth = useMemo<OAuthAuthFlash>(() => {
+    const props = page.props as { googleAuth?: OAuthAuthFlash };
    return props.googleAuth ?? {};
  }, [page.props]);
+  const facebookAuth = useMemo<OAuthAuthFlash>(() => {
+    const props = page.props as { facebookAuth?: OAuthAuthFlash };
+    return props.facebookAuth ?? {};
+  }, [page.props]);
  const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
  const [mode, setMode] = useState<'login' | 'register'>('register');
  const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
+  const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
  const [showGoogleHelper, setShowGoogleHelper] = useState(false);
-  const showGoogleControls = mode === 'register';
+  const showOauthControls = mode === 'register';
+  const authErrorTitle = facebookAuth?.error
+    ? t('checkout.auth_step.facebook_error_title')
+    : t('checkout.auth_step.google_error_title');

  useEffect(() => {
    if (googleAuth?.status === 'signin') {
      toast.success(t('checkout.auth_step.google_success_toast'));
-      onClearGoogleProfile?.();
+      onClearPrefill?.();
    }
-  }, [googleAuth?.status, onClearGoogleProfile, t]);
+  }, [googleAuth?.status, onClearPrefill, t]);
+
+  useEffect(() => {
+    if (facebookAuth?.status === 'signin') {
+      toast.success(t('checkout.auth_step.facebook_success_toast'));
+      onClearPrefill?.();
+    }
+  }, [facebookAuth?.status, onClearPrefill, t]);

  useEffect(() => {
    if (googleAuth?.error) {
@@ -61,6 +90,12 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
    }
  }, [googleAuth?.error]);

+  useEffect(() => {
+    if (facebookAuth?.error) {
+      toast.error(facebookAuth.error);
+    }
+  }, [facebookAuth?.error]);
+
  useEffect(() => {
    if (mode !== 'login') {
      return;
@@ -82,7 +117,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
      name: payload.name ?? undefined,
      pending_purchase: Boolean(payload.pending_purchase),
    });
-    onClearGoogleProfile?.();
+    onClearPrefill?.();
    nextStep();
  };

@@ -97,7 +132,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
      });
    }

-    onClearGoogleProfile?.();
+    onClearPrefill?.();
    nextStep();
  };

@@ -115,6 +150,20 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
    window.location.href = `/checkout/auth/google?${params.toString()}`;
  }, [locale, selectedPackage, t]);

+  const handleFacebookLogin = useCallback(() => {
+    if (!selectedPackage) {
+      toast.error(t('checkout.auth_step.facebook_missing_package'));
+      return;
+    }
+
+    setIsRedirectingToFacebook(true);
+    const params = new URLSearchParams({
+      package_id: String(selectedPackage.id),
+      locale,
+    });
+    window.location.href = `/checkout/auth/facebook?${params.toString()}`;
+  }, [locale, selectedPackage, t]);
+
  if (isAuthenticated && authUser) {
    return (
      <div className="space-y-6">
@@ -159,37 +208,52 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
          >
            {t('checkout.auth_step.switch_to_login')}
          </Button>
-          {showGoogleControls && (
-            <div className="flex flex-1 justify-start gap-2 sm:flex-none">
+          {showOauthControls && (
+            <div className="flex flex-1 flex-wrap items-center gap-2 sm:flex-none">
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  onClick={handleGoogleLogin}
+                  disabled={isRedirectingToGoogle}
+                  className="flex items-center gap-2"
+                >
+                  {isRedirectingToGoogle ? (
+                    <LoaderCircle className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <GoogleIcon className="h-4 w-4" />
+                  )}
+                  {t('checkout.auth_step.continue_with_google')}
+                </Button>
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "inline-flex items-center gap-1 rounded-full border border-muted-foreground/30 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:border-muted-foreground/60 hover:text-foreground",
+                      showGoogleHelper && "bg-muted/60 text-foreground"
+                    )}
+                  >
+                    {t('checkout.auth_step.google_helper_badge')}
+                    <ChevronDown className={cn("h-3 w-3 transition-transform", showGoogleHelper && "rotate-180")} />
+                  </button>
+                </CollapsibleTrigger>
+              </div>
              <Button
                variant="outline"
-                onClick={handleGoogleLogin}
-                disabled={isRedirectingToGoogle}
+                onClick={handleFacebookLogin}
+                disabled={isRedirectingToFacebook}
                className="flex items-center gap-2"
              >
-                {isRedirectingToGoogle ? (
+                {isRedirectingToFacebook ? (
                  <LoaderCircle className="h-4 w-4 animate-spin" />
                ) : (
-                  <GoogleIcon className="h-4 w-4" />
+                  <FacebookIcon className="h-4 w-4" />
                )}
-                {t('checkout.auth_step.continue_with_google')}
+                {t('checkout.auth_step.continue_with_facebook')}
              </Button>
-              <CollapsibleTrigger asChild>
-                <button
-                  type="button"
-                  className={cn(
-                    "inline-flex items-center gap-1 rounded-full border border-muted-foreground/30 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:border-muted-foreground/60 hover:text-foreground",
-                    showGoogleHelper && "bg-muted/60 text-foreground"
-                  )}
-                >
-                  {t('checkout.auth_step.google_helper_badge')}
-                  <ChevronDown className={cn("h-3 w-3 transition-transform", showGoogleHelper && "rotate-180")} />
-                </button>
-              </CollapsibleTrigger>
            </div>
          )}
        </div>
-        {showGoogleControls && (
+        {showOauthControls && (
          <CollapsibleContent>
            <Alert className="border-dashed border-muted/60 bg-muted/20 text-xs sm:text-sm">
              <AlertDescription>{t('checkout.auth_step.google_helper')}</AlertDescription>
@@ -198,10 +262,10 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
        )}
      </Collapsible>

-      {googleAuth?.error && (
+      {(googleAuth?.error || facebookAuth?.error) && (
        <Alert variant="destructive">
-          <AlertTitle>{t('checkout.auth_step.google_error_title')}</AlertTitle>
-          <AlertDescription>{googleAuth.error}</AlertDescription>
+          <AlertTitle>{authErrorTitle}</AlertTitle>
+          <AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
        </Alert>
      )}

@@ -213,8 +277,8 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
              privacyHtml={privacyHtml}
              locale={locale}
              onSuccess={handleRegisterSuccess}
-              prefill={googleProfile}
-              onClearGoogleProfile={onClearGoogleProfile}
+              prefill={prefill}
+              onClearPrefill={onClearPrefill}
            />
          )
        ) : (
--- a/resources/js/pages/marketing/checkout/types.ts
+++ b/resources/js/pages/marketing/checkout/types.ts
@@ -1,6 +1,6 @@
 export type CheckoutStepId = 'package' | 'auth' | 'payment' | 'confirmation';

-export interface GoogleProfilePrefill {
+export interface OAuthProfilePrefill {
  email?: string;
  name?: string;
  given_name?: string;