feat: use nonce to ascertain that same device is verifying email

Author: karrui

apps/web/src/app/(public)/sign-in/_components/wizard/email/email-step.tsx

@@ -36,6 +36,12 @@ export const EmailStep = ({ onNext }: EmailStepProps) => {
     trpc.auth.email.login.mutationOptions({
       onSuccess: onNext,
       onError: (error) => setError('email', { message: error.message }),
+      trpc: {
+        context: {
+          // Need to set session data for nonce
+          skipStreaming: true,
+        },
+      },
     }),
   )
 

apps/web/src/app/(public)/sign-in/_components/wizard/email/verification-step.tsx

@@ -56,6 +56,12 @@ export const VerificationStep = () => {
   const resendOtpMutation = useMutation(
     trpc.auth.email.login.mutationOptions({
       onError: (error) => setError('token', { message: error.message }),
+      trpc: {
+        context: {
+          // Need to set session data for nonce
+          skipStreaming: true,
+        },
+      },
     }),
   )
 

apps/web/src/server/api/routers/auth/auth.email.router.ts

@@ -1,3 +1,5 @@
+import { randomUUID } from 'node:crypto'
+import { TRPCError } from '@trpc/server'
 import z from 'zod'
 
 import { emailLogin, emailVerifyOtp } from '~/server/modules/auth/auth.service'
@@ -19,19 +21,36 @@ export const emailAuthRouter = createTRPCRouter({
         otpPrefix: z.string().length(OTP_PREFIX_LENGTH),
       }),
     )
-    .mutation(async ({ input }) => {
-      const { email, otpPrefix } = await emailLogin(input.email)
+    .mutation(async ({ input, ctx }) => {
+      const nonce = randomUUID()
+      const { email, otpPrefix } = await emailLogin({
+        email: input.email,
+        nonce,
+      })
+
+      ctx.session.nonce = nonce
+      await ctx.session.save()
       return {
         email,
         otpPrefix,
       }
     }),
   verifyOtp: publicProcedure
     .input(emailVerifyOtpSchema)
-    .mutation(async ({ input, ctx }) => {
-      await emailVerifyOtp(input)
-      const user = await upsertUserAndAccountByEmail(input.email)
+    .mutation(async ({ input: { email, token }, ctx }) => {
+      const nonce = ctx.session.nonce
+      // Ensure nonce exists in session
+      if (!nonce) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message:
+            'Something went wrong. Please request for a new OTP before retrying.',
+        })
+      }
 
+      await emailVerifyOtp({ email, token, nonce })
+      const user = await upsertUserAndAccountByEmail(email)
+      ctx.session.nonce = undefined
       ctx.session.userId = user.id
       await ctx.session.save()
       return user

apps/web/src/server/modules/auth/auth.service.ts

@@ -10,23 +10,29 @@ import { getBaseUrl } from '~/utils/get-base-url'
 import { sendMail } from '../mail/mail.service'
 import { createAuthToken, createVfnPrefix, isValidToken } from './auth.utils'
 
-export const emailLogin = async (email: string) => {
-  const { token, hashedToken } = createAuthToken(email)
+export const emailLogin = async ({
+  email,
+  nonce,
+}: {
+  email: string
+  nonce: string
+}) => {
+  const { token, hashedToken } = createAuthToken({ email, nonce })
   const otpPrefix = createVfnPrefix()
 
   const url = new URL(getBaseUrl())
 
   const { issuedAt } = await db.verificationToken.upsert({
     where: {
-      identifier: email,
+      identifier: nonce,
     },
     update: {
       token: hashedToken,
       attempts: 0,
       issuedAt: new Date(),
     },
     create: {
-      identifier: email,
+      identifier: nonce,
       token: hashedToken,
       issuedAt: new Date(),
     },
@@ -57,15 +63,17 @@ export const emailLogin = async (email: string) => {
 export const emailVerifyOtp = async ({
   email,
   token,
+  nonce,
 }: {
   email: string
   token: string
+  nonce: string
 }) => {
   try {
     // Not in transaction, because we do not want it to rollback
     const hashedToken = await db.verificationToken.update({
       where: {
-        identifier: email,
+        identifier: nonce,
       },
       data: {
         attempts: {
@@ -87,7 +95,7 @@ export const emailVerifyOtp = async ({
       add(hashedToken.issuedAt, { seconds: env.OTP_EXPIRY }) < new Date()
     if (
       hasExpired ||
-      !isValidToken({ token, email, hash: hashedToken.token })
+      !isValidToken({ token, email, nonce, hash: hashedToken.token })
     ) {
       throw new TRPCError({
         code: 'BAD_REQUEST',
@@ -98,7 +106,7 @@ export const emailVerifyOtp = async ({
     // Valid token, delete record to prevent reuse
     return db.verificationToken.delete({
       where: {
-        identifier: email,
+        identifier: nonce,
       },
     })
   } catch (error) {
@@ -109,7 +117,7 @@ export const emailVerifyOtp = async ({
     ) {
       throw new TRPCError({
         code: 'BAD_REQUEST',
-        message: 'Invalid login email',
+        message: 'Invalid login email or missing nonce',
       })
     }
     throw error

apps/web/src/server/modules/auth/auth.utils.ts

@@ -14,28 +14,44 @@ export const createVfnPrefix = customAlphabet(
   OTP_PREFIX_LENGTH,
 )
 
-const createTokenHash = (token: string, email: string) => {
-  return scryptSync(token, email, 64).toString('base64')
+const createTokenHash = ({
+  token,
+  email,
+  nonce,
+}: {
+  token: string
+  email: string
+  nonce: string
+}) => {
+  return scryptSync(`${nonce}${token}`, email, 64).toString('base64')
 }
 
 export const isValidToken = ({
   token,
   email,
   hash,
+  nonce,
 }: {
   token: string
   email: string
   hash: string
+  nonce: string
 }) => {
   return timingSafeEqual(
     Buffer.from(hash),
-    Buffer.from(createTokenHash(token, email)),
+    Buffer.from(createTokenHash({ token, email, nonce })),
   )
 }
 
-export const createAuthToken = (email: string) => {
+export const createAuthToken = ({
+  email,
+  nonce,
+}: {
+  email: string
+  nonce: string
+}) => {
   const token = createVfnToken()
-  const hashedToken = createTokenHash(token, email)
+  const hashedToken = createTokenHash({ token, email, nonce })
 
   return {
     token,

apps/web/src/server/session.ts

@@ -5,6 +5,8 @@ import { getIronSession } from 'iron-session'
 import { env } from '~/env'
 
 export interface SessionData {
+  // Used to verify that the same user that started the authentication flow is the one verifying it
+  nonce?: string
   userId?: string
   // Add other session data as needed
 }