Uncaught TypeError: (0 , _firebase.auth) is not a function

Question

Trying to use Firebase authentication in a React app. I followed the instructions in the firbase docs.

installed firebase with npm

added a firebase.js file:

import * as firebase from 'firebase'

var config = {
  apiKey: "AIzaSyBUORmX2qG7BXFC4hqfKAq0Y6HMAsLTGbw",
  authDomain: "hardy-brooklyn.firebaseapp.com",
  databaseURL: "https://hardy-brooklyn.firebaseio.com",
  projectId: "hardy-brooklyn",
  storageBucket: "hardy-brooklyn.appspot.com",
  messagingSenderId: "392580429077"
};
firebase.initializeApp(config);

const auth = firebase.auth();

export {
  auth,
};

called one of the auth functions in my component:

"use strict";
import React, { Component } from "react";
import { auth } from "../../firebase"

export default class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nav: "hideNav",
      login: "hideLogin",
      email: "",
      password: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({email: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    let email = this.state.email;
    let password = this.state.password;
    auth().signInWithEmailAndPassword(email, password).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        var displayName = user.displayName;
        var email = user.email;
        var emailVerified = user.emailVerified;
        var photoURL = user.photoURL;
        var isAnonymous = user.isAnonymous;
        var uid = user.uid;
        var providerData = user.providerData;
        console.log(displayName)
      } else {
        console.log('no user')
      }
    });


  }

  render() {
    return (
      <div>
        <form id="login" style={loginStyles[this.state.login]} onSubmit={this.handleSubmit}>
          ADMIN USE ONLY
          <br/>
          Email:
          <input type="email" name="email" onChange={this.handleChange}/>
          <br/>
          Password:
          <input type="password" name="password"/>
          <br/>
          <button >submit</button>
          <button onClick={this.hideLogin}>hide</button>
        </form>
      </div>
    );
  }
}

I keep getting the error: Uncaught TypeError: (0 , _firebase.auth) is not a function

I've googled this error and I don't see any results.

What am I doing wrong? Thanks!

Answer 1

in firebase.js you are already calling firebase.auth() and exporting the object. You shouldn't be calling the imported auth object again, just access the imported auth object and call the next functions on it.

ex.
instead of auth().signInWithEmailAndPassword try auth.signInWithEmailAndPassword

Answer 2

For react-native, import auth like this:

import auth from "@react-native-firebase/auth";

not

import {auth} from "@react-native-firebase/auth";