@pradip1995/commerce-auth 1.1.7 → 2.0.0

package/README.md

@@ -3,7 +3,53 @@
 Authentication UI and server actions: login, register, OTP, Google OAuth.
 
 ```ts
-import { Login, LOGIN_VIEW } from "@pradip1995/commerce-auth"
+import {
+  Login,
+  LOGIN_VIEW,
+  GoogleLoginButton,
+  GoogleCallbackPage,
+} from "@pradip1995/commerce-auth"
 ```
 
+### Google OAuth
+
+Use `GoogleLoginButton` anywhere you need a Google sign-in CTA (login, register, modals):
+
+```tsx
+import { GoogleLoginButton } from "@pradip1995/commerce-auth"
+import { initiateGoogleAuth } from "@core/data/customer"
+
+<GoogleLoginButton countryCode={countryCode} initiateAuth={initiateGoogleAuth} />
+```
+
+Wire the OAuth callback route to the shared page:
+
+```tsx
+import { GoogleCallbackPage } from "@pradip1995/commerce-auth"
+import { handleGoogleAuthCallback, handleGoogleCallback } from "@core/data/customer"
+
+export default function GoogleCallbackRoute() {
+  return (
+    <GoogleCallbackPage
+      handleAuthCallback={handleGoogleAuthCallback}
+      handleCustomerCallback={handleGoogleCallback}
+    />
+  )
+}
+```
+
+Pass your app's server actions via `initiateAuth`, `handleAuthCallback`, and `handleCustomerCallback` so client UI stays shared while data layer stays in each storefront.
+
+### Google One Tap (optional)
+
+Set `NEXT_PUBLIC_GOOGLE_CLIENT_ID` (same OAuth client as the Medusa backend). Wrap the app layout:
+
+```tsx
+import { GoogleAuthProvider } from "@pradip1995/commerce-auth"
+
+<GoogleAuthProvider>{children}</GoogleAuthProvider>
+```
+
+On login, `GoogleOneTapLogin` is enabled automatically when the client ID is present. Credential tokens are sent to Medusa's existing `/auth/customer/google/callback` endpoint (requires backend support for `credential` in the POST body).
+
 Consuming apps must provide `@modules/*` shims for icons and modals, or replace theme slots to wrap headless exports.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/commerce-auth",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "description": "Medusa storefront authentication — login, register, OTP, Google OAuth",
   "license": "MIT",
   "publishConfig": {
@@ -25,17 +25,30 @@
     "./types/account": "./src/types/account.ts",
     "./data/customer": "./src/data/customer.ts",
     "./data/customer-registration": "./src/data/customer-registration.ts",
-    "./data/guest": "./src/data/guest.ts"
+    "./data/guest": "./src/data/guest.ts",
+    "./components/google-login": "./src/components/google-login/index.tsx",
+    "./components/google-callback": "./src/components/google-callback/index.tsx",
+    "./util/google-auth-client": "./src/util/google-auth-client.ts",
+    "./components/google-oauth-provider": "./src/components/google-oauth-provider/index.tsx",
+    "./components/google-one-tap": "./src/components/google-one-tap/index.tsx",
+    "./components/google-credential-button": "./src/components/google-credential-button/index.tsx"
   },
   "peerDependencies": {
-    "@pradip1995/commerce-core": "^1.1.7",
+    "@pradip1995/commerce-core": "^2.0.0",
     "@medusajs/ui": ">=4",
+    "@react-oauth/google": ">=0.12",
     "next": ">=15",
     "react": ">=19",
     "react-dom": ">=19"
   },
