Trying to get the Firebase Email/Password Authentication to work with React Native

Question

So I am trying to get the Firebase Email & Password Authentication working with React Native.

Manually I achieved to signup a user by inserting

auth.createUserWithEmailAndPassword('name@email.com','password')

Then the connection works.

But I have a hard time getting the right format from {this.state.email} & {this.state.password} into the function. I mostly get: Need 2 arguments and only got 1 or no error at all.

Maybe the code setup for the input field is wrong. Most other examples on the web use the old examples

Anybody who has experience with this and can help here? Thanks in advance.

Extra info: This leads to a syntax error

auth.createUserWithEmailAndPassword(
          {this.state.email},
          {this.state.password}

        )

Code:

'use strict';
    import React, { Component } from 'react';
    import {
      Text,
      TextInput,
      View
    } from 'react-native';

import Button from '../components/Button';
import StatusBar from '../components/StatusBar';
import Login from './Login';
import styles from '../styles.js';

var firebaseConfig = {
    apiKey: "##",
    authDomain: "##",
    databaseURL: "##",
    storageBucket: "##",
};
const firebaseApp = firebase.initializeApp(firebaseConfig, 'AppB');
firebase.database.enableLogging(true);
const auth = firebaseApp.auth();

class Signup extends Component {

  constructor(props){
    super(props);
    this.state = {
      loaded: true,
      email: '',
      password: ''
    };
  }

  signup(email, password){
    this.setState({
      loaded: false,
    });

    auth.createUserWithEmailAndPassword(
      '{this.state.email}',
      '{this.state.password}'

    ).then((data) => {
            if (this.props.onSignupSuccess) {
                this.props.onSignupSuccess(data)
            }
        })
        .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;

            if (this.props.onLoginError) {
                this.props.onLoginError(error.code, error.message)
            }
        });
      this.setState({
        email: '',
        password: '',
        loaded: true
      });
  }

  goToLogin(){
    this.props.navigator.push({
      component: Login
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar title="Signup" loaded={this.state.loaded} />
        <View style={styles.body}>

            <TextInput
                style={styles.textinput}
                onChangeText={(text) => this.setState({email: text})}
                value={this.state.email}
            placeholder={"Email Address"}
            />
          <TextInput
            style={styles.textinput}
            onChangeText={(text) => this.setState({password: text})}
            value={this.state.password}
            secureTextEntry={true}
            placeholder={"Password"}
          />
          <Button
            text="Signup"
            onpress={this.signup.bind(this)}
            button_styles={styles.primary_button}
            button_text_styles={styles.primary_button_text} />

          <Button
            text="Got an Account?"
            onpress={this.goToLogin.bind(this)}
            button_styles={styles.transparent_button}
            button_text_styles={styles.transparent_button_text} />
        </View>
      </View>
    );
  }
}

module.exports = Signup;

Answer 1

Here you go...

 import React, { Component } from 'react'; import { View, Text, TextInput, TouchableOpacity } from 'react-native'; import { Button } from '../common/button'; import styles from '../../styles'; import { firebaseApp } from './authentication'; export class signIn extends Component { constructor(props) { super(props); this.state = { email: '', //props.email password: '', //props.password toast: '', authUser: {} }; } componentDidMount() { firebaseApp.auth().onAuthStateChanged(firebaseUser => { if (firebaseUser) { this.setState({ authUser: firebaseUser }); this.setState({ toast: `Logged in as ${this.state.authUser.email}` }); console.log(this.state.authUser); this.props.navigator.push({ screen: 'home' }); } else { this.setState({ toast: 'Logged Out' }); } }); } render() { return ( < View style = { styles.container } > < Text > Sign In < /Text> <Text style={styles.label}>Username:</Text > < TextInput style = { styles.input } value = { this.state.email } onChangeText = { (text) => this.setState({ email: text }) } placeholder = "Email" / > < Text style = { styles.label } > Password: < /Text> <TextInput style={styles.input} secureTextEntry={true} value={this.state.password} onChangeText={(text) => this.setState({password: text})} placeholder="Password" / > < Button text = { 'Sign In' } onPress = { () => this.signIn() } /> <View style={styles.links}> <TouchableOpacity> <Text style={[styles.link,styles.linkPadding]}> Forgot Password? </Text > < /TouchableOpacity> <TouchableOpacity onPress={() => this.props.navigator.push({ screen: 'signUp' })}> <Text style={styles.link}> Sign Up </Text > < /TouchableOpacity> </View > < Text style = { styles.error } > { this.state.toast } < /Text> </View > ) } signIn() { let { email, password } = this.state; firebaseApp.auth().signInWithEmailAndPassword(email, password) .catch(error => { this.setState({ toast: error.message }); }); } }

And your authentication.js file/component should look like this:

 import * as firebase from 'firebase'; const config = { apiKey: "", authDomain: "", databaseURL: "", storageBucket: "", }; export const firebaseApp = firebase.initializeApp(config);