npm - @pradip1995/commerce-auth - Versions diffs - 2.0.0 → 3.0.0 - Mend

@pradip1995/commerce-auth 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +48 -9
package/package.json +5 -3
package/src/components/google-auth-shell/index.tsx +75 -0
package/src/components/google-identity-script/index.tsx +23 -0
package/src/components/google-one-tap/index.tsx +71 -29
package/src/components/login/index.tsx +3 -24
package/src/components/register/index.tsx +2 -6
package/src/index.ts +8 -0
package/src/templates/login-template.tsx +1 -5
package/src/util/google-identity-services.ts +81 -0

package/README.md CHANGED Viewed

@@ -8,12 +8,14 @@ import {
   LOGIN_VIEW,
   GoogleLoginButton,
   GoogleCallbackPage,
+  GoogleAuthShell,
+  GoogleIdentityServicesScript,
 } from "@pradip1995/commerce-auth"
 ```
-### Google OAuth
+### Google OAuth (redirect flow)
-Use `GoogleLoginButton` anywhere you need a Google sign-in CTA (login, register, modals):
+Use `GoogleLoginButton` for a "Continue with Google" CTA (login, register, modals):
 ```tsx
 import { GoogleLoginButton } from "@pradip1995/commerce-auth"
@@ -22,7 +24,7 @@ import { initiateGoogleAuth } from "@core/data/customer"
 <GoogleLoginButton countryCode={countryCode} initiateAuth={initiateGoogleAuth} />
 ```
-Wire the OAuth callback route to the shared page:
+Wire the OAuth callback route:
 ```tsx
 import { GoogleCallbackPage } from "@pradip1995/commerce-auth"
@@ -38,18 +40,55 @@ export default function GoogleCallbackRoute() {
 }
 ```
-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 (GIS SDK — corner popup)
-### Google One Tap (optional)
+Uses the official [Google Identity Services](https://developers.google.com/identity/gsi/web/guides/overview) SDK (`accounts.google.com/gsi/client`):
-Set `NEXT_PUBLIC_GOOGLE_CLIENT_ID` (same OAuth client as the Medusa backend). Wrap the app layout:
+1. `google.accounts.id.initialize({ client_id, callback })`
+2. `google.accounts.id.prompt()` — shows the account picker on any page
+3. User clicks an account → JWT credential sent to your backend
+4. Medusa verifies the token via `@medusajs/auth-google`
+**Google Cloud Console**
+- OAuth 2.0 Client ID (Web application)
+- Authorized JavaScript origins: `http://localhost:8000`, your production domain
+- OAuth consent screen with app name and branding (controls "Sign in to … with Google")
+**Root layout**
 ```tsx
-import { GoogleAuthProvider } from "@pradip1995/commerce-auth"
+import { retrieveCustomer } from "@core/data/customer"
+import {
+  GoogleAuthShell,
+  GoogleIdentityServicesScript,
+} from "@pradip1995/commerce-auth"
+export default async function RootLayout({ children }) {
+  const customer = await retrieveCustomer().catch(() => null)
+  const isAuthenticated = Boolean(customer && customer.id !== "pending_deletion")
-<GoogleAuthProvider>{children}</GoogleAuthProvider>
+  return (
+    <html>
+      <head>
+        {/* Step 2: Load GIS library (official docs) */}
+        <GoogleIdentityServicesScript />
+      </head>
+      <body>
+        {/* Step 3: Initialize + prompt on every page for signed-out users */}
+        <GoogleAuthShell isAuthenticated={isAuthenticated}>
+          {children}
+        </GoogleAuthShell>
+      </body>
+    </html>
+  )
+}
 ```
