EmailAuth loading state not resetting on invalid credentials

[Flexicon]

Bug report

Describe the bug

In a simple hello world app, it seems that the loading state on the EmailAuth component is not being reset properly receiving an Invalid login credentials error. This causes the form to not be submittable afterwards even after adjusting the form values, until the user either refreshes the page or changes the auth_view.

I think it might have something to do with the isMounted ref value being always false in my app (see the screenshot below), just judging by the source code.

To Reproduce

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

This happens with code as simple as the following:

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export default function Login() {
  const supabase = useSupabaseClient()

  return (
    <div className="mx-auto w-[500px] max-w-full pt-5">
      <Auth supabaseClient={supabase} />
    </div>
  )
}

1. Type some invalid credentials into the Auth form
2. Submit the form
3. See the expected error message on the page
4. Try to submit the form again with altered credentials
5. See that the form does not submit again (for example through the network tab)

Expected behavior

The form can be resubmitted after changing credential values.

Screenshots

If applicable, add screenshots to help explain your problem.

In the below screenshot, you can see (using React devtools) that the isMounted ref is false and the loading state boolean stays true.

System information

• OS: macOS
• Browser: both chrome and safari
• Version of supabase-js: 2.1.0
• Version of Node.js: 19.0.1

[camthegeek]

93 fixes this for me in a similar environment (React 18, Node 18.13). Thanks @Flexicon. Hopefully we'll see a merge soon.