Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Firebase web phone number authentication without Firebase UI.

See original GitHub issue

I’ve been googling for 2 days for html and JavaScript code for adding firebase phone number authentication in my website. I saw the firebaseui doing this job. But it has their own form elements. I haven’t found any articles or videos showing "how to make Firebase web auth with phone number, without using Firebaseui/nodejs. Is it really possible to do this with my own textbox and other buttons? I had written a code for this and it’s not working. Please do a checkup or prefer any best articles, show the exact thing I want. The code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled</title>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBA-sB86rtEQRdyMInGIHHbAv1QAr6QMaw",
authDomain: "mcent-hack.firebaseapp.com",
databaseURL: "https://mcent-hack.firebaseio.com",
projectId: "mcent-hack",
storageBucket: "mcent-hack.appspot.com",
messagingSenderId: "489625162227"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<script>
var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
alert('sms sent');
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
}).catch(function (error) {
// Error; SMS not sent
// ...
alert('sms not send');
});
</script>
<form>
<input type="tel" id="number">
<input type="number" id="otp_code">
<input type="submit">
</form>
</body>
</html>

Issue Analytics

State:
Created 6 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

2reactions

SFI-techcommented, Jan 13, 2018

Yeah I got a working code. This is my one other GitHub account. This is what I did for phone number verification.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>
		 Firebase Phone Number Auth
		</title>
	</head>
	<body>
		<form>
			<input type="text" id="verificationcode" value="enter verification">
				<input type="button" value="Submit" onclick="myFunction()">
				</form>
				<div id="recaptcha-container"></div>
				<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
				<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.com",
    databaseURL: "https://groupinger-users.firebaseio.com",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.com",
    messagingSenderId: "432661298034"
  };
  firebase.initializeApp(config);
</script>
<script type="text/javascript"> 
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); 
firebase.auth().signInWithPhoneNumber("+919072644297", window.recaptchaVerifier) 
.then(function(confirmationResult) { 
window.confirmationResult = confirmationResult; 
a(confirmationResult); 
}); 
var myFunction = function() { 
window.confirmationResult.confirm(document.getElementById("verificationcode").value) 
.then(function(result) { 
alert('login process successfull!\n redirecting');
alert('<a href="javascript:alert(\'hi\');">alert</a>')
window.location.href="details.html";
}, function(error) { 
alert(error); 
}); 
};
  </script>
 </body>
</html>

I was just requiring service, which can be used for checking if the visitor owns the entered number. This code does that for me. You can change the JavaScript redirection address into something like “login_completion.php?data={Verified phone number (can be the encrypted one)}& Verified=true” so that you can pass the really verified phone number into another PHP file. Then in that file, you can just get the data from current page address and insert the new verified phone number into any databases like phpMyadmin mysql.

0reactions

nicolasgarniercommented, Aug 31, 2018

@vayshak I could not understand what your issue was. I’m closing this because the original issue has been answered but if you still need assistance with FirebaseUI @vayshak feel free to re-open a new issue.