I am facing an issue with authenticating users using the firebase OTP system.
Can someone assist me with resolving the problem of 'this.auth.settings is undefined' while implementing Firebase Phone Authentication in NextJS 14?
The code snippet from app/login/page.js:
'use client'
import { useState, useRef } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation'
import { BiArrowBack } from 'react-icons/bi';
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
import styles from './Login.module.css';
import OTPInput from 'otp-input-react';
import { CgSpinner } from "react-icons/cg";
import { auth } from "../firebase";
import toast, { Toaster } from 'react-hot-toast';
import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { BsFillShieldLockFill, BsTelephoneFill } from "react-icons/bs";
export default function Login() {
// rest of the component's logic here
In my firebase.js file, I have hidden sensitive information:
// Import necessary functions from the required SDKs
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// Your web app's Firebase configuration
// Configuration details go here
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
After clicking the continue button, the onSignup function is triggered but I encounter the following error:
https://i.sstatic.net/CEDIw.png
Your assistance would be greatly appreciated. Thank you!