@pradip1995/segment-login-template 0.2.5 → 0.4.0

package/src/auth-server.ts

@@ -0,0 +1,307 @@
+"use server"
+
+import {
+  checkEmailRegistered,
+  completePasswordReset,
+  registerCustomer as registerCustomerBase,
+  requestPasswordReset,
+  sendCustomerOTP,
+  verifyCustomerOTP,
+} from "@pradip1995/commerce-core/data/customer-registration"
+import { transferCart } from "@pradip1995/commerce-core/data/customer"
+import { getCacheTag, setAuthToken } from "@pradip1995/commerce-core/data/cookies"
+import { sendOTP, verifyOTP } from "@pradip1995/commerce-core/data/guest"
+import { getGoogleOAuthCallbackUrl } from "@pradip1995/commerce-core/util/google-oauth"
+import { revalidateTag } from "next/cache"
+import { redirect } from "next/navigation"
+
+export {
+  sendCustomerOTP,
+  verifyCustomerOTP,
+  requestPasswordReset,
+  checkEmailRegistered,
+  completePasswordReset,
+  sendOTP,
+  verifyOTP,
+}
+
+function normalizeRegistrationError(message: string): string {
+  const lower = message.toLowerCase()
+  if (
+    lower.includes("identity with email already exists") ||
+    lower.includes("email already exists") ||
+    lower.includes("email is already registered")
+  ) {
+    return "Email already exists"
+  }
+  if (
+    lower.includes("identity with phone already exists") ||
+    lower.includes("phone already exists")
+  ) {
+    return "Phone number already exists"
+  }
+  return message
+}
+
+export async function registerCustomer(data: {
+  email: string
+  first_name: string
+  last_name: string
+  phone?: string
+  password: string
+}) {
+  const result = await registerCustomerBase(data)
+  if (!result.success && result.error) {
+    return { ...result, error: normalizeRegistrationError(result.error) }
+  }
+  return result
+}
+
+function getHeaders() {
+  return {
+    "Content-Type": "application/json",
+    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "",
+  }
+}
+
+function getBaseUrl() {
+  return process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+}
+
+export async function sendAuthOtp(input: {
+  email?: string
+  phone?: string
+  type: "email_auth" | "phone_auth"
+}) {
+  const baseUrl = getBaseUrl()
+  const body =
+    input.type === "email_auth"
+      ? { email: input.email?.toLowerCase().trim(), type: input.type }
+      : { phone: input.phone?.replace(/[^\d+]/g, ""), type: input.type }
+
+  const response = await fetch(`${baseUrl}/store/customers/otp/send`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify(body),
+  })
+
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({}))
+    return {
+      success: false as const,
+      error: (err as { message?: string }).message || "Failed to send verification code",
+    }
+  }
+
+  const data = (await response.json()) as {
+    token?: string
+    expires_at?: string
+    is_new_user?: boolean
+  }
+
+  return {
+    success: true as const,
+    token: data.token,
+    isNewUser: data.is_new_user ?? false,
+  }
+}
+
+export async function verifyAuthOtpAndLogin(input: {
+  token: string
+  code: string
+  countryCode: string
+  first_name?: string
+  last_name?: string
+}) {
+  const baseUrl = getBaseUrl()
+
+  const response = await fetch(`${baseUrl}/store/customers/otp/verify`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify({
+      token: input.token,
+      code: input.code,
+      first_name: input.first_name,
+      last_name: input.last_name,
+    }),
+  })
+
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({}))
+    return {
+      success: false as const,
+      error: (err as { message?: string }).message || "Invalid verification code",
+    }
+  }
+
+  const data = (await response.json()) as {
+    token?: string | null
+    verified?: boolean
+    is_new_user?: boolean
+    customer?: { email?: string }
+  }
+
+  const jwt = data.token
+  if (!jwt) {
+    return {
+      success: false as const,
+      error: "Verification succeeded but login token was not returned. Try signing in with your password.",
+    }
+  }
+
+  await setAuthToken(jwt)
+
+  try {
+    await transferCart(jwt)
+  } catch {
+    // non-fatal
+  }
+
+  const customerCacheTag = await getCacheTag("customers")
+  revalidateTag(customerCacheTag)
+
+  const countryCode = input.countryCode || "in"
+  redirect(`/${countryCode}`)
+}
+
+export async function completePasswordResetAction(input: {
+  email: string
+  password: string
+  token: string
+  countryCode: string
+}) {
+  const result = await completePasswordReset({
+    email: input.email,
+    password: input.password,
+    token: input.token,
+  })
+
+  if (!result.success) {
+    return result
+  }
+
+  redirect(`/${input.countryCode || "in"}/account`)
+}
+
+export async function verifyRegistrationOtp(input: {
+  otpToken: string
+  code: string
+  countryCode: string
+}) {
+  const response = await fetch(`${getBaseUrl()}/store/customers/otp/verify`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify({
+      token: input.otpToken,
+      code: input.code,
+    }),
+    cache: "no-store",
+  })
+
+  const data = (await response.json().catch(() => ({}))) as {
+    message?: string
+    token?: string | null
+    email_verified?: boolean
+    phone_verified?: boolean
+    needs_login?: boolean
+  }
+
+  if (!response.ok) {
+    return {
+      success: false as const,
+      error: data.message || "Invalid verification code",
+    }
+  }
+
+  const loginToken = data.token
+  if (loginToken) {
+    await setAuthToken(loginToken)
+    try {
+      await transferCart(loginToken)
+    } catch {
+      // non-fatal
+    }
+    const customerCacheTag = await getCacheTag("customers")
+    revalidateTag(customerCacheTag)
+    redirect(`/${input.countryCode || "in"}`)
+  }
+
+  return {
+    success: true as const,
+    emailVerified: data.email_verified,
+    phoneVerified: data.phone_verified,
+    needsLogin: data.needs_login ?? true,
+  }
+}
+
+export async function sendRegistrationOtp(
+  customerId: string,
+  type: "email_verification" | "phone_verification"
+) {
+  const result = await sendCustomerOTP(customerId, type)
+  if (result.success) {
+    return result
+  }
+
+  const message = result.error || "Failed to send verification code"
+  if (message.includes("Channel configuration not found")) {
+    return {
+      success: false as const,
+      error:
+        "Verification email is not configured on the backend. Rebuild and restart the Medusa server with customer-registration OTP settings.",
+    }
+  }
+
+  return { success: false as const, error: message }
+}
+
+export async function initiateGoogleAuth(countryCode?: string) {
+  try {
+    const backendUrl = getBaseUrl()
+
+    if (!backendUrl) {
+      return { error: "Backend URL not configured" }
+    }
+
+    if (!process.env.GOOGLE_CLIENT_ID && !process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) {
+      return { error: "Google sign-in is not configured on the storefront" }
+    }
+
+    const callbackUrl = getGoogleOAuthCallbackUrl(countryCode)
+
+    const response = await fetch(`${backendUrl}/auth/customer/google`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ callback_url: callbackUrl }),
+      cache: "no-store",
+    })
+
+    if (!response.ok) {
+      const err = (await response.json().catch(() => ({}))) as {
+        message?: string
+        type?: string
+      }
+      const message = err.message?.trim()
+      if (message?.includes("Unable to retrieve the auth provider")) {
+        return {
+          error:
+            "Google sign-in is not enabled on the backend. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in backend/.env and restart the Medusa server.",
+        }
+      }
+      return { error: message || "Google sign-in failed. Check backend Google OAuth configuration." }
+    }
+
+    const result = await response.json()
+    const redirectUrl =
+      typeof result === "string" ? result : (result as { location?: string })?.location
+
+    if (!redirectUrl) {
+      return { error: "No redirect URL received from Google OAuth" }
+    }
+
+    return { redirectUrl }
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : "Internal server error"
+    return { error: message }
+  }
+}

