Uncaught ReferenceError: getAuth is not defined

Question

Self taught coder here. Hopefully I'm explaining the issue adequately.

I'm trying to create some user authentication using firebase. I keep getting an error saying "Line 18:16: 'getAuth' is not defined". I'm confused because I was following a tutorial. I have tried reordering my imports as I read online that might be the reason for the error. For some reason I think my problem is in the config file and how I've initialized everything. I'm new to firebase. Any potential solves would be appreciated.

Here is my firebase.js config

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth";
import "firebase/storage"

const firebaseConfig = {
  apiKey: "process.env.REACT_APP_FIREBASE_KEY",
  authDomain: "uploadimg.firebaseapp.com",
  projectId: "uploadimgofficial",
  storageBucket: "uploadimg.appspot.com",
  messagingSenderId: "MESSENGER_ID",
  appId: "APP_ID",
  measurementId: "MESAUREMENT_ID"
};

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

// Init firestore
const db = getFirestore()
export { db }

And this is where I'm trying to set up the login page

import React from "react";
import "./Login.scss";
import { useState } from "react";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../../firebase"; 



const Login = () => {
  const [error, setError] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = (e) => {
    e.preventDefault();
  };

  const auth = getAuth();  // <------ THIS IS ERROR LINE
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in 
      const user = userCredential.user;
      console.log(user)
    })
    .catch((error) => {
      setError(true)
    });

  return (
    <div className="login">
      <form onSubmit={handleLogin} className="login__form">
        <input 
            className="login__email" 
            onChange={e => setNewEmail(e.target.value)} 
            type="email" 
            placeholder="email" />
        <input

Answer 1

The issue with your code is that you have imported the getAuth function incorrectly.

To fix this, you need to correct the name usage when calling the function.

---

As you have imported getAuth as auth in the import statement at the top of your file, you need to use it as so.

import { auth } from "../../firebase.js";

Right now, you are importing the auth variable, which is set to the return value of getAuth, as defined below in the firebase.js file.

// As you are calling the function with '()', you are getting the return value.
export const auth = getAuth();

---

To fix this, simply change your function call to auth. Also, rename the variable to something other than auth to avoid name collisions, and/or confusing naming patterns.

Also, as you are getting and setting the return value of getAuth to auth, the return value may not be a function¹. In that case, you can't call auth with brackets (()), as, for instance, it may return an object.

// Change the variable name to what you want.
const userAuth = auth;

To check if it is a string/object/function/etc, you can use typeof (for checking/debugging; remove this line once done).

console.log(typeof auth); // Should return: 'string' | 'function' | 'object' | ...

Depending on the return type, you can change your usage to match it.

---

In conclusion, to fix your issue, you need to correctly use the name (auth instead of getAuth). Also, make sure to check the return value of getAuth, and use it appropriately!

---

¹ Please correct me in the comments if I am incorrect; the return value is a function. In that case, I can remove that part. Thank you for the clarification!