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",
  databaseURL: "",
  projectId: "hardy-brooklyn",
  storageBucket: "hardy-brooklyn.appspot",
  messagingSenderId: "392580429077"
};
firebase.initializeApp(config);

const auth = firebase.auth();

export {
  auth,
};

called one of the auth functions in my ponent:

"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!

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.",
  databaseURL: "https://hardy-brooklyn.firebaseio.",
  projectId: "hardy-brooklyn",
  storageBucket: "hardy-brooklyn.appspot.",
  messagingSenderId: "392580429077"
};
firebase.initializeApp(config);

const auth = firebase.auth();

export {
  auth,
};

called one of the auth functions in my ponent:

"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!

• javascript
• reactjs
• firebase
• firebase-authentication

• remove your API keys, no need for them – ztadic91 Commented Feb 4, 2018 at 22:08

2 Answers 2

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

For react-native, import auth like this:

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

not

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