where can i add the code after adding my firebase data?
and which link will be added in the blocks to refer to the link?
What code?
What firebase data ?
Which link are you referring to ?
that code
<!DOCTYPE html>
<!--https://medium.com/front-end-weekly/firebase-phone-authentication-web-tutorial-2019-29f5f5c97839-->
<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>OTP</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="holder" style="max-width:240px;margin: auto;">
<div id="done"></div>
<h2>OTP Sign Up</h2>
<!-- Add two inputs for "phoneNumber" and "code" -->
<!-- Add two buttons to submit the inputs -->
Phone Number:<br>
<input type="tel" id="phoneNumber" class="w3-input w3-border w3-round-large" style="width:200px" /><br>
<button id="sign-in-button" onclick="submitPhoneNumberAuth()" class="w3-btn w3-ripple w3-blue w3-round-large" style="width:200px">
SIGN IN WITH PHONE
</button><br><br><br>
<!-- Add a container for reCaptcha -->
<div id="recaptcha-container"></div><br><br>
OTP Code:<br>
<input type="text" id="code" class="w3-input w3-border w3-round-large" style="width:200px" /><br>
<button id="confirm-code" onclick="submitPhoneNumberAuthCode()" class="w3-btn w3-ripple w3-blue w3-round-large" style="width:200px">
ENTER CODE
</button>
<p id="notes" style="max-width:200px;word-wrap: break-word;">1. Enter phone number with + and country code, then click Sign In with Phone<br>2. Complete the recaptcha 3. Get the OTP code from your SMS and type/paste it in, then click Enter Code</p>
</div>
<!-- Add the latest firebase dependecies from CDN -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script>
// Place your config here
var firebaseConfig = {
apiKey: "AIzaSyDGDOzXPI0wqU0iiRRZiHPlfv8O9U5DBZg",
authDomain: "doctor-booking-4ec79.firebaseapp.com",
databaseURL: "https://doctor-booking-4ec79-default-rtdb.firebaseio.com",
projectId: "doctor-booking-4ec79",
storageBucket: "doctor-booking-4ec79.firebasestorage.app",
messagingSenderId: "864477148847",
appId: "1:864477148847:web:5653b4b6d923edbe7e065a",
measurementId: "G-2WV5EL9C1K"
};
firebase.initializeApp(firebaseConfig);
// Create a Recaptcha verifier instance globally
// Calls submitPhoneNumberAuth() when the captcha is verified
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
"recaptcha-container",
{
size: "invisible",
callback: function(response) {
submitPhoneNumberAuth();
}
}
);
// This function runs when the 'sign-in-button' is clicked
// Takes the value from the 'phoneNumber' input and sends SMS to that phone number
function submitPhoneNumberAuth() {
var phoneNumber = document.getElementById("phoneNumber").value;
var appVerifier = window.recaptchaVerifier;
firebase
.auth()
.signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
})
.catch(function(error) {
console.log(error);
});
}
// This function runs when the 'confirm-code' button is clicked
// Takes the value from the 'code' input and submits the code to verify the phone number
// Return a user object if the authentication was successful, and auth is complete
function submitPhoneNumberAuthCode() {
var code = document.getElementById("code").value;
confirmationResult
.confirm(code)
.then(function(result) {
var user = result.user;
//console.log(user);
document.getElementById("done").innerHTML = "OTP completed";
window.AppInventor.setWebViewString(JSON.stringify(user));
})
.catch(function(error) {
console.log(error);
document.getElementById("done").innerHTML = error;
});
}
//This function runs everytime the auth state changes. Use to verify if the user is logged in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log("USER LOGGED IN");
} else {
// No user is signed in.
console.log("USER NOT LOGGED IN");
}
});
</script>
</body>
</html>
and the link will be added to the blocks above to view the phone verification on the app
You place your html file in the app assets (media folder)
Use http://localhost/yourhtmlfile.html to open the file in a webviewer
it worked but still didnt receive the verification code on the phone
did you try it lately to make sure that is the firebase still free or no longer free?
Not sure what is going on, the test with the demo number works OK so it seems the script is still working (but the demo doesn't actually send an sms.)
Firebase appears to have locked me out now, due to live testing, so will have to come back to this later.
1 Like
Figured it out.
Tested the html (loaded onto server) in Chrome on my device and it worked!
Seems newer restrictions (unknown to me) now prevent the native webviewer working by itself.
Add the webviewextra extension, and it should then work. On first test I had to press "SIGN IN WITH PHONE" twice to get the recaptcha to come up.
Look at my blocks above.
I generally set the webviewer to webviewextra in the Screen.Initialise block
Then in the button event set the url. You are not setting the url ?
The questions are:
"Are you getting an SMS ?"
"Are you entering the otp provided in the SMS into the web page?"
"is this creating a user in your firebase console authenticated users page?"
I have removed your firebase config and your aia (which contains your firebase config), you should not post all of that here.
Your aia file looks OK.
Have you tested with a dummy number ? (this will not send an sms but will test everything else)
Have you tested with a real number ?
i added my number
and tested it in the app but didnt work
did you test a real number in my aia file?
No, of course not.
Do not add your own number in the test area, this will not work.
Use a number like the one provided by default.
After entering the phone number in the app, you enter the otp (verification code)
This should create a new user.
To test your own phone number, enter it in the app, do the recaptcha, wait for the sms with the otp
This is a tested number added in the site not real
It showed the data like that so is it working well but I didn't receive an sms in my real number
Tonight, for me, the test number works OK, but a real number does not, not even in the mobile Chrome.
I will need to go over the javascript again, against the guidance from Firebase.
Update 2025-04
There have been some changes to how Firebase operates:
- html and javascript completely overhauled to get this thing working reliably
- requirement to host the html page on an
https://server - works best when using the webviewextra extension along with the webviewer
See the first post for more details and downloads.
i tried that aia file with adding my firebase data and the host
http://localhost/newfbotp.html
but getting that error
You didn't read the guidance...
localhost should work for the fictional numbers set in the console, but not for real numbers.
the warning in the firebase To prevent abuse, new projects currently have a sent SMS daily quota of 10/day. To increase this quota, please add a billing account to the project.
as there is limit 10/day then why it says
{"error":{"code":400,"message":"BILLING_NOT_ENABLED","errors":[{"message":"BILLING_NOT_ENABLED","domain":"global","reason":"invalid"}]}}