AramRafeq/firebase Auth basic example

## firebase Auth basic example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Firebase Auth</title>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
    <h1>Hello WOrld</h1>
    <input type="text" id="phoneNo" placeholder="phone number...">
    <div id="recaptcha"></div>
    <button id="send">Send Sms</button>

    <input type="text" id="code" placeholder="enter code here..." style="display:none;">
    <button id="getUser" style="display:none;">Get User</button>

        <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
        <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-auth.js"></script>
    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            // your firebase config file goes here
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
    </script>
    <script>
        $(document).ready(function(){
            window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha');
            window.recaptchaVerifier.render().then(function(widgetId) {
                window.recaptchaWidgetId = widgetId;
            });
            //
            $("#send").click(function(){
                var recaptchaResponse = window.grecaptcha.getResponse(window.recaptchaWidgetId);
                console.log(recaptchaResponse)
                // using recaptchaResponse you can block user from taking any action untill valid captcha is returneds
                var phoneNumber = $("#phoneNo").val();
                console.log(phoneNumber);
                var appVerifier = window.recaptchaVerifier;
                firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
                    .then(function (confirmationResult) {
                        // SMS sent. Prompt user to type the code from the message, then sign the
                        // user in with confirmationResult.confirm(code).
                        window.confirmationResult = confirmationResult;
                        $("#code").css("display", "inline");
                        $("#getUser").css("display", "inline");

                        console.log("ok")
                    }).catch(function (error) {
                        window.recaptchaVerifier.render().then(function(widgetId) {
                            window.grecaptcha.reset(widgetId);
                        });
                    });
            });
            $("#getUser").click(function(){
                const code = $("#code").val();
                window.confirmationResult.confirm(code).then(function (result) {
                    var user = result.user;
                    console.log(result, user);
                }).catch(function (error) {
                    alert("Error Happend");
                    console.log(error);
                });
            });
        })
    </script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Firebase Auth</title>
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous"></script>
	</head>
	<body>
	<h1>Hello WOrld</h1>
	<input type="text" id="phoneNo" placeholder="phone number...">
	<div id="recaptcha"></div>
	<button id="send">Send Sms</button>

	<input type="text" id="code" placeholder="enter code here..." style="display:none;">
	<button id="getUser" style="display:none;">Get User</button>

	<!-- The core Firebase JS SDK is always required and must be listed first -->
	<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>

	<!-- TODO: Add SDKs for Firebase products that you want to use
	https://firebase.google.com/docs/web/setup#available-libraries -->
	<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-auth.js"></script>
	<script>
	// Your web app's Firebase configuration
	var firebaseConfig = {
	// your firebase config file goes here
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);
	</script>
	<script>
	$(document).ready(function(){
	window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha');
	window.recaptchaVerifier.render().then(function(widgetId) {
	window.recaptchaWidgetId = widgetId;
	});
	//
	$("#send").click(function(){
	var recaptchaResponse = window.grecaptcha.getResponse(window.recaptchaWidgetId);
	console.log(recaptchaResponse)
	// using recaptchaResponse you can block user from taking any action untill valid captcha is returneds
	var phoneNumber = $("#phoneNo").val();
	console.log(phoneNumber);
	var appVerifier = window.recaptchaVerifier;
	firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
	.then(function (confirmationResult) {
	// SMS sent. Prompt user to type the code from the message, then sign the
	// user in with confirmationResult.confirm(code).
	window.confirmationResult = confirmationResult;
	$("#code").css("display", "inline");
	$("#getUser").css("display", "inline");

	console.log("ok")
	}).catch(function (error) {
	window.recaptchaVerifier.render().then(function(widgetId) {
	window.grecaptcha.reset(widgetId);
	});
	});
	});
	$("#getUser").click(function(){
	const code = $("#code").val();
	window.confirmationResult.confirm(code).then(function (result) {
	var user = result.user;
	console.log(result, user);
	}).catch(function (error) {
	alert("Error Happend");
	console.log(error);
	});
	});
	})
	</script>
	</body>
	</html>