Wasp•4w ago

How to change /email-verification path properly in OpenSaas?

Hi @kapa.ai , I would like to change the path of the /email-verification route in OpenSaas, I could easily do it from the Main.wasp file but unfortunately I can't change the value that is passed to getVerificationEmailContent in /src/auth/email-and-pass/emails.ts Can you help me understand how I can change the value of the path of the /email-verification route appropriately? Thanks!

4 Replies

kapa.ai•4w ago

Hi @mario.p. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the /email-verification path properly in a Wasp application, you need to update both the route definition in main.wasp and ensure the verification link generation uses the correct path. Let me explain how to do this: 1. Update the Route in main.wasp First, change the path in your EmailVerificationRoute in the main.wasp file:

route EmailVerificationRoute { path: "/your-new-path", to: EmailVerificationPage }
page EmailVerificationPage {
  component: import { EmailVerification } from "@src/pages/auth.tsx",
}

route EmailVerificationRoute { path: "/your-new-path", to: EmailVerificationPage }
page EmailVerificationPage {
  component: import { EmailVerification } from "@src/pages/auth.tsx",
}

2. Update the Email Verification Link Generation The issue you're facing is that the verification link is generated separately from the route definition. In Wasp, the email verification link is created using the createEmailVerificationLink function, which needs to know the client route. There are two ways to address this: Option 1: Using a Custom Sign-up Action You can create a custom sign-up action where you explicitly specify the verification link path:

// Verification link links to a client route with your custom path
const verificationLink = await createEmailVerificationLink(args.email, '/your-new-path');

// Verification link links to a client route with your custom path
const verificationLink = await createEmailVerificationLink(args.email, '/your-new-path');

This is shown in the custom sign-up action documentation. Option 2: Update the emailVerification Configuration In your main.wasp file, the emailVerification configuration specifies the clientRoute that's used for verification:

emailVerification: {
  clientRoute: EmailVerificationRoute,
  // optionally customize email content
  getEmailContentFn: import { getVerificationEmailContent } from "@src/auth/email.js",
},

emailVerification: {
  clientRoute: EmailVerificationRoute,
  // optionally customize email content
  getEmailContentFn: import { getVerificationEmailContent } from "@src/auth/email.js",
},

When you change the route path in EmailVerificationRoute, Wasp should use that updated path when generating verification links. 3. Customize Email Content (Optional) If you're using a custom getEmailContentFn, make sure it's using the verification link that's passed to it:

export const getVerificationEmailContent: GetVerificationEmailContentFn = ({
  verificationLink,
}) => ({
  subject: 'Verify your email',
  text: `Click the link below to verify your email: ${verificationLink}`,
  html: `
  <p>Click the link below to verify your email</p>
  <a href="${verificationLink}">Verify email</a>
  `,
})

export const getVerificationEmailContent: GetVerificationEmailContentFn = ({
  verificationLink,
}) => ({
  subject: 'Verify your email',
  text: `Click the link below to verify your email: ${verificationLink}`,
  html: `
  <p>Click the link below to verify your email</p>
  <a href="${verificationLink}">Verify email</a>
  `,
})

The verificationLink parameter will already contain the correct path based on your route configuration. Development Environment Tip During development, you can skip email verification by setting the SKIP_EMAIL_VERIFICATION_IN_DEV environment variable to true in your .env.server file, which can be helpful while testing these changes:

SKIP_EMAIL_VERIFICATION_IN_DEV=true

SKIP_EMAIL_VERIFICATION_IN_DEV=true

This is mentioned in the email verification flow documentation. If you're still having issues after making these changes, it might be helpful to check if there are any hardcoded paths in your custom authentication code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mario.p, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

mario.pOP•4w ago

Thanks, Kapa! 😄

Vinny (@Wasp)•4w ago

Which solution did you opt for?

mario.pOP•4w ago

The first one was perfect, thanks!

Gaming

Programming

How to change /email-verification path properly in OpenSaas?

Did you find this page helpful?