User not connected when clicking on change password link

[El Khattouti Mohamed Amine]

Bug report

• [ x ] I confirm this is a bug with Supabase, not with my own application.
• [ x ] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I am using Nuxt 3.

I am encountering an issue when implementing the "reset password" flow that can be described in the supabase documentation here.

The first part about sending the reset password email works fine.
The issue happens when the user clicks on the link and is redirected to the change password page : he is redirected to the login page.
As described in the documentation, the "change password" page is protected to only allow authenticated users. Thus, I added a middleware. However, It seems that the user is not yet connected when redirected to this page and is then redirected to the login page.

Here is my middleware :

export default defineNuxtRouteMiddleware(async (to, from) => {   
    const supabase = useSupabaseClient()  
    const { data: { user } } = await supabase.auth.getUser()  
    console.log(user)
    if (!user) {  
        const localePath = useLocalePath()  
        return navigateTo(localePath('login'))  
    }  
})

==> If I try to log the user using a console.log, the output is null

Here is my supabaseClient :

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

I tried every thing I saw online but nothing worked. I tried several thing : use the supabase.auth.exchangeCodeForSession(code) method, but that produces a both auth code and code verifier should be non-empty error message.

Expected result

1. I click on the reset password button
   

2. I receive the mail & click on it
   

3. I should be logged in and arrive on the change password page
   

System information

• OS: [ Windows 11 ]
• Browser : Google Chrome
• Version of supabase-js: [e.g. 6.0.2]
• Version of Node.js: 20.12.2I am

Additional context

I am using Nuxt 3

[SergejSi]

I am experiencing the same issue, but I am using Next.js 14.2.3. The behavior is identical: the user gets redirected to the login page instead of the change password page after clicking the reset password link. Any solutions or workarounds would be greatly appreciated.

[El Khattouti Mohamed Amine]

Apparently, Nuxt's middleware is ran 2 times : first during the server side rendering and a second time during the hydration process (client side)
By logging, I noticed that the user is not connected in the server side middleware but it is in the client side.

As a workaround, I added a return statement in my middleware when running server side like so :

export default defineNuxtRouteMiddleware(async () => {
    if (import.meta.server) return

    const user = useSupabaseUser()
    if (!user.value) {
        const localePath = useLocalePath()
        return await navigateTo(localePath('login'))
    }
})

I believe you should be able to do the same thing using Next.js

But that is not ideal : you would prefer to be connected server side, since this workaround allows the user to have a glimpse at the page during its loading time but i have no idea how & no answer to this issue so far.