About ionic angular framework

i have an err to sign in with google :pensive: please can anyone help me to how i can overcome this error…:

error shows in console:

Uncaught {error: ‘idpiframe_initialization_failed’, details: ‘You have created a new client application that use…i/web/guides/gis-migration) for more information.’}

here is my code :

home.page.html:

<ion-title>

  Google Sign In

</ion-title>

<ion-button (click)=“signIn()” *ngIf="!user">

<ion-icon name="logo-google" slot="start"></ion-icon>Sign In

<ion-button expand=“full” (click)=“signOut()” *ngIf=“user”>Sign Out

<ion-item *ngIf=“user”>

<ion-avatar>

  <img [src]="user.imageUrl" />

</ion-avatar>

<ion-label>

  {{user.givenName}} {{user.familyName}}

  <p>{{user.email}}</p>

</ion-label>

home.page.ts file:

import { Component } from ‘@angular/core’;

import { GoogleAuth } from ‘@codetrix-studio/capacitor-google-auth’;

import { isPlatform } from ‘@ionic/angular’;

@Component({

selector: ‘app-home’,

templateUrl: ‘home.page.html’,

styleUrls: [‘home.page.scss’],

})

export class HomePage {

user = null;

constructor() {

if (!isPlatform('capacitor')) {

  GoogleAuth.initialize();

}

}

async signIn() {

this.user = await GoogleAuth.signIn();

console.log('user:', this.user);

}

async signaOut() {

await GoogleAuth.signOut();

this.user = null;

}

}

in index.html

Ionic App <meta name=“viewport” ,

content="viewport-fit =cover, width =device-width,  initial-scale= 1.0   maximum-scale=1.0, minimum-scale=1.0, user-scale=">
<meta name="google-signin-client_id"
content="458018620622-91talg7l9qc56gt6n3697jir7335u8lf.apps.googleusercontent.com" />

in capacitor.config.json:

{

“appId”: “io.ionic.starter”,

“appName”: “form”,

“webDir”: “www”,

“bundledWebRuntime”: false,

“plugins”: {

"GoogleAuth": {

  "scopes": ["profile", "email"],

  "serverCliendId": "458018620622-26eoi0kd5fjodcs4l6ihdnddpg0osg4f.apps.googleusercontent.com",

  "forceCodeRefreshTokken": true

}

}

}

Hi there

May I recommend you to rephrase the titel in your current and future post to be more specific? “About ionic angular framework” may not attract the right eyes to solve your question?

Next to categories already having that specific purpose?

1 Like

Check out this solution
link