Events

Listen to SDK events to react to authentication changes and other actions.

Event Overview

ExtensionLogin emits events during key operations:

Event	When Fired
init	SDK initialized
identify	User identified successfully
logout	User logged out
authChange	Auth state changed (login/logout)
error	An error occurred

Listening to Events

Using on()

ExtensionLogin.on('eventName', (data) => {
  // Handle event
});

Using onAuthChange()

Shorthand for auth state changes:

ExtensionLogin.onAuthChange((user) => {
  // user is User object or null
});

Event Reference

init

Fired when ExtensionLogin.init() completes.

ExtensionLogin.on('init', (data) => {
  console.log('SDK initialized');
  console.log('API Key:', data.apiKey);
});

Event Data:

{
  apiKey: string;  // Your API key (masked)
  version: string; // SDK version
}

---

identify

Fired when a user is successfully identified.

ExtensionLogin.on('identify', (data) => {
  console.log('User identified:', data.user.email);
  console.log('CRM results:', data.crm);
});

Event Data:

{
  user: {
    id: string;
    email: string;
    name?: string;
    // ... other user fields
  };
  crm: {
    [crmName: string]: {
      success: boolean;
      error?: string;
    };
  };
  isNewUser: boolean;
}

Example:

ExtensionLogin.on('identify', ({ user, crm, isNewUser }) => {
  // Track in analytics
  analytics.track('user_identified', {
    userId: user.id,
    email: user.email,
    isNew: isNewUser
  });

  // Check CRM delivery
  for (const [name, result] of Object.entries(crm)) {
    if (!result.success) {
      console.warn(`CRM ${name} failed:`, result.error);
    }
  }
});

---

logout

Fired when a user logs out.

ExtensionLogin.on('logout', () => {
  console.log('User logged out');
});

Event Data:

{
  previousUser: {
    id: string;
    email: string;
  };
}

Example:

ExtensionLogin.on('logout', ({ previousUser }) => {
  analytics.track('user_logged_out', {
    userId: previousUser.id
  });

  // Clean up UI
  clearUserData();
  showLoginScreen();
});

---

authChange

Fired whenever authentication state changes.

ExtensionLogin.on('authChange', (data) => {
  if (data.user) {
    console.log('Logged in:', data.user.email);
  } else {
    console.log('Logged out');
  }
});

Event Data:

{
  user: User | null;
  previousUser: User | null;
}

Example:

ExtensionLogin.on('authChange', ({ user, previousUser }) => {
  if (user && !previousUser) {
    // User just logged in
    onLogin(user);
  } else if (!user && previousUser) {
    // User just logged out
    onLogout();
  } else if (user && previousUser && user.id !== previousUser.id) {
    // Different user logged in
    onUserSwitch(previousUser, user);
  }
});

---

error

Fired when an error occurs.

ExtensionLogin.on('error', (error) => {
  console.error('ExtensionLogin error:', error.code, error.message);
});

Event Data:

{
  code: string;    // Error code
  message: string; // Human-readable message
  context?: {      // Additional context
    method?: string;
    data?: any;
  };
}

Example:

ExtensionLogin.on('error', ({ code, message, context }) => {
  // Log to error tracking service
  errorTracker.capture({
    message: `ExtensionLogin: ${message}`,
    tags: { errorCode: code },
    extra: context
  });

  // Handle specific errors
  switch (code) {
    case 'RATE_LIMITED':
      showNotification('Too many requests. Please wait.');
      break;
    case 'NETWORK_ERROR':
      showNotification('Connection error. Check your internet.');
      break;
    case 'INVALID_API_KEY':
      console.error('Check your API key configuration');
      break;
  }
});

---

Using onAuthChange()

The onAuthChange() method is a convenient shorthand:

// These are equivalent:

// Using onAuthChange
ExtensionLogin.onAuthChange((user) => {
  updateUI(user);
});

// Using on('authChange')
ExtensionLogin.on('authChange', ({ user }) => {
  updateUI(user);
});

With Unsubscribe

const unsubscribe = ExtensionLogin.onAuthChange((user) => {
  console.log('Auth changed:', user?.email);
});

// Later, stop listening
unsubscribe();

---

Removing Event Listeners

Using off()

function myHandler(data) {
  console.log('Event:', data);
}

// Add listener
ExtensionLogin.on('identify', myHandler);

// Remove listener
ExtensionLogin.off('identify', myHandler);

Using Unsubscribe Function

const unsubscribe = ExtensionLogin.on('identify', (data) => {
  console.log('Identified:', data.user.email);
});

// Later, stop listening
unsubscribe();

---

Event Patterns

One-Time Listener

function onceIdentified(callback) {
  const unsubscribe = ExtensionLogin.on('identify', (data) => {
    unsubscribe();
    callback(data);
  });
}

onceIdentified((data) => {
  console.log('First identification:', data.user.email);
});

Conditional Listener

ExtensionLogin.on('identify', ({ user, isNewUser }) => {
  if (isNewUser) {
    showWelcomeTour();
  } else {
    showDashboard();
  }
});

Multiple Listeners

// Analytics tracking
ExtensionLogin.on('identify', ({ user }) => {
  analytics.identify(user.id, { email: user.email });
});

// UI update
ExtensionLogin.on('identify', ({ user }) => {
  document.getElementById('user-name').textContent = user.name;
});

// CRM monitoring
ExtensionLogin.on('identify', ({ crm }) => {
  Object.entries(crm).forEach(([name, result]) => {
    if (!result.success) {
      console.warn(`CRM ${name} failed`);
    }
  });
});

---

Framework Integration

React

import { useEffect, useState } from 'react';
import ExtensionLogin from 'extensionlogin';

function useAuth() {
  const [user, setUser] = useState(ExtensionLogin.getUser());

  useEffect(() => {
    return ExtensionLogin.onAuthChange(setUser);
  }, []);

  return user;
}

function App() {
  const user = useAuth();

  return user ? <Dashboard user={user} /> : <Login />;
}

Vue

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ExtensionLogin from 'extensionlogin';

const user = ref(ExtensionLogin.getUser());
let unsubscribe;

onMounted(() => {
  unsubscribe = ExtensionLogin.onAuthChange((newUser) => {
    user.value = newUser;
  });
});

onUnmounted(() => {
  unsubscribe?.();
});
</script>

<template>
  <Dashboard v-if="user" :user="user" />
  <Login v-else />
</template>

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import ExtensionLogin from 'extensionlogin';

  let user = ExtensionLogin.getUser();
  let unsubscribe;

  onMount(() => {
    unsubscribe = ExtensionLogin.onAuthChange((newUser) => {
      user = newUser;
    });
  });

  onDestroy(() => {
    unsubscribe?.();
  });
</script>

{#if user}
  <Dashboard {user} />
{:else}
  <Login />
{/if}

---

Debug Events

Enable debug mode to log all events:

ExtensionLogin.init({
  apiKey: 'el_live_xxx',
  debug: true
});

// Console shows:
// [ExtensionLogin] Event: init { apiKey: 'el_live_xxx...' }
// [ExtensionLogin] Event: identify { user: { email: '...' } }

Next Steps

• Error Handling - Handle errors gracefully
• SDK Methods - Full method reference
• Examples - See events in action