Інтеграція Firebase Auth для аутентифікації на сайті

Інтеграція Firebase Auth для аутентифікації на веб-сайті

Firebase Authentication — сервіс Google для управління аутентифікацією. З коробки підтримує email/пароль, Google, Facebook, Apple, Twitter, GitHub, телефон та анонімний вхід. SDK доступний для JS, iOS, Android, Web.

Основний сценарій використання: SPA або мобільний додаток на Firebase, серверна частина — Laravel API. Firebase видає JWT (ID Token), Laravel перевіряє його підпис через публічні ключі Google.

Ініціалізація Firebase на фронтенді

Встановити Firebase SDK та ініціалізувати з конфігом з 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",
  // ... інша конфіг
};

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

Email/Password вхід

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();

    // Відправити idToken на backend
    await fetch('/api/auth/firebase-login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ idToken })
    });
  } catch (error) {
    console.error('Вхід не вдався:', error);
  }
}

Google OAuth через 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();

  // Відправити на backend
  await fetch('/api/auth/firebase-login', {
    method: 'POST',
    body: JSON.stringify({ idToken })
  });
}

Laravel: верифікація Firebase ID Token

Firebase публікує публічні ключі для верифікації JWT:

// Верифікація за допомогою 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');

Верифікація без Firebase Admin SDK

Якщо не потрібен повний Firebase Admin SDK — перевіряти JWT через JWKS напрямку:

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]; // Спрощено, насправді потрібно знайти по 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;

Робота з токеном на клієнті

Firebase ID Token закінчується через 1 годину. Клієнт повинен його оновляти:

auth.onAuthStateChanged(async (user) => {
  if (user) {
    const idToken = await user.getIdToken();
    // Використовувати токен у API запросах
    // Токен автоматично оновлюється при закінченні
  }
});

Телефонна аутентифікація

Firebase підтримує SMS верифікацію для телефонного входу.

Обмеження

• Firebase Authentication безплатна до 10 000 активних користувачів на місяць (Spark plan)
• Phone Auth: 10 SMS на день на Spark, потім платно
• Дані зберігаються на серверах Google — не підходить для проектів з вимогами локалізації даних

Тимчасовість робіт

Всього: 4–5 робочих днів.