CODEWITHSUNDEEP
reactjsfirebasefirebase-authenticationnext.js
user16949958
user16949958

Reputation:

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_2__.default.default.auth is not a function

I'm trying to add authentication via firebase but it giving me an error saying

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_2__.default.default.auth is not a function

Here is all the code for authentication

import Head from "next/head";

// var firebase = require("firebase");

import firebase from "firebase/compat/app";
import "firebase/auth";

import { useAuthState } from "react-firebase-hooks/auth";
import Reddit from "../components/Reddit";

firebase.initializeApp({
  apiKey: "<api-key>",
  authDomain: "<auth-domain>",
  projectId: "<project-id>",
  storageBucket: "<storage-bucket>",
  messagingSenderId: "166670883433",
  appId: "1:166670883433:web:f24816c8fe909b0f89e0f8",
});

const auth = firebase.default.auth();

const [user] = useAuthState(auth);

export default function Home() {
  return (
    <div className="h-screen bg-black text-white">
      <Head>
        <title>Reddit - Dive into anything!</title>
        <link rel="icon" href="/logo.svg" />
      </Head>

      {user ? <Reddit /> : <SignIn />}
    </div>
  );
}

function SignIn() {
  const signInWithGoogle = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    auth.signInWithPopup(provider);
  };

  return (
    <div>
      <button onClick={signInWithGoogle}>Sign in with google</button>
    </div>
  );
}

// export default App;

Can anyone help me with this. Thanks!

Here's my Reddit.js

import Trending from "./trending/Trending";

function Reddit() {
  return (
    <div>
      <Trending />
    </div>
  );
}

export default Reddit;

Here is my package.json file

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@heroicons/react": "^1.0.5",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.1",
    "firebase": "^9.5.0",
    "firebase-admin": "^10.0.0",
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^4.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "postcss": "^8.3.5",
    "tailwindcss": "^2.2.4"
  }
}

Upvotes: 1

Views: 3298

Answers (1)

Siratee K.
Siratee K.

Reputation: 197

This line is causing you this problem.

const auth = firebase.default.auth();

It seems that you are mixing the syntax between the v9 Modular and Compat libraries type.

By using the Modular library,

You can get it by using getAuth method from firebase/auth

Example:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

initializeApp({
 // Provide the app config
});

const auth = getAuth();

By using the Compat library,

Compat is a library to support the old SDK structure from v8.

Example:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

firebase.initializeApp({
  // Provide the app config
});

const auth = firebase.auth();

Note: firebase/compat/ in v9 provided a familiar API surface that is fully compatible with the v8 SDK but it will be removed in the future. So I encourage you to upgrade to use the new Modular API surface. See more

Note 2: I saw that you have the firebase-admin installed on your project. The firebase-admin shouldn't be installed in the Frontend since it is designed to be used to manage the Firebase project on the backend which required the highest permission on your Firebase project.

Upvotes: 8

Related Questions