+  "peerDependenciesMeta": {
+    "@react-oauth/google": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@pradip1995/commerce-core": "^1.1.7",
+    "@pradip1995/commerce-core": "^2.0.0",
+    "@react-oauth/google": "^0.12.2",
     "@medusajs/types": "latest",
     "@medusajs/ui": "latest",
     "@types/react": "^19",

package/src/components/google-callback/index.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import { Suspense, useEffect, useRef, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import {
+  decodeJwtPayload,
+  GOOGLE_LOGIN_COUNTRY_CODE_KEY,
+  resolveCountryCode,
+  resolvePostGoogleAuthRedirect,
+} from "../../util/google-auth-client"
+
+export type GoogleAuthCallbackResult = {
+  error?: string
+  token?: string
+}
+
+export type GoogleCustomerCallbackResult = {
+  error?: string
+}
+
+export type GoogleCallbackContentProps = {
+  handleAuthCallback: (
+    params: Record<string, string>
+  ) => Promise<GoogleAuthCallbackResult>
+  handleCustomerCallback: (
+    token: string,
+    email?: string,
+    first_name?: string,
+    last_name?: string
+  ) => Promise<GoogleCustomerCallbackResult>
+  defaultCountryCode?: string
+  loginPath?: string
+  errorButtonClassName?: string
+  loadingMessage?: string
+}
+
+export function GoogleCallbackContent({
+  defaultCountryCode = "us",
+  loginPath = "/account",
+  errorButtonClassName = "px-4 py-2 account-btn-primary rounded-lg",
+  loadingMessage = "Processing Google authentication...",
+  handleAuthCallback,
+  handleCustomerCallback,
+}: GoogleCallbackContentProps) {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [error, setError] = useState<string>()
+  const handledRef = useRef(false)
+
+  useEffect(() => {
+    if (handledRef.current) {
+      return
+    }
+    handledRef.current = true
+
+    const runCallback = async () => {
+      try {
+        const params: Record<string, string> = {}
+        searchParams.forEach((value, key) => {
+          params[key] = value
+        })
+
+        if (!params.code || !params.state) {
+          throw new Error("Missing authentication parameters.")
+        }
+
+        const authResult = await handleAuthCallback(params)
+
+        if (authResult.error) {
+          throw new Error(authResult.error)
+        }
+
+        const token = authResult.token
+        if (!token || typeof token !== "string") {
+          throw new Error("No token received.")
+        }
+
+        const decoded = decodeJwtPayload(token)
+        const userMetadata = decoded?.user_metadata as
+          | { name?: string; email?: string }
+          | undefined
+        const name = userMetadata?.name
+        const nameParts = name?.split(" ") || []
+
+        const callbackResult = await handleCustomerCallback(
+          token,
+          userMetadata?.email || (decoded?.email as string | undefined),
+          nameParts[0] || undefined,
+          nameParts.slice(1).join(" ") || undefined
+        )
+
+        if (callbackResult.error) {
+          throw new Error(callbackResult.error)
+        }
+
+        const savedCountryCode = localStorage.getItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY)
+        const countryCode = resolveCountryCode(savedCountryCode || undefined, defaultCountryCode)
+
+        if (savedCountryCode) {
+          localStorage.removeItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY)
+        }
+
+        window.location.href = resolvePostGoogleAuthRedirect(
+          countryCode,
+          defaultCountryCode
+        )
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Authentication failed.")
+      }
+    }
+
+    void runCallback()
+  }, [
+    defaultCountryCode,
+    handleAuthCallback,
+    handleCustomerCallback,
+    searchParams,
+  ])
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-500 mb-4">{error}</p>
+          <button
+            type="button"
+            onClick={() => router.push(loginPath)}
+            className={errorButtonClassName}
+          >
+            Go to Login
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>{loadingMessage}</p>
+    </div>
+  )
+}
+
+export type GoogleCallbackPageProps = GoogleCallbackContentProps & {
+  suspenseFallback?: React.ReactNode
+}
+
+export function GoogleCallbackPage({
+  suspenseFallback = (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>Loading...</p>
+    </div>
+  ),
+  ...contentProps
+}: GoogleCallbackPageProps) {
+  return (
+    <Suspense fallback={suspenseFallback}>
+      <GoogleCallbackContent {...contentProps} />
+    </Suspense>
+  )
+}
+
+export default GoogleCallbackPage

