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)

Answer 1

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