/* To test Sign-in with Phone functionaliy, please make following changes 1. Please download Login.js file and paste it in your ReactJS app home directory. 2. Import Login.js component file in index.js 3. Render Login component in index.js. */ import React, { useEffect, useState } from "react"; const App = () => { const searchParams = new URLSearchParams(window.location.search); const accessToken = searchParams.get('access_token'); // Replace with your actual CLIENT_ID const CLIENT_ID = "YOUR_CLIENT_ID"; const REDIRECT_URL = window.location.href; const AUTH_URL = `https://www.phone.email/auth/log-in?client_id=${CLIENT_ID}&redirect_url=${REDIRECT_URL}`; // Use state to manage user details const [userDetails, setUserDetails] = useState({ countryCode: "", phoneNo: "", phEmailJwt: "" }); const httpRequest = async () => { try { 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=/`; // Register User: As the user phone number has been verified successfully. If user corrosponding to this verified mobile number does not exist in your user table then register the user by creating a row in user table. If user already exists then simply continue to the next step. // Send Email: We reccomend you to send welcome email to the user. //curl --location --request POST "https://api.phone.email/v1/sendmail" --ssl-no-revoke --header "Content-Type: application/json" --data-raw "{'apiKey':'API_KEY','fromCountryCode':'XXX','fromPhoneNo':'XXXXXXXXXX', 'toCountrycode':'XX','toPhoneNo':'XXXXXXXXXX','subject': 'Welcome to YOUR_BUSINESS_NAME','tinyFlag':true,'messageBody':'V2VsY29tZSB0byB5b3VyIEJVU0lORVNTX05BTUU='}" // Create Session: Store verified user phone number in session variable. // Redirect: Redirect user to the page of your choice as the user has successfully logged in. // Handle Logout (Optional): You can create logout button on your website as required.In the event of logout you must clear delete ph_email_jwt cookie and clear your session variables. To delete cookie simply set it to blank -> setcookie("ph_email_jwt", "", time()-3600); } catch (error) { console.error("Fetch error:", error); } }; useEffect(() => { if (accessToken) { httpRequest(); } }, [accessToken]); return ( {!accessToken && (
phone email login demo

Sign In

Welcome to Sign In with Phone

)} {accessToken && (
phone email login demo

Welcome!

You are logged in successfully with
{userDetails.countryCode} {userDetails.phoneNo}

)}
); }; export default App;