Empower your inbox, simplify your life with just one tap. Download the app now...
Empower your inbox, simplify your life with just one tap. Download the app now...
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.
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:
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" }}
id="btn_ph_login"
name="btn_ph_login"
type="button" onClick={() => openUrl(URL)}>
<svg
xmlns="http://www.w3.org/2000/svg"
style={{ marginRight: "5px", fill: "#ffffff" }}
height="24"
viewBox="0 -960 960 960"
width="24">
<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>
</div>
</div>
);
}
GitHub Code Snippet: Sign-in-with-Phone-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');
setData(payload)
}
decodeToken(param1)
}, []);
GitHub Code Snippet: Sign-in-with-Phone-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.
Related Posts
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.
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.
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.