refactor(auth): extract SocialLoginButtons into reusable component

Extract social login buttons (Passkey, Google, GitHub, Microsoft) from LoginPage into a dedicated SocialLoginButtons component. This enables reuse in OIDCLoginPage and improves code maintainability.
2026-04-20 13:13:31 +09:30
parent 2ff5f79f0f
commit e5fbbf521d
3 changed files with 134 additions and 81 deletions
@@ -0,0 +1,100 @@
+import { Fingerprint } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+interface SocialLoginButtonsProps {
+  isLoading: boolean;
+  onProviderLogin: (provider: "google" | "github" | "microsoft") => Promise<void>;
+  onPasskeyLogin: () => Promise<void>;
+  oidcSessionId?: string | null;
+}
+
+export function SocialLoginButtons({
+  isLoading,
+  onProviderLogin,
+  onPasskeyLogin,
+}: SocialLoginButtonsProps) {
+  return (
+    <>
+      <div className="relative my-6">
+        <Separator />
+        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
+          or continue with
+        </span>
+      </div>
+
+      <div className="space-y-3">
+        <Button
+          variant="outline"
+          className="w-full"
+          type="button"
+          onClick={onPasskeyLogin}
+          disabled={isLoading}
+        >
+          <Fingerprint className="w-4 h-4 mr-2" />
+          Sign in with Passkey
+        </Button>
+
+        <div className="grid grid-cols-3 gap-3">
+          <Button
+            variant="outline"
+            className="w-full"
+            type="button"
+            onClick={() => onProviderLogin("google")}
+            disabled={isLoading}
+            title="Sign in with Google"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="currentColor"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+          </Button>
+          <Button
+            variant="outline"
+            className="w-full"
+            type="button"
+            onClick={() => onProviderLogin("github")}
+            disabled={isLoading}
+            title="Sign in with GitHub"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
+              />
+            </svg>
+          </Button>
+          <Button
+            variant="outline"
+            className="w-full"
+            type="button"
+            onClick={() => onProviderLogin("microsoft")}
+            disabled={isLoading}
+            title="Sign in with Microsoft"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24">
+              <path fill="#f25022" d="M1 1h10v10H1z" />
+              <path fill="#00a4ef" d="M1 13h10v10H1z" />
+              <path fill="#7fba00" d="M13 1h10v10H13z" />
+              <path fill="#ffb900" d="M13 13h10v10H13z" />
+            </svg>
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
@@ -25,6 +25,7 @@ import { AddPasskeyWizard } from "@/components/security/AddPasskeyWizard";
 import { TotpEnrollmentWizard } from "@/components/security/TotpEnrollmentWizard";
 import { OAuthProvider } from "@/lib/oauth";
 import { config } from "@/config";
+import { SocialLoginButtons } from "@/components/auth/SocialLoginButtons";

 /**
 * Complete an OIDC authorization flow after the user has authenticated.
@@ -1023,86 +1024,7 @@ export default function LoginPage() {
        </Button>
      </form>

-      <div className="relative my-6">
-        <Separator />
-        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
-          or continue with
-        </span>
-      </div>
-
-      {/* Alternative login methods */}
-      <div className="space-y-3">
-        <Button 
-          variant="outline" 
-          className="w-full" 
-          type="button"
-          onClick={handlePasskeyLogin}
-          disabled={isLoading}
-        >
-          <Fingerprint className="w-4 h-4 mr-2" />
-          Sign in with Passkey
-        </Button>
-
-        <div className="grid grid-cols-3 gap-3">
-          <Button
-            variant="outline"
-            className="w-full"
-            type="button"
-            onClick={() => handleOAuthLogin('google')}
-            disabled={isLoading}
-            title="Sign in with Google"
-          >
-            <svg className="w-4 h-4" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-              />
-              <path
-                fill="currentColor"
-                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-              />
-              <path
-                fill="currentColor"
-                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-              />
-              <path
-                fill="currentColor"
-                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-              />
-            </svg>
-          </Button>
-          <Button
-            variant="outline"
-            className="w-full"
-            type="button"
-            onClick={() => handleOAuthLogin('github')}
-            disabled={isLoading}
-            title="Sign in with GitHub"
-          >
-            <svg className="w-4 h-4" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
-              />
-            </svg>
-          </Button>
-          <Button
-            variant="outline"
-            className="w-full"
-            type="button"
-            onClick={() => handleOAuthLogin('microsoft')}
-            disabled={isLoading}
-            title="Sign in with Microsoft"
-          >
-            <svg className="w-4 h-4" viewBox="0 0 24 24">
-              <path fill="#f25022" d="M1 1h10v10H1z" />
-              <path fill="#00a4ef" d="M1 13h10v10H1z" />
-              <path fill="#7fba00" d="M13 1h10v10H13z" />
-              <path fill="#ffb900" d="M13 13h10v10H13z" />
-            </svg>
-          </Button>
-        </div>
-      </div>
+      <SocialLoginButtons isLoading={isLoading} onProviderLogin={handleOAuthLogin} onPasskeyLogin={handlePasskeyLogin} oidcSessionId={oidcSessionId} />

      <p className="text-center text-sm text-muted-foreground mt-6">
        Don't have an account?{" "}
@@ -33,8 +33,10 @@ import { Label } from "@/components/ui/label";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Badge } from "@/components/ui/badge";
+import { SocialLoginButtons } from "@/components/auth/SocialLoginButtons";
 import { useAuth } from "@/contexts/AuthContext";
-import { ApiError, tokenManager } from "@/lib/api";
+import { api, ApiError, tokenManager } from "@/lib/api";
+import { OAuthProvider } from "@/lib/oauth";
 import { config } from "@/config";

 // ── Scope display metadata ────────────────────────────────────────────────────
@@ -196,6 +198,28 @@ export default function OIDCLoginPage() {
    setLoginError(null);
  };

+  // ── OAuth login ──────────────────────────────────────────────────────────────
+  const handleOAuthLogin = async (provider: OAuthProvider) => {
+    setIsSubmitting(true);
+    try {
+      const response = await api.externalAuth.initiateLogin(provider, {
+        flow: 'login',
+        oidc_session_id: oidcSessionId,
+      });
+      window.location.href = response.authorization_url;
+    } catch (err) {
+      const message = err instanceof ApiError ? err.message : err instanceof Error ? err.message : "Failed to initiate social login";
+      setLoginError(message);
+      setIsSubmitting(false);
+    }
+  };
+
+  // ── Passkey login ─────────────────────────────────────────────────────────────
+  const handlePasskeyLogin = async () => {
+    // For OIDC flow, passkey login redirects to main login page with OIDC context
+    navigate(`/login?oidc_session_id=${oidcSessionId}`);
+  };
+
  // ── Render: loading ──────────────────────────────────────────────────────────
  if (step === "loading") {
    return (
@@ -325,6 +349,13 @@ export default function OIDCLoginPage() {
          </Button>
        </form>

+        <SocialLoginButtons 
+          isLoading={isSubmitting} 
+          onProviderLogin={handleOAuthLogin} 
+          onPasskeyLogin={handlePasskeyLogin} 
+          oidcSessionId={oidcSessionId} 
+        />
+
        <Separator />

        <div className="text-center space-y-2">