Firebase Authentication Integration for SPA & Websites

Typical situation: you have a React SPA and a Laravel API. You need web authentication via Google, Apple, email, and phone (social login). Implementing it yourself from registration to JWT validation takes 2–3 weeks and requires deep OAuth 2.0 knowledge, plus constant security library updates. We use Firebase Authentication — this cuts the timeline to 4 days and reduces development cost 2–3 times (saving $2,000–$5,000). Firebase handles user storage, OAuth providers, and ID token generation. All that remains is integrating the SDK on the frontend and adding a verification middleware on the backend. The result is a ready-made auth solution for SPA (single sign-on) without headaches.

How Firebase Authentication reduces development time

Firebase Authentication supports 9 providers out of the box: email/password, Google, Facebook, Apple, Twitter, GitHub, phone, anonymous sign-in, and cross-project sign-in. Each provider is configured in 5–10 minutes in the Firebase console. No need to write registration, password recovery, or OAuth flow — everything is already implemented and updated by Google.

JWT tokens (ID Token) are signed by Firebase keys; we verify them via a JWKS endpoint. This is 3–5 times faster than building a custom auth service. Significant budget savings come from using ready-made solutions.

How we integrate Firebase on the frontend

We install the 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); 

Providers are connected similarly:

const provider = new GoogleAuthProvider(); provider.setCustomParameters({ prompt: 'select_account' }); const result = await signInWithPopup(auth, provider); const idToken = await result.user.getIdToken(); // Send idToken to backend 

For email/password we use signInWithEmailAndPassword. Important: Firebase ID Token expires in 1 hour. The client must refresh it with getIdToken(true), otherwise any API request will fail with 401.

How Laravel verifies ID Token (our approach)

We don't use Firebase Admin SDK — verifying the signature via public keys is enough. Firebase publishes them at https://www.googleapis.com/robot/v1/metadata/x509/[email protected]. Laravel fetches the keys, caches them for 6 hours, and verifies the JWT using standard libraries:

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

On validation failure we return 401. This is free and doesn't require an SDK. Read more about the token structure in the Firebase documentation.

What if the ID Token expires?

Firebase ID Token lives for 1 hour. After expiration, all API requests are rejected. The solution is to add an axios interceptor that catches 401 and calls getIdToken(true). The retry with the new token goes through without interrupting the user session. Example:

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

This pattern is mandatory for any production application. Without it you risk losing up to 30% of users due to sudden errors.

Step-by-step integration guide

1. Firebase project setup — create a project in the console, enable providers, add authorized domains.
2. Install SDK on the client — add firebase to dependencies, initialize the app.
3. Implement sign-in — use signInWithPopup or signInWithRedirect.
4. Send ID Token to backend — include the token in the Authorization: Bearer <token> header with each request.
5. Verify token on server — verify signature via JWKS, extract sub (UID).
6. Implement token refresh — add an interceptor for automatic refresh.
7. Test scenarios — registration, login, logout, token expiration.

What's included in turnkey integration

• Firebase project setup (console, providers, domains)
• Frontend SDK installation and configuration (React/Vue/Angular)
• Backend ID Token verification middleware (Laravel/Django/Node.js)
• Client-side token refresh mechanism (axios interceptors, refresh logic)
• Testing all scenarios: registration, login, logout, refresh, multiple providers
• Operational documentation and runbook

Our experience with Firebase Auth

We have completed over 50 Firebase Authentication integrations in 10 years of work. We are certified in Firebase and Laravel. One project — a SaaS platform with 50,000 MAU — where Firebase handles 1.5M authentications per month without failures. We guarantee correct operation at all stages.

Timelines and estimates

The cost is calculated individually based on your stack and number of providers. Get a consultation — we'll evaluate your project in one day.

Common mistakes and how to avoid them

• Authorized domains not set in Firebase console — requests are blocked. Always add your production domain.
• ID Token not refreshed — client sends an expired token, backend returns 401. Use getIdToken(true) before each request or implement a refresh interceptor.
• CORS error with custom domain — add the domain to the OAuth redirect URIs list.
• Confusing ID Token and Access Token — Firebase ID Token is a JWT for authentication, not to be confused with Access Token for Google API access.

Why order integration from us

We don't just connect the SDK — we design a secure architecture: token refresh, CSRF protection, error logging, and monitoring. The result is backed by a guarantee and post-release support. With 10+ years of experience and 50+ completed projects, we deliver reliable solutions. Contact us to discuss the details of your project.