Password reset is not working

Bug report

I’m trying to set up password reset flow in my nextjs app with supabase and supabase auth ui. It’s not working and I’m struggling to understand the root cause.

Describe the bug

When a reset link is clicked, no password reset dialog is shown.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Instantiate a nextjs app with supabase and auth-ui
2. Create a new page with the following content:

// LOCATED IN pages/auth-ui.jsx
import {
    Auth,
    // Import predefined theme
    ThemeSupa,
} from '@supabase/auth-ui-react'
import {useSupabaseClient} from "@supabase/auth-helpers-react";
import Container from "@mui/material/Container";

const AuthUi = () => {
    const supabase = useSupabaseClient();

    return(
        <Container maxWidth={"sm"}>
            <Auth
                supabaseClient={supabase}
                appearance={{ theme: ThemeSupa }}
                theme="dark"
                redirectTo={`http://app.local/auth-ui`}
            />
        </Container>

    )
}

export default AuthUi

1. Setup your auth settings in supabase:

Site URL: http://app.local
Redirect Url: http://app.local

Side note - I’m using http here since I have a local instance of my app on this redirect URL, so the certificate is not a concern.

1. Using the AuthUI, generate an email for a password reset. The link in the email will be in the format of:

https://XXX.supabase.co/auth/v1/verify?token=XXX&type=recovery&redirect_to=http://app.local/auth-ui

1. Click the link
2. Auth flow will end up with the following path:

http:/app.local/auth-ui#

The user will remain signed in, but no reset password view will be shown.

Expected behavior

It works and doesn’t require users to debug this - it’s such a basic functionality, strange that it’s not working correctly by default.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows] macos
• Browser (if applies) [e.g. chrome, safari] chrome
• Version of supabase-js: [e.g. 6.0.2]:

    "@supabase/auth-helpers-nextjs": "^0.5.2",
    "@supabase/auth-helpers-react": "^0.3.1",
    "@supabase/auth-ui-react": "^0.2.6",
    "@supabase/supabase-js": "^2.1.0",

• Version of Node.js: [e.g. 10.10.0]:

> node -v    
v16.7.0

Additional context

If you’ll click the link second time, you’ll not get a proper error handle, instead, the redirect will look like this:

http://xxx.local/auth-ui#error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

It’s quite clear that it should look like this (query, not an anchor):

http://xxx.local/auth-ui?error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

[jt6677]

The provided Auth UI code just does not work whatsoever. It did not mention @supabase/auth-helpers-react. If you cannot provide any working example, why bother to release this?

[Jared-Dahlke]

im having this problem too. After i click ‘reset password’ link in email, i just get taken to my regular login page.