2 replies

Convex Auth: react-native expo OTP throws Uncaught Error: Could not verify code

I'm using the new

convex auth

convex auth

convex auth

convex auth in my react-native expo. I'm trying to implement authentication with OTP.

After having followed the documentation here https://labs.convex.dev/auth/config/otps, I, then, follow the demo project here
https://github.com/get-convex/convex-auth-example/blob/main/src/auth/SignInFormPhoneCode.tsx

Now, because in my use case I'm not using

twilio

twilio

twilio

twilio to send OTP sms, I have to implement my custom solution, following above example.

First here, I have implemented my custom sms OTP provider:

export const SmsOTP = Phone({
  id: "sms-otp",
  maxAge: 1000 * 60 * 5, // 5 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (phone === undefined) {
      throw new ConvexError("Invalid phone number");
    }
    // send sms otp with a third-party service
  },
});

export const SmsOTP = Phone({
  id: "sms-otp",
  maxAge: 1000 * 60 * 5, // 5 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (phone === undefined) {
      throw new ConvexError("Invalid phone number");
    }
    // send sms otp with a third-party service
  },
});

export const SmsOTP = Phone({
  id: "sms-otp",
  maxAge: 1000 * 60 * 5, // 5 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (phone === undefined) {
      throw new ConvexError("Invalid phone number");
    }
    // send sms otp with a third-party service
  },
});

export const SmsOTP = Phone({
  id: "sms-otp",
  maxAge: 1000 * 60 * 5, // 5 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (phone === undefined) {
      throw new ConvexError("Invalid phone number");
    }
    // send sms otp with a third-party service
  },
});

This provider works fine. It correctly sends the sms otp.

Second, here I implement my custom "verify" function:

export function SmsOTPVerify() {
  return ConvexCredentials<DataModel>({
    id: "sms-otp",
    authorize: async (params) => {
      const _params = params as unknown as { code: string; phone: string };
      if (_params.phone === undefined) {
        throw new Error("`phone` param is missing");
      }
      ...
      const user = "fetch user based on phone"
      return { userId: user._id };
    },
  });
}

export function SmsOTPVerify() {
  return ConvexCredentials<DataModel>({
    id: "sms-otp",
    authorize: async (params) => {
      const _params = params as unknown as { code: string; phone: string };
      if (_params.phone === undefined) {
        throw new Error("`phone` param is missing");
      }
      ...
      const user = "fetch user based on phone"
      return { userId: user._id };
    },
  });
}

export function SmsOTPVerify() {
  return ConvexCredentials<DataModel>({
    id: "sms-otp",
    authorize: async (params) => {
      const _params = params as unknown as { code: string; phone: string };
      if (_params.phone === undefined) {
        throw new Error("`phone` param is missing");
      }
      ...
      const user = "fetch user based on phone"
      return { userId: user._id };
    },
  });
}

export function SmsOTPVerify() {
  return ConvexCredentials<DataModel>({
    id: "sms-otp",
    authorize: async (params) => {
      const _params = params as unknown as { code: string; phone: string };
      if (_params.phone === undefined) {
        throw new Error("`phone` param is missing");
      }
      ...
      const user = "fetch user based on phone"
      return { userId: user._id };
    },
  });
}

GitHub

convex-auth-example/src/auth/SignInFormPhoneCode.tsx at main · get-...

Convex Auth example repo. Contribute to get-convex/convex-auth-example development by creating an account on GitHub.

Convex Auth: react-native expo OTP throws Uncaught Error: Could not verify code

Similar Threads

Similar Threads

Similar Threads