https://supertokens.com/ logo
Issue with email verification and routing in Vue.js
k

Kranos

05/21/2023, 8:27 PM
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
n

nkshah2

05/22/2023, 6:16 AM
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
r

rp

05/22/2023, 6:26 AM
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)
k

Kranos

05/22/2023, 7:43 AM
Yes, app is invoked
That's what I've been doing, but still get the 404 error. It's only when I build my app, not when it's running in dev mode.
n

nkshah2

05/22/2023, 7:46 AM
Does the built app provide different values to SuperTokens when you initialise it?
k

Kranos

05/22/2023, 8:23 AM
I'm sorry, I don't understand the question - what values are you referring to?
n

nkshah2

05/22/2023, 8:39 AM
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?
k

Kranos

05/22/2023, 8:49 AM
No, that all runs on my FastAPI server, which is in a separate docker container to my front end
r

rp

05/22/2023, 9:42 AM
is the production build being served by the same server as the dev build?
k

Kranos

05/22/2023, 9:43 AM
Yep
r

rp

05/22/2023, 9:44 AM
what happens if you visit the
/auth
route on your app by typing in that path manually on the browser?
k

Kranos

05/22/2023, 9:57 AM
I get the same 404
r

rp

05/22/2023, 9:58 AM
What about some path that is specific to your app
like
/home
or something
k

Kranos

05/22/2023, 10:00 AM
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.
r

rp

05/22/2023, 10:01 AM
that could be our frontend sdk doing that cause you have email verification in required mode
have you defined a specific path on your web server for
/home
that serves the react bundle?
k

Kranos

05/22/2023, 10:05 AM
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(),
  ],
};
r

rp

05/22/2023, 10:07 AM
Wait. Are you using our pre built ui or custom ui?
k

Kranos

05/22/2023, 10:07 AM
Custom UI
r

rp

05/22/2023, 10:07 AM
Oh right. What’s the email verification screen path in your custom ui? Does it match the one in the like?
Link*
k

Kranos

05/22/2023, 10:08 AM
Yep - /auth/verify-email
r

rp

05/22/2023, 10:08 AM
Right. Since this is custom ui, the routing is something that you control entirely
Therefore we have no idea why you are getting a 404
k

Kranos

05/22/2023, 10:10 AM
Understood - I don't know where the 404 is coming from though, as the 404 screen that shows isn't my 404 page
r

rp

05/22/2023, 10:10 AM
Not sure 😅. Sorry
k

Kranos

05/22/2023, 10:26 AM
I understand, but can you help me work out why consumeVerificationCode isn't working as expected in my production build?
r

rp

05/22/2023, 10:29 AM
So the API call is returning a 404? Not the frontend app?
k

Kranos

05/22/2023, 10:40 AM
Yes, I believe so
r

rp

05/22/2023, 10:41 AM
can you enable backend debug logs and show the output when this API is called?
k

Kranos

05/22/2023, 10:41 AM
Yep - leave with me
Hi - I ended up putting my front end into a Docker container to rule a few things out and this fixed the issue - sorry for wasting your time!
r

rp

05/23/2023, 5:27 AM
Cool