[SOLVED] Is there any way we can hide the forgot password link in supabase auth ui?

Is there any way we can hide the forgot password link in supabase auth ui?

I want to hide the forgot password link that appears when we use supabase auth ui

I am aware of the hide links property and perhaps I could have used that but that hides other links as well, I just want to hide the forgot password link

Solution

I removed the "Forgot your password" link from my login page by setting forgotten_password: "" in the localization settings. I added the code below to just above the preferred OAuth providers section

     // remove forgotten pasword links/section for now
            localization={{
              variables: {
                // @ts-expect-error
                forgotten_password: "" // Try direct property
              }
            }}

I was able to do this because of the way Supabase Auth is organized into different screens or "views" that users can navigate between.

The sign-in view
The sign-up view
The forgotten password view

Each view has a label that serves two purposes:

It determines what text appears on the button or link to access that view
It controls whether that view is accessible at all

I was using TS so had to use @ts-ignore for now as it created a linting error but i don't want to delve into that as i will add that functionality back anyway.