Supabase module recommended email template URL's and confirm.vue
Hi I have the supabase module however following the official documentation is a bit confusing. So I set in my nuxt config for supabase to stop redirects to the login page. I also created the confirm.vue page as per the documentation. I then set my site url in supabase to http://localhost:3000 and redirect url to http://localhost:3000/confirm as per the docs. However if I send a magic link through the supabase web UI it sends me to my home page and not my /confirm page which seemingly should be handling this. Likely with the other email templates which send me to my root page. So my question is to properly set this up so i need to edit all the email templates to specify the url to /confirm and construct it using the {{ .tokenhash }} or similar? However in this case I then need to modify the confirm.vue page as it doesn't handle the tokenhash by default. Is this just how it needs to be setup or am I doing something wrong over complicating it?
3 Replies
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information in the knowledge sources, here’s what is clear about setting up Supabase email confirmation flows with the Nuxt Supabase module:
1. confirm.vue Page Requirement
You do need to create a
The knowledge sources do not provide explicit details about handling the
The sources do not explicitly state that you must edit all Supabase email templates to include the
Setting
- You must create a
You do need to create a
confirm.vue page in your Nuxt project to handle the redirect after email confirmation. This is confirmed by a user who resolved their issue simply by creating this page, which allowed the redirect to work as expected when using Supabase OAuth and magic links. The redirect URL in your Supabase dashboard should be set to <http://localhost:3000/confirm> to match this page. If this page does not exist, the redirect will not work properly and may default to the root page or fail entirely Supabase oauth redirectUrl not working | Nuxt 3.
2. Handling the Token in confirm.vueThe knowledge sources do not provide explicit details about handling the
tokenhash or other query parameters in the confirm.vue page. However, it is implied that the confirmation logic should be implemented in this page, and you may need to extract the token from the URL parameters to complete the confirmation process. There is no mention of automatic handling of the token by the Nuxt Supabase module; you are expected to handle it in your page logic.
3. Email Template URLsThe sources do not explicitly state that you must edit all Supabase email templates to include the
/confirm path and the token as a query parameter, but this is a common practice in authentication flows. The redirect URL in the Supabase dashboard should point to your /confirm page, and the email templates should use this URL, appending the token as needed (e.g., /confirm?token=...). You will then need to parse this token in your confirm.vue page.
4. redirect: false in Nuxt ConfigSetting
redirect: false in your Nuxt config for Supabase disables automatic redirects to the login page for unauthenticated users. This is useful if you want to handle authentication flows manually, but it does not affect how the confirmation page or email templates work Nuxt.js localhost redirects to /login automatically, resulting in 404 error.
Summary:- You must create a
confirm.vue page and set your Supabase redirect URL to /confirm.
- You likely need to update your Supabase email templates to use the /confirm URL and include the token as a query parameter.
- You are responsible for handling the token in your confirm.vue page.
- The knowledge sources do not provide a ready-made solution for parsing the token or modifying the email templates, but this is the standard approach.
If you need more detailed guidance on parsing the token or editing Supabase email templates, the knowledge sources do not provide that information. You are not overcomplicating it—this is the expected setup based on the available documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Do yourself a favour and use better auth.