FIREBASE - ReferenceError: Cannot access 'auth' before initialization

Question

i'm in the middle to learn Auth with Firebase using NextJS, tryin to understand using multiple source (article / youtube) but i'm stuck with this error

ReferenceError: Cannot access 'auth' before initialization

Honestly i'm still tryin to find the source but still stuck

Here's my firebase.js

import { firebase, initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
  apiKey: process.env.APIKEY,
  authDomain: process.env.AUTH,
  projectId: process.env.PID,
  storageBucket: process.env.BUCKET,
  messagingSenderId: process.env.MSID,
  appId: process.env.AID,
  measurementId: process.env.MID,
};
const app = !firebase.apps.length
  ? initializeApp(firebaseConfig)
  : firebase.app();
const analytics = getAnalytics(app);
const auth = app.auth();
const db = app.firestore();
const googleProvider = new firebase.auth.GoogleAuthProvider();

export {
  auth,
  db,
  signInWithGoogle,
  ...
};

and this is my login.js page

import React, { useEffect, useState } from "react";
import {
  auth,
  signInWithEmailAndPassword,
  signInWithGoogle,
} from "../../firebase/index";
import Link from "next/link";
import { useAuthState } from "react-firebase-hooks/auth";
function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, loading, error] = useAuthState(auth);
  useEffect(() => {
    if (loading) {
      // maybe trigger a loading screen
      return;
    }
    if (user) {
      alert("GET USER");
      console.log(user);
    }
  }, [user, loading]);
  return (
  ...

I'm using

"firebase": "^9.6.1",
"firebase-admin": "^10.0.1",

am i doing something wrong? or am i missing something? please help:(

Did you find a fix for this? I'm having the same problem.

J.T
– J.T

2022-01-26 20:36:25 +00:00
Commented Jan 26, 2022 at 20:36 — J.T
– J.T, Commented Jan 26, 2022 at 20:36

Dharmaraj · Accepted Answer · 2021-12-23 12:09:50Z

3

You must import getAuth() from Firebase Auth SDK and then initialize it as shown below:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {...};

const app = initializeApp(firebaseConfig)

const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);

export {
  auth,
  db,
};

You don't need to check if Firebase has already been initialized when using Modular SDK.

answered Dec 23, 2021 at 12:09

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Haksatrya Bhaswara Over a year ago

Hey, thanks for your answer, i really appriciate it, just copied all of your code above, but i still got the same error

Dharmaraj Over a year ago

@HaksatryaBhaswara try restarting your dev server once.

Haksatrya Bhaswara Over a year ago

Thanks for your advice, i just restart my dev server, even restart my laptop, and still doesnt work, but i really appriciate your help! thanks a lot.

samplecode3300 Over a year ago

having same issue, followed fire base docs, looks like th above code snippet. but stil having the "Another Firebase SDK was initialized and is trying to use Auth before Auth is initialized" error

gondalf11 · Accepted Answer · 2022-08-12 07:49:58Z

2

First of all, you are using the legacy version of firebase I recommend you to use newer versions (9.9.2 atm). About your problem ; it seems like you need to call getAuth() or initializeAuth() functions before try to get instance of auth.

answered Aug 12, 2022 at 7:49

gondalf11

213 bronze badges

Collectives™ on Stack Overflow

FIREBASE - ReferenceError: Cannot access 'auth' before initialization

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related