[Python] Flet app for Supabase account management: unable to reset password for already...

I developed a simple authentication UI (login, registration, and password reset) for a Flet app using Supabase as the backend for user management. The app entry point is the main function which sets up the Supabase client, creates page/view instances, and configures routing.

def main(page: ft.Page):
theme = ft.Theme()
theme.page_transitions.macos = ft.PageTransitionTheme.NONE
page.theme = theme
page.bgcolor="#202020"

supabase: Client = get_supabase_object()
create: ft.View = CreatePage(page, supabase)
login: ft.View = LogInPage(page, supabase)
reset_password: ft.View = ResetPasswordPage(page, supabase)
update_password: ft.View = UpdatePasswordPage(page, supabase)
main_view: MainPage = MainPage(page, supabase)

# router method
def route_change (route)-> None:
page.views.clear()

if page.route == create.route:
page.views.append(create)
if page.route == login.route:
page.views.append(login)
if page.route == reset_password.route:
page.views.append(reset_password)
if page.route == update_password.route:
page.views.append(update_password)
if page.route == main_view.route:
page.views.append(main_view)

page.update()

page.on_route_change = route_change
page.go(create.route)


The app starts on the registration page. Users can register or log in. If registration is valid, users are conducted to the login page. After login, users see the main page and can log out. In the login page, users can also reset their account password: the class implements a simple UI with a TextField to insert the email and a button for being redirected to the update password page. Note the redirect argument in the reset_password_for_email() method. I have to specify that I added this redirect URL in the authorized redirect URLs of my Supabase account.

class ResetPasswordPage(ft.View):
def __init__(self, page: ft.Page, supabase: Client) -> None:
super().__init__(
route="/reset_password",
vertical_alignment="center",
horizontal_alignment="center",
)
self.page = page
self.supabase = supabase
self.body = Body(
title="Supabase - Reset Password",
btn_name = "Reset password",
function = self.reset_password,
contains_password=False,
)
self.controls = [self.body]

def reset_password(self, event=None) -> None:
email = self.body.email.value

if email:
try:
self.supabase.auth.reset_password_for_email(email, {"redirect_to": "http://localhost:3000/update_password"},)
show_snackbar(self.page, "Password reset email sent! Please check your inbox.", color="#55a271")
except Exception as e:
show_snackbar(self.page, f"Failed to send reset email: {str(e)}", color="#e57373")
else:
show_snackbar(self.page, "Please insert your email", color="#e57373")


Finally, the UpdatePasswordPage class features a simple UI that displays a text message, regardless of whether the token is successfully recognized or not.

class UpdatePasswordPage(ft.View):
def __init__(self, page: ft.Page, supabase: Client) -> None:
super().__init__(
route="/update_password",
vertical_alignment="center",
horizontal_alignment="center",
)
self.page = page
self.supabase = supabase

# Estrai il token dalla query string
self.token = self.page.route.split("?token=")[1] if "?token=" in self.page.route else None

if self.token:
print(self.token)
self.controls = [ft.Text("Valid token.")]
else:
self.controls = [ft.Text("Invalid or expired token.")]


########################################
########################################
# AT THIS TIME, IMPLEMENTED BUT NOT USED
########################################
########################################
def update_password(self, event=None) -> None:
new_password = self.controls[1].value
if self.token:
try:
# Usa Supabase per aggiornare la password con il token
self.supabase.auth.update_user(self.token, password=new_password)
show_snackbar(self.page, "Password updated successfully!")

self.page.route = "/login"
except Exception as e:
show_snackbar(self.page, f"Error: {e}")
else:
show_snackbar(self.page, "Invalid token!")


Even if I set the port with

ft.app(target=main, port=3000, view=ft.AppView.WEB_BROWSER)


I must run the app with this command:

flet run -w --port 3000 projectName


which ensures to run it as a web page with the correct predefined port. The problem is concerned with the redirect phase. Once the user, in the login page, clicks on the reset password, the update password page appears for less than a second (actually I saw only the URL change) and I am redirected immediately to the first page (the registration page) without any error or exception. It seems that I am not authorized to access the update page. Moreover, I verify that the token send by email is correctly extracted from the URL (print it in the console). What I am missing?

Continue reading...