@pradip1995/commerce-auth
v4.0.0
Published
Medusa storefront authentication — login, register, OTP, Google OAuth
Readme
@pradip1995/commerce-auth
Authentication UI and server actions: login, register, OTP, Google OAuth.
import {
Login,
LOGIN_VIEW,
GoogleLoginButton,
GoogleCallbackPage,
GoogleAuthShell,
GoogleIdentityServicesScript,
} from "@pradip1995/commerce-auth"Google OAuth (redirect flow)
Use GoogleLoginButton for a "Continue with Google" CTA (login, register, modals):
import { GoogleLoginButton } from "@pradip1995/commerce-auth"
import { initiateGoogleAuth } from "@core/data/customer"
<GoogleLoginButton countryCode={countryCode} initiateAuth={initiateGoogleAuth} />Wire the OAuth callback route:
import { GoogleCallbackPage } from "@pradip1995/commerce-auth"
import { handleGoogleAuthCallback, handleGoogleCallback } from "@core/data/customer"
export default function GoogleCallbackRoute() {
return (
<GoogleCallbackPage
handleAuthCallback={handleGoogleAuthCallback}
handleCustomerCallback={handleGoogleCallback}
/>
)
}Google One Tap (GIS SDK — corner popup)
Uses the official Google Identity Services SDK (accounts.google.com/gsi/client):
google.accounts.id.initialize({ client_id, callback })google.accounts.id.prompt()— shows the account picker on any page- User clicks an account → JWT credential sent to your backend
- 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
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")
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>
)
}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.