@dial8/auther-adapter-firebase

Firebase authentication adapter for @dial8/auther.

Features

• 🔥 Firebase Integration - Official Firebase Auth SDK
• ✉️ Email/Password Auth - Built-in email authentication
• 📧 Email Verification - Automatic verification email sending
• 🔐 Secure - Firebase's enterprise-grade security
• ⚡ Real-time - Live auth state updates
• 🎯 TypeScript - Full type safety
• 🚀 Easy Setup - Simple configuration

Installation

npm install @dial8/auther @dial8/auther-adapter-firebase firebase

Quick Start

import { OnboardingFlow } from "@dial8/auther";
import { MinimalTemplate } from "@dial8/auther-template-minimal";
import { firebaseAdapter } from "@dial8/auther-adapter-firebase";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com", 
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "your-app-id"
};

function App() {
  return (
    <OnboardingFlow
      template={MinimalTemplate}
      adapter={firebaseAdapter(firebaseConfig)}
      steps={["signInOrUp", "verifyEmail", "profile", "success"]}
      redirectUrl="/dashboard"        // 🎯 Auto-redirect after success
      onComplete={(user) => {
        console.log('User onboarded:', user.email);
      }}
    />
  );
}

Firebase Setup

1. Create Firebase Project

1. Go to Firebase Console
2. Create a new project or select existing one
3. Add a web app to your project

2. Enable Authentication

1. Navigate to Authentication in the Firebase console
2. Go to Sign-in method tab
3. Enable Email/Password provider
4. Optionally enable Email link (passwordless sign-in)

3. Get Configuration

1. Go to Project Settings > General
2. Scroll to Your apps section
3. Copy the Firebase configuration object

const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project", 
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123:web:abc123"
};

Configuration Options

import { firebaseAdapter } from "@dial8/auther-adapter-firebase";

const adapter = firebaseAdapter({
  // Required Firebase config
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  
  // Optional Firebase config  
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789", 
  appId: "your-app-id",
  measurementId: "G-ABC123DEF4"
});

Supported Auth Methods

Email/Password Authentication

• User registration with email and password
• User sign-in with email and password
• Automatic email verification after signup
• Automatic user session management
• Password reset flows (coming soon)

Email Verification

• Automatic sending: Verification emails are automatically sent after user signup
• Firebase integration: Uses Firebase's built-in sendEmailVerification() method
• Template customization: Customize email templates in Firebase Console
• Seamless flow: No additional configuration required

Real-time Auth State

• Automatic auth state synchronization
• Immediate updates when user signs in/out
• Persistent sessions across page reloads

User Object

The adapter returns a standardized user object:

interface User {
  uid: string;                    // Firebase user ID
  email: string | null;           // User email
  displayName: string | null;     // Display name
  photoURL: string | null;        // Profile photo URL
}

Usage with Auth Context

import { AuthProvider, useAuth } from "@dial8/auther";
import { firebaseAdapter } from "@dial8/auther-adapter-firebase";

function App() {
  return (
    <AuthProvider adapter={firebaseAdapter(firebaseConfig)}>
      <AppContent />
    </AuthProvider>
  );
}

function AppContent() {
  const { user, signOut, isLoading } = useAuth();
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      {user ? (
        <div>
          Welcome {user.email}!
          <button onClick={signOut}>Sign Out</button>
        </div>
      ) : (
        <OnboardingFlow
          adapter={firebaseAdapter(firebaseConfig)}
          // ... other props
        />
      )}
    </div>
  );
}

Error Handling

The adapter handles common Firebase authentication errors:

• auth/user-not-found - No user found with this email
• auth/wrong-password - Incorrect password
• auth/email-already-in-use - Email already registered
• auth/weak-password - Password too weak
• auth/invalid-email - Invalid email format

TypeScript

Full TypeScript support with proper types:

import type { FirebaseAdapterConfig } from "@dial8/auther-adapter-firebase";

const config: FirebaseAdapterConfig = {
  apiKey: "your-api-key",
  // ... other config options
};

Security Rules

Make sure to set up proper Firestore security rules if you're using Firestore:

// Firestore Security Rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Users can read/write their own data
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Environment Variables

For security, store your Firebase config in environment variables:

# .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  // ... other config
};

Dependencies

• Firebase SDK 10+
• @dial8/auther (peer dependency)

Related Packages

• @dial8/auther - Core onboarding library
• @dial8/auther-template-minimal - Minimal template
• Firebase - Firebase SDK

Creating Custom Adapters

Want to integrate with a different auth provider? Create a custom adapter:

import { AuthAdapter, User } from '@dial8/auther';

export function myAuthAdapter(config): AuthAdapter {
  return {
    async getSession(): Promise<User | null> {
      // Return current authenticated user or null
    },
    
    async signInEmailPassword(email: string, password: string): Promise<User> {
      // Implement sign in logic
    },
    
    async signUpEmailPassword(email: string, password: string): Promise<User> {
      // Implement sign up logic  
    },
    
    async sendVerificationEmail(email: string): Promise<void> {
      // Send verification email to user
    },
    
    async signOut(): Promise<void> {
      // Implement sign out logic
    },
    
    onAuthStateChanged(callback: (user: User | null) => void): () => void {
      // Set up real-time auth state listener
      // Return unsubscribe function
    }
  };
}

License

MIT

Support

• GitHub Issues
• Firebase Documentation
• Firebase Console