social-auth-plugin

A lightweight, frontend-only Social Login SDK for Vite/React/SPA apps.

✅ Popup-based login ✅ Google + Facebook support ✅ Fetches profile info (name, email, picture) ✅ Detects popup blocked and popup closed ✅ Returns full auth result via postMessage ✅ Supports mock login mode ✅ No backend needed for demos ✅ Fully typed

⚠️ Uses Implicit OAuth Flow for development only. ✅ For production, use Authorization Code + PKCE.

INSTALLATION

npm install @moneyplantai/social-auth-plugin

Local development: In plugin folder: npm link

In consumer app: npm link @moneyplantai/social-auth-plugin

SETUP IN YOUR APP

import { initSocialAuth } from "@moneyplantai/social-auth-plugin";

initSocialAuth({ google: { clientId: "YOUR_GOOGLE_CLIENT_ID", scope: "openid email profile" }, facebook: { appId: "YOUR_FACEBOOK_APP_ID", scope: "public_profile email" }, redirectPath: "/auth/callback.html", mock: false });

REQUIRED FILE (public/auth/callback.html)

    var hash = parseParams(location.hash);
    var query = parseParams(location.search);
    var data = Object.assign({}, query, hash);

    var payload = {
      source: "social-auth-callback",
      error: data.error,
      error_description: data.error_description || data.errorMessage,
      access_token: data.access_token,
      token_type: data.token_type,
      expires_in: data.expires_in,
      scope: data.scope,
      id_token: data.id_token,
      state: data.state
    };

    try {
      if (window.opener && !window.opener.closed) {
        window.opener.postMessage(payload, window.location.origin);
      }
    } catch (e) {}

    document.body.innerHTML =
      "<p style='font-family:system-ui;padding:20px;'>Authentication complete. You may close this window.</p>";

    setTimeout(function () {
      try { window.close(); } catch (e) {}
    }, 300);
  })();
</script>

USAGE

import { loginWithPopup } from "@moneyplantai/social-auth-plugin";

async function doLogin() { const result = await loginWithPopup(); console.log(result); }

RESULT FORMAT

AuthSuccess: { provider: "google" | "facebook" | "mock", tokens: { access_token: string, token_type?: string, expires_in?: number, id_token?: string, scope?: string }, profile?: { id: string, email?: string, name?: string, picture?: string, raw?: object } }

AuthError: { error: string, error_description?: string }

ERROR CONDITIONS

popup_blocked popup_closed state_mismatch profile_fetch_failed provider-specific OAuth errors

MOCK MODE

initSocialAuth({ mock: true })

Returns: { provider: "mock", tokens: { access_token: "mock_access_token", token_type: "Bearer", expires_in: 3600 }, profile: { id: "mock-user-123", email: "[email protected]", name: "Mock User", picture: "https://via.placeholder.com/96" } }

OAUTH REDIRECT URI REQUIRED

Add this to Google + Facebook dashboards: http://localhost:5173/auth/callback.html

LOCAL DEVELOPMENT WORKFLOW

Plugin: npm install npm run build npm link npm run dev

Consumer: npm install npm link @moneyplantai/social-auth-plugin npm run dev

PRODUCTION NOTES

Use Authorization Code + PKCE Never store access tokens in localStorage Use backend token exchange Use HTTP-only cookies for session

LICENSE

MIT