Firebase Auth responds with _getRecaptchaConfig is not a function during signIn with Email and password

[coastriders]

I have been trying to understand why something always does not work when we follow your docs and examples.

I expected your 6-month-updated-doc to be of use.

I have obviously tried so many things before yielding to the temptation of this issue

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[rgant]

Post code, not pictures.

The error is on line 54 of your login.component.ts, which you have not shown.

[coastriders]

// that's my whole  log.component.ts // line 54 that's the catch (e)

import { Component, HostListener, Inject, OnDestroy, OnInit } from '@angular/core';
import { Observable, of, tap } from 'rxjs';
import { InputModel } from 'src/interfaces/Input';
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {

  private auth: Auth = Inject(Auth)

  items:InputModel[] = [
    {
      name: 'email',
      placeholder: 'Email',
      type: 'email',

    },
    {
      name: 'password',
      placeholder: 'Mot de passe',
      type: 'password',
      
    }
  ]

  model = {
    email: "",
    password: "",
  }


  ngOnInit() {
    console.log('✅ - login page has mounted')
    console.log(' auth ---', this.auth)
  }

  ngOnDestroy() {
    console.log('login page has unmounted')
  }


  @HostListener('submit', ['$event'])
  onSubmitForm(event:Event){
    event.preventDefault();
    console.log('submitForm', this.model)
   signInWithEmailAndPassword(this.auth, this.model.email, this.model.password)
      .then((user) => {
        console.log('🥎 user', user);
      })
      .catch((e) => {
        console.log('error', e)
      })
  }

  @HostListener('input', ['$event'])
  onInputChange(event:Event, name:string):void{
 
     const target:any = event.target

     if(name === 'email'){
      this.model.email = target.value
      console.log('this.model', this.model)
     }

     if(name === 'password'){
      this.model.password = target.value
      console.log('this.model', this.model)
     }
 
  }
}

[rgant]

Please re-read the code block documentation I linked to above and format your post appropriately.

For example:
```ts
// All on a line by itself ☝️
Your Code Here
// All on a line by itself 👇
```

Don't mix async await and .then() and .catch().

[coastriders]

The mixing does not change a thing, thanks for trying
@rgant

[rgant]

The mixing does not change a thing, thanks for trying @rgant

Not mixing async and then makes for better code quality. Better code quality makes it easy for follow code and improve it. And yes, that has (probably) nothing to do with your issue.

It is difficult to read your code when not properly formatted. So I haven't yet because I am waiting for you to resolve that.

[borisrose]

@rgant I wonder if the problem is not related to the versions of the dependencies I use.

[rgant]

That doesn't tell you what is installed. You need to run ng version to get an overview of the installed versions that Angular things are interesting.

You need to run npm list @angular/fire firebase rxfire and similar commands to get the installed version of packages in your repo. The versions in your package.json appear appropriate.

[rgant]

Where is your initializeApp or otherwise setup of Angular Firebase? Show that code?

https://stackoverflow.com/a/76592882

[coastriders]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { getApp, initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { ReCaptchaV3Provider, initializeAppCheck, provideAppCheck } from '@angular/fire/app-check';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { InputComponent } from './input/input.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    LoginComponent,
    InputComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAppCheck(() => initializeAppCheck(getApp(), {
      provider: new ReCaptchaV3Provider("...."),
      
    })),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    provideStorage(() => getStorage())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[coastriders]

[coastriders]

[coastriders]

I have managed to find a solution here it is

import { Component, Inject, OnInit } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
import { getAuth } from 'firebase/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'th-app';

  constructor(private app: FirebaseApp) {}

  ngOnInit() {
    const auth = getAuth(this.app);
    console.log('auth', auth);
    signInWithEmailAndPassword(auth, "[email protected]", "password")
      .then((res) => {
          console.log('res', res)
      })
      .catch((err) => {
        console.log('err', err)
      })
  }


}

[coastriders]

// another way of writing it 

import { Component, Inject, OnInit } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';
import { Auth, signInWithEmailAndPassword, getAuth } from '@angular/fire/auth';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'th-app';
  auth: Auth;

  constructor(private app: FirebaseApp) {
    this.auth = getAuth(this.app);
  }

  ngOnInit() {
   
    console.log('auth', this.auth);
    signInWithEmailAndPassword(this.auth, "[email protected]", "password")
      .then((res) => {
          console.log('res', res)
      })
      .catch((err) => {
        console.log('err', err)
      })
  }


}

[Nazmul-Hassan10]

I also got the same error. what to do?

[borisrose]

Look UP ! 😅✌️

[Nazmul-Hassan10]

Look UP ! 😅✌️

I found the solution. I had to push my project to GitHub, clone it, and then run the 'npm i' command. 🙂