Skip to main content
SDKsWeb

Auth integration

Register or re-attach Motisig audience users on sign-in and sign-up, and logout on sign-out.

Your app owns identity. Motisig stores audience users keyed by (projectId, id) where id is your auth system's stable external id.

Rules

  1. Use a stable user id from your auth provider — not email or phone.
  2. Call identify after auth succeeds, on every login (sign-up and sign-in use the same call).
  3. Call logout() on sign-out (preserves anonymous visitor id).
  4. Do not call identify with a placeholder id before auth.

Firebase

import { getAuth, onAuthStateChanged } from 'firebase/auth';

async function waitForMotisig(timeoutMs = 10000) {
  const start = Date.now();
  while (Date.now() - start < timeoutMs) {
    if (window.motisig?.identify) return window.motisig;
    await new Promise((r) => setTimeout(r, 50));
  }
  return null;
}

onAuthStateChanged(getAuth(), async (user) => {
  const motisig = await waitForMotisig();
  if (!motisig) return;

  if (user) {
    await motisig.identify(user.uid, { email: user.email ?? undefined });
  } else {
    motisig.logout();
  }
});

Sign-out

window.motisig.logout();

Combine with your auth sign-out handler:

window.motisig.logout();
await firebaseSignOut();

Pre-login anonymous events

Before identify, event() uses an anonymous visitor id — no user record is created. After logout(), events resume with the same anonymous id. See Anonymous visitor id.

Profile after login

await window.motisig.updateUser({ firstName: 'Ada' });
await window.motisig.addTags(['trial']);
const profile = await window.motisig.getUser();

React / Next.js pattern

Pass the session user into a client component that calls identify when the user is known and logout when null:

'use client';

import { useEffect } from 'react';
import { authUserToIdentifyExtras, waitForMotisigGlobal } from '@/lib/motisig-auth-sync';

export function MotiSigAuthSync({ user }: { user: { id: string; email?: string | null } | null }) {
  useEffect(() => {
    void (async () => {
      const motisig = await waitForMotisigGlobal();
      if (!motisig) return;
      if (!user?.id) {
        motisig.logout();
        return;
      }
      await motisig.identify(user.id, authUserToIdentifyExtras(user));
    })();
  }, [user?.id, user?.email]);
  return null;
}

Mount <MotiSigAuthSync user={sessionUser} /> in authenticated layouts; use user={null} on public auth pages.