Firebase Token to Laravel
March 15, 2025 · AI Conversations
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
### **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! 🚀