Vue.js Add 2FA for Higher Security Scenarios

Security is no longer a "nice-to-have"; it’s a must-have. If you’ve ever had a moment of panic while trying to log into your email only to realize you need a verification code, you’ve already experienced two-factor authentication (2FA) in action. In this tutorial, we’ll roll up our sleeves and build a Vue.js frontend that integrates 2FA for higher security scenarios. We’ll dive into concepts, best practices, and of course, hands-on coding.

What is 2FA and Why Do We Need It?

Two-Factor Authentication (2FA) is like having two locks on your door. Even if someone has the key (your password), they also need the secret code sent to your phone or generated by an app. For developers, this means implementing both backend and frontend logic to ensure security without sacrificing usability.

• First Factor: Something you know (your password).
• Second Factor: Something you have (a temporary code from an authenticator app like Google Authenticator or SMS).

Vue.js is the perfect companion for implementing 2FA on the frontend, as it can handle conditional UIs, token management, and smooth user experience.

Step 1: Backend Preparation (Quick Overview)

Before Vue.js comes into play, your backend should be ready to:

1. Generate a secret for the user (e.g., using speakeasy in Node.js).
2. Provide a QR code for the authenticator app to scan (using qrcode library).
3. Validate codes entered by the user.

// Example backend (Node.js + Express + Speakeasy)
const speakeasy = require("speakeasy");
const qrcode = require("qrcode");

app.post("/2fa/setup", (req, res) => {
  const secret = speakeasy.generateSecret({ length: 20 });
  qrcode.toDataURL(secret.otpauth_url, (err, data) => {
    res.json({ secret: secret.base32, qr: data });
  });
});

app.post("/2fa/verify", (req, res) => {
  const { token, secret } = req.body;
  const verified = speakeasy.totp.verify({
    secret,
    encoding: "base32",
    token
  });
  res.json({ verified });
});

With this backend in place, we can now focus on the Vue.js frontend implementation.

Step 2: Vue.js Project Setup

If you haven’t already, set up a Vue 3 project with Vite:

npm init vue@latest vue-2fa-app
cd vue-2fa-app
npm install
npm run dev

We’ll also need axios to communicate with our backend:

npm install axios

Step 3: Creating a 2FA Setup Component

This component will allow users to enable 2FA by scanning a QR code and entering a generated token from their authenticator app.

<template>
  <div>
    <h2>Setup Two-Factor Authentication</h2>

    <div v-if="qrCode">
      <img :src="qrCode" alt="Scan this QR code with your Authenticator app" />
      <p>Enter the 6-digit code from your app:</p>
      <input v-model="token" placeholder="123456" />
      <button @click="verifyToken">Verify</button>
    </div>

    <div v-else>
      <button @click="generateSecret">Enable 2FA</button>
    </div>

    <p v-if="verificationStatus === true">✅ 2FA Enabled Successfully!</p>
    <p v-if="verificationStatus === false">❌ Invalid Code, Try Again.</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const qrCode = ref(null);
const secret = ref(null);
const token = ref("");
const verificationStatus = ref(null);

const generateSecret = async () => {
  const res = await axios.post("http://localhost:3000/2fa/setup");
  secret.value = res.data.secret;
  qrCode.value = res.data.qr;
};

const verifyToken = async () => {
  const res = await axios.post("http://localhost:3000/2fa/verify", {
    token: token.value,
    secret: secret.value
  });
  verificationStatus.value = res.data.verified;
};
</script>

Step 4: Login Flow with 2FA

Now that users can set up 2FA, let’s integrate it into the login process. After a successful username/password check, the server will ask for the 2FA code if enabled.

<template>
  <div>
    <h2>Login</h2>

    <div v-if="!requires2FA">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <button @click="login">Login</button>
    </div>

    <div v-else>
      <p>Enter 2FA Code</p>
      <input v-model="token" placeholder="123456" />
      <button @click="verify2FA">Verify</button>
    </div>

    <p v-if="loginStatus">{{ loginStatus }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const username = ref("");
const password = ref("");
const token = ref("");
const requires2FA = ref(false);
const loginStatus = ref("");

const login = async () => {
  // Step 1: Check credentials
  const res = await axios.post("http://localhost:3000/login", {
    username: username.value,
    password: password.value,
  });

  if (res.data.requires2FA) {
    requires2FA.value = true;
  } else {
    loginStatus.value = "✅ Logged in successfully!";
  }
};

const verify2FA = async () => {
  const res = await axios.post("http://localhost:3000/2fa/verify", {
    token: token.value,
    secret: res.data.secret, // should come from backend
  });

  if (res.data.verified) {
    loginStatus.value = "✅ Logged in with 2FA!";
  } else {
    loginStatus.value = "❌ Invalid 2FA code.";
  }
};
</script>

Step 5: Real-World Considerations

• Token Expiration: TOTP codes expire every 30 seconds.
• Recovery Codes: Provide backup codes in case the user loses their device.
• Optional 2FA: Some apps allow toggling 2FA from account settings.
• Secure Secret Storage: Never expose the 2FA secret directly in the frontend. In production, store it securely on the backend.

Full Real-World Example Code (Vue.js)

Here’s how a simplified app structure might look:

// main.js
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

<template>
  <div>
    <h1>Vue.js 2FA Demo</h1>
    <Setup2FA />
    <LoginWith2FA />
  </div>
</template>

<script setup>
import Setup2FA from "./components/Setup2FA.vue";
import LoginWith2FA from "./components/LoginWith2FA.vue";
</script>

And with this, you’ve got a real-world Vue.js 2FA workflow working from setup to login.

Final Thoughts

Adding 2FA in Vue.js might seem like a daunting task at first, but once broken down, it’s just about handling an extra verification step in your login process. From my own projects, I can say this small step adds a massive security layer. If your app stores sensitive user data, 2FA is not optional — it’s necessary.

So go ahead, implement it, and give your users that extra peace of mind knowing their accounts are doubly secure.