phone-email-auth

Sign in with Phone - by Phone Email

Welcome to the npm package repository for integrating "Sign in with Phone" functionality into your web applications. This repository showcases how you can seamlessly implement phone verification and authentication using our innovative plugin.

Table of Contents

1. Introduction
2. Prerequisites
3. Installation
4. Example Demo
5. Documentation
6. Website

Introduction

Phone Email presents a revolutionary solution for user authentication - "Sign in with Phone". Our plugin enables websites to offer seamless phone number verification to users, enhancing security and user experience. Similar to Firebase phone authentication, our solution embeds a "Log in with phone" button on client websites. Upon clicking, a verification window prompts users to enter their country code and mobile number. After successful verification through OTP sent to the user's mobile, control redirects back to the client website with an access token. Subsequently, passing this access token to the getuser REST API retrieves the verified mobile number.

Key Benefits:

• Cost-Effective: Minimal or no cost for phone verification.
• Enhanced Security: OTP-based verification ensures secure authentication.
• Seamless Integration: Easy integration into existing web applications.
• Improved User Experience: Streamlined authentication process for users.

Prerequisites

To integrate One Tap Sign In button on your website, get the CLIENT_ID from the Profile Details section by signing into the Admin Dashboard.

Installation

To integrate the "Sign in with Phone" functionality into your project, follow these steps:

1. Install this npm

   To integrate One Tap Sign In button on your website page, you'll need to install the 'phone-email-auth' package using following command.

   npm i phone-email-auth

2. Add Login Button to your application

   Please integrate following code snippet at bottom of the primmary component so that Sign in with Phone button appears on all the pages of your website. This will enhanance number of users login/register on your website compared to a dedicated login/register page.

   import PhoneEmailLogin from 'phone-email-auth';
   function App() {
   return (
   	<>
       <PhoneEmailLogin clientId = "TYPE_YOUR_CLIENT_ID" position="left" buttonText="Sign in With Phone" redirectUrl="" />
   	</>
   );
   }
   export default App;

3. Get verified phone number

   Create a success page (Example: https://your-domain-name/loginsuccess) on your website where user will be redirected after successful phone verification and also set this URL in redirectUrl variable used in Step 2.

   Please use the code snippet given below to get the verified phone number.

   import { userInfo } from 'phone-email-auth';
   import { useEffect, useState } from 'react';
   
   function Loginsuccess() {
   const [state,setState] = useState({});
   useEffect(() => {
   	const httpRequest = async () => {
   	const response = await userInfo("TYPE_YOUR_CLIENT_ID");
   	console.log(response)
   	// From response you can get verified phone number here using keys country_code and phone_no in response
   	// Register User: If user corrosponding to this verified phone number does not exist in your user table then add the user in your user table here and continue to the next step. If user already exists then skip the next step.
   }
   httpRequest()
   }, [])
   
   return (<></>);
   
   }
   
   export default Loginsuccess;

Example Demo

Experience the seamless authentication process firsthand with our demo. Our demo provides a live demonstration of the "Sign in with Phone" plugin, showcasing its functionality and ease of use. Explore the demo to understand how the plugin can enhance the authentication experience on your website.

Documentation

For comprehensive documentation on integrating the "Sign in with Phone" plugin into your application, refer to our documentation. The documentation provides detailed instructions, code samples, and configuration options to help you seamlessly integrate the plugin into your project.

Website

Visit our website to learn more about our authentication solutions and explore additional features and services. Experience the future of authentication with Phone Email's "Sign in with Phone" plugin. By implementing our plugin, you can elevate the security of your website, enhance user experience, and streamline the authentication process for your users. Embrace the power of phone verification with Phone Email's innovative solution.

---

Developed by Phone Email