firebase / firebase/firebaseui-web-react

Phone OTP Verification TypeError: Cannot read property 'da' of undefined

Offen
#99 2 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
1.3k
Forks
246
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

I'm using firebaseui-web-react with next.js. I've setup mobile OTP verification method but when I select country code dropdown and clicks **outside** of it it throws below error:

GIF of issue: https://i.imgur.com/GpN0efI.gif
```
Unhandled Runtime Error
TypeError: Cannot read property 'da' of undefined

Call Stack
Vk
node_modules\firebaseui\dist\esm.js (216:48)

/_next/static/development/pages/auth.js (4737:374)
qo.
node_modules\firebaseui\dist\esm.js (203:398)
Ae
/_next/static/development/pages/auth.js (4594:438)
ze
node_modules\firebaseui\dist\esm.js (70:443)
Mj
/_next/static/development/pages/auth.js (4707:355)
Lj.push../node_modules/firebaseui/dist/esm.js.Lj.h
node_modules\firebaseui\dist\esm.js (184:281)
xe
/_next/static/development/pages/auth.js (4591:261)
HTMLDialogElement.te
node_modules\firebaseui\dist\esm.js (69:264)
HTMLDialogElement.b
/_next/static/development/pages/auth.js (4589:64)
```

**React File:**
```
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase/app";
import "firebase/auth";
import initFirebase from "../utils/auth/initFirebase";

initFirebase();

const firebaseAuthConfig = {
signInFlow: "popup",
signInOptions: [
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
requireDisplayName: false,
recaptchaParameters: {
size: "invisible", // 'invisible' or 'compact'
},
},
],
signInSuccessUrl: "/",
credentialHelper: "none",
callbacks: {
signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {

},
};

const FirebaseAuth = () => {
return (


{renderAuth ? (

) : null}

);
};

export default FirebaseAuth;

```

I used this NextJS repo: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der bereitgestellten React-Konfiguration und reproduziere den Fehler, indem du einen Ländercode für ein Telefon auswählst und außerhalb des Dropdowns klickst. Untersuche den gemeldeten firebaseui/dist/esm.js-Stack rund um den Blur-Pfad des Ländercodes; fertig ist die Aufgabe, wenn das Dropdown ohne den TypeError geschlossen werden kann.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
firebase, javascript, next.js, react
Bereich
authentication, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.