chore: linting/formatting

Author: zhongliang02

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

@@ -1,10 +1,13 @@
 'use client'
 
-import type { Dispatch, PropsWithChildren, SetStateAction } from 'react';
-import { useCallback, useRef} from 'react'
-import { createContext, useContext, useState } from 'react'
+import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'
+import { createContext, useCallback, useContext, useRef, useState } from 'react'
 import { useInterval } from 'usehooks-ts'
-import { createPkceChallenge, createPkceVerifier } from "~/server/modules/auth/auth.pkce";
+
+import {
+  createPkceChallenge,
+  createPkceVerifier,
+} from '~/server/modules/auth/auth.pkce'
 
 interface SignInState {
   timer: number
@@ -54,16 +57,16 @@ export const SignInWizardProvider = ({
   const [timer, setTimer] = useState(delayForResendSeconds)
 
   const challengeToVerifierMap = useRef(new Map<string, string>())
-  const newChallenge = useCallback(()=>{
+  const newChallenge = useCallback(() => {
     const verifier = createPkceVerifier()
     const challenge = createPkceChallenge(verifier)
     challengeToVerifierMap.current.set(challenge, verifier)
     return challenge
   }, []) // stable reference no deps
-  const getVerifier = useCallback((challenge: string)=>{
+  const getVerifier = useCallback((challenge: string) => {
     return challengeToVerifierMap.current.get(challenge)
   }, []) // stable reference no deps
-  const clearVerifierMap = useCallback(()=>{
+  const clearVerifierMap = useCallback(() => {
     challengeToVerifierMap.current.clear()
   }, []) // stable reference no deps
 
@@ -85,7 +88,7 @@ export const SignInWizardProvider = ({
         resetTimer,
         newChallenge,
         getVerifier,
-        clearVerifierMap
+        clearVerifierMap,
       }}
     >
       {children}

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

@@ -8,7 +8,11 @@ import { VerificationStep } from './verification-step'
 export const EmailFlow = () => {
   const { setVfnStepData, vfnStepData } = useSignInWizard()
 
-  const handleOnSuccessEmail = ({ email, otpPrefix, codeChallenge }: VfnStepData) => {
+  const handleOnSuccessEmail = ({
+    email,
+    otpPrefix,
+    codeChallenge,
+  }: VfnStepData) => {
     setVfnStepData({ email, otpPrefix, codeChallenge })
   }
 

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

@@ -7,21 +7,21 @@ import { Controller, useForm } from 'react-hook-form'
 
 import { TextField } from '@acme/ui/text-field'
 
-import type { VfnStepData } from '../context';
-import { useSignInWizard } from '../context'
+import type { VfnStepData } from '../context'
 import { useTRPC } from '~/trpc/react'
 import { emailSignInSchema } from '~/validators/auth'
+import { useSignInWizard } from '../context'
 
 interface EmailStepProps {
   onNext: ({ email, otpPrefix, codeChallenge }: VfnStepData) => void
 }
 export const EmailStep = ({ onNext }: EmailStepProps) => {
   const { newChallenge } = useSignInWizard()
   const { handleSubmit, setError, control } = useForm({
-    resolver: zodResolver(emailSignInSchema.omit({codeChallenge: true})),
+    resolver: zodResolver(emailSignInSchema.omit({ codeChallenge: true })),
     defaultValues: {
       email: '',
-    }
+    },
   })
 
   const [queryError] = useQueryState('error', { defaultValue: '' })
@@ -36,7 +36,7 @@ export const EmailStep = ({ onNext }: EmailStepProps) => {
 
   const loginMutation = useMutation(
     trpc.auth.email.login.mutationOptions({
-      onSuccess: (res, req)=>{
+      onSuccess: (res, req) => {
         return onNext({
           email: res.email,
           otpPrefix: res.otpPrefix,
@@ -50,7 +50,9 @@ export const EmailStep = ({ onNext }: EmailStepProps) => {
   return (
     <form
       noValidate
-      onSubmit={handleSubmit(({ email }) => loginMutation.mutate({ email, codeChallenge: newChallenge() }))}
+      onSubmit={handleSubmit(({ email }) =>
+        loginMutation.mutate({ email, codeChallenge: newChallenge() }),
+      )}
       className="flex flex-1 flex-col gap-4"
     >
       <Controller

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

@@ -20,7 +20,15 @@ export const VerificationStep = () => {
   const [showOtpDelayMessage, setShowOtpDelayMessage] = useState(false)
   const trpc = useTRPC()
 
-  const { vfnStepData, timer, setVfnStepData, resetTimer, newChallenge, getVerifier, clearVerifierMap } = useSignInWizard()
+  const {
+    vfnStepData,
+    timer,
+    setVfnStepData,
+    resetTimer,
+    newChallenge,
+    getVerifier,
+    clearVerifierMap,
+  } = useSignInWizard()
   const codeVerifier = getVerifier(vfnStepData?.codeChallenge ?? '') ?? ''
 
   useInterval(
@@ -30,7 +38,7 @@ export const VerificationStep = () => {
   )
 
   const { control, handleSubmit, resetField, setFocus, setError } = useForm({
-    resolver: zodResolver(emailVerifyOtpSchema.omit({codeVerifier: true})),
+    resolver: zodResolver(emailVerifyOtpSchema.omit({ codeVerifier: true })),
     defaultValues: {
       email: vfnStepData?.email ?? '',
       token: '',
@@ -70,7 +78,7 @@ export const VerificationStep = () => {
           setVfnStepData({
             email: res.email,
             otpPrefix: res.otpPrefix,
-            codeChallenge: req.codeChallenge
+            codeChallenge: req.codeChallenge,
           })
           resetField('token')
           setFocus('token')
@@ -86,7 +94,9 @@ export const VerificationStep = () => {
   return (
     <form
       noValidate
-      onSubmit={handleSubmit(({email, token}) => verifyOtpMutation.mutate({email, token, codeVerifier}))}
+      onSubmit={handleSubmit(({ email, token }) =>
+        verifyOtpMutation.mutate({ email, token, codeVerifier }),
+      )}
       className="flex flex-1 flex-col gap-4"
     >
       <Controller

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

@@ -12,8 +12,14 @@ describe('auth.utils', () => {
       const codeChallenge1 = 'codeChallenge-1'
       const codeChallenge2 = 'codeChallenge-2'
 
-      const identifier1 = createVfnIdentifier({ email, codeChallenge: codeChallenge1 })
-      const identifier2 = createVfnIdentifier({ email, codeChallenge: codeChallenge2 })
+      const identifier1 = createVfnIdentifier({
+        email,
+        codeChallenge: codeChallenge1,
+      })
+      const identifier2 = createVfnIdentifier({
+        email,
+        codeChallenge: codeChallenge2,
+      })
 
       expect(identifier1).not.toBe(identifier2)
     })
@@ -22,18 +28,25 @@ describe('auth.utils', () => {
       const email = '[email protected]'
       const codeChallenge = 'test-codeChallenge'
 
-      const identifier1 = createVfnIdentifier({ email, codeChallenge: codeChallenge })
-      const identifier2 = createVfnIdentifier({ email, codeChallenge: codeChallenge })
-      const identifier3 = createVfnIdentifier({ email, codeChallenge: codeChallenge })
+      const identifier1 = createVfnIdentifier({
+        email,
+        codeChallenge: codeChallenge,
+      })
+      const identifier2 = createVfnIdentifier({
+        email,
+        codeChallenge: codeChallenge,
+      })
+      const identifier3 = createVfnIdentifier({
+        email,
+        codeChallenge: codeChallenge,
+      })
 
       expect(identifier1).toBe(identifier2)
       expect(identifier2).toBe(identifier3)
     })
   })
 
   describe('createVfnPrefix', () => {
-
-
     it('should only contain uppercase letters from the allowed alphabet', () => {
       const prefix = createVfnPrefix()
       const allowedChars = /^[ABCDEFGHJKLMNPQRSTUVWXYZ]+$/
@@ -70,18 +83,30 @@ describe('auth.utils', () => {
 
     it('should generate tokens of sufficient entropy', () => {
       const N = 10000
-      const tokens = Array.from({length: N}).map(()=>createAuthToken({
-        email: testEmail,
-        codeChallenge: testCodeChallenge,
-      }).token)
+      const tokens = Array.from({ length: N }).map(
+        () =>
+          createAuthToken({
+            email: testEmail,
+            codeChallenge: testCodeChallenge,
+          }).token,
+      )
 
       expect(new Set(tokens).size).toBe(N)
     })
 
     it('should generate different tokens for the same email and codeChallenge on multiple calls', () => {
-      const result1 = createAuthToken({ email: testEmail, codeChallenge: testCodeChallenge })
-      const result2 = createAuthToken({ email: testEmail, codeChallenge: testCodeChallenge })
-      const result3 = createAuthToken({ email: testEmail, codeChallenge: testCodeChallenge })
+      const result1 = createAuthToken({
+        email: testEmail,
+        codeChallenge: testCodeChallenge,
+      })
+      const result2 = createAuthToken({
+        email: testEmail,
+        codeChallenge: testCodeChallenge,
+      })
+      const result3 = createAuthToken({
+        email: testEmail,
+        codeChallenge: testCodeChallenge,
+      })
 
       expect(result1.token).not.toBe(result2.token)
       expect(result2.token).not.toBe(result3.token)
@@ -92,8 +117,14 @@ describe('auth.utils', () => {
       const email1 = '[email protected]'
       const email2 = '[email protected]'
 
-      const result1 = createAuthToken({ email: email1, codeChallenge: testCodeChallenge })
-      const result2 = createAuthToken({ email: email2, codeChallenge: testCodeChallenge })
+      const result1 = createAuthToken({
+        email: email1,
+        codeChallenge: testCodeChallenge,
+      })
+      const result2 = createAuthToken({
+        email: email2,
+        codeChallenge: testCodeChallenge,
+      })
 
       // Hashes should be different due to email being used as salt
       expect(result1.hashedToken).not.toBe(result2.hashedToken)
@@ -103,8 +134,14 @@ describe('auth.utils', () => {
       const codeChallenge1 = 'codeChallenge-1'
       const codeChallenge2 = 'codeChallenge-2'
 
-      const result1 = createAuthToken({ email: testEmail, codeChallenge: codeChallenge1 })
-      const result2 = createAuthToken({ email: testEmail, codeChallenge: codeChallenge2 })
+      const result1 = createAuthToken({
+        email: testEmail,
+        codeChallenge: codeChallenge1,
+      })
+      const result2 = createAuthToken({
+        email: testEmail,
+        codeChallenge: codeChallenge2,
+      })
 
       // Hashes should be different due to codeChallenge being part of the hash input
       expect(result1.hashedToken).not.toBe(result2.hashedToken)
@@ -114,7 +151,11 @@ describe('auth.utils', () => {
       // Generate multiple tokens to ensure consistency
       const tokens = Array.from(
         { length: 50 },
-        () => createAuthToken({ email: testEmail, codeChallenge: testCodeChallenge }).token,
+        () =>
+          createAuthToken({
+            email: testEmail,
+            codeChallenge: testCodeChallenge,
+          }).token,
       )
       const combinedString = tokens.join('')
 
@@ -150,7 +191,10 @@ describe('auth.utils', () => {
         email: testEmail,
         codeChallenge: testCodeChallenge,
       })
-      const {token: invalidToken} = createAuthToken({email: testEmail, codeChallenge: testCodeChallenge})
+      const { token: invalidToken } = createAuthToken({
+        email: testEmail,
+        codeChallenge: testCodeChallenge,
+      })
 
       const isValid = isValidToken({
         token: invalidToken,
@@ -291,13 +335,21 @@ describe('auth.utils', () => {
       ]
 
       const tokens = users.map(({ email, codeChallenge }) => {
-        const { token, hashedToken } = createAuthToken({ email, codeChallenge: codeChallenge })
+        const { token, hashedToken } = createAuthToken({
+          email,
+          codeChallenge: codeChallenge,
+        })
         return { email, codeChallenge, token, hashedToken }
       })
 
       // Verify each token is valid for its own email and codeChallenge
       tokens.forEach(({ email, codeChallenge, token, hashedToken }) => {
-        const isValid = isValidToken({ token, email, codeChallenge: codeChallenge, hash: hashedToken })
+        const isValid = isValidToken({
+          token,
+          email,
+          codeChallenge: codeChallenge,
+          hash: hashedToken,
+        })
         expect(isValid).toBe(true)
       })
 
@@ -344,10 +396,20 @@ describe('auth.utils', () => {
 
       // But each token should still work with its own codeChallenge
       expect(
-        isValidToken({ token: token1, email, codeChallenge: codeChallenge1, hash: hash1 }),
+        isValidToken({
+          token: token1,
+          email,
+          codeChallenge: codeChallenge1,
+          hash: hash1,
+        }),
       ).toBe(true)
       expect(
-        isValidToken({ token: token2, email, codeChallenge: codeChallenge2, hash: hash2 }),
+        isValidToken({
+          token: token2,
+          email,
+          codeChallenge: codeChallenge2,
+          hash: hash2,
+        }),
       ).toBe(true)
     })
   })

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

@@ -1,20 +1,21 @@
-import { createHash } from 'crypto';
-import { customAlphabet } from "nanoid";
-import { PKCE_LENGTH } from "~/validators/auth";
+import { createHash } from 'crypto'
+import { customAlphabet } from 'nanoid'
+
+import { PKCE_LENGTH } from '~/validators/auth'
 
 // This file hosts functions pertaining to PKCE (Proof Key for Code Exchange) as per RFC 7636
 // If you need to understand PKCE, read https://datatracker.ietf.org/doc/html/rfc7636
 // Do not use this for actual OAuth flows, please use a tested library instead.
 
 const PKCE_VERIFIER_ALPHABET =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~'
 const verifierGenerator = customAlphabet(
   PKCE_VERIFIER_ALPHABET,
   PKCE_LENGTH, // max length as per RFC 7636
-);
+)
 
 export function createPkceVerifier(): string {
-  return verifierGenerator();
+  return verifierGenerator()
 }
 
 export function createPkceChallenge(codeVerifier: string): string {
@@ -23,6 +24,6 @@ export function createPkceChallenge(codeVerifier: string): string {
     .digest('base64')
     .replace(/=/g, '')
     .replace(/\+/g, '-')
-    .replace(/\//g, '_');
+    .replace(/\//g, '_')
   // convert to base64url manually since polyfill not working
-}
+}