Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Getting errors with 2FA and Enterprise Recaptcha #593

Closed
mikeislearning opened this issue Nov 16, 2023 · 1 comment
Closed

Getting errors with 2FA and Enterprise Recaptcha #593

mikeislearning opened this issue Nov 16, 2023 · 1 comment

Comments

@mikeislearning
Copy link

mikeislearning commented Nov 16, 2023 •
edited
Loading

I'm trying to set up 2 factor authentication for email and phone number for firecms users.

I couldn't find any documentation on doing it, so I followed these guidelines:
https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider

I followed the steps to:

  • verify my email
  • added a phone number to my user
  • enable App Check
  • enabled the Enterprise Recaptcha API on GCP

My app looks like this:

 <FirebaseCMSApp
        name={'Admin Panel'}
        logo="/logo192.png"
        signInOptions={['password']}
        authentication={myAuthenticator}
        appCheckOptions={{
          providerKey: PROVIDER_KEY_FROM_ENTERPRISE_RECAPTCHA,
          useEnterpriseRecaptcha: true,
          isTokenAutoRefreshEnabled: true,
          forceRefresh: false,
        }}
        textSearchController={textSearchController}
        collections={[
          usersCollection,
        ]}
        firebaseConfig={firebaseConfig}
        views={customViews}
      />

After I correctly enter my email address and password, I am expecting to see a window pop up to allow me to enter my phone number, but instead the website crashes, with the follow error:

Uncaught TypeError: Cannot create property 'callback' on string 'recaptcha'
    at new RecaptchaVerifier (recaptcha_verifier.ts:110:21)
    at FirebaseLoginView.tsx:114:35
    at w2 (FirebaseLoginView.tsx:181:32)
    at Qf (FirebaseLoginView.tsx:258:22)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
RecaptchaVerifier @ recaptcha_verifier.ts:110
(anonymous) @ FirebaseLoginView.tsx:114
w2 @ FirebaseLoginView.tsx:181
Qf @ FirebaseLoginView.tsx:258
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 18 more frames
Show less
recaptcha_verifier.ts:110 Uncaught TypeError: Cannot create property 'callback' on string 'recaptcha'
    at new RecaptchaVerifier (recaptcha_verifier.ts:110:21)
    at FirebaseLoginView.tsx:114:35
    at w2 (FirebaseLoginView.tsx:181:32)
    at Qf (FirebaseLoginView.tsx:258:22)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
RecaptchaVerifier @ recaptcha_verifier.ts:110
(anonymous) @ FirebaseLoginView.tsx:114
w2 @ FirebaseLoginView.tsx:181
Qf @ FirebaseLoginView.tsx:258
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 19 more frames
Show less
react-dom.development.js:18687 The above error occurred in the <Qf> component:

    at Qf (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:99944:19)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/chunk-5TCPWRQ6.js?v=9ac544e7:17369:5)
    at ThemeProvider2 (http://localhost:5173/node_modules/.vite/deps/chunk-5TCPWRQ6.js?v=9ac544e7:17455:5)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/chunk-AOT6FLFY.js?v=9ac544e7:3059:12)
    at Af (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:98754:12)
    at LocalizationProvider (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:16974:17)
    at Dc (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:83366:23)
    at uf (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:98643:14)
    at SnackbarProvider2 (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:52626:24)
    at mf2 (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:99113:24)
    at Router (http://localhost:5173/node_modules/.vite/deps/chunk-3WUB6FVV.js?v=9ac544e7:3514:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/chunk-3WUB6FVV.js?v=9ac544e7:3963:5)
    at sp (http://localhost:5173/node_modules/.vite/deps/firecms.js?v=9ac544e7:100439:9)
    at QueryClientProvider (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-query.js?v=9ac544e7:2701:3)
    at App (http://localhost:5173/src/App.tsx?t=1700085484532:61:27)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
react-dom.development.js:26923 Uncaught TypeError: Cannot create property 'callback' on string 'recaptcha'
    at new RecaptchaVerifier (recaptcha_verifier.ts:110:21)
    at FirebaseLoginView.tsx:114:35
    at w2 (FirebaseLoginView.tsx:181:32)
    at Qf (FirebaseLoginView.tsx:258:22)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

Here are the dependencies in my package.json:

    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@firecms/data_enhancement": "^1.0.0",
    "@hookform/resolvers": "^3.1.1",
    "@mui/icons-material": "^5",
    "@mui/lab": "^5.0.0-alpha.132",
    "@mui/material": "^5.13.3",
    "@mui/x-data-grid": "^6.11.0",
    "@mui/x-date-pickers": "^5.0.20",
    "@tanstack/react-query": "^4.29.1",
    "algoliasearch": "^4.20.0",
    "firebase": "^10.6.0",
    "firecms": "^2.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.44.3",
    "react-router": "^6",
    "react-router-dom": "^6",
    "yup": "^1.2.0"

Any feedback would be greatly appreciated!
@mikeislearning
Copy link
Author

Nevermind - it turns out this works correctly, I just needed to wipe my node_modules after updating my version of firebase.

Thanks for the great work your team does!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mikeislearning