-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).
+Set `NEXT_PUBLIC_GOOGLE_CLIENT_ID` (same client ID as Medusa `GOOGLE_CLIENT_ID`).
+**Backend:** `authenticateGoogleCredential` POSTs the JWT to Medusa `/auth/customer/google/callback` with `{ credential }`. Medusa validates signature, `aud`, and issuer before creating a session.
+Optional: `autoSelectReturningUsers` on `GoogleAuthShell` enables GIS `auto_select` for users who already granted consent.
 Consuming apps must provide `@modules/*` shims for icons and modals, or replace theme slots to wrap headless exports.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/commerce-auth",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Medusa storefront authentication — login, register, OTP, Google OAuth",
   "license": "MIT",
   "publishConfig": {
@@ -30,11 +30,13 @@
     "./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-auth-shell": "./src/components/google-auth-shell/index.tsx",
+    "./components/google-identity-script": "./src/components/google-identity-script/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": "^2.0.0",
+    "@pradip1995/commerce-core": "^3.0.0",
     "@medusajs/ui": ">=4",
     "@react-oauth/google": ">=0.12",
     "next": ">=15",
@@ -47,7 +49,7 @@
     }
   },
   "devDependencies": {
-    "@pradip1995/commerce-core": "^2.0.0",
+    "@pradip1995/commerce-core": "^3.0.0",
     "@react-oauth/google": "^0.12.2",
     "@medusajs/types": "latest",
     "@medusajs/ui": "latest",

package/src/components/google-auth-shell/index.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+"use client"
+import {
+  authenticateGoogleCredential,
+  handleGoogleCallback,
+} from "@core/data/customer"
+import { usePathname } from "next/navigation"
+import { GoogleOneTapLogin } from "../google-one-tap"
+import { getGoogleClientId } from "../google-oauth-provider"
+export type GoogleAuthShellProps = {
+  children: React.ReactNode
+  /** Pass from server layout via retrieveCustomer() */
+  isAuthenticated?: boolean
+  defaultCountryCode?: string
+  /** Skip One Tap UI for returning users who already consented (GIS auto_select) */
+  autoSelectReturningUsers?: boolean
+}
+function GoogleOneTapGate({
+  isAuthenticated,
+  defaultCountryCode,
+  autoSelectReturningUsers,
+}: {
+  isAuthenticated: boolean
+  defaultCountryCode: string
+  autoSelectReturningUsers: boolean
+}) {
+  const pathname = usePathname()
+  const clientId = getGoogleClientId()
+  const isCallbackRoute = pathname?.startsWith("/auth/customer/google/callback")
+  const disabled = !clientId || isAuthenticated || isCallbackRoute
+  if (disabled) {
+    return null
+  }
+  return (
+    <GoogleOneTapLogin
+      handlers={{
+        authenticateCredential: authenticateGoogleCredential,
+        handleCustomerCallback: handleGoogleCallback,
+      }}
+      defaultCountryCode={defaultCountryCode}
+      autoSelect={autoSelectReturningUsers}
+      useFedcmForPrompt={true}
+    />
+  )
+}
+export function GoogleAuthShell({
+  children,
+  isAuthenticated = false,
+  defaultCountryCode,
+  autoSelectReturningUsers = false,
+}: GoogleAuthShellProps) {
+  const region =
+    defaultCountryCode ??
+    process.env.NEXT_PUBLIC_DEFAULT_REGION?.trim() ??
+    "us"
+  return (
+    <>
+      <GoogleOneTapGate
+        isAuthenticated={isAuthenticated}
+        defaultCountryCode={region}
+        autoSelectReturningUsers={autoSelectReturningUsers}
+      />
+      {children}
+    </>
+  )
+}
+export default GoogleAuthShell

package/src/components/google-identity-script/index.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import Script from "next/script"
+/**
+ * Loads the official Google Identity Services (GIS) SDK in `<head>`.
+ * @see https://developers.google.com/identity/gsi/web/guides/overview
+ */
+export function GoogleIdentityServicesScript() {
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim()
+  if (!clientId) {
+    return null
+  }
+  return (
+    <Script
+      id="google-identity-services"
+      src="https://accounts.google.com/gsi/client"
+      strategy="beforeInteractive"
+    />
+  )
+}
+export default GoogleIdentityServicesScript

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

@@ -1,12 +1,15 @@
 "use client"
-import { useGoogleOneTapLogin } from "@react-oauth/google"
 import { useParams } from "next/navigation"
-import { useCallback } from "react"
+import { useEffect, useRef } from "react"
 import {
   completeGoogleCredentialSignIn,
   type GoogleCredentialSignInHandlers,
 } from "../../util/google-auth-client"
+import {
+  type GoogleCredentialResponse,
+  waitForGoogleIdentityServices,
+} from "../../util/google-identity-services"
 import { getGoogleClientId } from "../google-oauth-provider"
 export type GoogleOneTapLoginProps = {
@@ -14,6 +17,9 @@ export type GoogleOneTapLoginProps = {
   countryCode?: string
   defaultCountryCode?: string
   disabled?: boolean
+  /** Enable automatic sign-in for returning users who already granted consent */
+  autoSelect?: boolean
+  useFedcmForPrompt?: boolean
   onError?: (message: string) => void
 }
@@ -22,41 +28,77 @@ export function GoogleOneTapLogin({
   countryCode: countryCodeProp,
   defaultCountryCode = "us",
   disabled = false,
+  autoSelect = false,
+  useFedcmForPrompt = true,
   onError,
 }: GoogleOneTapLoginProps) {
   const params = useParams()
   const clientId = getGoogleClientId()
+  const handlersRef = useRef(handlers)
+  const onErrorRef = useRef(onError)
-  const handleCredential = useCallback(
-    async (credential: string) => {
-      const result = await completeGoogleCredentialSignIn(credential, handlers, {
-        countryCode:
-          countryCodeProp || (params?.countryCode as string | undefined),
-        defaultCountryCode,
-      })
+  handlersRef.current = handlers
+  onErrorRef.current = onError
+  useEffect(() => {
+    if (disabled || !clientId) {
+      return
+    }
+    let cancelled = false
-      if (result.error) {
-        onError?.(result.error)
-      }
-    },
-    [countryCodeProp, defaultCountryCode, handlers, onError, params?.countryCode]
-  )
+    waitForGoogleIdentityServices()
+      .then((idApi) => {
+        if (cancelled) {
+          return
+        }
-  useGoogleOneTapLogin({
-    disabled: disabled || !clientId,
-    onSuccess: async (response) => {
-      const credential = response.credential
-      if (!credential) {
-        onError?.("No Google credential received")
-        return
-      }
+        idApi.initialize({
+          client_id: clientId,
+          callback: (response: GoogleCredentialResponse) => {
+            const credential = response.credential
+            if (!credential) {
+              onErrorRef.current?.("No Google credential received")
+              return
+            }
+            completeGoogleCredentialSignIn(credential, handlersRef.current, {
+              countryCode:
+                countryCodeProp || (params?.countryCode as string | undefined),
+              defaultCountryCode,
+            }).then((result) => {
+              if (result.error) {
+                onErrorRef.current?.(result.error)
+              }
+            })
+          },
+          auto_select: autoSelect,
+          cancel_on_tap_outside: true,
+          use_fedcm_for_prompt: useFedcmForPrompt,
+          context: "signin",
+        })
+        idApi.prompt()
+      })
+      .catch((error: Error) => {
+        if (!cancelled) {
+          onErrorRef.current?.(error.message)
+        }
+      })
-      await handleCredential(credential)
-    },
-    onError: () => {
-      onError?.("Google One Tap was dismissed or failed")
-    },
-  })
+    return () => {
+      cancelled = true
+      window.google?.accounts?.id?.cancel()
+    }
+  }, [
+    clientId,
+    countryCodeProp,
+    defaultCountryCode,
+    disabled,
+    autoSelect,
+    useFedcmForPrompt,
+    params?.countryCode,
+  ])
   return null
 }

package/src/components/login/index.tsx CHANGED Viewed

@@ -1,14 +1,7 @@
 "use client"
-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 } from "@core/data/customer"
+import GoogleLogin from "@modules/account/components/google-login"
 import { LOGIN_VIEW } from "@core/types/account"
 import ErrorMessage from "@modules/checkout/components/error-message"
 import Envelope from "@modules/common/icons/envelope"
@@ -112,19 +105,8 @@ 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>
@@ -134,10 +116,7 @@ const Login = ({ setCurrentView }: Props) => {
       {/* Google Login at Top */}
       <div className="mb-6">
-        <GoogleLoginButton
-          countryCode={params?.countryCode as string | undefined}
-          initiateAuth={initiateGoogleAuth}
-        />
+        <GoogleLogin />
         {/* Quick Link at Top */}
         <div className="mt-4 text-center">

package/src/components/register/index.tsx CHANGED Viewed

@@ -10,8 +10,7 @@ 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 { initiateGoogleAuth } from "@core/data/customer"
-import { GoogleLoginButton } from "../google-login"
+import GoogleLogin from "@modules/account/components/google-login"
 import {
   registerCustomer,
   sendCustomerOTP,
@@ -194,10 +193,7 @@ const Register = ({ setCurrentView }: Props) => {
       {/* Google Signup at Top */}
       <div className="mb-6">
-        <GoogleLoginButton
-          countryCode={params?.countryCode as string | undefined}
-          initiateAuth={initiateGoogleAuth}
-        />
+        <GoogleLogin />
         {/* Quick Link at Top */}
         <div className="mt-4 text-center">

package/src/index.ts CHANGED Viewed

@@ -39,6 +39,14 @@ export {
 } from "./components/google-oauth-provider"
 export type { GoogleAuthProviderProps } from "./components/google-oauth-provider"
+export { GoogleAuthShell, default as GoogleAuthRoot } from "./components/google-auth-shell"
+export type { GoogleAuthShellProps } from "./components/google-auth-shell"
+export {
+  GoogleIdentityServicesScript,
+  default as GoogleIdentityScript,
+} from "./components/google-identity-script"
 export { GoogleOneTapLogin, default as GoogleOneTap } from "./components/google-one-tap"
 export type { GoogleOneTapLoginProps } from "./components/google-one-tap"

package/src/templates/login-template.tsx CHANGED Viewed

@@ -6,8 +6,6 @@ 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 }
 const LoginTemplate = () => {
@@ -25,8 +23,7 @@ const LoginTemplate = () => {
   }
   return (
-    <GoogleAuthProvider>
-      <div className="min-h-screen w-full flex flex-col bg-page-bg">
+    <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
@@ -40,7 +37,6 @@ const LoginTemplate = () => {
         </div>
       </div>
     </div>
-    </GoogleAuthProvider>
   )
 }

package/src/util/google-identity-services.ts ADDED Viewed

@@ -0,0 +1,81 @@
+export const GOOGLE_IDENTITY_SCRIPT_SRC = "https://accounts.google.com/gsi/client"
+export type GoogleCredentialResponse = {
+  credential?: string
+  select_by?: string
+}
+declare global {
+  interface Window {
+    google?: {
+      accounts: {
+        id: {
+          initialize: (config: Record<string, unknown>) => void
+          prompt: (listener?: (notification: unknown) => void) => void
+          cancel: () => void
+        }
+      }
+    }
+  }
+}
+export function getGoogleIdentityScript(): HTMLScriptElement | null {
+  if (typeof document === "undefined") {
+    return null
+  }
+  return document.querySelector(
+    `script[src="${GOOGLE_IDENTITY_SCRIPT_SRC}"]`
+  ) as HTMLScriptElement | null
+}
+/** Wait until the official GIS SDK (`google.accounts.id`) is ready. */
+export function waitForGoogleIdentityServices(
+  timeoutMs = 10000
+): Promise<NonNullable<Window["google"]>["accounts"]["id"]> {
+  return new Promise((resolve, reject) => {
+    const getIdApi = () => window.google?.accounts?.id
+    if (getIdApi()) {
+      resolve(getIdApi()!)
+      return
+    }
+    const existingScript = getGoogleIdentityScript()
+    const onScriptLoad = () => {
+      const idApi = getIdApi()
+      if (idApi) {
+        resolve(idApi)
+      }
+    }
+    if (existingScript) {
+      existingScript.addEventListener("load", onScriptLoad)
+    } else {
+      const script = document.createElement("script")
+      script.src = GOOGLE_IDENTITY_SCRIPT_SRC
+      script.async = true
+      script.defer = true
+      script.addEventListener("load", onScriptLoad)
+      script.addEventListener("error", () =>
+        reject(new Error("Failed to load Google Identity Services"))
+      )
+      document.head.appendChild(script)
+    }
+    const started = Date.now()
+    const interval = window.setInterval(() => {
+      const idApi = getIdApi()
+      if (idApi) {
+        window.clearInterval(interval)
+        resolve(idApi)
+        return
+      }
+      if (Date.now() - started >= timeoutMs) {
+        window.clearInterval(interval)
+        reject(new Error("Google Identity Services timed out"))
+      }
+    }, 50)
+  })
+}