Firebase Phone Authentication


1.HTML Scripts to include:

//html scripts script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js">
script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js">
script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js">


2. JavaScript Intialization Code

//javascript firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const database = firebase.database();
var database_ref = database.ref();

3. HTML Code

//html code <div id="mobileenter" class="limiter"> <span class="login100-form-title p-b-26"> Welcome to Cyberclips </span> //Entering mobile number <div id="mobilediv"> <input id="mobilenum" type="number" name="phone">Enter mobile </input> <div id="recaptcha-container"></div> <p id="success" style="color:green";></p> <p id="error" style="color:red";></p> <button onclick="login()" type="button"> Send OTP </button> //Entering OTP <div id="otpenter" class="limiter"></div> <span class="login100-form-title p-b-26"> Welcome to Cyberclips </span> <input id="otpvalue" class="input100" type="number" name="Otp"></input> <p id="errorotp" style="color:red";></p> <button onclick="verify()" type="button"> Verify & Login</button> //hiding otp option on loading <script> var a=document.getElementById("otpenter").style.visibility="hidden"; </script>



4. JavaScript Code



//JavaScript Code window.onload=function(){ render(); } const firebaseConfig = { //Your keys. Refer video...!!! }; firebase.initializeApp(firebaseConfig); const auth = firebase.auth() const database = firebase.database() var database_ref = database.ref() function render(){ window.recaptchaVerifier=new firebase.auth.RecaptchaVerifier('recaptcha-container'); recaptchaVerifier.render(); } function login(){ var mobilenum=document.getElementById("mobilenum").value console.log(mobilenum) var phonenumber= "+91"+mobilenum; console.log(phonenumber) firebase.auth().signInWithPhoneNumber(phonenumber,window.recaptchaVerifier).then(function(confirmResult){ window.confirmResult=confirmResult; coderesult=confirmResult; console.log(coderesult); document.getElementById("success").innerHTML="OTP has successfully generated." var a=document.getElementById("mobileenter"); a.remove(); var b=document.getElementById("otpenter").style.visibility="visible"; }).catch(function(error){ document.getElementById("error").innerHTML=error.message; }) } function verify(){ var code=document.getElementById("otpvalue").value; coderesult.confirm(code).then(function(result){ var user=result.user; window.location.replace("user.html"); }).catch(function(error){ document.getElementById("errorotp").innerHTML=error.message; }) }