I am currently in the process of developing a new Vue.js application using the Webpack template. Within this app, I have implemented a /sign-in route that displays a component named SignIn. To authenticate users, I am utilizing Firebase Phone Number authentication through the Firebase SDK.
My approach involved installing Firebase with npm install firebase, and setting it up in my main.js file as shown below:
/src/main.js
import firebase from 'firebase';
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
// Initialize Firebase
const config = {
apiKey: 'MY_API_KEY',
authDomain: 'MY_PROJECT.firebaseapp.com',
databaseURL: 'https://MY_PROJECT.firebaseio.com',
projectId: 'MY_PROJECT_ID',
storageBucket: 'MY_PROJECT.appspot.com',
messagingSenderId: 'MY_SENDER_ID',
};
firebase.initializeApp(config);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
});
The credentials have been hidden for security reasons in the above example.
When a user is on the /sign-in page, they will encounter the following component:
/src/components/pages/SignIn.vue
<template>
<div>
<!-- Number Input Form -->
<div v-if="showNumberInput">
<form v-on:submit.prevent>
<div class="form-group">
<input type="text" class="form-control form-control-lg" v-model="numberInputForm.number" placeholder="Phone number" required>
</div>
<div class="form-group">
<button type="submit" id="get-sign-in-code" class="btn btn-block btn-lg success theme-accent">{{ getSignInCodeButton.text }}</button>
</div>
</form>
</div>
<!-- SMS Verification Form -->
<div v-if="showCodeInput">
<form>
<div class="form-group">
<input type="text" class="form-control form-control-lg" value="9944" placeholder="Verification Code" required>
</div>
<div class="form-group">
<a href="javascript:void" class="btn btn-block btn-lg success theme-accent" @click="signIn">{{ signInButton.text }}</a>
</div>
</form>
</div>
</div>
</template>
<script>
import firebase from 'firebase';
export default {
name: 'SignIn',
data() {
return {
// UI States
showNumberInput: true,
showCodeInput: false,
// Forms
numberInputForm: {
number: '',
},
// Buttons
getSignInCodeButton: {
text: 'Get sign in code',
},
signInButton: {
text: 'Sign in',
},
};
},
mounted() {
const self = this;
// Start Firebase invisible reCAPTCHA verifier
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('get-sign-in-code', {
size: 'invisible',
callback: (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
self.sendSMS();
}
});
},
methods: {
/**
* Sends the user an SMS-verification code using Firebase auth
*
* @see https://firebase.google.com/docs/auth/web/phone-auth
*/
sendSMS() {
const self = this;
self.getSignInCodeButton = {
showSpinner: true,
text: 'Sending SMS..',
disabled: true,
};
},
/**
* Authenticates the user with Firebase auth
*/
signIn() {
// Redirect the user to the authenticated page
},
},
};
</script>
You can observe that there are two forms within the template - one designed to collect the phone number, and another that prompts the user to enter the verification code. The visibility toggling for these forms has been programmed accordingly.
Upon mounting the component, the Firebase reCAPTCHA verifier is called by passing the ID of the submit button ("get-sign-in-code" in this case). However, upon clicking the button, no action occurs, and there is no evidence of the reCAPTCHA XHR in the network tab of the dev tools.
Could this be due to the fact that the button is dynamically inserted into the DOM, causing
firebase.auth.RecaptchaVerifier()UPDATE
To address the issue, I made adjustments to the mounted() event by adding the following lines:
window.recaptchaVerifier.render().then((widgetId) => {
window.recaptchaWidgetId = widgetId;
});
Here is the modified mounted() method:
mounted() {
const self = this;
// Start Firebase invisible reCAPTCHA verifier
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('get-sign-in-code', {
size: 'invisible',
callback: () => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
self.sendSMS();
},
});
window.recaptchaVerifier.render().then((widgetId) => {
window.recaptchaWidgetId = widgetId;
});
},
This adjustment led to a new challenge - the script now introduces a randomly positioned "Protected by reCAPTCHA" badge that I wish to eliminate. Is there a way to resolve this while ensuring the script functions without displaying the badge?