Angular google authentication with firebase

Question

I want to create simple login authentication with google using firebase.
I have installed angular CLI: 13.1.4, firebase, firebase: 10.1.1 & @angular/fire

I have configured both environment.ts& env.prod looks like this

export const environment = {
firebase: {
  projectId: '....',
  appId: '....',
  databaseURL: '...',
  storageBucket: '...',
  apiKey: '...',
  authDomain: '...',
  messagingSenderId: '...',
  measurementId: '...',
},
production: false

};

I have enabled my google authentication provider service on the firebase account.
login.component.ts:

    import { Component, OnInit } from '@angular/core';
    import { AngularFireAuth } from '@angular/fire/compat/auth';
    import firebase from 'firebase/compat/app';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent{
      constructor(public auth: AngularFireAuth) {
      }
      login() {
        this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
      }
    
    
      }

login.component.html:

  <button class="btn btn-primary" (click)="login()">Login with google</button>

</div>

app.module.ts

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


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { CheckOutComponent } from './check-out/check-out.component';
import { OrderSuccessComponent } from './order-success/order-success.component';
import { MyOrdersComponent } from './my-orders/my-orders.component';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component';
import { ProductsComponent } from './products/products.component';
import { LoginComponent } from './login/login.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { SETTINGS as AUTH_SETTINGS } from '@angular/fire/compat/auth';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    ShoppingCartComponent,
    CheckOutComponent,
    OrderSuccessComponent,
    MyOrdersComponent,
    AdminProductsComponent,
    AdminOrdersComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    RouterModule.forRoot([
      { path:'', component: HomeComponent},
      { path:'products', component: ProductsComponent},
      { path:'shopping-cart', component: ShoppingCartComponent},
      { path:'check-out', component: ShoppingCartComponent},
      { path:'order-success', component: OrderSuccessComponent},
      { path:'my-orders', component: MyOrdersComponent},
      { path:'login', component: LoginComponent},
      { path:'admin/products', component: AdminProductsComponent},
      { path:'admin/orders', component: AdminOrdersComponent},
    ]),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),


  ],
  providers: [
    { provide: AUTH_SETTINGS, useValue: { appVerificationDisabledForTesting: true } }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

there is no compile time error but I get run time error:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.mjs:11105:1)
    at R3Injector.get (core.mjs:11272:1)
    at R3Injector.get (core.mjs:11272:1)
    at R3Injector.get (core.mjs:11272:1)
    at injectInjectorOnly (core.mjs:4746:1)
    at Module.ɵɵinject (core.mjs:4750:1)
    at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:126:1)
    at R3Injector.hydrate (core.mjs:11442:1)
    at R3Injector.get (core.mjs:11261:1)
    at NgModuleRef.get (core.mjs:21800:1)
    at resolvePromise (zone.js:1213:1)
    at resolvePromise (zone.js:1167:1)
    at zone.js:1279:1
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25437:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:582:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
    at invokeTask (zone.js:1600:1)

I'm not familiar with firebase but this error usually throws because there is no provider for some service or module, are you sure you imported/injected every needed service/module ? — Talha Akca, Jan 20 '22 at 19:38

score 0 · Answer 1 · answered Jan 22 '22 at 07:38

You are using the older version of angular (/compat) and some are new either use all the old versions or use the new version by referring the docs. This error occurs because there aren't the required files in the old version but they exist in the new version and vice-versa

Angular google authentication with firebase

1 Answers1