User Authentication with free phone number verification in React JS

In today's digital landscape, user authentication plays a crucial role in ensuring the security and integrity of online platforms. With the increasing emphasis on user privacy and data protection, businesses are constantly seeking efficient and reliable methods to verify user identities. Phone.Email, a leading provider of authentication solutions, has introduced an innovative solution to address this challenge – the "Log in with phone" button.

Introduction to Phone.Email's Sign in With Phone Button

Phone.Email's "Log in with phone" button offers a seamless and secure method for users to verify their phone numbers during the authentication process. This solution allows businesses to embed a sign-in (Single Sign-on SSO) button directly into their websites or mobile apps. Upon clicking the button, a new authentication window appears, prompting users to enter their phone number.

Key Features of Integrating Sign in With Phone Button from Phone.Email

• Cost-Effective Verification: Phone.Email's solution provides a cost-effective means of phone verification, making it accessible to businesses of all sizes.

• Reliable SMS OTP Service: The solution ensures reliable phone verification through the use of one-time passwords (OTPs) sent via SMS, enhancing security and reducing the risk of unauthorized access.

• Easy Integration: Integrating the "Log in with phone" button into existing applications is straightforward, thanks to Phone.Email's developer-friendly API and comprehensive documentation.

Suggesting “Login with Phone” Button for Automated SMS OTP

For businesses looking to automate the SMS OTP verification process, Phone.Email's "Login with Phone" button is the ideal solution. By integrating this button with their applications, businesses can streamline the authentication process and provide users with a hassle-free login experience.

Integration Steps and Documentation Links

1. Create Admin Account and Retrieve Client ID

Start by creating an admin account (https://admin.phone.email) on the Phone.Email platform and retrieve the client ID from the profile details section.

2. Add “Login with Phone” Button to Call Free SMS OTP API in React JS. Github for this code snippet is: https://github.com/phoneemail/sign-in-with-phone-reactjs

<button style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '14px 20px', backgroundColor: '#02BD7E', fontWeight: 'bold', color: '#ffffff', border: 'none', borderRadius: '3px', fontSize: 'inherit', cursor: 'pointer', maxWidth: '320px', width: '100%' }} id="btn_ph_login" name="btn_ph_login" type="button" onClick={() => window.open(AUTH_URL, 'peLoginWindow', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0, width=500, height=560, top=' + (window.screen.height - 600) / 2 + ', left=' + (window.screen.width - 500) / 2)}> <img src="https://storage.googleapis.com/prod-phoneemail-prof-images/phem-widgets/phem-phone.svg" alt="phone email" style={{ marginRight: "10px" }} /> Sign In with Phone </button>

3. Get Verified Phone Numbers Back in React JS. Github for this code snippet is: https://github.com/phoneemail/sign-in-with-phone-reactjs

const url = "https://eapi.phone.email/getuser";
const data = new FormData();

data.append("access_token", accessToken);
data.append("client_id", CLIENT_ID);

const response = await fetch(url, { method: "POST", body: data });

if (!response.ok) {
    throw new Error("Network response was not ok");
}

const responseData = await response.json();

if (responseData.status !== 200) {
    throw new Error("Something went wrong");
}

const phEmailJwt = responseData.ph_email_jwt;

// Set cookie with 180-day expiration
const cookieExpire = new Date(Date.now() + 180 * 24 * 60 * 60 * 1000).toUTCString();
document.cookie = `ph_email_jwt=${phEmailJwt}; expires=${cookieExpire}; path=/`;

Explore OTP API Demo and Documentation

• Demo: OTP API Demo using “Log in with Phone” button

• Documentation: Read Docs for Integration with React JS

In conclusion, Phone.Email's "Log in with phone" button offers a powerful and efficient solution for businesses seeking secure and streamlined user authentication. By integrating this button into their applications and leveraging the accompanying SMS OTP API, businesses can enhance security, improve user experience, and drive engagement. Unlock the potential of secure phone verification with Phone.Email's innovative solution today.