Integrate single sign-on "Sign in With Phone" button in React JS

In today's digital landscape, seamless user authentication is paramount for web applications. While traditional email and password authentication methods persist, newer, more efficient methods are emerging. One such method gaining traction is the "Sign in With Phone" button, offering hassle-free authentication through SMS OTP verification.

Phone.Email introduces an innovative solution: the "Log in with Phone" button. This feature empowers users to verify their phone numbers at minimal cost, enhancing security and user experience. This button seamlessly integrates into client websites, streamlining the authentication process.

Key Features of Using Phone.Email's Single Sign-On OTP Verification Button

• Cost-Effective Authentication: Traditional methods often incur costs for SMS OTP verification. With Phone.Email's solution, authentication via SMS is offered at no or minimal expense, making it a cost-effective option for businesses.
• Enhanced Security: Phone.Email's OTP verification adds an extra layer of security to user authentication. By leveraging SMS OTP, the likelihood of unauthorized access is significantly reduced, enhancing overall data protection.
• User-Friendly Integration: Integrating the "Sign in With Phone" button into client websites is straightforward. With clear documentation and code examples, developers can implement this feature seamlessly, minimizing development time and effort.

Suggest "Login With Phone" Button to Automatically Send SMS OTP Using SMS API

The "Login with Phone" button simplifies the authentication process by automatically sending an SMS OTP to the user's mobile device. This functionality is achieved through integration with an SMS API, ensuring prompt delivery of OTPs for verification.

To implement this feature, follow these integration steps:

Create Admin Account: Begin by creating an admin account on Phone.Email's platform. Navigate to the profile section to obtain the client ID necessary for integration.

Add "Login With Phone" Button: Incorporate the "Login with Phone" button into your React JS application. Github for this code snippet is: https://github.com/phoneemail/sign-in-with-phone-reactjs

Below is a code example demonstrating the button's implementation:

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

Get Verified Phone Numbers Back: Retrieve verified phone numbers from Phone.Email's API after successful authentication. Github for this code snippet is: https://github.com/phoneemail/sign-in-with-phone-reactjs. Utilize the provided code snippet to fetch user details, including the phone number:

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;

setUserDetails({
    countryCode: responseData.country_code,
    phoneNo: responseData.phone_no,
    phEmailJwt: phEmailJwt
});

// 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=/`;

Conclusion

Incorporating the "Sign in With Phone" button into your React JS application offers numerous benefits, including enhanced security, cost-effectiveness, and user convenience. By following the provided integration steps and leveraging Phone.Email's documentation, developers can seamlessly implement OTP verification via SMS, improving the authentication experience for users.

Experience the seamless integration of OTP API using the "Log in with Phone" button in our demo. For detailed documentation on integration with React JS, visit our documentation page.