Feat: Use alphanumeric for the validation code (#520)

* feat: update generateCode to generate as srting * feat : allow specific character and accept alphanumeric on pinInput * feat: set alphanumeric characters to be uppercased on generated code and otp field * fix : add uppercase and fix translations --------- Co-authored-by: Renan Decamps <[email protected]>
BearStudio · Aug 30, 2024 · 3dabeb9 · 3dabeb9
1 parent 4745ab6
commit 3dabeb9
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
  "next": "14.2.4",
  "nodemailer": "6.9.14",
  "nuqs": "1.17.4",
+ "oslo": "1.2.1",
  "pino": "9.2.0",
  "pino-pretty": "11.2.1",
  "react": "18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Form/FieldOtp/index.tsx b/src/components/Form/FieldOtp/index.tsx
@@ -81,6 +81,7 @@ export const FieldOtp = <
  isInvalid={fieldState.invalid}
  isDisabled={props.isDisabled}
  otp
+ type="alphanumeric"
  id={id}
  onComplete={(v) => {
  props.onComplete?.(v);

diff --git a/src/features/auth/utils.ts b/src/features/auth/utils.ts
@@ -1,4 +1,6 @@
 export const VALIDATION_CODE_MOCKED = '000000';
+export const VALIDATION_CODE_ALLOWED_CHARACTERS =
+ 'abcdefghjkmnpqrstuvwxyz23456789ABCDEFGHJKLMNPQRSTUVWXYZ';
 export const VALIDATION_RETRY_DELAY_IN_SECONDS = 2;
 export const VALIDATION_RETRY_ALLOWED_BEFORE_DELAY = 3;
 export const VALIDATION_TOKEN_EXPIRATION_IN_MINUTES = 5;

diff --git a/src/locales/ar/auth.json b/src/locales/ar/auth.json
@@ -11,7 +11,7 @@
  },
  "verificationCode": {
  "helper": "لا يمكن العثور على الرمز؟ \nتحقق من الرسائل غير المرغوب فيها.",
- "invalid": "يجب أن يتكون الرمز من 6 أرقام",
+ "invalid": "يجب أن يتكون الرمز من 6 الشخصيات",
  "label": "رمز التحقق",
  "required": "مطلوب",
  "unknown": "الرمز غير صالح"

diff --git a/src/locales/en/auth.json b/src/locales/en/auth.json
@@ -37,7 +37,7 @@
  "verificationCode": {
  "label": "Verification code",
  "helper": "Can't find the code? Check your spams.",
- "invalid": "Code should be 6 digits",
+ "invalid": "Code should be 6 characters",
  "unknown": "Invalid code",
  "required": "Required"
  },

diff --git a/src/locales/fr/auth.json b/src/locales/fr/auth.json
@@ -11,7 +11,7 @@
  },
  "verificationCode": {
  "helper": "Vous ne trouvez pas le code ? \nVérifiez vos spams.",
- "invalid": "Le code doit être composé de 6 chiffres",
+ "invalid": "Le code doit être composé de 6 caractères",
  "label": "Le code de vérification",
  "required": "Requis",
  "unknown": "Code invalide"

diff --git a/src/locales/sw/auth.json b/src/locales/sw/auth.json
@@ -11,7 +11,7 @@
  },
  "verificationCode": {
  "helper": "Je, huwezi kupata msimbo? \nAngalia barua taka zako.",
- "invalid": "Msimbo unapaswa kuwa na tarakimu 6",
+ "invalid": "Msimbo unapaswa kuwa na wahusika 6",
  "label": "Nambari ya uthibitishaji",
  "required": "Inahitajika",
  "unknown": "Msimbo ni batili"

diff --git a/src/server/config/auth.ts b/src/server/config/auth.ts
@@ -5,10 +5,11 @@ import { TRPCError } from '@trpc/server';
 import bcrypt from 'bcrypt';
 import dayjs from 'dayjs';
 import { cookies, headers } from 'next/headers';
-import { randomInt } from 'node:crypto';
+import { generateRandomString } from 'oslo/crypto';
 
 import { env } from '@/env.mjs';
 import {
+ VALIDATION_CODE_ALLOWED_CHARACTERS,
  VALIDATION_CODE_MOCKED,
  getValidationRetryDelayInSeconds,
 } from '@/features/auth/utils';
@@ -65,7 +66,7 @@ export async function generateCode() {
  const code =
  env.NODE_ENV === 'development' || env.NEXT_PUBLIC_IS_DEMO
  ? VALIDATION_CODE_MOCKED
- : randomInt(0, 999999).toString().padStart(6, '0');
+ : generateRandomString(6, VALIDATION_CODE_ALLOWED_CHARACTERS);
  return {
  hashed: await bcrypt.hash(code, 12),
  readable: code,