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

| Prop Name | Data Type | Required? | Default Value | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | signInWithPhone | Function | Yes | console.log | Event handler when user enters phone number. Phone number as a String as first argument. Must return a Promise to proceed | | redeemCode | Function | Yes | console.log | Event handler when user enters code. Code as a String as first argument. Must return a Promise to proceed | | color | String | No | '#ff8203' | Color of text underline and buttons | | buttonTextColor | String | No | 'white' | Color of button text | | spinnerColor | String | No | 'white' | Color of the spinner when loading | | androidFont | String | No | 'monospace' | Android font type | | iOSFont | String | No | 'Menlo' | iOS font type | | containerStyle | Object | No | {flex: 1} | Style of the container of the component | | verifyButtonMessage | String | No | 'Verify Phone Number*' | The message on the first button | | disclaimerMessage | String | No | 'Message & data rates may apply.' | The disclaimer message | | enterCodeMessage | String | No | 'Enter Code' | The message on the second button | | codeLength | Number | No | 4 | The length of the code the user will enter | | cca2 | String | No | 'US' | The default country code | | callingCode | String | No | '1' | The default calling code accompanied by cca2 |

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>
    );
  }
}