ReactJS API for Sending Free SMS OTP with Phone.Email

Phone email Admin
Phone Email App

14 February 2024 10 mins read

In the realm of web development, user authentication is a crucial aspect. Phone.Email has introduced an innovative solution - the "Log in with Phone" button. This feature facilitates phone number verification at little to no cost, providing a seamless experience for users. In this blog post, we'll delve into the key features of Phone.Email's SMS OTP API for ReactJS and guide you through the process of integrating the "Log in with Phone" button into your application.

SMS OTP API for ReactJS, Free SMS OTP Service, OTP API, Phone Verification, SMS OTP API, Login with Phone, Sign in with Phone, OTP API ReactJS

Key Features of Phone.Email's SMS OTP API

Phone.Email's SMS OTP API offers a range of features that make it a standout choice for developers seeking reliable phone verification solutions. Here are some key features:

  1. Cost-Effective: With minimal to no cost involved, Phone.Email's API provides an affordable option for businesses looking to implement secure phone verification.
  2. Seamless Integration: The API seamlessly integrates with ReactJS applications, making it easy for developers to incorporate phone number verification into their user authentication workflows.
  3. Secure OTP Generation: The API integration in ReactJS ensures the generation of secure one-time passwords (OTPs) sent to users via SMS, enhancing the overall security of the authentication process.
  4. JWT Authentication: Upon successful verification, the API returns a JSON Web Token (JWT) for secure and efficient user authentication on the client's website.

Integrating the "Log in with Phone" Button

  1. Create an Admin Account

    To get started with Phone.Email's SMS OTP API for ReactJS, create an admin account on the Admin Dashboard. This account will grant you access to the necessary credentials and settings for API integration.
  2. Add the "Log in with Phone" Button

    Now, let's integrate the "Log in with Phone" button into your ReactJS application. Below is a code snippet for a React component that represents the button:

    // React component for "Log in with Phone" button.
    export default function Login() {
      const userInfo = {
        "iss": "phmail",
        "aud": "user",
        "country_code": "+91",   //Replace with your country code
        "phone_no": "**********" // Replace with your phone number
      const URL = `https://phone.email/auth/sign-in?countrycode=${userInfo.country_code}&phone_no=${userInfo.phone_no}&redirect_url=https://dashing-concha-578106.netlify.app/success&auth_type=`;
      const [windowDimensions] = useState({
        width: window.innerWidth,
        height: window.innerHeight,
      const openUrl = (url) => {
        const popupFeatures = 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0, width=500,height=560,scrollbars=yes,top=' + (windowDimensions.height - 300) / 2 + ',left=' + (windowDimensions.width - 500) / 2;
        window.open(url, '_blank', popupFeatures);
      return (
        <div className="App">
          <div className='container' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
            <button style={{ alignItems: "center", backgroundColor: "#02BD7E", color: "#ffffff", justifyContent: "space-between", padding: "10px 15px", fontWeight: "bold", border: "none", borderRadius: "3px", fontSize: "inherit", cursor: "pointer" }}
              type="button" onClick={() => openUrl(URL)}>
                style={{ marginRight: "5px", fill: "#ffffff" }}
                viewBox="0 -960 960 960"
                <path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12Z" />
              </svg> Sign in with Phone Number </button>

    GitHub Code Snippet: Sign-in-with-Phone-ReactJS

  3. Retrieve Verified Phone Numbers in ReactJS

    After successful verification, you can retrieve the verified phone numbers within your ReactJS application. Here's a code snippet for achieving this:

    jsxCopy code
    // React component to retrieve verified phone numbers
        const location = useLocation();
        const queryParams = new URLSearchParams(location.search);
        // Access specific query parameters
        const param1 = queryParams.get('phtoken');
        const [data, setData] = useState({});
        const [count, setCount] = useState(0)
        useEffect(() => {
            const decodeToken = async (token) => {
                const secret = new TextEncoder().encode(API_KEY)
                const { payload } = await jose.jwtVerify(token, secret, 'RS256');
        }, []);

    GitHub Code Snippet: Sign-in-with-Phone-ReactJS

Explore Phone Email’s SMS OTP API for ReactJS

To witness the power of Phone.Email's SMS OTP API and the "Login with Phone" button in action, explore our demo:

Explore the capabilities of Phone.Email's SMS OTP API through a live demo using the "Log in with Phone" button at Phone Email Demo. Additionally, refer to the comprehensive documentation at Phone.Email Docs for detailed information on API integration with ReactJS.

In conclusion, incorporating phone number verification into your ReactJS application has never been easier. With Phone.Email's SMS OTP API and the "Log in with Phone" button, you can enhance the security of your authentication process without breaking the bank. Follow the integration steps, explore the code snippets on GitHub, and empower your users with a seamless and secure login experience.

Try it today

Get Started

Discover our offerings through the Admin Dashboard for a comprehensive exploration of our products and services.

Related Posts

Phone email Admin

Sending and Receiving Emails via Phone Numbers

In today's digital age, communication has evolved significantly. From the traditional methods of sending letters and making phone calls, we have moved on to emails, instant messaging apps, and social media. However, one aspect of communication has remained relatively unchanged: the need for email addresses. But what if there was a way to send and receive emails using just a phone number? Enter the Phone Email App, a groundbreaking solution that's changing the way we think about email communication.

22 September 2023 3 mins read
Phone email Admin

Send free OTP to verify phone number

Phone Email's OTP Verification is a powerful tool that can help businesses bolster their security, reduce bounce rates, build user trust, and optimize the user experience. Prioritizing data security and simplifying OTP delivery, Phone Email is the go-to solution for businesses seeking success in the digital world, where trust, efficiency, and customer satisfaction reign supreme.

22 September 2023 3 mins read
Phone email Admin

Revolutionizing Email: Say Goodbye to complex email addresses with...

In today's digital age, email communication has become an integral part of our personal and professional lives. However, the complexity and limitations of traditional email addresses can often be a source of frustration. But fear not! Phone.Email, a cutting-edge email provider, is here to revolutionize the way we send and receive emails. With its Android app and innovative features, Phone.Email simplifies email communication by allowing users to send emails using phone numbers instead of complex email IDs. Let's delve deeper into the benefits of Phone.Email and how it is reshaping the world of email.

22 September 2023 3 mins read