noob saibot•3mo ago

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

I'm using the new 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 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
  },
});

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 };
    },
  });
}

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.

2 Replies

Convex Bot•3mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

noob saibotOP•3mo ago

The problem I'm facing is that the "verify" function throws a bunch of errors. Despite these errors, the user is able to login on the (mobile) client side. Here are the errors in the debug panel:

10/6/2024, 8:48:18 PM [CONVEX M(auth:store)] [INFO] '`auth:store` type: verifyCodeAndSignIn'
10/6/2024, 8:48:18 PM [CONVEX M(auth:store)] [ERROR] 'Too many failed attemps to verify code for this email'
10/6/2024, 8:48:18 PM [CONVEX A(auth:signIn)] Uncaught Error: Could not verify code
    at handleEmailAndPhoneProvider (../../../../node_modules/@convex-dev/auth/dist/server/implementation/signIn.js:49:8)
    at async handler (../../../../node_modules/@convex-dev/auth/dist/server/implementation/index.js:249:20)

10/6/2024, 8:48:18 PM [CONVEX M(auth:store)] [INFO] '`auth:store` type: refreshSession'

10/6/2024, 8:48:18 PM [CONVEX M(auth:store)] [INFO] '`auth:store` type: verifyCodeAndSignIn'
10/6/2024, 8:48:18 PM [CONVEX M(auth:store)] [ERROR] 'Too many failed attemps to verify code for this email'
10/6/2024, 8:48:18 PM [CONVEX A(auth:signIn)] Uncaught Error: Could not verify code
    at handleEmailAndPhoneProvider (../../../../node_modules/@convex-dev/auth/dist/server/implementation/signIn.js:49:8)
    at async handler (../../../../node_modules/@convex-dev/auth/dist/server/implementation/index.js:249:20)

10/6/2024, 8:48:18 PM [CONVEX M(auth:store)] [INFO] '`auth:store` type: refreshSession'

As you can see from the logs, in the last line, despite the errors, the app ends up successfully login

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

Did you find this page helpful?