react-native-phone-auth-component v0.1.5

react-native-phone-auth-component

A simple, elegant component that integrates with a phone authentication setup, styling and transitions included

Installation

npm i --save react-native-phone-auth-component

Usage

Default Props

import PhoneAuth from 'react-native-phone-auth-component';
...
<PhoneAuth
  signInWithPhone={phone => console.log('Please attach method to signInWithPhone prop')}
  redeemCode={code => console.log('Please attach method to redeemCode prop')}
  codeLength={4}
  buttonTextColor='black'
  spinnerColor='black'
  color='#ff8203'
  androidFont='monospace'
  iOSFont='Menlo'
  containerStyle={{flex: 1}}
  verifyButtonMessage='Verify Phone Number*'
  disclaimerMessage='*Message & data rates may apply.'
  cca2='US'
  callingCode='1'
/>

Props

Returning a Promise

In order for the component to know when you go to the server and send off the text message, you must return a promise in your helper method. Here's an example to illustrate how this would happen

Example

class PhoneVerifyScreen extends React.Component{

  state = {
    phone: '',
    code: ''
  };

  // here is where you connect to your api to redeem a user's code
  // I'm using Firebase in this example but of course you don't have to
  // To avoid confusion, I'm storing the API address in process.env.URL. You don't have to do this
  signInWithPhone(phone){
    this.setState({phone});
    
    return axios.post(process.env.URL + '/signInWithPhone', {
      phone
    }).then((tok) => {
      return Promise.resolve();
    }).catch(e => {
      alert('There was an error or something');
      return Promise.reject();
    });
  }

  redeemCode(code){
    return axios.post(process.env.URL + '/redeemCode', {
      phone: this.state.phone,
      code
    }).then((res) => {
      let tok = res.data.token;
      firebase.auth().signInWithCustomToken(tok).then(() => {
        return Promise.resolve();
      }).catch(e => {
        alert(e.error);
        return Promise.reject();
      });
    }).catch(e => {
      alert(e.response.data.error);
      return Promise.reject();
    });
  }

  render(){
    return(
      <View style={{flex: 1}}>
      {/*           ^^^^^^^^ */}
      {/* Make sure to have flex: 1 on parent! */}
      
        <PhoneAuth
          signInWithPhone={phone => this.signInWithPhone(phone)}
          redeemCode={code => this.redeemCode(code)}
          codeLength={4}
          buttonTextColor={'black'}
          spinnerColor={'black'}
        />
      </View>
    );
  }
}