Firebase Token to Laravel

User
const getFirebaseToken = async (provider:string) => {
try {
// Sign in with Google or GitHub
const result = provider === "google" ? await signInWithGoogle() : await signInWithGithub();

// Get Firebase ID token
const idToken = await result.user.getIdToken();

// Log or return the token
console.log("Firebase ID Token:", result.user);
await nextTick();
router.push('/register');
return idToken;
} catch (error: any) {
console.log("Error getting Firebase Token:");
}
};
now save details to laravel

Assistant
To save the details to your Laravel backend, follow these steps:

### **1. Modify Your Frontend Code to Send Token to Laravel**
You need to send the Firebase ID token to your Laravel backend after retrieving it.

import axios from 'axios';

const getFirebaseToken = async (provider: string) => {
  try {
    // Sign in with Google or GitHub
    const result = provider === "google" ? await signInWithGoogle() : await signInWithGithub();
    
    // Get Firebase ID token
    const idToken = await result.user.getIdToken();

    // Send token to Laravel backend
    const response = await axios.post('/api/auth/firebase-login', {
      token: idToken,
      email: result.user.email,
      name: result.user.displayName,
      provider: provider,
    });

    console.log('Login Response:', response.data);

    // Redirect after login
    await nextTick();
    router.push('/dashboard');
    
    return response.data;
  } catch (error: any) {
    console.error("Error getting Firebase Token:", error);
  }
};

### **2. Setup Laravel Backend Route**
In `routes/api.php`, create a new route to handle the Firebase authentication.

use AppHttpControllersAuthFirebaseAuthController;
use IlluminateSupportFacadesRoute;

Route::post('/auth/firebase-login', [FirebaseAuthController::class, 'login']);

### **3. Create Firebase Authentication Controller**
Run the following command to create the controller:

php artisan make:controller Auth/FirebaseAuthController

Then, in `app/Http/Controllers/Auth/FirebaseAuthController.php`, implement authentication logic:

<?php

namespace AppHttpControllersAuth;

use AppHttpControllersController;
use AppModelsUser;
use IlluminateHttpRequest;
use IlluminateSupportFacadesAuth;
use KreaitFirebaseAuth as FirebaseAuth;
use KreaitLaravelFirebaseFacadesFirebase;

class FirebaseAuthController extends Controller
{
    protected FirebaseAuth $firebaseAuth;

    public function __construct()
    {
        $this->firebaseAuth = Firebase::auth();
    }

    public function login(Request $request)
    {
        $request->validate([
            'token' => 'required|string',
            'email' => 'required|email',
            'name' => 'nullable|string',
            'provider' => 'required|string',
        ]);

        try {
            // Verify Firebase ID token
            $verifiedIdToken = $this->firebaseAuth->verifyIdToken($request->token);
            $firebaseUid = $verifiedIdToken->claims()->get('sub');

            // Find or create user
            $user = User::updateOrCreate(
                ['email' => $request->email],
                [
                    'name' => $request->name,
                    'firebase_uid' => $firebaseUid,
                    'provider' => $request->provider,
                ]
            );

            // Generate Laravel token
            $token = $user->createToken('firebase-auth')->plainTextToken;

            return response()->json([
                'message' => 'User authenticated successfully',
                'user' => $user,
                'access_token' => $token,
            ]);
        } catch (Exception $e) {
            return response()->json(['error' => 'Invalid Firebase token'], 401);
        }
    }
}

### **4. Install Firebase PHP SDK in Laravel**
If you haven’t installed Firebase SDK in Laravel yet, run:

composer require kreait/laravel-firebase

Then, publish the config:

php artisan vendor:publish --provider="KreaitLaravelFirebaseServiceProvider"

Configure Firebase credentials in `.env`:

FIREBASE_CREDENTIALS=/path/to/your/firebase/credentials.json

Make sure `firebase_uid` column exists in your `users` table:

php artisan make:migration add_firebase_uid_to_users_table --table=users

Modify the migration file:

Schema::table('users', function (Blueprint $table) {
    $table->string('firebase_uid')->nullable()->unique();
});

Run the migration:

php artisan migrate

### **5. Secure Laravel Routes**
To protect routes using Laravel’s authentication:

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

### **6. Update Laravel Sanctum Middleware**
Ensure `sanctum` is enabled in `app/Http/Kernel.php` under `api` middleware:

'api' => [
    LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    IlluminateRoutingMiddlewareSubstituteBindings::class,
],

### **7. Use Token in Vue.js Requests**
After logging in, store the token in `localStorage` or Vuex:

localStorage.setItem('access_token', response.data.access_token);

Then, attach it in future API requests:

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;

### **Final Outcome**
– The user logs in with Google/GitHub via Firebase.
– The frontend sends the Firebase ID token to Laravel.
– Laravel verifies the token using Firebase Admin SDK.
– Laravel finds or creates a user and generates a Sanctum token.
– The token is returned to the frontend, stored, and used for API authentication.

Let me know if you need any modifications! 🚀

Leave a Comment

Your email address will not be published. Required fields are marked *