firebase / firebase/firebaseui-web-react
Phone OTP Verification TypeError: Cannot read property 'da' of undefined
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 1.3k
- フォーク
- 246
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
提供された React 設定から始め、電話番号の国コードを選択してドロップダウンの外側をクリックし、エラーを再現します。国コードの blur パス周辺で報告された firebaseui/dist/esm.js のスタックを調査します。ドロップダウンを TypeError なしで閉じられれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- firebase, javascript, next.js, react
- 領域
- authentication, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100