Firebase Auth Integration for Website

Firebase Auth Integration for Website

Firebase Authentication is Google's service for authentication management. Out-of-the-box supports email/password, Google, Facebook, Apple, Twitter, GitHub, phone, and anonymous login. SDK available for JS, iOS, Android, Web.

Main use case: SPA or mobile app on Firebase, backend is Laravel API. Firebase issues JWT (ID Token), Laravel verifies signature via Google public keys.

Firebase Frontend Initialization

Install Firebase SDK and initialize with config from Firebase Console:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  // ... other config
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Email/Password Login

import { signInWithEmailAndPassword } from 'firebase/auth';

async function login(email: string, password: string) {
  try {
    const result = await signInWithEmailAndPassword(auth, email, password);
    const user = result.user;
    const idToken = await user.getIdToken();

    // Send idToken to backend
    await fetch('/api/auth/firebase-login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ idToken })
    });
  } catch (error) {
    console.error('Login failed:', error);
  }
}

Google OAuth via Firebase

import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const provider = new GoogleAuthProvider();

async function loginWithGoogle() {
  const result = await signInWithPopup(auth, provider);
  const idToken = await result.user.getIdToken();

  // Send to backend
  await fetch('/api/auth/firebase-login', {
    method: 'POST',
    body: JSON.stringify({ idToken })
  });
}

Laravel: Verify Firebase ID Token

Firebase publishes public keys for JWT verification:

// Verify using Firebase Admin SDK
use Kreait\Firebase\Factory;

$firebase = (new Factory)
    ->withServiceAccount('/path/to/serviceAccountKey.json');

$auth = $firebase->createAuth();
$verifiedIdToken = $auth->verifyIdToken($idToken);

$uid = $verifiedIdToken->claims()->get('sub');

Verify Without Firebase Admin SDK

If full Firebase Admin SDK not needed — verify JWT via JWKS directly:

use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$jwksUri = 'https://www.googleapis.com/robot/v1/metadata/x509/[email protected]';
$jwks = json_decode(file_get_contents($jwksUri), true);

$key = $jwks['keys'][0]; // Simplified, actually need to find by kid
$publicKey = "-----BEGIN CERTIFICATE-----\n" . wordwrap($key['x5c'][0], 64, "\n", true) . "\n-----END CERTIFICATE-----";

$decoded = JWT::decode($idToken, new Key($publicKey, 'RS256'));
$uid = $decoded->sub;

Working with Token on Client

Firebase ID Token expires in 1 hour. Client must refresh it:

auth.onAuthStateChanged(async (user) => {
  if (user) {
    const idToken = await user.getIdToken();
    // Use token in API requests
    // Token automatically refreshes when expired
  }
});

Phone Authentication

Firebase supports SMS verification for phone-based login.

Limitations

• Firebase Authentication free up to 10,000 active users per month (Spark plan)
• Phone Auth: 10 SMS/day on Spark, then paid
• Data stored on Google servers — not suitable for projects requiring data localization

Implementation Timeline

Total: 4–5 working days.