Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.