npm - medusa-google-login-logic - Versions diffs - 1.0.0 - Mend

medusa-google-login-logic 1.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 (9) hide show

package/README.md +126 -0
package/dist/google-login-logic/src/hooks/useGoogleAuth.d.ts +18 -0
package/dist/google-login-logic/src/index.d.ts +2 -0
package/dist/medusa-services/contact-action.d.ts +9 -0
package/dist/medusa-services/google-auth.d.ts +21 -0
package/dist/medusa-services/google-login.d.ts +36 -0
package/dist/ui-library.js +164 -0
package/dist/ui-library.umd.cjs +1 -0
package/package.json +42 -0

package/README.md ADDED Viewed

@@ -0,0 +1,126 @@
+# Medusa Google Login Logic
+The `medusa-google-login-logic` is a brand new library designed to handle Google OAuth authentication for MedusaJS applications. It is built to be modular, robust, and mirrors production-tested logic (ported from `B&B_ui`).
+## 🏗 Architecture
+The library is split into two layers:
+1.  **Service Layer (`medusa-services/google-login.ts`)**: Contains pure TypeScript functions for interacting with Medusa API and handling OAuth URL logic.
+2.  **Hook Layer (`google-login-logic/src/hooks/useGoogleAuth.ts`)**: A React hook that orchestrates the flow, manages state (loading, error), and handles UI events.
+---
+## 🛠 Core Logic Explanation
+### 1. The Login Flow (`login` function)
+When you call the `login()` function from the hook:
+- **Base URL Detection**: It automatically detects your storefront URL using environment variables (`NEXT_PUBLIC_BASE_URL` or `NEXT_PUBLIC_MEDUSA_STOREFRONT_URL`) or `window.location.origin`.
+- **Production Routing**: If it detects it's not on `localhost` and matches the `productionDomain` (default: `bellyandbaby.co`), it forces the use of the production URL.
+- **URI Normalization**: It ensures the `redirect_uri` sent to Google matches the Google Console exactly (handles trailing slashes and protocols).
+- **Redirection**: It calls the Medusa SDK to get the Google login location and redirects the user.
+### 2. The Callback Flow (`processCallback` function)
+The hook automatically detects the `code` in the URL (if `queryParams` are passed) and completes the login:
+- **Token Exchange**: Exchanges the Google authorization code for a Medusa authentication token.
+- **Account Linking Check**:
+    - It decodes the token to check for `actor_id`.
+    - If `actor_id` is missing, it means the Google account is not yet linked to a Medusa customer.
+- **Automatic Customer Creation**:
+    - For new users, it automatically calls `createCustomer` using the email extracted from the Google token.
+    - If the user already has an account but it's not linked, it handles the conflict gracefully and asks for a re-login (`onNeedsReLogin`).
+- **Session Management**: Automatically refreshes the token for existing customers to ensure a valid session and retrieves full customer data.
+---
+## 🚀 How to Use
+### 1. In your Login Button
+```tsx
+import { useGoogleAuth } from 'medusa-google-login-logic';
+const GoogleLoginButton = ({ sdk }) => {
+  const { login, isLoading, error } = useGoogleAuth({ sdk });
+  return (
+    <button onClick={login} disabled={isLoading}>
+      {isLoading ? 'Redirecting...' : 'Continue with Google'}
+    </button>
+  );
+};
+```
+### 2. In your Callback Page
+```tsx
+import { useGoogleAuth } from 'medusa-google-login-logic';
+import { useSearchParams, useRouter } from 'next/navigation';
+const GoogleCallbackPage = ({ sdk }) => {
+  const searchParams = useSearchParams();
+  const queryParams = Object.fromEntries(searchParams.entries());
+  const router = useRouter();
+  const { isLoading, error, customer } = useGoogleAuth({
+    sdk,
+    queryParams, // Hook auto-triggers logic when queryParams.code exists
+    onSuccess: (data) => {
+       router.push('/account');
+    },
+    onError: (msg) => alert(msg),
+    onNeedsReLogin: (email) => {
+       // Typically happens after automatic account creation
+       alert("Account created! Please login again with Google.");
+       router.push('/login');
+    }
+  });
+  if (isLoading) return <div>Authenticating...</div>;
+  if (error) return <div>Error: {error}</div>;
+  return <div>Welcome back!</div>;
+};
+```
+## ⚙️ Setup for Other Projects
+To use this library in a new project, follow these steps:
+### 1. Installation
+If your project is in the same mono-repo:
+```bash
+npm install ../path/to/medusa-google-login-logic
+```
+Or if published:
+```bash
+npm install medusa-google-login-logic
+```
+### 2. Required Environment Variables
+Add these to your project's `.env` or `.env.local`:
+- `NEXT_PUBLIC_MEDUSA_BACKEND_URL`: Your Medusa backend URL.
+- `NEXT_PUBLIC_BASE_URL`: Your storefront URL (e.g., `https://my-store.com`).
+- `NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY`: Your Medusa publishable key.
+### 3. Google OAuth Console Configuration
+You MUST add your callback URL to the **Authorized redirect URIs** in your [Google Cloud Console](https://console.cloud.google.com/):
+- **Local Development**: `http://localhost:8000/auth/customer/google/callback`
+- **Production**: `https://yourdomain.com/auth/customer/google/callback`
+> [!IMPORTANT]
+> Ensure the URL matches exactly (no trailing slash, matching protocol).
+### 4. Code Implementation
+Pass your configured Medusa SDK instance to the hook. The hook handles the rest.
+```tsx
+import { Medusa } from "@medusajs/js-sdk";
+import { useGoogleAuth } from "medusa-google-login-logic";
+const sdk = new Medusa({
+  baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL,
+  publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+});
+// Use in your components as shown in the examples above!
+```

package/dist/google-login-logic/src/hooks/useGoogleAuth.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export interface UseGoogleAuthProps {
+    sdk: any;
+    baseUrl?: string;
+    productionDomain?: string;
+    callbackPath?: string;
+    queryParams?: Record<string, string>;
+    onSuccess?: (customer: any) => void;
+    onError?: (error: string) => void;
+    onNeedsReLogin?: (email: string) => void;
+}
+export declare const useGoogleAuth: ({ sdk, baseUrl: propsBaseUrl, productionDomain, callbackPath, queryParams, onSuccess, onError, onNeedsReLogin }: UseGoogleAuthProps) => {
+    login: () => Promise<void>;
+    isLoading: boolean;
+    error: string | null;
+    customer: any;
+    needsReLogin: boolean;
+    processCallback: () => Promise<void>;
+};

package/dist/google-login-logic/src/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './hooks/useGoogleAuth';
2	+ export * from '../../medusa-services/google-login';

package/dist/medusa-services/contact-action.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export interface ContactSubmissionData {
+    backendUrl: string;
+    publishableKey?: string;
+    data: Record<string, any>;
+}
+/**
+ * Server-side compatible function to send contact request
+ */
+export declare function sendContactRequest({ backendUrl, publishableKey, data }: ContactSubmissionData): Promise<any>;

package/dist/medusa-services/google-auth.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * Normalizes and validates redirect URI to match Google OAuth console exactly
+ */
+export declare function normalizeRedirectUri(url: string, isLocalhost: boolean): string;
+export declare const GOOGLE_CALLBACK_PATH = "/auth/customer/google/callback";
+/**
+ * Validates redirect URI format matches expected Google OAuth console configuration
+ */
+export declare function validateRedirectUri(uri: string, isLocalhost: boolean, productionDomain: string): {
+    valid: boolean;
+    expected: string;
+    actual: string;
+};
+/**
+ * Core API logic to initiate Google login
+ */
+export declare function performGoogleLogin(sdk: any, redirectUri: string): Promise<any>;
+/**
+ * Decodes a JWT token safely
+ */
+export declare function decodeToken(token: string): any;

package/dist/medusa-services/google-login.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * Ported from B&B_ui/src/modules/account/components/google-login-button/actions.ts
+ * and B&B_ui/src/app/auth/google/callback/actions.ts
+ */
+/**
+ * Normalizes and validates redirect URI to match Google OAuth console exactly
+ */
+export declare function normalizeRedirectUri(url: string, isLocalhost: boolean): string;
+/**
+ * Validates redirect URI format matches expected Google OAuth console configuration
+ */
+export declare function validateRedirectUri(uri: string, isLocalhost: boolean, productionDomain: string): {
+    valid: boolean;
+    expected: string;
+    actual: string;
+};
+/**
+ * Initiates Google login
+ */
+export declare function performGoogleLogin(sdk: any, redirectUri: string): Promise<any>;
+/**
+ * Decodes a JWT token safely
+ */
+export declare function decodeToken(token: string | null | undefined): any;
+/**
+ * Refreshes auth token
+ */
+export declare function refreshToken(sdk: any): Promise<string | null>;
+/**
+ * Retrieves current customer data
+ */
+export declare function retrieveCustomer(sdk: any, token?: string): Promise<any>;
+/**
+ * Creates a new customer
+ */
+export declare function createCustomer(sdk: any, email: string, token: string): Promise<any>;

package/dist/ui-library.js ADDED Viewed

@@ -0,0 +1,164 @@
+import { useState as w, useCallback as k, useEffect as z } from "react";
+function C(t, r) {
+  try {
+    const e = new URL(t);
+    return e.pathname = e.pathname.replace(/\/$/, ""), r ? e.protocol = "http:" : e.protocol = "https:", e.toString().replace(/\/$/, "");
+  } catch (e) {
+    return console.warn("Failed to normalize redirect URI:", e), t.replace(/\/$/, "");
+  }
+}
+function M(t, r, e) {
+  const o = r ? "http://localhost:8000/auth/customer/google/callback" : `https://${e}/auth/customer/google/callback`, a = C(t, r), f = a === o;
+  return f || console.warn("⚠️ Redirect URI validation mismatch:", {
+    expected: o,
+    actual: a,
+    difference: a.replace(o, "") || o.replace(a, "")
+  }), {
+    valid: f,
+    expected: o,
+    actual: a
+  };
+}
+async function A(t, r) {
+  try {
+    return await t.auth.login("customer", "google", {
+      redirect_uri: r
+    });
+  } catch (e) {
+    throw console.error("❌ Google login initiation failed:", e), e;
+  }
+}
+function R(t) {
+  if (!t) return null;
+  try {
+    const r = t.split(".");
+    if (r.length !== 3) return null;
+    const e = r[1], o = e + "=".repeat((4 - e.length % 4) % 4), a = typeof Buffer < "u" ? Buffer.from(o.replace(/-/g, "+").replace(/_/g, "/"), "base64").toString("utf-8") : atob(o.replace(/-/g, "+").replace(/_/g, "/"));
+    return JSON.parse(a);
+  } catch (r) {
+    return console.error("Failed to decode token:", r), null;
+  }
+}
+async function S(t) {
+  try {
+    return await t.auth.refresh();
+  } catch (r) {
+    return console.error("❌ Token refresh failed:", r), null;
+  }
+}
+async function x(t, r) {
+  try {
+    const e = {};
+    return r && (e.authorization = `Bearer ${r}`), (await t.client.fetch("/store/customers/me", {
+      method: "GET",
+      query: {
+        fields: "*orders"
+      },
+      headers: e
+    })).customer;
+  } catch (e) {
+    throw console.error("❌ Customer retrieval failed:", e), e;
+  }
+}
+async function E(t, r, e) {
+  try {
+    return (await t.store.customer.create(
+      { email: r },
+      {},
+      { authorization: `Bearer ${e}` }
+    )).customer;
+  } catch (o) {
+    throw console.error("❌ Customer creation failed:", o), o;
+  }
+}
+const y = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, V = ({
+  sdk: t,
+  baseUrl: r,
+  productionDomain: e = "bellyandbaby.co",
+  callbackPath: o = "/auth/customer/google/callback",
+  queryParams: a,
+  onSuccess: f,
+  onError: u,
+  onNeedsReLogin: h
+}) => {
+  const [$, d] = w(!1), [B, p] = w(null), [I, v] = w(null), [G, b] = w(!1), U = (c) => {
+    var n;
+    try {
+      return ((n = process.env) == null ? void 0 : n[c]) || (y == null ? void 0 : y[c]);
+    } catch {
+      return;
+    }
+  }, O = k(async () => {
+    d(!0), p(null);
+    try {
+      const c = r || U("NEXT_PUBLIC_MEDUSA_STOREFRONT_URL") || U("NEXT_PUBLIC_BASE_URL") || (typeof window < "u" ? window.location.origin : ""), n = c.includes("localhost") || c.includes("127.0.0.1");
+      let i = c;
+      !n && e && c.includes(e) && (i = `https://${e}`);
+      const l = C(`${i}${o}`, n), s = await A(t, l);
+      if (typeof s == "object" && (s != null && s.location)) {
+        window.location.href = s.location;
+        return;
+      }
+      if (typeof s != "string")
+        throw new Error("Unexpected authentication result");
+      window.location.reload();
+    } catch (c) {
+      console.error("Google login initiation failed:", c);
+      const n = c.message || "Failed to initiate Google login";
+      p(n), u == null || u(n), d(!1);
+    }
+  }, [t, r, e, o, u]), m = k(async () => {
+    var c, n;
+    if (!(!a || !a.code)) {
+      d(!0), p(null);
+      try {
+        const i = await t.auth.callback("customer", "google", a);
+        if (typeof i != "string")
+          throw new Error("Invalid token response");
+        const l = R(i), s = (c = l == null ? void 0 : l.user_metadata) == null ? void 0 : c.email;
+        if (!(l == null ? void 0 : l.actor_id)) {
+          if (!s)
+            throw new Error("No email found in token");
+          try {
+            await E(t, s, i), b(!0), h == null || h(s), d(!1);
+            return;
+          } catch (g) {
+            if (g.status === 422 || g.status === 409 || (n = g.message) != null && n.includes("already exists")) {
+              b(!0), h == null || h(s), d(!1);
+              return;
+            }
+            throw g;
+          }
+        }
+        const _ = await S(t) || i, T = await x(t, _);
+        v(T), f == null || f(T);
+      } catch (i) {
+        console.error("Google callback processing failed:", i);
+        const l = i.message || "Authentication failed";
+        p(l), u == null || u(l);
+      } finally {
+        d(!1);
+      }
+    }
+  }, [t, a, f, u, h]);
+  return z(() => {
+    a && a.code && m();
+  }, [a, m]), {
+    login: O,
+    isLoading: $,
+    error: B,
+    customer: I,
+    needsReLogin: G,
+    processCallback: m
+  };
+};
+export {
+  E as createCustomer,
+  R as decodeToken,
+  C as normalizeRedirectUri,
+  A as performGoogleLogin,
+  S as refreshToken,
+  x as retrieveCustomer,
+  V as useGoogleAuth,
+  M as validateRedirectUri
+};

package/dist/ui-library.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+    "name": "medusa-google-login-logic",
+    "version": "1.0.0",
+    "description": "Ported Google Login logic from B&B_ui project.",
+    "type": "module",
+    "main": "./dist/ui-library.umd.cjs",
+    "module": "./dist/ui-library.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/ui-library.js",
+            "require": "./dist/ui-library.umd.cjs",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "dependencies": {
+        "@medusajs/js-sdk": "^2.11.2"
+    },
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0"
+    }
+}