I stumble on a Project to create a flask web app that required to use Firebase Phone SMS OTP as login, I researched for days to find python package for the OTP login but most of which would not include Phone SMS OTP only email/password login and others will not be suitable for the project. I finally find a solution my self ; this solution will use the JavaScript code snippets from Firebase console documentation. To not keep explaining how I come by the solution lest dive.
Steps
1. To Begin with you need to register your project on firebase console [here](https://console.firebase.google.com) in the [overview](https://console.firebase.google.com/u/0/project/e-voting-c44f3/overview) page add an App , this solution is for webapp you will choose webapp .
3. After Creating your App navigate to [Authentication](https://console.firebase.google.com/u/0/project/e-voting-c44f3/authentication/providers) ,click on sign-in method
4. Add new Phone Provider and make sure you enabled it
5. In same Authentication navigate to Settings/SMS region policy ,click on allow and choose your region
6. Now click on Project Overview and select settings to find your firebaseConfig
7. Now create firebaseauth.js file in static/js folder replace the firebaseConfig In the following code below with your project firebaseConfig
```
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js';
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js';
const firebaseConfig = {
apiKey: "AIzaSyDjO6q1dv19BW_c_fFTSz31wH2RVkc",
authDomain: "app-c44f3.firebaseapp.com",
projectId: "app-c44f3",
storageBucket: "app-c44f3.appspot.com",
messagingSenderId: "380997366285",
appId: "1:380257366285:web:05f4184c8ns6e82139664044",
measurementId: "G-PCRue8NEWQ"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
// Set up reCAPTCHA
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved - will proceed with submit function
console.log("reCAPTCHA solved");
}
}, auth);
document.getElementById('send-otp').addEventListener('click', () => {
const value = document.getElementById('phone-number').value;
const phoneNumber= `+233`+value
signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier)
.then(confirmationResult => {
window.confirmationResult = confirmationResult;
document.getElementById('otp-section').style.display = 'block';
})
.catch(error => {
console.error("SMS not sent", error);
});
});
document.getElementById('verify-otp').addEventListener('click', () => {
const otp = document.getElementById('otp').value;
window.confirmationResult.confirm(otp)
.then(result => {
console.log(result)
const phoneNumber= result.user.phoneNumber
alert("Phone number verified!");
//console.log(name)
window.location = `http://127.0.0.1:5000/pathtodesiredpage`;
})
.catch(error => {
console.log(error)
alert("Invalid OTP");
});
});
```
6. Add the supporting login form code into your tamplate html file
```