Breaking News: Grepper is joining You.com. Read the official announcement!

Write code for firebase authentication for phone no. via html form

Cheerful Constrictor answered on July 14, 2023 Popularity 1/10 Helpfulness 1/10

answer Write code for firebase authentication for phone no. via html form

Write code for firebase authentication for phone no. via html form

Comment

<!DOCTYPE html>
<html>
<head>
    <title>Firebase Phone Authentication</title>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script>
        // Firebase configuration
        var firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_SENDER_ID",
            appId: "YOUR_APP_ID"
        };
      
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        // Function to handle phone authentication
        function signInWithPhoneNumber() {
            var phoneNumber = document.getElementById('phoneNumber').value;
            var appVerifier = window.recaptchaVerifier;

            firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
                .then(function (confirmationResult) {
                    window.confirmationResult = confirmationResult;
                    console.log('OTP sent');
                }).catch(function (error) {
                    console.log('Error:', error);
                });
        }

        // Function to verify the OTP entered by the user
        function verifyOTP() {
            var verificationCode = document.getElementById('verificationCode').value;
            confirmationResult.confirm(verificationCode)
                .then(function (result) {
                    console.log('Phone number verified');
                    var user = result.user;
                    // Perform further actions after successful verification
                }).catch(function (error) {
                    console.log('Error:', error);
                });
        }
    </script>
</head>
<body>
    <h2>Firebase Phone Authentication</h2>
    <form>
        <label for="phoneNumber">Phone Number:</label>
        <input type="text" id="phoneNumber" placeholder="Enter phone number">
        <button type="button" onclick="signInWithPhoneNumber()">Send OTP</button>
    </form>
    <br>
    <form>
        <label for="verificationCode">Enter OTP:</label>
        <input type="text" id="verificationCode" placeholder="Enter OTP">
        <button type="button" onclick="verifyOTP()">Verify OTP</button>
    </form>

    <!-- Recaptcha script -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('phoneNumber', {
            'size': 'invisible',
            'callback': function (response) {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                console.log('reCAPTCHA solved');
            }
        });
    </script>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: firebase-authentication html

Link to this answer
Share Copy Link

Contributed on Jul 14 2023

Cheerful Constrictor

0 Answers Avg Quality 2/10

Write code for firebase authentication for phone no. via html form

Contents

More Related Answers

Write code for firebase authentication for phone no. via html form

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.