React Native Firebase Auth function

Question

I'm using react native crud application with using firebase real time storage. I use firebase auth functionality with email and password logging. but my firebase auth is not working. It gets more issues with firebase connection. I used this function to connect firebase.

  componentWillMount() {
      firebase.initializeApp({
       apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxx',
       authDomain: 'xxxxxxxxxxxxxxxxxxxxxx',
       databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
       projectId: 'xxxxxxxxxxxxxxxxxxxxx',
       storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxxx',
       messagingSenderId: 'xxxxxxxxxxxxxxx'
     });
  }

My log in button auth functionality is looks like this one:

  state = { email: '', password: '', error: '' };

  onButtonPress() {
    const { email, password } = this.state;

    firebase.auth().signInWithEmailAndPassword(email, password)
    .catch(() => {
      firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(() => {
        this.setState({ error: 'Authenticaton Failed.' });
      });
    });
   }

I import firebase libraries like this:

import * as firebase from 'firebase';
import 'firebase/firestore';
import 'firebase/auth';

But this configurations are not working. It shows me this error:

undefined is not a function (evaluating 'firebase.auth()')

I used to get text input values this method:

    value={this.state.password}
    onChangeText={password => this.setState({ password })}

Elmer Dantas Elmer Dantas · Accepted Answer · 2018-09-06T11:56:53

your firebase config only exists in your componentDidMount. Try like this:
Create a file <namefile>.js wherever you want and add:

import * as firebase from 'firebase'
import 'firebase/auth';

const config = {
    apiKey: "your key",
    authDomain: "domain",
    databaseURL: xxxx",
    projectId: "xxxx",
    storageBucket: "xxx",
    messagingSenderId: "xxxx"
};

if (!firebase.apps.length) {
    firebase.initializeApp(config);
}

const auth = firebase.auth();

export {
    auth
};

import auth in your component and in your button method change your code by:

auth.signInWithEmailAndPassword

it should work and every time you need to use auth, you just need to import it

React Native Firebase Auth function

1 Answers