package/src/components/google-credential-button/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { CredentialResponse, GoogleLogin } from "@react-oauth/google"
+import { useParams } from "next/navigation"
+import { useCallback, useState } from "react"
+import {
+  completeGoogleCredentialSignIn,
+  type GoogleCredentialSignInHandlers,
+} from "../../util/google-auth-client"
+import { getGoogleClientId } from "../google-oauth-provider"
+
+export type GoogleCredentialButtonProps = {
+  handlers: GoogleCredentialSignInHandlers
+  countryCode?: string
+  defaultCountryCode?: string
+  className?: string
+  onError?: (message: string) => void
+}
+
+export function GoogleCredentialButton({
+  handlers,
+  countryCode: countryCodeProp,
+  defaultCountryCode = "us",
+  className,
+  onError,
+}: GoogleCredentialButtonProps) {
+  const params = useParams()
+  const [loading, setLoading] = useState(false)
+  const clientId = getGoogleClientId()
+
+  const handleSuccess = useCallback(
+    async (response: CredentialResponse) => {
+      const credential = response.credential
+      if (!credential) {
+        onError?.("No Google credential received")
+        return
+      }
+
+      try {
+        setLoading(true)
+        const result = await completeGoogleCredentialSignIn(credential, handlers, {
+          countryCode:
+            countryCodeProp || (params?.countryCode as string | undefined),
+          defaultCountryCode,
+        })
+
+        if (result.error) {
+          onError?.(result.error)
+          setLoading(false)
+        }
+      } catch {
+        onError?.("Google sign-in failed")
+        setLoading(false)
+      }
+    },
+    [countryCodeProp, defaultCountryCode, handlers, onError, params?.countryCode]
+  )
+
+  if (!clientId) {
+    return null
+  }
+
+  return (
+    <div
+      className={className}
+      aria-busy={loading}
+      data-testid="google-credential-button"
+    >
+      <GoogleLogin
+        onSuccess={handleSuccess}
+        onError={() => {
+          onError?.("Google sign-in was cancelled")
+          setLoading(false)
+        }}
+        theme="outline"
+        size="large"
+        shape="pill"
+        width="100%"
+        text="continue_with"
+      />
+    </div>
+  )
+}
+
+export default GoogleCredentialButton

package/src/components/google-login/index.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import Image from "next/image"
+import { useParams } from "next/navigation"
+import { useState } from "react"
+import {
+  clearMedusaAuthCookies,
+  GOOGLE_LOGIN_COUNTRY_CODE_KEY,
+  resolveCountryCode,
+} from "../../util/google-auth-client"
+
+export type GoogleAuthInitiateResult = {
+  error?: string
+  redirectUrl?: string
+}
+
+export type GoogleLoginButtonProps = {
+  countryCode?: string
+  defaultCountryCode?: string
+  label?: string
+  loadingLabel?: string
+  googleIconSrc?: string
+  className?: string
+  disabled?: boolean
+  initiateAuth: (countryCode?: string) => Promise<GoogleAuthInitiateResult>
+}
+
+const DEFAULT_BUTTON_CLASS =
+  "w-full flex items-center justify-center gap-2.5 py-3 px-4 border border-gray-200 bg-white hover:bg-gray-50 transition-all shadow-sm hover:shadow-md active:scale-[0.98]"
+
+export function GoogleLoginButton({
+  countryCode: countryCodeProp,
+  defaultCountryCode = "us",
+  label = "Continue with Google",
+  loadingLabel = "Connecting...",
+  googleIconSrc = "/Google.svg",
+  className,
+  disabled = false,
+  initiateAuth,
+}: GoogleLoginButtonProps) {
+  const params = useParams()
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    try {
+      setLoading(true)
+
+      const countryCode = resolveCountryCode(
+        countryCodeProp || (params?.countryCode as string | undefined),
+        defaultCountryCode
+      )
+
+      localStorage.setItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY, countryCode)
+      clearMedusaAuthCookies()
+
+      const result = await initiateAuth(countryCode)
+
+      if (result.error) {
+        throw new Error(result.error)
+      }
+
+      if (result.redirectUrl) {
+        window.location.href = result.redirectUrl
+      } else {
+        setLoading(false)
+      }
+    } catch {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled || loading}
+      className={className ?? DEFAULT_BUTTON_CLASS}
+      style={{ borderRadius: "30px" }}
+    >
+      <Image src={googleIconSrc} alt="Google" width={20} height={20} />
+      <span className="text-sm text-gray-700 font-bold">
+        {loading ? loadingLabel : label}
+      </span>
+    </button>
+  )
+}
+
+export default GoogleLoginButton

