CODEWITHSUNDEEP
angularfirebasefirebase-authentication
Alex Jongman
Alex Jongman

Reputation: 239

Logging in using @angular/fire/auth results in 403 error on localhost

I'm trying to build an Angular based web application that uses the Firebase authentication with Google as authentication provider.

All the examples on the internet that I can find uses angularfire2, but when I install it, I get a warning that it is deprecated and I should now use @angular/fire.

So I build a project using @angular/fire, started the project with ng serve. But when I try to sign in with Google as Authentication Provider I get a 403 error that states:

This app is not yet configured to make OAuth requests. To do that, set up the app’s OAuth consent screen in the Google Cloud Console.

Which is strange since according to the authorized domains list of the firebase console localhost is an authorized domain

This is what I have done so far:

environment.ts (replaced some values in this post with '...'):

export const environment = {
  production: true,
  firebaseConfig: {
    apiKey: "...",
    authDomain: "vkfep-422d5.firebaseapp.com",
    databaseURL: "https://vkfep-422d5.firebaseio.com",
    projectId: "vkfep-422d5",
    storageBucket: "vkfep-422d5.appspot.com",
    messagingSenderId: "...",
    appId: "..."
  }
};

auth.service.ts

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {

  constructor(private firebaseAuth: AngularFireAuth) { }

  loginWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();

    return this.firebaseAuth.auth.signInWithPopup(provider);
  }

  logout() {
    return this.firebaseAuth.auth.signOut();
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from 'src/environments/environment';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './core/auth.service';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 3

Views: 854

Answers (1)

Alex Jongman
Alex Jongman

Reputation: 239

The problem could indeed be fixed by setting the support email adres within the firebase console. Of what I'm not sure is whether this is a shortcoming in the firebase documentation or that this is an error in the angularfire library.

Upvotes: 2

Related Questions