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

Share Improve this question Follow edited Feb 4, 2018 at 22:05 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Feb 4, 2018 at 21:15 Nitika NadgarNitika Nadgar 7322 silver badges88 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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