package/src/components/google-oauth-provider/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { GoogleOAuthProvider } from "@react-oauth/google"
+import { useEffect, useState } from "react"
+
+export type GoogleAuthProviderProps = {
+  children: React.ReactNode
+  clientId?: string
+}
+
+export function getGoogleClientId(): string | undefined {
+  return process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim() || undefined
+}
+
+export function GoogleAuthProvider({
+  children,
+  clientId = getGoogleClientId(),
+}: GoogleAuthProviderProps) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!clientId || !mounted) {
+    return <>{children}</>
+  }
+
+  return <GoogleOAuthProvider clientId={clientId}>{children}</GoogleOAuthProvider>
+}
+
+export default GoogleAuthProvider

package/src/components/google-one-tap/index.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { useGoogleOneTapLogin } from "@react-oauth/google"
+import { useParams } from "next/navigation"
+import { useCallback } from "react"
+import {
+  completeGoogleCredentialSignIn,
+  type GoogleCredentialSignInHandlers,
+} from "../../util/google-auth-client"
+import { getGoogleClientId } from "../google-oauth-provider"
+
+export type GoogleOneTapLoginProps = {
+  handlers: GoogleCredentialSignInHandlers
+  countryCode?: string
+  defaultCountryCode?: string
+  disabled?: boolean
+  onError?: (message: string) => void
+}
+
+export function GoogleOneTapLogin({
+  handlers,
+  countryCode: countryCodeProp,
+  defaultCountryCode = "us",
+  disabled = false,
+  onError,
+}: GoogleOneTapLoginProps) {
+  const params = useParams()
+  const clientId = getGoogleClientId()
+
+  const handleCredential = useCallback(
+    async (credential: string) => {
+      const result = await completeGoogleCredentialSignIn(credential, handlers, {
+        countryCode:
+          countryCodeProp || (params?.countryCode as string | undefined),
+        defaultCountryCode,
+      })
+
+      if (result.error) {
+        onError?.(result.error)
+      }
+    },
+    [countryCodeProp, defaultCountryCode, handlers, onError, params?.countryCode]
+  )
+
+  useGoogleOneTapLogin({
+    disabled: disabled || !clientId,
+    onSuccess: async (response) => {
+      const credential = response.credential
+      if (!credential) {
+        onError?.("No Google credential received")
+        return
+      }
+
+      await handleCredential(credential)
+    },
+    onError: () => {
+      onError?.("Google One Tap was dismissed or failed")
+    },
+  })
+
+  return null
+}
+
+export default GoogleOneTapLogin

package/src/components/login/index.tsx

@@ -1,13 +1,20 @@
 "use client"
 
-import { login, initiateGoogleAuth } from "@core/data/customer"
+import {
+  authenticateGoogleCredential,
+  handleGoogleCallback,
+  initiateGoogleAuth,
+  login,
+} from "@core/data/customer"
+import { GoogleLoginButton } from "../google-login"
+import { GoogleOneTapLogin } from "../google-one-tap"
+import { getGoogleClientId } from "../google-oauth-provider"
 import { LOGIN_VIEW } from "@core/types/account"
 import ErrorMessage from "@modules/checkout/components/error-message"
 import Envelope from "@modules/common/icons/envelope"
 import Lock from "@modules/common/icons/lock"
 import Eye from "@modules/common/icons/eye"
 import EyeOff from "@modules/common/icons/eye-off"
