'TypeError: Cannot read properties of undefined (reading 'EmailAuthProvider')

Attempting to implement FirebaseUI authorization in a Next.js application following this example https://github.com/easywebsify/next-login-firebase. Getting the following error:

Unhandled Runtime Error

TypeError: Cannot read properties of undefined (reading 'EmailAuthProvider')

Source

pages\login.tsx (20:16) @ firebaseAuthConfig

  18 | signInOptions: [
  19 |   {
> 20 |     provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
     |              ^
  21 |     requireDisplayName: false,
  22 |   },
  23 |   firebase.auth.GoogleAuthProvider.PROVIDER_ID,

Here is the full login page from my next.js app:

import type { NextPage } from "next";
import Head from "next/head";
import Header from "../components/header";
import Footer from "../components/footer";
import React from "react";
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import initFirebase from '../config';
import { setUserCookie } from '../auth/userCookie';
import { mapUserData } from '../auth/useUser';


initFirebase();

const firebaseAuthConfig = (prop: { signInSuccessUrl: string }) => ({
  signInFlow: "redirect",
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false,
    },
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
  ],
  signInSuccessUrl: "/dashboard",
  credentialHelper: "none",
  callbacks: {
    signInSuccessWithAuthResult: async (
      prop: { user: string },
      redirectUrl: string
    ) => {
      const userData = await mapUserData(user);
      setUserCookie(userData);
    },
  },
});

const Login: NextPage = () => {
  const signInSuccessUrl = "/dashboard";
  return (
    <>
      <Head>
        <title>Ganadara - Sign-in</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <div>
        <Header />
      </div>
      <main>
        <div className="min-h-full flex">
          <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
            <div className="mx-auto w-full max-w-sm lg:w-96">
              <div>
                <h2 className="text-3xl font-extrabold text-gray-900">
                  Sign in or create your account
                </h2>
              </div>
              <div className="my-20">
                <StyledFirebaseAuth
                  uiConfig={firebaseAuthConfig({ signInSuccessUrl })}
                  firebaseAuth={firebase.auth()}
                  signInSuccessUrl={signInSuccessUrl}
                />
              </div>
            </div>
          </div>
          <div className="hidden lg:block relative w-0 flex-1">
            <img
              className="absolute inset-0 h-full w-full object-cover"
              src="https://images.unsplash.com/photo-1557018250-c58928b114a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1931&q=80"
              alt=""
            />
          </div>
        </div>
      </main>
      <div>
        <Footer />
      </div>
    </>
  );
};

export default Login;
function user(user: any) {
  throw new Error("Function not implemented.");
}

Any help would be much appreciated.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'TypeError: Cannot read properties of undefined (reading 'EmailAuthProvider')

Sources

Related Questions