Integrating one tap sign in with phone from phone email - Converting html and javascript code to React JS

Question

I am learning React JS and new to it. I have following code to integrate one tap sign in with phone (From Phone.Email) on my website. This button will verify OTP and send back verified number to my website.

<div id="pheIncludedContent"></div>
<script src="https://auth.phone.email/login_automated_v1_2.js"></script>
<script>
  var reqJson='{"success_url":"","client_id":"XXXXXXXXXXXXXXXXX","button_text":"Sign in with Phone","email_notification":"icon","button_position":"left"}';
log_in_with_phone(reqJson);
</script>

I am trying to convert it into React JS code and trying to integrate it on my website. Following is my React JS component code

import React, { useEffect } from 'react';

const SigninPhone = () => {
  useEffect(() => {
    // Create a script element
    const script = document.createElement('script');
    
    // Set the src attribute to the external script URL
    script.src = 'https://auth.phone.email/login_automated_v1_2.js';
    
    // Append the script element to the document body
    document.body.appendChild(script);
    
    // Define the request JSON object
    const reqJson = {
      success_url: '',
      client_id: 'XXXXXXXXXXXXXXXXX',
      button_text: 'Sign in with Phone',
      email_notification: 'icon',
      button_position: 'left'
    };
    
    // Call the log_in_with_phone function with the request JSON object
    window.log_in_with_phone(JSON.stringify(reqJson));

    // Clean up function to remove the script element when the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []); // Empty dependency array to ensure useEffect runs only once

  return <div id="pheIncludedContent"></div>;
};

export default SigninPhone;

But I am getting error like "Uncaught TypeError: window.log_in_with_phone is not a function" log_in_with_phone function is inside https://auth.phone.email/login_automated_v1_2.js this script.

Please help me to solve this problem

Answer 1

I think the issue is you're trying to use the script before it's loaded. Try this:

const [scriptLoaded, setScriptLoaded] = useState(false);

useEffect(() => {
    // Create a script element
    const script = document.createElement('script');
    
    // Set the src attribute to the external script URL
    script.src = 'https://auth.phone.email/login_automated_v1_2.js';
    
    // Append the script element to the document body
    document.body.appendChild(script);
    
    // Define the request JSON object
    const reqJson = {
      success_url: '',
      client_id: 'XXXXXXXXXXXXXXXXX',
      button_text: 'Sign in with Phone',
      email_notification: 'icon',
      button_position: 'left'
    };

    script.onload = () => {
        setScriptLoaded(true)
        window.log_in_with_phone(JSON.stringify(reqJson));
    }
     


    

    // Clean up function to remove the script element when the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []);

return<>{scriptLoaded && <div id='pheIncludedContent'/>}</>