-import Image from "next/image"
 import { useEffect, useRef, useState } from "react"
 import { useRouter, useParams, useSearchParams } from "next/navigation"
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
@@ -39,7 +46,6 @@ const Login = ({ setCurrentView }: Props) => {
   } = useServerAction((formData: FormData) => login(null, formData))
   const [showPassword, setShowPassword] = useState(false)
   const [loginMethod, setLoginMethod] = useState<"email" | "phone">("email")
-  const [googleLoading, setGoogleLoading] = useState(false)
   const [showGuestModal, setShowGuestModal] = useState(false)
   const [checkingGuest, setCheckingGuest] = useState(false)
   const [showDeletionModal, setShowDeletionModal] = useState(false)
@@ -106,8 +112,19 @@ const Login = ({ setCurrentView }: Props) => {
     setShowGuestModal(true)
   }
 
+  const googleCredentialHandlers = {
+    authenticateCredential: authenticateGoogleCredential,
+    handleCustomerCallback: handleGoogleCallback,
+  }
+
   return (
     <div className="w-full flex flex-col" data-testid="login-page">
+      {getGoogleClientId() ? (
+        <GoogleOneTapLogin
+          handlers={googleCredentialHandlers}
+          countryCode={params?.countryCode as string | undefined}
+        />
+      ) : null}
       <h1 className="text-xl min-[340px]:text-2xl min-[550px]:text-3xl font-bold text-heading mb-1 min-[340px]:mb-2 text-center min-[550px]:text-left">
         Welcome Back
       </h1>
@@ -117,53 +134,10 @@ const Login = ({ setCurrentView }: Props) => {
 
       {/* Google Login at Top */}
       <div className="mb-6">
-        <button
-          type="button"
-          onClick={async (e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            try {
-              setGoogleLoading(true)
-
-              // Save current country code before redirecting to Google OAuth
-              const countryCode =
-                (params?.countryCode as string) ||
-                window.location.pathname.split("/")[1] ||
-                "us"
-              localStorage.setItem("googleLoginCountryCode", countryCode)
-
-              document.cookie =
-                "_medusa_jwt=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
-              document.cookie =
-                "_medusa_cache_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
-
-              // Use server-side action instead of direct backend call
-              const result = await initiateGoogleAuth(countryCode)
-
-              if (result.error) {
-                throw new Error(result.error)
-              }
-
-              const redirectUrl = result.redirectUrl
-
-              if (redirectUrl) {
-                window.location.href = redirectUrl
-              } else {
-                setGoogleLoading(false)
-              }
-            } catch (error) {
-              setGoogleLoading(false)
-            }
-          }}
-          disabled={googleLoading}
-          className="w-full flex items-center justify-center gap-2.5 py-3 px-4 border border-gray-200 bg-white hover:bg-gray-50 transition-all shadow-sm hover:shadow-md active:scale-[0.98]"
-          style={{ borderRadius: "30px" }}
-        >
-          <Image src="/Google.svg" alt="Google" width={20} height={20} />
-          <span className="text-sm text-gray-700 font-bold">
-            {googleLoading ? "Connecting..." : "Continue with Google"}
-          </span>
-        </button>
+        <GoogleLoginButton
+          countryCode={params?.countryCode as string | undefined}
+          initiateAuth={initiateGoogleAuth}
+        />
 
         {/* Quick Link at Top */}
         <div className="mt-4 text-center">

package/src/components/register/index.tsx

@@ -10,8 +10,8 @@ import User from "@modules/common/icons/user"
 import PhoneIcon from "@modules/common/icons/phone"
 import Eye from "@modules/common/icons/eye"
 import EyeOff from "@modules/common/icons/eye-off"
-import Image from "next/image"
 import { initiateGoogleAuth } from "@core/data/customer"
+import { GoogleLoginButton } from "../google-login"
 import {
   registerCustomer,
   sendCustomerOTP,
@@ -43,7 +43,6 @@ const Register = ({ setCurrentView }: Props) => {
   const params = useParams()
   const router = useRouter()
   const [showPassword, setShowPassword] = useState(false)
-  const [googleLoading, setGoogleLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   // Multi-step registration state
@@ -195,53 +194,10 @@ const Register = ({ setCurrentView }: Props) => {
 
       {/* Google Signup at Top */}
       <div className="mb-6">
-        <button
-          type="button"
-          onClick={async (e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            try {
-              setGoogleLoading(true)
-
-              // Save current country code before redirecting to Google OAuth
-              const countryCode =
-                (params?.countryCode as string) ||
-                window.location.pathname.split("/")[1] ||
-                "us"
-              localStorage.setItem("googleLoginCountryCode", countryCode)
-
-              document.cookie =
-                "_medusa_jwt=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
-              document.cookie =
-                "_medusa_cache_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
-
-              // Use server-side action instead of direct backend call
-              const result = await initiateGoogleAuth(countryCode)
-
-              if (result.error) {
-                throw new Error(result.error)
-              }
-
-              const redirectUrl = result.redirectUrl
-
-              if (redirectUrl) {
-                window.location.href = redirectUrl
-              } else {
-                setGoogleLoading(false)
-              }
-            } catch (error) {
-              setGoogleLoading(false)
-            }
-          }}
-          disabled={googleLoading}
-          className="w-full flex items-center justify-center gap-2.5 py-3 px-4 border border-gray-200 bg-white hover:bg-gray-50 transition-all shadow-sm hover:shadow-md active:scale-[0.98]"
-          style={{ borderRadius: "30px" }}
-        >
-          <Image src="/Google.svg" alt="Google" width={20} height={20} />
-          <span className="text-sm text-gray-700 font-bold">
-            {googleLoading ? "Connecting..." : "Continue with Google"}
-          </span>
-        </button>
+        <GoogleLoginButton
+          countryCode={params?.countryCode as string | undefined}
+          initiateAuth={initiateGoogleAuth}
+        />
 
         {/* Quick Link at Top */}
         <div className="mt-4 text-center">

package/src/data/customer.ts

@@ -462,6 +462,48 @@ export async function initiateGoogleAuth(countryCode?: string) {
   }
 }
 
+export async function authenticateGoogleCredential(credential: string) {
+  try {
+    if (!credential?.trim()) {
+      return { error: "Missing Google credential" }
+    }
+
+    const backendUrl =
+      process.env.MEDUSA_BACKEND_URL || process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL
+
+    if (!backendUrl) {
+      return { error: "Backend URL not configured" }
+    }
+
+    const response = await fetch(`${backendUrl}/auth/customer/google/callback`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ credential }),
+      cache: "no-store",
+    })
+
+    const data = await response.json().catch(() => ({}))
+
+    if (!response.ok) {
+      const message =
+        typeof data?.message === "string" ? data.message : "Authentication failed"
+      return { error: message }
+    }
+
+    const token = data.token || data
+
+    if (!token || typeof token !== "string") {
+      return { error: "No token received" }
+    }
+
+    return { token }
+  } catch (error: any) {
+    return { error: error.message || "Internal server error" }
+  }
+}
+
 export async function handleGoogleAuthCallback(params: Record<string, string>) {
   try {
     if (!params.code || !params.state) {

package/src/index.ts

@@ -10,3 +10,43 @@ export { default as Login } from "./components/login"
 export { default as Register } from "./components/register"
 export { default as ForgotPassword } from "./components/forgot-password"
 export { default as LoginTemplate } from "./templates/login-template"
+
+export {
+  GoogleLoginButton,
+  default as GoogleLogin,
+} from "./components/google-login"
+export type {
+  GoogleAuthInitiateResult,
+  GoogleLoginButtonProps,
+} from "./components/google-login"
+
+export {
+  GoogleCallbackContent,
+  GoogleCallbackPage,
+  default as GoogleCallback,
+} from "./components/google-callback"
+export type {
+  GoogleAuthCallbackResult,
+  GoogleCallbackContentProps,
+  GoogleCallbackPageProps,
+  GoogleCustomerCallbackResult,
+} from "./components/google-callback"
+
+export {
+  GoogleAuthProvider,
+  getGoogleClientId,
+  default as GoogleOAuthProvider,
+} from "./components/google-oauth-provider"
+export type { GoogleAuthProviderProps } from "./components/google-oauth-provider"
+
+export { GoogleOneTapLogin, default as GoogleOneTap } from "./components/google-one-tap"
+export type { GoogleOneTapLoginProps } from "./components/google-one-tap"
+
+export {
+  GoogleCredentialButton,
+  default as GoogleCredentialLogin,
+} from "./components/google-credential-button"
+export type { GoogleCredentialButtonProps } from "./components/google-credential-button"
+
+export type { GoogleCredentialSignInHandlers } from "./util/google-auth-client"
+export { completeGoogleCredentialSignIn } from "./util/google-auth-client"

package/src/templates/login-template.tsx

@@ -6,6 +6,7 @@ import { LOGIN_VIEW } from "@core/types/account"
 import Login from "@modules/account/components/login"
 import Register from "@modules/account/components/register"
 import ForgotPassword from "@modules/account/components/forgot-password"
+import { GoogleAuthProvider } from "../components/google-oauth-provider"
 
 export { LOGIN_VIEW }
 
@@ -24,7 +25,8 @@ const LoginTemplate = () => {
   }
 
   return (
-    <div className="min-h-screen w-full flex flex-col bg-page-bg">
+    <GoogleAuthProvider>
+      <div className="min-h-screen w-full flex flex-col bg-page-bg">
       <div className="flex-1 flex flex-col items-center justify-start px-2 min-[340px]:px-3 min-[550px]:px-4 sm:px-6 md:px-8 pt-2 min-[340px]:pt-3 min-[550px]:pt-4 sm:pt-4 md:pt-6 pb-6 min-[340px]:pb-8 min-[550px]:pb-8 sm:pb-8 md:pb-8">
         <h1 className="text-2xl min-[340px]:text-3xl min-[550px]:text-3xl sm:text-4xl md:text-4xl font-bold text-heading mb-4 min-[340px]:mb-6 min-[550px]:mb-8 sm:mb-8 md:mb-8 text-center">
           My Account
@@ -38,6 +40,7 @@ const LoginTemplate = () => {
         </div>
       </div>
     </div>
+    </GoogleAuthProvider>
   )
 }
 

package/src/util/google-auth-client.ts

@@ -0,0 +1,132 @@
+export const GOOGLE_LOGIN_COUNTRY_CODE_KEY = "googleLoginCountryCode"
+export const LOGIN_REDIRECT_URL_KEY = "loginRedirectUrl"
+
+export function resolveCountryCode(
+  countryCode?: string,
+  defaultCountryCode = "us"
+): string {
+  if (countryCode?.trim()) {
+    return countryCode
+  }
+
+  if (typeof window !== "undefined") {
+    const fromPath = window.location.pathname.split("/")[1]
+    if (fromPath) {
+      return fromPath
+    }
+  }
+
+  return defaultCountryCode
+}
+
+export function clearMedusaAuthCookies(): void {
+  if (typeof document === "undefined") {
+    return
+  }
+
+  document.cookie = "_medusa_jwt=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
+  document.cookie = "_medusa_cache_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
+}
+
+export function decodeJwtPayload(token: string): Record<string, unknown> | null {
+  try {
+    const payload = token.split(".")[1]
+    const decoded = atob(payload.replace(/-/g, "+").replace(/_/g, "/"))
+    return JSON.parse(decoded) as Record<string, unknown>
+  } catch {
+    return null
+  }
+}
+
+export type GoogleCredentialSignInHandlers = {
+  authenticateCredential: (credential: string) => Promise<{
+    error?: string
+    token?: string
+  }>
+  handleCustomerCallback: (
+    token: string,
+    email?: string,
+    first_name?: string,
+    last_name?: string
+  ) => Promise<{ error?: string }>
+}
+
+export async function completeGoogleCredentialSignIn(
+  credential: string,
+  handlers: GoogleCredentialSignInHandlers,
+  options?: {
+    countryCode?: string
+    defaultCountryCode?: string
+  }
+): Promise<{ error?: string }> {
+  const defaultCountryCode = options?.defaultCountryCode ?? "us"
+  const countryCode = resolveCountryCode(options?.countryCode, defaultCountryCode)
+
+  localStorage.setItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY, countryCode)
+  clearMedusaAuthCookies()
+
+  const authResult = await handlers.authenticateCredential(credential)
+
+  if (authResult.error) {
+    return { error: authResult.error }
+  }
+
+  const token = authResult.token
+  if (!token) {
+    return { error: "No token received" }
+  }
+
+  const decoded = decodeJwtPayload(token)
+  const userMetadata = decoded?.user_metadata as
+    | { name?: string; email?: string }
+    | undefined
+  const name = userMetadata?.name
+  const nameParts = name?.split(" ") || []
+
+  const callbackResult = await handlers.handleCustomerCallback(
+    token,
+    userMetadata?.email || (decoded?.email as string | undefined),
+    nameParts[0] || undefined,
+    nameParts.slice(1).join(" ") || undefined
+  )
+
+  if (callbackResult.error) {
+    return { error: callbackResult.error }
+  }
+
+  const savedCountryCode = localStorage.getItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY)
+  const resolvedCountryCode = resolveCountryCode(
+    savedCountryCode || countryCode,
+    defaultCountryCode
+  )
+
+  if (savedCountryCode) {
+    localStorage.removeItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY)
+  }
+
+  window.location.href = resolvePostGoogleAuthRedirect(
+    resolvedCountryCode,
+    defaultCountryCode
+  )
+
+  return {}
+}
+
+export function resolvePostGoogleAuthRedirect(
+  countryCode: string,
+  defaultCountryCode = "us"
+): string {
+  const redirectUrl = localStorage.getItem(LOGIN_REDIRECT_URL_KEY)
+  const hasKeepContext = redirectUrl?.includes("login_context=keep")
+
+  if (redirectUrl && hasKeepContext) {
+    localStorage.removeItem(LOGIN_REDIRECT_URL_KEY)
+    return redirectUrl
+  }
+
+  if (redirectUrl) {
+    localStorage.removeItem(LOGIN_REDIRECT_URL_KEY)
+  }
+
+  return `/${countryCode || defaultCountryCode}`
+}

package/src/util-google-oauth.ts

@@ -1,28 +0,0 @@
-/**
- * OAuth redirect_uri must exactly match a URI registered in Google Cloud Console.
- * That is the storefront callback path (often includes country code), NOT the backend API path.
- *
- * Set NEXT_PUBLIC_GOOGLE_OAUTH_CALLBACK_URL to override (must match Console exactly).
- */
-export function getGoogleOAuthCallbackUrl(countryCode?: string): string {
-  const explicit = process.env.NEXT_PUBLIC_GOOGLE_OAUTH_CALLBACK_URL?.trim()
-  if (explicit) {
-    return explicit
-  }
-
-  const base =
-    process.env.NEXT_PUBLIC_BASE_URL ||
-    process.env.STOREFRONT_URL ||
-    "http://localhost:8000"
-  const normalized = base.replace(/\/$/, "")
-  const region =
-    countryCode?.trim().toLowerCase() ||
-    process.env.NEXT_PUBLIC_DEFAULT_REGION?.trim().toLowerCase() ||
-    ""
-
-  if (region && /^[a-z]{2,3}$/i.test(region)) {
-    return `${normalized}/${region}/auth/customer/google/callback`
-  }
-
-  return `${normalized}/auth/customer/google/callback`
-}