FireBase | Sign in with Google Concept | Ionic + Angular

I'm using Ionic v8 + angular v20 + capacitor v7 + @capgo/capacitor-social-login v7 + firebase v12

I'm trying to do sign in with google concept using Fire base but it is not woking When I click the login icon, sign in with ggogle is opening, when I select the mail id

sometimes it is redirecting url changes in popup and black screen comes



sometimes it shows as **Access blocked: This app’s request is invalid

Error 400: redirect_uri_mismatch
**



I've created a project in firebase, enabled Google in Authentication > Sign in method

In project settings, created android app and downloaded Google services.json, Placed in Android >app folder



In google cloud, selected the project went to Api's and services > credentials tab
clicked Web client (auto created by Google Service)



In Authorized JavaScript origins

http://localhost
http://localhost:8100

In Authorized redirect URIs

http://localhost:8100
http://localhost:8100/__/auth/handler
http://localhost:8100/auth/login
http://localhost:8100/login

login.component.html

<ionic-button fill="clear" dynamicClass="social-btn" (ionClick)="loginViaGoogle()">
<ion-img src="assets/icon/social/google.svg" alt="google"></ion-img>
</ionic-button>


login.component.ts

export class LoginComponent {
private auth = inject(AuthService);
private router = inject(Router);


ionViewDidEnter() {
this.auth.initialize();
}

async loginViaGoogle() {
try {
await this.auth.loginViaGoogle();
this.router.navigateByUrl('/other-details', { replaceUrl: true });
} catch (err) {
console.error('Login failed', err);
}
}

}


auth.service.ts:

import { Injectable } from '@angular/core';
import { initializeApp } from '@angular/fire/app';
import { getAuth, GoogleAuthProvider, signInWithCredential } from '@angular/fire/auth';
import { Capacitor } from '@capacitor/core';
import { SocialLogin } from "@capgo/capacitor-social-login";
import { environment } from 'src/environments/environment';

window.addEventListener('unhandledrejection', (ev) => {
console.error('Unhandled promise rejection:', ev.reason);
});
@Injectable({ providedIn: 'root' })
export class AuthService {
private token: string | null = null;
firebase: any;
loginResponse: any;
refresh_Access_token: any;

constructor() {
this.firebase = initializeApp(environment.firebaseConfig);
}

async initialize() {

const platform = Capacitor.getPlatform();
console.log('Initializing on platform:', platform);

const config: any = {
google: {
webClientId: "****.apps.googleusercontent.com", // copied client id from Web client (auto created by Google Service) in google cloud
mode: 'online'
}
};

// Only add redirectUrl for web platform
// if (platform === 'web') {
// config.google.redirectUrl = window.location.origin + '/__/auth/handler';
// }

await SocialLogin.initialize(config);

console.log('SocialLogin initialized successfully');
} catch(error: any) {
console.error('Failed to initialize SocialLogin:', error);
throw error;
}


async loginViaGoogle() {
try {
console.log('Starting Google login...');

const user: any = await SocialLogin.login({
provider: 'google',
options: {
scopes: ['email', 'profile'],
forceRefreshToken: true
}
});

console.log('Raw login response:', user);

if (user && user.result) {
this.loginResponse = user.result;
console.log('Login successful:', JSON.stringify(user.result, null, 2));

// Sign in to Firebase with the credential
const credential = GoogleAuthProvider.credential(
user.result.idToken,
user.result.accessToken
);

const auth = getAuth(this.firebase);
const firebaseUser = await signInWithCredential(auth, credential);

console.log('Firebase user:', firebaseUser.user.email);
this.token = await firebaseUser.user.getIdToken();
this.refresh_Access_token = this.token;

return firebaseUser.user;
} else {
throw new Error('No user data received from Google login');
}
} catch (error: any) {
console.error('Google login error:', error);
throw error;
}

}
}


app.route.ts

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

export const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full',
},
{
path: 'auth',
children: [
{
path: 'login',
loadComponent: () =>
import('./features/auth/login/login.component').then(m => m.LoginComponent)
}
],
},
{
path: 'other-details',
loadComponent: () =>
import('./features/other-details/other-details.component').then(m => m.OtherDetailsComponent)
},
{
path: '**',
redirectTo: 'auth/login',
},
];


I give ionic serve, this is opening in my project in web in **http://localhost:8100/auth/login
**
When I click google icon for sign in with google, concept this is not working correctly. I'm new to firebase and Sign in with google concept. trying these concepts for first time


NPM package relevant to this concept

package.json:

"@angular/core": "^20.3.12",
"@angular/fire": "^20.0.1",
"@capacitor/android": "7.4.3",
"@capgo/capacitor-social-login": "^7.18.2",
"@ionic/angular": "^8.7.5",
"firebase": "^12.5.0"

Continue reading...