CODEWITHSUNDEEP
angularfirebasefirebase-authenticationrecaptcha
Asad
Asad

Reputation: 108

Error using Firebase authentication RecaptchaVerifier in Angular

I am trying to implement 2FA using Angular 12 and Firebase. But I keep on getting an error at the very start of the process in ngAfterViewInit: enter image description here

Here is my code:

  ngAfterViewInit(): void {
    this.windowRef = this.win.windowRef;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'invisible',
      'callback': (response: any) => {
        console.log('callback ==>',response);
      }
    });
    this.windowRef.recaptchaVerifier.render();      
  }

I am following this example mainly.

Upvotes: 0

Views: 1996

Answers (2)

Abenezer Berhanu
Abenezer Berhanu

Reputation: 1

okay i fixed the problem i think, i'm using nextjs 14+ so the problem was that is didn't create a div or any html element whose id is

'recaptcha-container'

one of the bug with the above one could be this and the next problem is you should put your auth initialization as a first argument of RecaptchaVerifier

check it out here

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(auth, 'recaptcha-container', {
      'size': 'invisible',
      'callback': (response: any) => {
        console.log('callback ==>',response);
   }
});

Upvotes: 0

Asad
Asad

Reputation: 108

The problem was in my html. I had a <div id="recaptcha-container"></div> inside an if condition that was false. I moved it out of that if condition and it worked fine.

Upvotes: 1

Related Questions