Laravel idToken flutter-dart

Question

I have a Flutter app and a Vue.js app where, after authentication, I get the idToken to use in an API. However, I have the following issue:

On jwt.io, both idToken show the same content in terms of structure (header.payload.signature), with the only difference being the signature. When I test it in Postman, the Vue.js token works perfectly, but the Flutter one does not.

The Flutter project is correctly configured in Firebase within the same project as the web app, because otherwise, the login wouldn’t work.

Future<void> signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
      if (googleUser == null) {
        print('El usuario canceló el inicio de sesión');
        return;
      }

      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;

      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );

      final UserCredential userCredential =
          await auth.signInWithCredential(credential);

      final idToken = await userCredential.user?.getIdToken(true);

      print('getIdToken: $idToken');
    } catch (e) {
      print('Error al iniciar sesión con Google: $e');
    }
  }

<script setup lang="ts">
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { auth } from '../firebase'; // Importas el `auth` desde firebase.ts
// Función para iniciar sesión con Google
const signInWithGoogle = async () => {
    const provider = new GoogleAuthProvider();
    try {
        const result = await signInWithPopup(auth, provider);
        const user = result.user;
        const IdToken = await user.getIdToken();
        console.log(IdToken);
    } catch (error) {
        console.error('Error en la autenticación:', error);
    }
};
</script>

<?php

namespace App\Http\Middleware;

use Kreait\Firebase\Factory;
use Kreait\Firebase\Exception\Auth\FailedToVerifyToken;
use Illuminate\Http\Request;


class VerifyGoogleToken
{
    protected $auth;

    public function __construct()
    {
        // Cargar manualmente las credenciales
        $this->auth = (new Factory)
            ->withServiceAccount(storage_path('app/firebase_credentials.json'))
            ->createAuth();
    }

    public function handle(Request $request, \Closure $next)
    {
        $idToken = $request->bearerToken();

        if (!$idToken) {
            return response()->json(['error' => 'No token provided'], 401);
        }

        try {
            // Verificar el ID token
            $verifiedIdToken = $this->auth->verifyIdToken($idToken);
            $uid = $verifiedIdToken->claims()->get('name');
            echo $uid;

            return $next($request);
        } catch (FailedToVerifyToken $e) {
            return response()->json(['error' => 'Invalid token'], 401);
        }
    }
}

I tried to validate an ID token obtained from a Flutter app using Firebase Authentication, and compared it to a token from a Vue.js app. I expected both tokens to be valid and function correctly, but while the Vue.js token worked perfectly in Postman, the Flutter token did not.

The issue seems to be related to the token validation or configuration.