Authentication Flow

Understanding how ExtensionLogin handles user authentication in your Chrome extension.

How It Works

ExtensionLogin provides a simple authentication flow designed specifically for Chrome extensions:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│ Chrome Extension│────▶│ ExtensionLogin   │────▶│ Your Dashboard  │
│ (SDK)           │◀────│ API              │◀────│ + CRMs          │
└─────────────────┘     └──────────────────┘     └─────────────────┘

1. User opens your extension and enters their information
2. Your extension calls ExtensionLogin.identify()
3. ExtensionLogin validates and stores the user data
4. Data is automatically sent to your configured CRMs
5. User session is stored locally in the extension

Authentication Methods

Email-Based Identification

The simplest method - identify users by their email:

const result = await ExtensionLogin.identify({
  email: 'user@example.com'
});

if (result.success) {
  console.log('User identified:', result.user);
}

Email + Name

Capture additional user information:

const result = await ExtensionLogin.identify({
  email: 'user@example.com',
  name: 'John Doe'
});

Google OAuth

Let users sign in with their Google account:

const result = await ExtensionLogin.loginWithGoogle();

if (result.success) {
  console.log('Google user:', result.user);
  // User's Google profile info is automatically captured
}

See Google OAuth Guide for setup instructions.

Session Management

Automatic Session Storage

When a user is identified, ExtensionLogin automatically stores their session:

// After identify(), user data is stored
const user = ExtensionLogin.getUser();
console.log(user); // { id: '...', email: '...', name: '...' }

Session Persistence

Sessions persist across browser restarts by default:

// Initialize with autoIdentify to restore sessions
ExtensionLogin.init({
  apiKey: 'el_live_xxx',
  autoIdentify: true
});

// User is automatically restored from storage
const user = ExtensionLogin.getUser();
if (user) {
  console.log('Welcome back!', user.email);
}

Clearing Sessions

To log out a user:

await ExtensionLogin.logout();

// User data is cleared from local storage
const user = ExtensionLogin.getUser(); // null

Authentication States

Track authentication state changes:

ExtensionLogin.onAuthChange((user) => {
  if (user) {
    console.log('User logged in:', user.email);
    showLoggedInUI();
  } else {
    console.log('User logged out');
    showLoginUI();
  }
});

Checking Authentication Status

Is User Logged In?

const isLoggedIn = ExtensionLogin.isAuthenticated();

if (isLoggedIn) {
  // Show authenticated content
} else {
  // Show login form
}

Get Current User

const user = ExtensionLogin.getUser();

if (user) {
  console.log('Current user:', user);
  // {
  //   id: 'usr_xxxxx',
  //   email: 'user@example.com',
  //   name: 'John Doe',
  //   createdAt: '2024-01-15T10:30:00Z'
  // }
}

Complete Authentication Example

Here's a complete example showing the full authentication flow:

import ExtensionLogin from 'extensionlogin';

// Initialize SDK
ExtensionLogin.init({
  apiKey: 'el_live_xxxxxx',
  autoIdentify: true
});

// Check if user is already authenticated
const currentUser = ExtensionLogin.getUser();

if (currentUser) {
  showDashboard(currentUser);
} else {
  showLoginForm();
}

// Handle login
async function handleLogin(email, name) {
  const result = await ExtensionLogin.identify({ email, name });

  if (result.success) {
    showDashboard(result.user);
  } else {
    showError(result.error);
  }
}

// Handle logout
async function handleLogout() {
  await ExtensionLogin.logout();
  showLoginForm();
}

// Listen for auth changes (useful for multi-view extensions)
ExtensionLogin.onAuthChange((user) => {
  if (user) {
    updateUI(user);
  }
});

Security Considerations

• API keys are public: Your API key is visible in extension code. This is expected and secure because the key only allows identifying users for your specific application.
• No passwords: ExtensionLogin doesn't store user passwords. It's designed for identification, not password-based authentication.
• Data validation: All user data is validated server-side before storage.
• HTTPS only: All API communication uses HTTPS encryption.

For more security best practices, see Security Guide.

Next Steps

• User Identification - Deep dive into the identify() method
• Google OAuth - Set up Google sign-in
• Events - Listen to authentication events