angular
Firebase Auth responds with _getRecaptchaConfig is not a function during signIn with Email and password
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
This issue does not seem to follow the issue template. Make sure you provide all the required information.
Post code, not pictures.
The error is on line 54 of your login.component.ts, which you have not shown.
// 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)
}
}
}
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().
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.
@rgant I wonder if the problem is not related to the versions of the dependencies I use.
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.
Where is your initializeApp or otherwise setup of Angular Firebase? Show that code?
https://stackoverflow.com/a/76592882
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 { }
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)
})
}
}
// 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)
})
}
}
Look UP ! 😅✌️
I found the solution. I had to push my project to GitHub, clone it, and then run the 'npm i' command. 🙂