@pradip1995/segment-facebook-login 0.2.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@pradip1995/segment-facebook-login",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "facebook-login",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "account",
+}
+
+export default manifest

package/src/segment.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import { loaderBus } from "@pradip1995/commerce-core/util/loader-bus"
+
+function resolveRedirectUri(): string {
+  const envBase =
+    process.env.NEXT_PUBLIC_BASE_URL ||
+    process.env.NEXT_PUBLIC_MEDUSA_STOREFRONT_URL ||
+    (typeof window !== "undefined" ? window.location.origin : "")
+
+  const base = envBase.replace(/\/$/, "")
+  return `${base}/auth/customer/facebook/callback`
+}
+
+async function initiateFacebookLogin(): Promise<string> {
+  const baseUrl =
+    process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL || process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+  const publishableKey = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY
+
+  loaderBus.begin()
+  try {
+    const response = await fetch(`${baseUrl}/auth/customer/facebook`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(publishableKey ? { "x-publishable-api-key": publishableKey } : {}),
+      },
+      body: JSON.stringify({ redirect_uri: resolveRedirectUri() }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Facebook auth failed with status ${response.status}`)
+    }
+
+    const result = await response.json()
+    const redirectUrl = typeof result === "string" ? result : result.location
+    if (!redirectUrl) {
+      throw new Error("No redirect location returned from authentication provider")
+    }
+
+    const url = new URL(redirectUrl)
+    url.searchParams.set("auth_type", "reauthenticate")
+    return url.toString()
+  } finally {
+    loaderBus.end()
+  }
+}
+
+function FacebookIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden className="h-5 w-5 shrink-0">
+      <path
+        d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
+        fill="#1877F2"
+      />
+    </svg>
+  )
+}
+
+export default function FacebookLogin({
+  customer,
+}: {
+  customer?: HttpTypes.StoreCustomer | null
+}) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const loginWithFacebook = useCallback(async () => {
+    if (isLoading) return
+    setIsLoading(true)
+
+    try {
+      const redirectUrl = await initiateFacebookLogin()
+      window.location.href = redirectUrl
+    } catch (error) {
+      console.error("Facebook authentication failed", error)
+      setIsLoading(false)
+    }
+  }, [isLoading])
+
+  if (customer) return null
+
+  return (
+    <button
+      type="button"
+      onClick={loginWithFacebook}
+      disabled={isLoading}
+      data-testid="facebook-login-button"
+      className="btn-outline w-full flex items-center justify-center gap-3 py-3 px-4"
+    >
+      <FacebookIcon />
+      <span>{isLoading ? "Redirecting…" : "Continue with Facebook"}</span>
+    </button>
+  )
+}