feat(auth): Add OTP authentication

Author: igorjacauna

.gitignore

@@ -19,3 +19,5 @@ dist
 
 # VSCode
 .vscode/
+
+service-account.json

.playground/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
-})
+  firebase: {
+    authCollection: 'auth-otp',
+    otpTTL: 1000 * 60 * 5, // 5 minutes
+  },
+});

.playground/app.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { getAuth, signOut, signInWithCustomToken } from 'firebase/auth';
+
+const otp = ref('');
+const email = ref('');
+const api = getApi();
+const user = useCurrentUser();
+function sendOTP() {
+  api('/api/auth/otp', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      email: email.value,
+    }),
+  });
+}
+
+function checkOTP() {
+  api('/api/auth/otp/verify', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      otp: otp.value,
+      email: email.value,
+    }),
+  })
+    .then(({ token }) => {
+      signInWithCustomToken(getAuth(), token)
+        .then((userCredential) => {
+          console.log(userCredential);
+        });
+    });
+}
+
+function logout() {
+  signOut(getAuth());
+}
+</script>
+<template>
+  <div>
+    <template v-if="user">
+      <h1>Welcome, {{ user.email }}</h1>
+      <button @click="logout()">
+        Logout
+      </button>
+    </template>
+    <template v-else>
+      <form @submit.prevent="sendOTP">
+        <input
+          v-model="email"
+          type="text"
+          placeholder="email"
+        >
+        <button type="submit">
+          Send OTP
+        </button>
+      </form>
+      <form @submit.prevent="checkOTP">
+        <input
+          v-model="otp"
+          type="text"
+          placeholder="OTP"
+        >
+        <button>Check OTP</button>
+      </form>
+    </template>
+  </div>
+</template>

.playground/nuxt.config.ts

@@ -1,12 +1,13 @@
-import { fileURLToPath } from 'node:url'
+import { fileURLToPath } from 'node:url';
 
 export default defineNuxtConfig({
   extends: ['..'],
   modules: ['@nuxt/eslint'],
+  compatibilityDate: '2024-12-16',
   eslint: {
     config: {
       // Use the generated ESLint config for lint root project as well
-      rootDir: fileURLToPath(new URL('..', import.meta.url))
-    }
-  }
-})
+      rootDir: fileURLToPath(new URL('..', import.meta.url)),
+    },
+  },
+});

.playground/server/api/auth/otp/index.post.ts

@@ -0,0 +1,6 @@
+export default defineSecuredEventHandler(async (event) => {
+  const { email } = await readBody<{ email: string }>(event);
+  await getOTP(email, event);
+  setResponseStatus(event, 201);
+  return { message: 'OTP sent' };
+});

.playground/server/api/auth/otp/verify.post.ts

@@ -0,0 +1,4 @@
+export default defineSecuredEventHandler(async (event) => {
+  const { email, otp } = await readBody<{ email: string; otp: string }>(event);
+  return authOTP(email, otp, event);
+});

app.config.ts

@@ -1,14 +1,16 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'Hello from Nuxt layer',
+  firebase: {
+    authCollection: 'auth',
+    otpTTL: 1000 * 60 * 5, // 5 minutes
   },
 });
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    myLayer?: {
+    firebase?: {
       /** Project name */
-      name?: string
+      authCollection?: string
+      otpTTL?: number
     }
   }
 }

server/utils/auth/firebase.ts

@@ -0,0 +1,68 @@
+import type { UserRecord } from 'firebase-admin/auth';
+import { getAuth } from 'firebase-admin/auth';
+import type { AppConfigInput } from 'nuxt/schema';
+import type { H3Event } from 'h3';
+
+export async function getOTP(email: string, event: H3Event) {
+  const config = useAppConfig(event);
+  const user = await getUserByEmail(email);
+  return generateOTP(user, config);
+}
+
+export async function authOTP(email: string, otp: string, event: H3Event) {
+  const config = useAppConfig(event);
+  const user = await getAuth().getUserByEmail(email);
+  await checkOtp(user, otp, config);
+
+  await getAuth().updateUser(user.uid, {
+    emailVerified: true,
+  });
+  const token = await getAuth().createCustomToken(user.uid);
+
+  return { token };
+};
+
+// eslint-disable-next-line complexity
+async function checkOtp(user: UserRecord, otp: string, config: AppConfigInput) {
+  const doc = await documentsCollection(
+    config.firebase?.authCollection || 'auth',
+  ).doc(user.uid).get();
+  if (!doc.exists) throw createError({
+    status: 404,
+    statusMessage: 'OTP not found',
+  });
+
+  const data = doc.data();
+
+  if (!data) throw createError({
+    status: 404,
+    statusMessage: 'OTP data not found',
+  });
+
+  if (Number(data.otp) !== Number(otp) || new Date(data.ttl).getTime() < Date.now()) {
+    throw createError({
+      status: 401,
+      statusMessage: 'Invalid OTP',
+    });
+  }
+  await doc.ref.delete();
+}
+
+async function getUserByEmail(email: string) {
+  const user = await getAuth().getUserByEmail(email).catch(() => null);
+  if (user) return user;
+  return getAuth().createUser({
+    email,
+    emailVerified: false,
+  });
+}
+
+// eslint-disable-next-line complexity
+async function generateOTP(user: UserRecord, config: AppConfigInput) {
+  const otp = Math.floor(100000 + Math.random() * 900000);
+  await documentsCollection(config.firebase?.authCollection || 'auth').doc(user.uid).set({
+    otp,
+    ttl: Date.now() + (config.firebase?.otpTTL || 1000 * 60 * 5),
+  });
+  return otp;
+}

server/utils/auth/index.ts

@@ -0,0 +1 @@
+export * from './firebase';

server/utils/backend/firebase.ts

@@ -1,11 +1,9 @@
-import * as admin from 'firebase-admin';
+import admin from 'firebase-admin';
 
 export async function initializeApp() {
   if (import.meta.dev && process.env.GOOGLE_APPLICATION_CREDENTIALS) {
     return admin.initializeApp({
-      credential: admin.credential.cert(
-        process.env.GOOGLE_APPLICATION_CREDENTIALS,
-      ),
+      credential: admin.credential.cert(process.env.GOOGLE_APPLICATION_CREDENTIALS),
     });
   }
   return admin.initializeApp();