Angular: the website hosted on firebase fail to log in

Question

I hosted a website on firebase, the login method worked well on localhost. However, on the hosted website, the login window just flashes for a sec and fails to login: https://angular-example-gg.web.app/ .

Here is my code:

<mat-toolbar color="primary">     #navbar
<mat-toolbar-row>
    <span routerLink="/recommand">SPACE</span>
    <span class="spacer"></span>
    <div *ngIf="auth.afAuth.authState | async as user; else showLogin">
        <button mat-raised-button color="accent" routerLink="/dashboard">Write a Post</button>
        <button mat-button (click)="auth.logout()">Logout</button>
    </div>
    <ng-template #showLogin>
        <button mat-button (click)="auth.login()">Login with Google</button>
    </ng-template>
</mat-toolbar-row>

<div id="bg">      #body
<div *ngIf="auth.afAuth.authState | async as user; else showLogin">
    ...
<ng-template #showLogin>
    <div class="animation">Here, build your own space ...</div>
    <button mat-raised-button id="tin" (click)="auth.login()" color="primary">Try it now</button>
</ng-template>
</div>

I am not sure if the reason for this problem is because of my code or my hosting process?

Answer 1

Dear fellow your api Key of Google is not valid please check the error when you hit the API

"{"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}"

Thanks..