I’m currently working on a Remix app with Firebase. I’m trying to implement my auth process using GoogleProvider and signInWithEmanilAndPassword. In my Remix’s action when I did this implementation below to be able to signin but I get this error just below.

I need your help

Cannot read properties of undefined (reading '_getRecaptchaConfig')

Remix action function

export async function action({ request }: ActionArgs) {
    const formData = await request.formData()
    // const userAgent = request.headers.get('user-agent') ?? ''
    // const ua = UAParser(userAgent)
    // const session = await getSession(request.headers.get('Cookie'))

    const formValues = Object.fromEntries(formData)

    invariant(
        formValues?.email && typeof formValues?.email === 'string',
        "email is empty or isn't a string type",
    )
    invariant(
        formValues?.password && typeof formValues?.password === 'string',
        "password is empty or isn't a string type",
    )

    try {
        // await signOut(clientAuth)
        const response = await createUserWithEmailAndPassword(
            clientAuth,
            formValues.email,
            formValues?.password,
        )
    } catch (error) {
        console.log('[] err', error)
        logger.error(getErrorMessage(error))
    }

    return null
}

Form component

<Form
                method="post"
                className="space-y-3"
                action="/auth/signin"
                {...form.props}
                noValidate
                replace
            >
                <fieldset>
                    <label htmlFor="email">{t('email')}</label>
                    <Input name="email" placeholder={`${t('email')}`} />
                    <p aria-invalid="true">{email.error}</p>
                </fieldset>
                <fieldset>
                    <label htmlFor="password">{t('password')}</label>
                    <Input
                        name="password"
                        type="password"
                        placeholder={`${t('password')}`}
                    />
                    <p aria-invalid="true">{password.error}</p>
                </fieldset>
                <LoadingButton
                    type="submit"
                    size="lg"
                    name="intent"
                    value="__with_email"
                    isLoading={navigation.state === 'loading'}
                    className="mt-[18px] min-h-[56px] w-full text-base"
                >
                    {t('createMyAccount')}
                </LoadingButton>
                <p className="mt-[18px] text-center text-base">
                    {t('alreadyMember')},{' '}
                    <Link to="/login" className="font-bold hover:underline">
                        {t('login')}
                    </Link>
                </p>
            </Form>

Firebase config

import { getAuth } from 'firebase/auth'
import { initializeApp } from 'firebase/app'

console.log(process.env.FIREBASE_API_KEY)

export const firebaseConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxx',
    projectId: 'xxxxxxxxxxx',
    storageBucket: 'xxxxx',
    messagingSenderId: 'xxxxxx',
    appId: 'xxxxxxxxxxx',
    measurementId: 'xxxxxxxx',
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

export { auth }

TypeError: Cannot read properties of undefined (reading '_getRecaptchaConfig')
    at createUserWithEmailAndPassword (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@firebase/auth/src/core/strategies/email_and_password.ts:291:20)
    at action3 (/Users/elyseebleu/Desktop/DEV/myInspo/app/routes/auth+/signin.tsx:181:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Object.callRouteActionRR (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/node/node_modules/@remix-run/server-runtime/dist/data.js:35:16)
    at callLoaderOrAction (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/router/router.ts:3568:16)
    at submit (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/router/router.ts:2835:16)
    at queryImpl (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/router/router.ts:2770:22)
    at Object.queryRoute (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/router/router.ts:2720:18)
    at handleDataRequestRR (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/node/node_modules/@remix-run/server-runtime/dist/server.js:75:20)
    at requestHandler (/Users/elyseebleu/Desktop/DEV/myInspo/node_modules/@remix-run/node/node_modules/@remix-run/server-runtime/dist/server.js:49:18)