@lovable.dev/cloud-auth-js 0.0.1-dev.2

package/README.md

@@ -0,0 +1,88 @@
+# @lovable.dev/cloud-auth-js
+
+OAuth authentication library for Lovable projects using Supabase.
+
+## Installation
+
+```bash
+npm install @lovable.dev/cloud-auth-js
+```
+
+## Usage
+
+```typescript
+import { createLovableAuth } from "@lovable.dev/cloud-auth-js";
+import { supabase } from "./supabase/client";
+
+const lovableAuth = createLovableAuth();
+
+// Sign in with OAuth
+const result = await lovableAuth.signInWithOAuth("google");
+
+if (result.redirected) {
+  // Page is redirecting to OAuth provider
+  return;
+}
+
+if (result.error) {
+  console.error("Sign in failed:", result.error.message);
+  return;
+}
+
+await supabase.auth.setSession(result.tokens);
+```
+
+## API
+
+### `createLovableAuth(config?)`
+
+Creates a Lovable auth instance.
+
+**Config options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `oauthBrokerUrl` | `string` | `"/~oauth/initiate"` | OAuth broker initiate URL |
+| `supportedOAuthOrigins` | `string[]` | `["https://oauth.lovable.app"]` | Allowed origins for OAuth postMessage |
+
+### `signInWithOAuth(provider, options?)`
+
+Initiates OAuth sign-in flow.
+
+**Parameters:**
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `provider` | `"google" \| "apple"` | OAuth provider |
+| `options.redirect_uri` | `string` | Custom redirect URI (defaults to `window.location.origin`) |
+| `options.extraParams` | `Record<string, string>` | Additional params to send to the OAuth broker |
+
+**Returns:** `Promise<SignInWithOAuthResult>`
+
+## Types
+
+```typescript
+interface OAuthTokens {
+  access_token: string;
+  refresh_token: string;
+}
+
+interface LovableAuthConfig {
+  oauthBrokerUrl?: string;
+  supportedOAuthOrigins?: string[];
+}
+
+interface SignInWithOAuthOptions {
+  redirect_uri?: string;
+  extraParams?: Record<string, string>;
+}
+
+type SignInWithOAuthResult =
+  | { tokens: OAuthTokens; error: null; redirected?: false }
+  | { tokens?: undefined; error: Error; redirected?: false }
+  | { tokens?: undefined; error: null; redirected: true };
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,168 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createLovableAuth: () => createLovableAuth
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/auth.ts
+var EXPECTED_MESSAGE_TYPE = "authorization_response";
+var DEFAULT_OAUTH_BROKER_URL = "/~oauth/initiate";
+var DEFAULT_SUPPORTED_OAUTH_ORIGINS = ["https://oauth.lovable.app"];
+function startWebMessageListener(supportedOrigins) {
+  let resolvePromise;
+  const promise = new Promise((resolve) => {
+    resolvePromise = resolve;
+  });
+  const callback = (e) => {
+    const isValidOrigin = supportedOrigins.some((origin) => e.origin === origin);
+    if (!isValidOrigin) {
+      return;
+    }
+    const data = e.data;
+    if (!data || typeof data !== "object") {
+      return;
+    }
+    if (data.type !== EXPECTED_MESSAGE_TYPE) {
+      return;
+    }
+    resolvePromise(data.response);
+  };
+  const cleanup = () => {
+    window.removeEventListener("message", callback);
+  };
+  window.addEventListener("message", callback);
+  return {
+    cleanup,
+    messagePromise: promise
+  };
+}
+function getPopupDimensions(isInIframe) {
+  const hasBrowserPosition = window.screenX !== 0 || window.screenY !== 0 || !isInIframe;
+  const width = hasBrowserPosition ? window.outerWidth * 0.5 : window.screen.width * 0.5;
+  const height = hasBrowserPosition ? window.outerHeight * 0.5 : window.screen.height * 0.5;
+  const left = hasBrowserPosition ? window.screenX + (window.outerWidth - width) / 2 : (window.screen.width - width) / 2;
+  const top = hasBrowserPosition ? window.screenY + (window.outerHeight - height) / 2 : (window.screen.height - height) / 2;
+  return { width, height, left, top };
+}
+function generateState() {
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    return [...crypto.getRandomValues(new Uint8Array(16))].map((b) => b.toString(16).padStart(2, "0")).join("");
+  }
+  return Math.random().toString(36).substring(2) + Date.now().toString(36);
+}
+function createAuth(config = {}) {
+  const oauthBrokerUrl = config.oauthBrokerUrl ?? DEFAULT_OAUTH_BROKER_URL;
+  const supportedOAuthOrigins = config.supportedOAuthOrigins ?? DEFAULT_SUPPORTED_OAUTH_ORIGINS;
+  async function signInWithOAuth(provider, opts = {}) {
+    let isInIframe = false;
+    try {
+      isInIframe = window.self !== window.top;
+    } catch {
+      isInIframe = true;
+    }
+    const state = generateState();
+    const redirectUri = opts.redirect_uri ?? window.location.origin;
+    const params = new URLSearchParams({
+      provider,
+      redirect_uri: redirectUri,
+      state,
+      ...opts.extraParams
+    });
+    if (!isInIframe) {
+      window.location.href = `${oauthBrokerUrl}?${params.toString()}`;
+      return { error: null, redirected: true };
+    }
+    params.set("response_mode", "web_message");
+    const url = `${oauthBrokerUrl}?${params.toString()}`;
+    const { messagePromise, cleanup } = startWebMessageListener(supportedOAuthOrigins);
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    let popup;
+    if (isMobile) {
+      popup = window.open(url, "_blank");
+    } else {
+      const { width, height, left, top } = getPopupDimensions(isInIframe);
+      popup = window.open(url, "oauth", `width=${width},height=${height},left=${left},top=${top}`);
+    }
+    if (!popup) {
+      cleanup();
+      return { error: new Error("Popup was blocked") };
+    }
+    let popupCheckInterval;
+    const popupClosedPromise = new Promise((_, reject) => {
+      popupCheckInterval = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(popupCheckInterval);
+          reject(new Error("Sign in was cancelled"));
+        }
+      }, 500);
+    });
+    try {
+      const data = await Promise.race([messagePromise, popupClosedPromise]);
+      if (data.error) {
+        if (data.error === "legacy_flow") {
+          return {
+            error: new Error(
+              "This flow is not supported in Preview mode. Please open the app in a new tab to sign in."
+            )
+          };
+        }
+        return {
+          error: new Error(data.error_description ?? "Sign in failed")
+        };
+      }
+      if (data.state !== state) {
+        return { error: new Error("State is invalid") };
+      }
+      if (!data.access_token || !data.refresh_token) {
+        return { error: new Error("No tokens received") };
+      }
+      return {
+        tokens: {
+          access_token: data.access_token,
+          refresh_token: data.refresh_token
+        },
+        error: null
+      };
+    } catch (error) {
+      return {
+        error: error instanceof Error ? error : new Error(String(error))
+      };
+    } finally {
+      clearInterval(popupCheckInterval);
+      cleanup();
+      popup?.close();
+    }
+  }
+  return {
+    signInWithOAuth
+  };
+}
+
+// src/index.ts
+function createLovableAuth(config) {
+  return createAuth(config);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createLovableAuth
+});

package/dist/index.d.cts

@@ -0,0 +1,33 @@
+type OAuthProvider = "google" | "apple";
+interface LovableAuthConfig {
+    oauthBrokerUrl?: string;
+    supportedOAuthOrigins?: string[];
+}
+interface OAuthTokens {
+    access_token: string;
+    refresh_token: string;
+}
+interface SignInWithOAuthOptions {
+    redirect_uri?: string;
+    extraParams?: Record<string, string>;
+}
+type SignInWithOAuthResult = {
+    tokens: OAuthTokens;
+    error: null;
+    redirected?: false;
+} | {
+    tokens?: undefined;
+    error: Error;
+    redirected?: false;
+} | {
+    tokens?: undefined;
+    error: null;
+    redirected: true;
+};
+interface LovableAuth {
+    signInWithOAuth: (provider: OAuthProvider, opts?: SignInWithOAuthOptions) => Promise<SignInWithOAuthResult>;
+}
+
+declare function createLovableAuth(config: LovableAuthConfig): LovableAuth;
+
+export { type LovableAuth, type LovableAuthConfig, type OAuthProvider, type OAuthTokens, type SignInWithOAuthOptions, type SignInWithOAuthResult, createLovableAuth };

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+type OAuthProvider = "google" | "apple";
+interface LovableAuthConfig {
+    oauthBrokerUrl?: string;
+    supportedOAuthOrigins?: string[];
+}
+interface OAuthTokens {
+    access_token: string;
+    refresh_token: string;
+}
+interface SignInWithOAuthOptions {
+    redirect_uri?: string;
+    extraParams?: Record<string, string>;
+}
+type SignInWithOAuthResult = {
+    tokens: OAuthTokens;
+    error: null;
+    redirected?: false;
+} | {
+    tokens?: undefined;
+    error: Error;
+    redirected?: false;
+} | {
+    tokens?: undefined;
+    error: null;
+    redirected: true;
+};
+interface LovableAuth {
+    signInWithOAuth: (provider: OAuthProvider, opts?: SignInWithOAuthOptions) => Promise<SignInWithOAuthResult>;
+}
+
+declare function createLovableAuth(config: LovableAuthConfig): LovableAuth;
+
+export { type LovableAuth, type LovableAuthConfig, type OAuthProvider, type OAuthTokens, type SignInWithOAuthOptions, type SignInWithOAuthResult, createLovableAuth };

package/dist/index.js

@@ -0,0 +1,141 @@
+// src/auth.ts
+var EXPECTED_MESSAGE_TYPE = "authorization_response";
+var DEFAULT_OAUTH_BROKER_URL = "/~oauth/initiate";
+var DEFAULT_SUPPORTED_OAUTH_ORIGINS = ["https://oauth.lovable.app"];
+function startWebMessageListener(supportedOrigins) {
+  let resolvePromise;
+  const promise = new Promise((resolve) => {
+    resolvePromise = resolve;
+  });
+  const callback = (e) => {
+    const isValidOrigin = supportedOrigins.some((origin) => e.origin === origin);
+    if (!isValidOrigin) {
+      return;
+    }
+    const data = e.data;
+    if (!data || typeof data !== "object") {
+      return;
+    }
+    if (data.type !== EXPECTED_MESSAGE_TYPE) {
+      return;
+    }
+    resolvePromise(data.response);
+  };
+  const cleanup = () => {
+    window.removeEventListener("message", callback);
+  };
+  window.addEventListener("message", callback);
+  return {
+    cleanup,
+    messagePromise: promise
+  };
+}
+function getPopupDimensions(isInIframe) {
+  const hasBrowserPosition = window.screenX !== 0 || window.screenY !== 0 || !isInIframe;
+  const width = hasBrowserPosition ? window.outerWidth * 0.5 : window.screen.width * 0.5;
+  const height = hasBrowserPosition ? window.outerHeight * 0.5 : window.screen.height * 0.5;
+  const left = hasBrowserPosition ? window.screenX + (window.outerWidth - width) / 2 : (window.screen.width - width) / 2;
+  const top = hasBrowserPosition ? window.screenY + (window.outerHeight - height) / 2 : (window.screen.height - height) / 2;
+  return { width, height, left, top };
+}
+function generateState() {
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    return [...crypto.getRandomValues(new Uint8Array(16))].map((b) => b.toString(16).padStart(2, "0")).join("");
+  }
+  return Math.random().toString(36).substring(2) + Date.now().toString(36);
+}
+function createAuth(config = {}) {
+  const oauthBrokerUrl = config.oauthBrokerUrl ?? DEFAULT_OAUTH_BROKER_URL;
+  const supportedOAuthOrigins = config.supportedOAuthOrigins ?? DEFAULT_SUPPORTED_OAUTH_ORIGINS;
+  async function signInWithOAuth(provider, opts = {}) {
+    let isInIframe = false;
+    try {
+      isInIframe = window.self !== window.top;
+    } catch {
+      isInIframe = true;
+    }
+    const state = generateState();
+    const redirectUri = opts.redirect_uri ?? window.location.origin;
+    const params = new URLSearchParams({
+      provider,
+      redirect_uri: redirectUri,
+      state,
+      ...opts.extraParams
+    });
+    if (!isInIframe) {
+      window.location.href = `${oauthBrokerUrl}?${params.toString()}`;
+      return { error: null, redirected: true };
+    }
+    params.set("response_mode", "web_message");
+    const url = `${oauthBrokerUrl}?${params.toString()}`;
+    const { messagePromise, cleanup } = startWebMessageListener(supportedOAuthOrigins);
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    let popup;
+    if (isMobile) {
+      popup = window.open(url, "_blank");
+    } else {
+      const { width, height, left, top } = getPopupDimensions(isInIframe);
+      popup = window.open(url, "oauth", `width=${width},height=${height},left=${left},top=${top}`);
+    }
+    if (!popup) {
+      cleanup();
+      return { error: new Error("Popup was blocked") };
+    }
+    let popupCheckInterval;
+    const popupClosedPromise = new Promise((_, reject) => {
+      popupCheckInterval = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(popupCheckInterval);
+          reject(new Error("Sign in was cancelled"));
+        }
+      }, 500);
+    });
+    try {
+      const data = await Promise.race([messagePromise, popupClosedPromise]);
+      if (data.error) {
+        if (data.error === "legacy_flow") {
+          return {
+            error: new Error(
+              "This flow is not supported in Preview mode. Please open the app in a new tab to sign in."
+            )
+          };
+        }
+        return {
+          error: new Error(data.error_description ?? "Sign in failed")
+        };
+      }
+      if (data.state !== state) {
+        return { error: new Error("State is invalid") };
+      }
+      if (!data.access_token || !data.refresh_token) {
+        return { error: new Error("No tokens received") };
+      }
+      return {
+        tokens: {
+          access_token: data.access_token,
+          refresh_token: data.refresh_token
+        },
+        error: null
+      };
+    } catch (error) {
+      return {
+        error: error instanceof Error ? error : new Error(String(error))
+      };
+    } finally {
+      clearInterval(popupCheckInterval);
+      cleanup();
+      popup?.close();
+    }
+  }
+  return {
+    signInWithOAuth
+  };
+}
+
+// src/index.ts
+function createLovableAuth(config) {
+  return createAuth(config);
+}
+export {
+  createLovableAuth
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@lovable.dev/cloud-auth-js",
+  "version": "0.0.1-dev.2",
+  "description": "Lovable Cloud Auth JS",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --outDir dist",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run clean && npm run build",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "lovable",
+    "oauth",
+    "authentication"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^22",
+    "rimraf": "^5.0.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5",
+    "vitest": "^3"
+  }
+}