useOtpVerificationRequest

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

The useOtpVerificationRequest hook simplifies OTP verification processes in your application. It provides an easy-to-use interface for developers to handle OTP verification and securely update user profiles. The hook returns a verifyOtp function that can be used to finalize the OTP verification process.

This hook is particularly useful when, for example, you need to verify a user’s email address after updating it in their profile, or when they sign up for the first time.

VerifyOtp Function

The verifyOtp function, provided by the useOtpVerificationRequest hook, allows you to handle the OTP verification process for your users by submitting the OTP verification token they received, along with which method it applies to.

Parameters	Type	Description
verificationToken	string	The OTP verification token received by the user.
destination	"email" | "sms"	Where the OTP was sent to.

The verifyOtp function does not trigger either onOtpVerificationFailure or onOtpVerificationSuccess callbacks. This way, when it fails you can decide whether to try again or declare a “failure” yourself.

Example Usage

import { useOtpVerificationRequest } from '@dynamic-labs/sdk-react-core';

function EmailVerification() {
  const { verifyOtp } = useOtpVerificationRequest();

  const handleVerify = async (verificationToken) => {
    try {
      const verifyOtpResponse = await verifyOtp(verificationToken, "email");
      // Handle successful OTP verification, e.g., show a success message or redirect
    } catch (error) {
      // Handle errors, e.g., show an error message or prompt for the correct token
    }
  };

  return (
    // Render your component with the verification token input and verify button
    // ...
  );
}