search

firecmsco / firecms

Awesome Firebase/Firestore-based CMS. The missing admin panel for your Firebase project!
https://firecms.co
Other
1.13k stars 185 forks source link

Getting errors with 2FA and Enterprise Recaptcha #593

Closed mikeislearning closed 9 months ago

mikeislearning commented 9 months ago

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:

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 commented 9 months ago

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!