Firebase auth with PHP, am i using it right? is it secure? - security

Question

So I have a form and in the form i ask the user to enter his phone number to be verified, and then his information will be inserted into DB with PHP queries.
I used this code:
var firebaseConfig = {
apiKey: "******",
authDomain: "*****",
databaseURL: "https://****",
projectId: "*****",
storageBucket: "",
messagingSenderId: "*****",
appId: "1:****:*****"
};
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: "normal",
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);
})
.catch(function(error) {
console.log(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");
}
});
to verify the user's phone number. and in the form i used this :
<div class="verifyCon">
<div class="SMSBox Padding2">
<div>
<span class="Text3"> phone number </span>
</div>
<div>
<input class="InptText" type="tel" id="phoneNumber" maxlength="10" minlength="10" name="uphone" required>
</div>
<div>
<button type="button" class="SMSBut" onclick="submitPhoneNumberAuth()">
<h2 id="sign-in-button" class="Text2"> send </h2>
</button>
</div>
</div>
<div class="SMSBox Padding2">
<div>
<span class="Text3"> code </span>
</div>
<div>
<input class="InptText" type="text" id="code" name="code" maxlength="6" minlength="6" required>
</div>
<div>
<button type="button" class="SMSBut" onclick="submitPhoneNumberAuthCode()">
<h2 id="check-in-button" class="Text2"> check </h2>
</button>
</div>
</div>
</div>
My questions:
Is it secure? can the user get configuration info from the file? if so how to secure it?
Is there a way to make sure the user won't just submit the form without verifying the phone number?
Do I need to add ReCaptcha in the form page, or the one with auth will be enough?
I'm not good with JavaScript, so please any suggestions will be appreciated.