Implementing Login with Phone button in React Native App

To integrate the "Login with Phone" functionality into your React Native app, follow these fundamental steps:

1. 1. Get API Key
2. 2. Login with Phone Button
3. 3. Handle Success Response
4. 4. Add Email Alert Icon

2. Login with Phone Button

Create a "Login with Phone" button in your React Native app. The button, upon clicking, triggers a webview that opens a specified URL for initiating the automated phone authentication process.

View on GitHub Copy

//Check our GitHub repo for full code
 {/* Button */}
  <TouchableOpacity style={styles.button} onPress={_openSignInURL}>
    {/* Phone icon */}
    
    {/* Button label */}
    <Text style={styles.buttonLabel}>Sign in with Phone</Text>
  </TouchableOpacity>  

This Webview open specified URL and it initiates our automated phone authentication process, guiding users through a mobile number input dialog and subsequently displaying an OTP screen. Use the provided code snippet for implementation.

View on GitHub Copy

// Check our GitHub repo for full code
// Functional component
const SignIn = ({navigation}) => {
  // Local states
  const [deviceId, setDeviceId] = useState('');
  // Declaring an object
  const userInfo = {
    iss: 'phmail',
    aud: 'user',
    country_code: '+**',
    phone_no: '**********',
  };
  // Declaring sign-in URL
  const URI = `https://auth.phone.email/sign-in?countrycode=${userInfo.country_code}&phone_no=${userInfo.phone_no}&redirect_url=&auth_type=4&device=${deviceId}`;
  // Hooks
  useEffect(() => {
    // Method to fetch device ID
    const fetchDeviceId = async () => {
      // Getting unique ID
      const id = await getUniqueId();
      // Updating state
      setDeviceId(id);
      // Log the device ID to the console
      // console.log('Device ID:', id);
    };
    fetchDeviceId();
  }, []);
  const phoneAuthJwt = event => {
    // Getting encodedJWT
    const encodedJWT = event.nativeEvent.data;

    // Navigating to the EmailCount screen with the token param
    navigation.navigate('Email Count', {token: encodedJWT});
  };

  // Returning JSX
  return (
    <WebView
      source={{uri: URI}}
      style={styles.webView}
      onMessage={phoneAuthJwt}
      ref={webView => {
        this.webView = webView;
      }}
    />
  );
};  

Remember to replace country_code and phone_no in the code snippet with the actual values.

3. Handle Success Response

Upon successfully verifying the mobile number, the system returns a user JSON Web Token (JWT) containing phone details. Validate this information by utilizing your API_KEY on your server.

4. Add email alert icon:

Integrate an email alert icon on your screen for a successfully authenticated user. Use the code snippet below to fetch the unread email count and display the email icon.

View on GitHub Copy

// Create a new FormData object
const dataToSend = new FormData();
dataToSend.append('merchant_phone_email_jwt', token);
// Add other form data properties as needed

// Make a POST request using Axios
axios
.post('https://eapi.phone.email/email-count', dataToSend, {
  headers: {
    'Content-Type': 'multipart/form-data',
    Accept: '*/*',
  },
})
.then(response => {
  // Handle the response and update state
  setCount(response.data);
})
.catch(error => {
  // Handle error
  console.error('Error making API request:', error);
});

Implement an email view screen that displays emails by opening the specified URL.

View on GitHub Copy

 const Email = () => {
  // Returning JSX
  return (
    <WebView
      source={{uri: 'https://web.phone.email'}}
      originWhitelist={['*']}
      style={styles.webView}
    />
  );
};

Refer to the GitHub repository for the full demonstration of the "Login with Phone" button implementation in React Native.