Интеграция 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, логированием ошибок и мониторингом. Результат подкрепляем гарантией и пост-релизной поддержкой. Свяжитесь с нами, чтобы обсудить детали вашего проекта.