hamid1882•2w ago

OTP Verification after login on Profile dashboard

We are using twillio and resend as SMS and Email services, on intial login we are verifying phone number by sending otp to the user, and google login without otp verification. Now we have built a Profile dashboard where a user can change the mobile number and email address, whenever user changes any of them I want to verify by otp. We've tried using the same TwilioOTP.sendVerificationRequest by passing the required params but its not accepting the ctx which we are trying to pass from a mutation function. when we tried resend.sendVerficationRequest we got the convex auth error saying that we cannot use this function outside the convex auth. is there a way to fix this?

12 Replies

Convex Bot•2w 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!

erquhart•2w ago

Can you provide the actual error messages you're getting in both cases?

hamid1882OP•2w ago

It is resolved, we've wrote mutation functions to send and validate the otp and we are storing the otp's manually on the database with an expiriy time. If there is any better approach to implement the same thing please let me know. thankyou

erquhart•2w ago

Yeah you shouldn’t need to do that! If you’re able to provide the error messages you were getting, happy to help troubleshoot.

hamid1882OP•2w ago

Sure, We are using Twilio for sending the OTP, we followed this documentation to setup: https://labs.convex.dev/auth/config/otps in TwilioOTP.ts file we have this function:

export const TwilioOTP = Phone({
  id: "twilio-otp",
  maxAge: 60 * 20, // 20 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (process.env.AUTH_TWILIO_FROM_NUMBER === undefined) {
      throw new Error("AUTH_TWILIO_FROM_NUMBER is missing for twilio-otp");
    }
    if (phone === undefined) {
      throw new Error("`phone` param is missing for twilio-otp");
    }
    await ctx.runAction(internal.otp.TwilioSDK.message, {
      from: process.env.AUTH_TWILIO_FROM_NUMBER,
      to: phone,
      code: token,
    });
  },
});

export const TwilioOTP = Phone({
  id: "twilio-otp",
  maxAge: 60 * 20, // 20 minutes
  async generateVerificationToken() {
    return generateRandomString(6, alphabet("0-9"));
  },
  async sendVerificationRequest({ identifier: phone, token }, ctx) {
    if (process.env.AUTH_TWILIO_FROM_NUMBER === undefined) {
      throw new Error("AUTH_TWILIO_FROM_NUMBER is missing for twilio-otp");
    }
    if (phone === undefined) {
      throw new Error("`phone` param is missing for twilio-otp");
    }
    await ctx.runAction(internal.otp.TwilioSDK.message, {
      from: process.env.AUTH_TWILIO_FROM_NUMBER,
      to: phone,
      code: token,
    });
  },
});

this function we add it as providers in auth.ts file.

import { TwilioOTP } from "./otp/TwilioOTP";
export const { auth, signIn, signOut, store } = convexAuth({
  providers: [
    TwilioOTP
  ]
})

import { TwilioOTP } from "./otp/TwilioOTP";
export const { auth, signIn, signOut, store } = convexAuth({
  providers: [
    TwilioOTP
  ]
})

This code works fine for the initial login authentication, but when I tried using the same function again in a mutation function I got this error:

export const sendOtpUsingTwilioOtp = mutation({
  args: {},
  handler: async (ctx) => {
    const sendOtp = await TwilioOTP.sendVerificationRequest(
      {
        identifier: "twilio-otp",
        url: "",
        expires: new Date(Date.now() + 60000),
        provider: {
          id: "twilio-otp",
          type: "phone",
          maxAge: 10,
        },
        token: "879090",
      },
      ctx
    );
  },
});

export const sendOtpUsingTwilioOtp = mutation({
  args: {},
  handler: async (ctx) => {
    const sendOtp = await TwilioOTP.sendVerificationRequest(
      {
        identifier: "twilio-otp",
        url: "",
        expires: new Date(Date.now() + 60000),
        provider: {
          id: "twilio-otp",
          type: "phone",
          maxAge: 10,
        },
        token: "879090",
      },
      ctx
    );
  },
});

error: (I have attached the image)

OTPs - Convex Auth

Authentication library for your Convex backend

hamid1882OP•2w ago

Here is the mutation function for Email:

export const sendOtpUsingResendOtp = mutation({
  args: {},
  handler: async (ctx) => {
    const sendOtp = await ResendOTP.sendVerificationRequest({
      identifier: "resend-otp",
      url: "",
      expires: new Date(Date.now() + 60000),
      provider: {
        id: "resend-otp",
        type: "email",
        maxAge: 10,
        options: {
          id: "resend-otp",
          apiKey: process.env.AUTH_TWILIO_AUTH_TOKEN!,
        },
      },
      token: "879090",
    });
  },
});

export const sendOtpUsingResendOtp = mutation({
  args: {},
  handler: async (ctx) => {
    const sendOtp = await ResendOTP.sendVerificationRequest({
      identifier: "resend-otp",
      url: "",
      expires: new Date(Date.now() + 60000),
      provider: {
        id: "resend-otp",
        type: "email",
        maxAge: 10,
        options: {
          id: "resend-otp",
          apiKey: process.env.AUTH_TWILIO_AUTH_TOKEN!,
        },
      },
      token: "879090",
    });
  },
});

this is the error (attached)

erquhart•2w ago

You don't need to make your own sendVerificationRequest method, the provider will handle sending the OTP. Follow the instructions for creating a sign in page with OTP here: https://labs.convex.dev/auth/config/otps#add-sign-in-form

OTPs - Convex Auth

Authentication library for your Convex backend

hamid1882OP•2w ago

We tried that, what happening is for a logged in user its loggin out when signin function is invoked from the profile dashboard.

erquhart•2w ago

Not sure I understand, why would an authenticated user have a sign in function available in the profile dashboard?

hamid1882OP•2w ago

In the profile dashboard we have given a option to update user's mobile number, when a user update's the mobile number we want to verify it by otp

erquhart•2w ago

I really failed to read your original post carefully 🤦‍♂️ I understand what you’re trying to do now. I’m honestly not sure what the proper approach is for changing the user’s phone number in this case, but there’s some documentation and example code around third party generation and validation of otp’s that might be relevant: https://labs.convex.dev/auth/config/otps#phone-providers

OTPs - Convex Auth

Authentication library for your Convex backend

hamid1882OP•2w ago

Sure I will look into this, thanks a lot

OTP Verification after login on Profile dashboard

Did you find this page helpful?