0

I am trying to integrate the Firebase service with React-Native framework. I am trying to follow this tutorial in Udemy: https://www.udemy.com/the-complete-react-native-and-redux-course/

Steps I followed:

  1. Downloaded firebase using npm command: npm install --save react-native-firebase
  2. Created a project in the firebase console.

  3. Pasted the config created by Firebase in the React-native code.

    class App extends Component {

    componentWillMount() {
firebase.initializeApp({
    apiKey: 'AIzaSyAMuW4adFuW_XoYvpvke_iHTvlAkuVJ7Fk',
    authDomain: 'authproj2.firebaseapp.com',
    databaseURL: 'https://authproj2.firebaseio.com',
    projectId: 'authproj2',
    storageBucket: 'authproj2.appspot.com',
    messagingSenderId: '654736603029'
  });

firebase.auth().onAuthStateChanged((user) => {
    if(user)
    {
        this.setState( {loggedIn:true} );
    }
    else {
        this.setState( {loggedIn: false } );
    }
});

    } }

And in a different React component I am creating a a Login Form which has a Submit button.

The onButtonPress function is :

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

    this.setState({error: '', loading: true});

    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(this.onLoginSuccess.bind(this))
    .catch(() => {
        firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(this.onLoginSuccess.bind(this))
        .catch(this.onLoginFailure.bind(this));
    });
    }

These are the onLoginSuccess and OnLoginFailure functions:

onLoginSuccess () {
this.setState( {email:'', password:'', error:'', loading:false});

}

onLoginFailure () {
this.setState( {error: "Authentication Failure!!", loading:false } );

}

But when I click on the button no action takes place. Ideally it should create an a new account if the email and password are entered for the first time and show a different page if the email and password are correct. But somewhere the integration of Firebase with React-native is going wrong.

user3608245
  • 155
  • 2
  • 9

1 Answers1

1

You are using web SDK which requires firebase package but you have got react-native-firebase package installed.

If you want to go ahead with the code and firebase you have written then you should install firebase package.

To solve your problem you should install firebase package

However to properly leverage firebase in mobile environment, it is recommended to use react-native-firebase but in that case, the firebase.initializeApp({ becomes meaningless as the firebase initialization in mobile happens using Google-services.json and Google-services.plist files provided by firebase console in android and iOS respectively when using the react-native-firebase package.

If you want to go with react-native-firebase please refer this.

Suraj Malviya
  • 3,685
  • 1
  • 15
  • 22
  • Just ran the command: npm install --save firebase inside the Project. But its still not working. https://drive.google.com/open?id=1iXAi-az5MMTlVjItQNFWvzcKBNY7sDjj The above link has the path to my React-Native project. – user3608245 Dec 03 '18 at 18:39
  • Have seen your code and executed it, he problem now with the code is you have not passed a valid prop for your `Button` component . When you are pressing the button on LoginForm. It does not respond because the Button component which you have made is expecting a `whenPressed` prop and you have passed `onPress` replace that with `whenPressed` and your code will start to execute atleast and then you will be able to debug your code properly. Also `firebase` package is also the one which is required for the code you have written so the answer written above made sense :) – Suraj Malviya Dec 04 '18 at 00:52
  • Hi, Sorry for late reply. The answer in the comment worked for me. thanks :) – user3608245 Dec 11 '18 at 18:24
  • Hi, I made the above changes, that worked for me. But when I click on the button it gives me an error message, which I displayed as part of AuthenticationFailure. That means the code to sign-in through firebase.auth().signInWithEmailAndPassword is not working. Can you help me with that? One more thing, whenever I make an entry in the textbox, will it create an entry in the firebase console or is it a local firebase database getting created? – user3608245 Dec 26 '18 at 03:53