login with fill otp

src/pages/auth/components/LoginStep1.tsx

@@ -18,7 +18,7 @@ type LoginStep1FormType = {
 const LoginStep1: FC = () => {
 
     const { t } = useTranslation('global')
-    const { setPhone, phone, setStepLogin, setSlug } = useAuthStore()
+    const { setPhone, phone, setStepLogin, setSlug, setOtp } = useAuthStore()
     const loginWithOtp = useLoginWithOtp()
 
     const formik = useFormik<LoginStep1FormType>({
@@ -36,7 +36,8 @@ const LoginStep1: FC = () => {
             setPhone(values.phone)
             setSlug(values.slug)
             loginWithOtp.mutate(values, {
-                onSuccess() {
+                onSuccess(data) {
+                    setOtp(data?.data?.code || '')
                     setStepLogin(2)
                     toast.success(t('auth.otp_sent'))
                 },

src/pages/auth/components/LoginStep2.tsx

@@ -16,13 +16,13 @@ import { setToken, setRefreshToken } from '../../../config/func'
 const LoginStep2: FC = () => {
 
     const { t } = useTranslation('global')
-    const { phone, setStepLogin, slug } = useAuthStore()
+    const { phone, setStepLogin, slug, otp } = useAuthStore()
     const { value } = useCountDown(2, true)
     const otpVerify = useOtpVerify()
 
     const formik = useFormik<{ otp: string }>({
         initialValues: {
-            otp: ''
+            otp: otp
         },
         validationSchema: Yup.object({
             otp: Yup.string()

src/pages/auth/hooks/useAuthData.tsx

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import * as api from '../service/AuthService'
-import type { CheckHasAccountPhoneType, CheckHasAccountType, LoginWithOtpType, LoginWithPasswordType, OtpVerifyType, RegisterType } from '../types/AuthTypes';
+import type { CheckHasAccountPhoneType, CheckHasAccountType, LoginWithOtpType, LoginWithOtpResponse, LoginWithPasswordType, OtpVerifyType, RegisterType } from '../types/AuthTypes';
 
 export const useLoginWithPassword = () => {
     return useMutation({
@@ -9,7 +9,7 @@ export const useLoginWithPassword = () => {
 };
 
 export const useLoginWithOtp = () => {
-    return useMutation({
+    return useMutation<LoginWithOtpResponse, Error, LoginWithOtpType>({
         mutationFn: (variables: LoginWithOtpType) => api.loginWithOtp(variables),
     });
 };

src/pages/auth/service/AuthService.ts

@@ -3,6 +3,7 @@ import {
   type CheckHasAccountPhoneType,
   type CheckHasAccountType,
   type LoginWithOtpType,
+  type LoginWithOtpResponse,
   type LoginWithPasswordType,
   type OtpVerifyType,
   type RefreshTokenType,
@@ -15,8 +16,13 @@ export const loginWithPassword = async (params: LoginWithPasswordType) => {
   return data;
 };
 
-export const loginWithOtp = async (params: LoginWithOtpType) => {
-  const { data } = await axios.post(`/admin/auth/otp/request`, params);
+export const loginWithOtp = async (
+  params: LoginWithOtpType
+): Promise<LoginWithOtpResponse> => {
+  const { data } = await axios.post<LoginWithOtpResponse>(
+    `/admin/auth/otp/request`,
+    params
+  );
   return data;
 };
 

src/pages/auth/store/AuthStore.ts

@@ -18,4 +18,8 @@ export const useAuthStore = create<AuthStoreType>((set) => ({
   setStepLogin(value) {
     set({ stepLogin: value });
   },
+  otp: "",
+  setOtp(value) {
+    set({ otp: value });
+  },
 }));

src/pages/auth/types/AuthTypes.ts

@@ -17,6 +17,8 @@ export type AuthStoreType = {
   setEmail: (value: string) => void;
   stepLogin: number;
   setStepLogin: (value: number) => void;
+  otp: string;
+  setOtp: (value: string) => void;
 };
 
 export type LoginWithPasswordType = XOR<
@@ -74,3 +76,9 @@ export type RefreshTokenResponseData = {
 };
 
 export type RefreshTokenResponse = IResponse<RefreshTokenResponseData>;
+
+export type LoginWithOtpResponseData = {
+  code: string;
+};
+
+export type LoginWithOtpResponse = IResponse<LoginWithOtpResponseData>;