Phone OTP Verification TypeError: Cannot read property 'da' of undefined
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- firebase, javascript, next.js, react
- Domain
- authentication, frontend
Research direction
Start with the provided React configuration and reproduce the error by selecting a phone country code and clicking outside the dropdown. Inspect the reported firebaseui/dist/esm.js stack around the country-code blur path; done means the dropdown can be dismissed without the TypeError.
Written by the indexing model from the issue text.
Description
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)
<unknown>
/_next/static/development/pages/auth.js (4737:374)
qo.<anonymous>
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 (
<div>
{renderAuth ? (
<StyledFirebaseAuth
uiConfig={firebaseAuthConfig}
firebaseAuth={firebase.auth()}
/>
) : null}
</div>
);
};
export default FirebaseAuth;
I used this NextJS repo: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication
- Dominant language
- JavaScript
- Stars
- 1.3k
- Forks
- 246
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from firebase/firebaseui-web-react
-
This Project Is Dead Open
Difficulty 5/5 Over a week Newbie friendliness 10/100
firebase/firebaseui-web-react#292 · 1 reaction ·
-
Difficulty 5/5 Over a week Newbie friendliness 1/100
firebase/firebaseui-web-react#280 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
firebase/firebaseui-web-react#220 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
firebase/firebaseui-web-react#210 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 20/100
firebase/firebaseui-web-react#201 · 1 comment · 1 reaction ·
All issues in firebase/firebaseui-web-react
Similar issues
-
bug confirmed issue
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
open-webui/open-webui#30750 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Mend: dependency security vulnerability untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 70/100