Supabase

Chelone's <LoginPage> for the Supabase auth provider: an email and password form, a forgot password link and one OAuth button per provider in providers, none by default. disableEmailPassword hides the form, its divider and the link, and disableForgotPassword the link alone. redirectTo is forwarded to the form and to each button. Other props go to the <div> of <LoginPage>, and its static path is /login.

The page a user lands on to ask for a reset email: <AuthLayout> around <ForgotPasswordForm>, which calls resetPassword on the auth provider. Mount it at its static path of /forgot-password, outside the layout and the auth gate, since the user is not signed in. children replaces the form, and other props go to the <div>.

Where a recovery or invite link ends: <AuthLayout> around <SetPasswordForm>, which reads the tokens the link carries and calls setPassword on the auth provider. Mount it at its static path of /set-password. With a token missing the form keeps its message on screen with a Back to login link and does not redirect. children replaces the form, and other props go to the <div>.

A button that starts an OAuth sign-in: a click calls login on the auth provider with provider and a redirect, which the Supabase provider turns into signInWithOAuth. redirect defaults to the current URL, children replaces the label, and a failed sign-in shows an error notification. Each provider has a ready-made button (GithubButton, ...) with its icon and a translated label.