set otp code

src/features/auth/components/StepEnterNumber.tsx

@@ -28,6 +28,7 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
   const { t } = useTranslation('auth')
   const { name } = useParams()
   const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER)
+  const [code, setCode] = useState('')
 
   const { mutate: mutateOtpRequest, isPending } = useOtpRequest()
 
@@ -44,7 +45,9 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
       if (name) {
         values.slug = name as string
         mutateOtpRequest(values, {
-          onSuccess: () => {
+          onSuccess: (data) => {
+            setCode(data?.data?.code)
+
             toast(t('otp_sent'), 'success')
             setStep(AUTH_STEP.ENTER_OTP)
           },
@@ -101,7 +104,7 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
             />
           )}
           {step === AUTH_STEP.ENTER_OTP && (
-            <StepOtp phone={formik.values.phone} slug={formik.values.slug} />
+            <StepOtp phone={formik.values.phone} slug={formik.values.slug} code={code} />
           )}
         </div>
         {

src/features/auth/components/StepOtp.tsx

@@ -17,9 +17,10 @@ import { useSearchParams } from 'next/navigation'
 type Props = {
     phone: string,
     slug: string
+    code: string
 }
 
-const StepOtp = ({ phone, slug }: Props) => {
+const StepOtp = ({ phone, slug, code }: Props) => {
     const searchParams = useSearchParams()
     const redirectUrl = searchParams.get('redirect')
     const { t } = useTranslation('auth')
@@ -38,7 +39,7 @@ const StepOtp = ({ phone, slug }: Props) => {
     const formik = useFormik<LoginVerifyOTPType>({
         initialValues: {
             phone: phone,
-            otp: '',
+            otp: code,
             slug: slug
         },
         validationSchema: Yup.object({