//My welcome.ts file is:

import { Component, OnInit } from '@angular/core';

import { CommonModule } from '@angular/common';

import { Router } from '@angular/router';

import {

SocialAuthService,

GoogleLoginProvider,

SocialUser,

} from '@abacritt/angularx-social-login';

@Component({

selector: 'app-welcome',

standalone: true,

// CRUCIAL: Solo CommonModule. Esto asegura que no haya doble inyección.

imports: [CommonModule],

templateUrl: './welcome.html',

styleUrls: ['./welcome.css']

})

export class WelcomeComponent implements OnInit {

user: SocialUser | null = null;

loggedIn: boolean = false;

message: string = 'Inicia sesión para continuar.';

constructor(

private authService: SocialAuthService, 

private router: Router 

) { }

ngOnInit(): void {

// Escucha los cambios de estado de autenticación

this.authService.authState.subscribe((user) =\> {

  this.user = user;

  this.loggedIn = (user != null);

  

  if (this.loggedIn && user.idToken) {

    // Uso de backticks (comillas inversas) para la plantilla literal

    this.message = '¡Hola, ${this.user?.firstName}! Validando credenciales...';

    

    // Aquí enviaremos el token al Backend

    this.sendTokenToBackend(user.idToken); 



  } else if (this.loggedIn) {

     // Si está logueado pero no hay idToken (raro en Google), forzamos navegación

     this.router.navigate(\['/dashboard'\]);

  } else {

    this.message = 'Inicia sesión para continuar.';

  }

});

}

/**

* Inicia el flujo de autenticación de Google.

*/

loginWithGoogle(): void {

this.authService.signIn(GoogleLoginProvider.PROVIDER_ID)

  .catch(err =\> {

    console.error('Error al intentar iniciar sesión:', err);

    this.message = 'Error de inicio de sesión. Inténtalo de nuevo.';

  });

}

/**

* Simulación del envío del ID Token de Google al Backend para su validación.

* @param idToken El ID Token de Google.

*/

sendTokenToBackend(idToken: string): void {

  console.log("Token de Google recibido. Llamando al Backend para validación...");

  

  // Por ahora, simulamos la respuesta exitosa y navegamos.

  setTimeout(() =\> {

      this.router.navigate(\['/dashboard'\]); 

  }, 1500); 

}

}

And my app.config.ts file is:

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

// Importaciones necesarias para el login social
import { 
  SocialAuthServiceConfig, 
  GoogleLoginProvider,
  SocialAuthService, // Se necesita el servicio para poder inyectarlo
} from '@abacritt/angularx-social-login';

// ID de Cliente de Google para la aplicación frontend
const GOOGLE_CLIENT_ID = '1000000000000-example.apps.googleusrcont.com';

// 1. Objeto de configuración de autenticación.
const authConfig: SocialAuthServiceConfig = {
    autoLogin: false, 
    providers: [
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider(GOOGLE_CLIENT_ID, {
            oneTapEnabled: false, 
            scopes: 'email profile',
            prompt: 'select_account' 
        }),
      },
    ],
    onError: (err: any) => {
      console.error('Error del Social Login:', err);
    },
};

export const appConfig: ApplicationConfig = {
  providers: [
    // 1. Inyección del Router
    provideRouter(routes),
    
    // 2. Otros Providers
    provideBrowserGlobalErrorListeners(),
    
    // 3. REGISTRO DEL SERVICIO Y SU CONFIGURACIÓN
    // Proveemos el servicio principal.
    SocialAuthService,
    // CRUCIAL: Este es el proveedor que no encuentra. Lo inyectamos usando el string token.
    {
      provide: 'SocialAuthServiceConfig', // <-- ESTA ES LA CLAVE
      useValue: authConfig,
    }
  ]
};