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

Типова ситуація: у вас SPA на React і API на Laravel. Потрібна аутентифікація на сайті через Google, Apple, email і телефон. Самостійна реалізація від реєстрації до валідації JWT займає 2–3 тижні і потребує глибоких знань OAuth 2.0, а також постійного оновлення бібліотек безпеки. Ми використовуємо Firebase Authentication — це скорочує термін до 4 днів і знижує вартість розробки в 2–3 рази. Firebase бере на себе зберігання користувачів, OAuth-провайдерів і генерацію ID-токенів. Залишається тільки інтегрувати SDK на фронтенді та додати middleware верифікації на бекенді. У результаті ви отримуєте готове рішення для аутентифікації SPA (single sign-on) без головного болю.

Як Firebase Authentication скорочує час розробки?

Firebase Authentication з коробки підтримує 9 провайдерів: email/password, Google, Facebook, Apple, Twitter, GitHub, телефон, анонімний вхід та єдиний вхід з інших Firebase проєктів. Кожен провайдер налаштовується за 5–10 хвилин у консолі Firebase. Не потрібно писати реєстрацію, відновлення пароля, OAuth flow — все вже реалізовано і оновлюється Google.

JWT токени (ID Token) підписуються ключами Firebase; ми перевіряємо їх через JWKS-ендпоінт. Це в 3–5 разів швидше розробки власного auth-сервісу. Істотна економія бюджету досягається за рахунок готових рішень.

Як ми інтегруємо Firebase на фронтенді

Встановлюємо Firebase SDK:

import { initializeApp } from 'firebase/app'; import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth'; const firebaseConfig = { apiKey: 'AIzaSy...', authDomain: 'your-project.firebaseapp.com', projectId: 'your-project', }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); 

Провайдери підключаються аналогічно:

const provider = new GoogleAuthProvider(); provider.setCustomParameters({ prompt: 'select_account' }); const result = await signInWithPopup(auth, provider); const idToken = await result.user.getIdToken(); // Відправляємо idToken на бекенд 

Для email/password використовуємо signInWithEmailAndPassword. Важливо: Firebase ID Token закінчується через 1 годину. Клієнт повинен оновлювати його через getIdToken(true), інакше будь-який запит до API провалиться з 401.

Як Laravel верифікує ID Token (наш підхід)

Ми не використовуємо Firebase Admin SDK — достатньо перевірити підпис через публічні ключі. Firebase публікує їх за адресою https://www.googleapis.com/robot/v1/metadata/x509/[email protected]. Laravel отримує ключі, кешує на 6 годин і перевіряє JWT стандартними бібліотеками:

use Firebase\Auth\Token\Verifier; $verifier = new Verifier($projectId); $token = $verifier->verifyIdToken($idToken); $uid = $token->claims()->get('sub'); 

При помилці валідації повертаємо 401. Це безкоштовно і не потребує SDK. Докладніше про структуру токена читайте в документації Firebase.

Що робити, якщо ID Token закінчився?

Firebase ID Token живе 1 годину. Після закінчення всі запити до API відхиляються. Рішення — додати axios interceptor, який перехоплює 401 і викликає getIdToken(true). Повторний запит з новим токеном проходить без переривання користувацького сеансу. Приклад:

axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { return auth.currentUser.getIdToken(true).then(newToken => { error.config.headers['Authorization'] = `Bearer ${newToken}`; return axios(error.config); }); } return Promise.reject(error); } ); 

Цей патерн обов'язковий для будь-якого продакшен-додатку. Без нього втратите до 30% користувачів через раптові помилки.

Покрокова інструкція з інтеграції

1. Налаштування проєкту Firebase — створіть проєкт у консолі, увімкніть провайдери, додайте авторизовані домени.
2. Встановіть SDK на клієнті — додайте firebase у залежності, ініціалізуйте додаток.
3. Реалізуйте вхід — використовуйте signInWithPopup або signInWithRedirect.
4. Відправте ID Token на бекенд — при кожному запиті передавайте токен у заголовку Authorization: Bearer <token>.
5. Перевірте токен на сервері — верифікуйте підпис через JWKS, витягніть sub (UID).
6. Реалізуйте оновлення токена — додайте інтерсептор для автоматичного рефрешу.
7. Протестуйте сценарії — реєстрація, вхід, вихід, закінчення токена.

Що входить в інтеграцію під ключ

• Налаштування Firebase проєкту (консоль, провайдери, домени)
• Встановлення та конфігурація SDK на фронтенді (React/Vue/Angular)
• Middleware верифікації ID Token на бекенді (Laravel/Django/Node.js)
• Механізм оновлення токенів на клієнті (axios interceptors, refresh logic)
• Тестування всіх сценаріїв: реєстрація, вхід, вихід, оновлення, множина провайдерів
• Документація з експлуатації та послідовності дій

Наш досвід з Firebase Auth

Ми виконали понад 50 інтеграцій Firebase Authentication за 10 років роботи. Сертифіковані по Firebase і Laravel. Один з проєктів — SaaS-платформа з 50 000 MAU, де Firebase обробляє 1.5M аутентифікацій на місяць без збоїв. Гарантуємо коректну роботу на всіх етапах.

Строки та орієнтовні терміни

Вартість розраховується індивідуально під ваш стек і кількість провайдерів. Отримайте консультацію — оцінимо ваш проєкт за один день.

Часті помилки та як їх уникнути

• Не налаштовані авторизовані домени в консолі Firebase — запити блокуються. Завжди додавайте production-домен.
• ID Token не оновлюється — клієнт відправляє прострочений токен, бекенд повертає 401. Використовуйте getIdToken(true) перед кожним запитом або реалізуйте refresh interceptor.
• Помилка CORS при використанні кастомного домену — додайте домен у список OAuth redirect URIs.
• Плутанина між ID Token і Access Token — Firebase ID Token — це JWT для аутентифікації, не плутати з Access Token для доступу до API Google.

Чому варто замовити інтеграцію у нас

Ми не просто підключаємо SDK — ми проектуємо безпечну архітектуру: з рефрешем токенів, захистом від CSRF, логуванням помилок та моніторингом. Результат підкріплюємо гарантією та пост-релізною підтримкою. Зв'яжіться з нами, щоб обговорити деталі вашого проєкту.