Hi, I'm having issues with email verification - it runs fine on my local dev server, but as soon as I run a local build server I get the issue, so I think it's something to do with my build process. I'm running a vue.js app on a Fast API backend and I've double checked my implementation with the documentation to check I haven't missed anything. I'm running a managed development supertokens core. The issue I have is that when I click the email verification link, I get a 404 error. As per my set up, the email verification link is localhost:3000/auth/verify-email?token=SOME_TOKEN&rid=emailverification In my vue.js router at /auth/verify-email I have a vue.js component that loads and there is a checkAuth function that runs beforeEnter as follows:

async function checkAuth(to, from, next) {
  const canAccess = await Session.doesSessionExist();
  if (!canAccess) return next("/signin");
  else return next();
}

In my vue.js component that loads at /auth/verify-email I have a consumeVerificationCode() function that runs on mounted, having checked if there's a Session as per the documentation, see below:

async mounted() {
    if (!this.session) {
      await this.getSession();
      this.consumeVerificationCode();
    } else if (this.session) {
      this.consumeVerificationCode();
    }
  },

The consumeVerificationCode() function is as follows:

async consumeVerificationCode() {
      try {
        let response = await verifyEmail();
        if (response.status === "EMAIL_VERIFICATION_INVALID_TOKEN_ERROR") {
          // This can happen if the verification code is expired or invalid.
          // You should ask the user to retry
          toast.error(
            "Oops! Seems like the verification link expired. Please try again later."
          );
          this.$router.push("/auth/verify-email"); // back to the email sending screen.
        } else {
          // email was verified successfully.
          toast.success("Email verified successfully!");
          this.$router.push(this.userId + "/onboarding");
        }
      } catch (err) {
        if (err.isSuperTokensGeneralError === true) {
          // this may be a custom error message sent from the API by you.
          toast.error(err.message);
        } else {
          toast.error(
            "Oops! Seems like the verification link expired. Please try again later."
          );
        }
      }
    },

verifyEmail is imported as follows:

import { verifyEmail } from "supertokens-web-js/recipe/emailverification";

The 404 error I receive isn't my custom 404 page - it displays what's seen in the attachment below

Hi @Kranos Can you verify that your app is invoked when you click on the email verification link? If it does not enter your router at all I would double check if the build server is running on localhost:3000 or not

Also, can you manually copy paste the link in the email in your browser and see if that works (as opposed to clicking on the link in the email)

Yes, app is invoked

Does the built app provide different values to SuperTokens when you initialise it?

I'm sorry, I don't understand the question - what values are you referring to?

The config you provide when calling SuperTokens.init, does the config change in any way for your built app when compared to the dev app?

No, that all runs on my FastAPI server, which is in a separate docker container to my front end

is the production build being served by the same server as the dev build?

Yep

what happens if you visit the

/auth

route on your app by typing in that path manually on the browser?

I get the same 404

What about some path that is specific to your app

Yep, my home page loads fine, but then pushes me back to the 'Verification Email Sent...' page that I have that users are directed to after sign up. Not sure why that happens as I don't have anything in my router to redirect people from the home page.

that could be our frontend sdk doing that cause you have email verification in required mode

I'm using vue.js - index.html loads my main.js file which runs

SuperTokens.init(SuperTokensWebJSConfig);

which is imported from ./config. In config I have the following:

export const SuperTokensWebJSConfig = {
  appInfo: {
    appName: import.meta.env.VITE_APP_APP_NAME,
    apiDomain: import.meta.env.VITE_APP_API_URL,
    websiteDomain: import.meta.env.VITE_APP_BASE_URL,
  },
  recipeList: [
    EmailVerification.init(),
    Session.init(),
    ThirdPartyEmailPassword.init(),
  ],
};

Wait. Are you using our pre built ui or custom ui?

Custom UI

Oh right. What’s the email verification screen path in your custom ui? Does it match the one in the like?

Yep - /auth/verify-email

Right. Since this is custom ui, the routing is something that you control entirely

Understood - I don't know where the 404 is coming from though, as the 404 screen that shows isn't my 404 page

Not sure 😅. Sorry

I understand, but can you help me work out why consumeVerificationCode isn't working as expected in my production build?

So the API call is returning a 404? Not the frontend app?

Yes, I believe so

can you enable backend debug logs and show the output when this API is called?

Yep - leave with me

Cool