Implementing Login with Phone button in React Native App


Download Demo App
Phone email

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

1. Get the API Key

To activate the "Login with Phone" functionality on your website, you should first log in to the Phone Email Admin Dashboard at After successfully logging in, you will obtain an API key within the Profile Details section.

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.

//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>

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.

// 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 = `${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
      // Log the device ID to the console
      // console.log('Device ID:', id);
  }, []);
  const phoneAuthJwt = event => {
    // Getting encodedJWT
    const encodedJWT =;

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

  // Returning JSX
  return (
      source={{uri: URI}}
      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.

// 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
.post('', dataToSend, {
  headers: {
    'Content-Type': 'multipart/form-data',
    Accept: '*/*',
.then(response => {
  // Handle the response and update state
.catch(error => {
  // Handle error
  console.error('Error making API request:', error);

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

 const Email = () => {
  // Returning JSX
  return (
      source={{uri: ''}}

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

Should you encounter any technical challenges during the integration process, please don't hesitate to reach out to us for assistance.

Contact us WhatsApp Us