Free Email Verification in React JS: API Guide for Developers

In today’s digital age, securing user accounts through email verification is crucial for maintaining the integrity and safety of online platforms. Phone Email has developed an innovative solution with its “Sign in with Email” button, which simplifies the process of email authentication. This plugin is a powerful tool for developers looking to implement email verification seamlessly in their applications. By leveraging this free email OTP service, users can verify their email addresses quickly and securely.

The “Sign in with Email” button integrates effortlessly with React JS, allowing developers to add a robust layer of security to their applications. Once integrated, this button initiates a single sign-on (SSO) authentication process, verifying the user’s email via an OTP (One-Time Passcode). After successful verification, users are redirected back to the client’s website with a JSON URL containing the verified email information. This blog provides a comprehensive guide on how to integrate Phone Email’s “Sign in with Email” button into your React JS application, ensuring a smooth and secure email verification process.

Explain “Sign in with Email” Button Integration Steps for React JS

Integrating the “Sign in with Email” button into your React JS application involves a few straightforward steps. Here’s how you can get started:

1. Get Sign in Button Code
To begin, log into the Phone Email admin dashboard. Navigate to the “Button settings” section, where you can generate the “Log in with Email” button code. This code includes HTML and JavaScript snippets that need to be added to your website.

Here’s the code snippet for the email verification button:

<div class="pe_verify_email" data-client-id="YOUR_CLIENT_ID">
    <script src="https://www.phone.email/verify_email_v1.js" async></script>
</div>
<script>
    function phoneEmailReceiver(userObj){
        var user_json_url = userObj.user_json_url;
        var user_email_id = userObj.user_email_id;

        alert('SUCCESS !!\nYour email id '+user_email_id+' has been authenticated.');
        // You can submit your form here or redirect user to post login dashboard page
        // Send user_json_url to your backend to retrieve user info (i.e. email id) from this URL.
    }
</script>

Add this HTML and JavaScript code to the appropriate location on your website where you want the “Sign in with Email” button to appear. The JavaScript function phoneEmailReceiver handles the response after the email has been successfully verified, retrieving the user’s email ID and JSON URL.

2. Get Verified Email ID (Backend)

For enhanced security, it’s crucial to handle the JSON URL on your backend server. This step ensures that the email verification process is secure and that sensitive information is not exposed on the client side. Below is an example of how you can retrieve the email ID from the JSON URL using Node.js:

const https = require('https');
// URL of the JSON file
const user_json_url = "URL_OF_YOUR_JSON_FILE";

https.get(user_json_url, (res) => {
  let data = '';

  // A chunk of data has been received.
  res.on('data', (chunk) => {
    data += chunk;
  });

  // The whole response has been received.
  res.on('end', () => {
    const jsonData = JSON.parse(data);

    // Access user_email_id
    const user_email_id = jsonData.user_email_id;

    console.log("User Email id:", user_email_id);
  });

}).on("error", (err) => {
  console.log("Error: " + err.message);
});

This Node.js script makes an HTTPS request to the JSON URL provided by the Phone Email service. Once the data is received, it parses the JSON response to extract the user’s email ID.

Benefits of Using Phone Email’s “Sign in with Email” Button

Integrating Phone Email’s “Sign in with Email” button into your React JS application offers several significant benefits:

• Enhanced Security: By using email OTP verification, you ensure that only legitimate users can access your application. This reduces the risk of unauthorized access and potential security breaches.
• User Convenience: The “Sign in with Email” button provides a seamless and straightforward way for users to verify their email addresses. This improves the user experience by eliminating the need for complex registration processes.
• Cost-Effective: Phone Email offers this service at no cost, making it an excellent option for developers and businesses looking to implement email verification without incurring additional expenses.
• Quick Integration: The integration process is simple and can be completed in just a few steps. This allows developers to quickly add email verification functionality to their applications without extensive development work.
• Reliable Service: Phone Email’s verification service is robust and reliable, ensuring that email verification requests are handled efficiently and accurately.

Conclusion

Implementing email verification in your React JS application is essential for maintaining security and ensuring that your user base is genuine. Phone Email’s “Sign in with Email” button offers a hassle-free solution that integrates seamlessly with your application. By following the integration steps outlined in this blog, you can easily add this functionality to your website, providing your users with a secure and convenient way to verify their email addresses.

For more information, visit the Admin Dashboard to get started, and refer to the documentation for detailed instructions and additional support.

By utilizing Phone Email’s free email OTP service, you can enhance the security of your application, improve user experience, and streamline your authentication process.