package/src/commerce-auth-otp-modal.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import OtpInput from "@pradip1995/commerce-auth/components/otp-input"
+import type { OtpVerificationModalProps } from "./otp-verification-modal"
+
+/**
+ * OTP modal styled like commerce-auth/chocomelon, compatible with segment-login-template props.
+ * Use in pages.config: `"otpComponent": "@pradip1995/segment-login-template/commerce-auth-otp-modal"`
+ */
+export default function CommerceAuthOtpModal({
+  open,
+  title,
+  description,
+  otp,
+  onOtpChange,
+  error,
+  pending,
+  success = false,
+  successTitle = "Verified",
+  successMessage = "Verification successful!",
+  verifyLabel = "Verify",
+  onVerify,
+  onResend,
+  onClose,
+  preventClose = false,
+  extraContent,
+}: OtpVerificationModalProps) {
+  if (!open) return null
+
+  function handleBackdropClick() {
+    if (preventClose || pending || success) return
+    onClose?.()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="Close verification dialog"
+        onClick={handleBackdropClick}
+      />
+      <div className="relative w-full max-w-md rounded-2xl bg-page-bg shadow-xl p-6">
+        <div className="flex flex-col gap-6 py-4 px-2">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-heading mb-2">
+              {success ? successTitle : title}
+            </h2>
+            {!success && (
+              <p className="text-sm text-gray-500 leading-relaxed max-w-[320px] mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {success ? (
+            <div className="text-center py-6">
+              <p className="text-brand-accent font-bold animate-pulse">{successMessage}</p>
+            </div>
+          ) : (
+            <>
+              {extraContent}
+
+              <OtpInput value={otp} onChange={onOtpChange} autoFocus />
+
+              {error && (
+                <p className="text-red-500 text-xs text-center" role="alert">
+                  {error}
+                </p>
+              )}
+
+              <div className="space-y-3">
+                <button
+                  type="button"
+                  onClick={onVerify}
+                  disabled={pending || otp.length < 6}
+                  className="w-full py-3 bg-brand-accent text-inverse font-bold hover:opacity-90 rounded-[30px] transition-colors disabled:opacity-60"
+                >
+                  {pending ? "Verifying…" : verifyLabel}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={onResend}
+                  disabled={pending}
+                  className="text-xs text-gray-500 hover:text-brand-accent w-full text-center underline font-medium disabled:opacity-60"
+                >
+                  Resend code
+                </button>
+              </div>
+
+              {preventClose && (
+                <p className="text-xs text-muted text-center">
+                  Verification is required to complete{" "}
+                  {verifyLabel.toLowerCase().includes("sign in") ? "sign in" : "registration"}.
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/forgot-password-form.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { useState } from "react"
+import { checkEmailRegistered, requestPasswordReset } from "./auth-server"
+
+export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
+  const [email, setEmail] = useState("")
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!email.trim()) return
+
+    setPending(true)
+    setMessage(null)
+    setError(null)
+
+    try {
+      const check = await checkEmailRegistered(email.trim())
+      if (!check.exists) {
+        setError("This email is not registered. Please create a new account instead.")
+        return
+      }
+
+      const result = await requestPasswordReset(email.trim())
+      if (!result.success) {
+        setError(result.error || "Failed to send reset link")
+        return
+      }
+
+      setSuccess(true)
+      setMessage(result.message || "If an account exists, you will receive a reset link shortly.")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="space-y-4 text-center py-4">
+        <div className="w-14 h-14 mx-auto rounded-full bg-green-100 flex items-center justify-center text-2xl">
+          ✉
+        </div>
+        <h2 className="section-heading text-lg">Check your email</h2>
+        <p className="text-sm text-muted">{message}</p>
+        <button type="button" onClick={onBack} className="btn-outline w-full">
+          Back to sign in
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <p className="text-sm text-muted">
+        Enter your email and we&apos;ll send a link to reset your password.
+      </p>
+      <label className="block">
+        <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+          Email
+        </span>
+        <input
+          name="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
+        />
+      </label>
+      {error && <p className="text-sm text-brand-sale">{error}</p>}
+      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
+        {pending ? "Sending…" : "Send reset link"}
+      </button>
+      <button
+        type="button"
+        onClick={onBack}
+        className="text-sm text-muted hover:text-brand-accent w-full text-center"
+      >
+        Back to sign in
+      </button>
+    </form>
+  )
+}

package/src/google-auth-section.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useState } from "react"
+import {
+  clearMedusaAuthCookies,
+  GOOGLE_LOGIN_COUNTRY_CODE_KEY,
+} from "@pradip1995/commerce-auth/util/google-auth-client"
+import { initiateGoogleAuth } from "./auth-server"
+
+const BUTTON_CLASS =
+  "btn-outline w-full flex items-center justify-center gap-2.5 py-3 px-4"
+
+export default function GoogleAuthSection({ countryCode }: { countryCode: string }) {
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  if (!clientId) return null
+
+  const handleClick = async () => {
+    setError(null)
+    setLoading(true)
+
+    try {
+      localStorage.setItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY, countryCode)
+      clearMedusaAuthCookies()
+
+      const result = await initiateGoogleAuth(countryCode)
+
+      if (result.error) {
+        setError(result.error)
+        setLoading(false)
+        return
+      }
+
+      if (result.redirectUrl) {
+        window.location.href = result.redirectUrl
+        return
+      }
+
+      setLoading(false)
+    } catch {
+      setError("Google sign-in failed. Please try again.")
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="mb-6">
+      {error && (
+        <p className="mb-3 text-sm text-red-600" role="alert">
+          {error}
+        </p>
+      )}
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={loading}
+        className={BUTTON_CLASS}
+        style={{ borderRadius: "30px" }}
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            fill="#4285F4"
+            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="#34A853"
+            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="#FBBC05"
+            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="#EA4335"
+            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>
+        <span className="text-sm text-gray-700 font-bold">
+          {loading ? "Connecting..." : "Continue with Google"}
+        </span>
+      </button>
+    </div>
+  )
+}

package/src/index.ts

@@ -1,2 +1,7 @@
 export { default } from "./segment"
 export { default as manifest } from "./manifest"
+export { default as ResetPasswordPage } from "./reset-password-page"
+export { default as OtpVerificationModal } from "./otp-verification-modal"
+export { default as CommerceAuthOtpModal } from "./commerce-auth-otp-modal"
+export type { OtpVerificationModalProps } from "./otp-verification-modal"
+export { resolveOtpComponent, type OtpVerificationComponent } from "./otp-component"