How to implement 2FA in Laravel with Inertia.js and Vue 3?

Question

I am working on a project using Laravel, Inertia.js, and Vue 3, and I want to implement two-factor authentication (2FA) for user login. My setup includes a MySQL database with a users table that contains a column 2fa_enabled to indicate whether 2FA is required for a user.

Here is the workflow I would like to achieve:

1. When a user logs in for the first time, 2FA is required if 2fa_enabled is set to true.
2. The system sends a verification code to the user's mobile number and email.
3. The user enters the code, which is then verified.
4. If the code is correct, the system saves the code in the database and redirects the user to the dashboard.
5. If the code is incorrect, the user sees an error message.

I've encountered some issues during implementation, and I'm not sure how to properly set up the verification code generation and handling process. I've tried using Firebase for sending SMS codes and handling ReCaptcha verification, but I'm running into the following issues:

Uncaught (in promise) ReferenceError: Firebase is not defined Recaptcha verification failures
Handling code verification in my Vue 3 component

I would appreciate any guidance on how to:

• Properly generate and handle 2FA codes using Firebase. Manage ReCaptcha verification.
• Handle code verification in my Vue 3 component.

Here is how I'm setting up the ReCaptcha verifier and Firebase initialization:

import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const recaptchaContainer = document.getElementById('recaptcha-container');
const recaptchaVerifier = new RecaptchaVerifier(recaptchaContainer, {
    size: 'invisible',
    callback: (response) => {
        console.log('reCAPTCHA resolved');
    },
    'expired-callback': () => {
        console.log('reCAPTCHA expired');
    }
}, auth);

async function getCode(phoneNumber) {
    try {
        const confirmationResult = await auth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
        console.log('Code sent:', confirmationResult);
    } catch (error) {
        console.error('Error during sign-in with phone number:', error);
        console.error('Error code:', error.code);
    }
}

// Example usage
getCode('+91112223334');

Answer 1

The error you're encountering likely stems from the fact that Firebase Authentication methods, such as signInWithPhoneNumber(), are asynchronous, and you're attempting to use them before Firebase has finished initializing.

To fix this issue, you should ensure that Firebase has finished initializing before attempting to use any Firebase Authentication methods. You can achieve this by waiting for the Firebase app initialization to complete before calling getCode().

Here's how you can modify your code to ensure Firebase initialization is complete before calling getCode():

import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// Wait for Firebase initialization to complete
app.then(() => {
    const recaptchaContainer = document.getElementById('recaptcha-container');
    const recaptchaVerifier = new RecaptchaVerifier(recaptchaContainer, {
        size: 'invisible',
        callback: (response) => {
            console.log('reCAPTCHA resolved');
        },
        'expired-callback': () => {
            console.log('reCAPTCHA expired');
        }
    }, auth);

    async function getCode(phoneNumber) {
        try {
            const confirmationResult = await auth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
            console.log('Code sent:', confirmationResult);
        } catch (error) {
            console.error('Error during sign-in with phone number:', error);
            console.error('Error code:', error.code);
        }
    }

    // Example usage
    getCode('+91112223334');
}).catch(error => {
    console.error('Firebase initialization error:', error);
});

By waiting for the app promise to resolve, you ensure that Firebase is fully initialized before attempting to use Firebase Authentication methods. This should resolve the error you're encountering.