How to create custom OTP login

This guide will help you to know the filters that has to be used to create custom OTP login.

appmaker-send-phone-otp

This filter is used to send OTP to the user's phone number.

Parameter	Type	Description
phone	String	The phone number of the user.

Usage

export const productResponse = () => {
  appmaker.addFilter(
    'appmaker-send-phone-otp',
    'custom-otp',
    async ({ phone }) => {
      const data = await requestOtp({  // Your custom processing logic goes here
        username: phone,
        type,
      });
      return {
        data: data,
      };
    },
  );
};
    

appmaker-re-send-phone-otp

This filter is used to re-send OTP to the user's phone number.

Parameter	Type	Description
phone	String	The phone number of the user.

Usage

export const productResponse = () => {
  appmaker.addFilter(
    'appmaker-re-send-phone-otp',
    'custom-otp',
    async ({ phone }) => {
      const data = await resendOtp({  // Your custom processing logic goes here
        username: phone,
        type,
      });

      return {
        data: data,
      };
    },
  );
};
    

appmaker-verify-phone-otp

This filter is used to verify the OTP sent to the user's phone number.

Parameter	Type	Description
phone	String	The phone number of the user.
otpCode	String	The OTP code entered by the user.
otpResponse	Object	The response received from the server after sending the OTP.
redirectAction	Object	The redirect action to be performed after the OTP is verified.

Usage

export const productResponse = () => {
  appmaker.addFilter(
    'appmaker-verify-phone-otp',
    'custom-otp',
    async ({ phone, otpCode, otpResponse, redirectAction }) => {
      const responseData = await verifyOtp({  // Your custom processing logic goes here
        username: phone,
        otp: otpCode,
        otp_id: otpResponse?.data?.otpId,
        type,
      });
      if (responseData?.status === 200) {
        const multipass_url = responseData.data.multipass_url;

        // await processLogin({});
        let multipassToken;
        if (multipass_url) {
          multipassToken = multipass_url.match(/multipass\/(.*)/)[1];
        }
        return {
          status: 'success',
          nextStep: multipassToken ? 'done' : 'custom_action', // If multipassToken is present, the user is logged in successfully, else the user is redirected to the AccountDetails page.
          customAction: {
            action: 'OPEN_INAPP_PAGE',
            pageId: 'AccountDetails',
            params: {
              redirectAction,
              pageData: {
                redirectAction,
                // phone
                otpId: otpResponse?.data?.otpId,
                email: '',
                email_disabled: false,
                phone_disabled: true,
                phone,
                first_name: responseData?.data?.firstName || '',
                last_name: responseData?.data?.lastName || '',
              },
            },
          },
          multipassToken,
          userCredentials: {},
          data: responseData,
        };
      } else {
        return {
          status: 'fail',
          error: responseData,
        };
      }
    },
  );
};
    

appmaker-submit-account-details

This filter is used to submit the account details of the user.

Parameter	Type	Description
onAction	Function	The function to be called when the action is performed.
attrs	Object	The attributes of the user.

Usage

export const productResponse = () => {
  appmaker.addFilter(
    'appmaker-submit-account-details',
    'custom-otp',
    async ({ onAction, ...attrs }) => {
     return response;
    },
  );
};