@supabase/auth-ui-react: if I use Github provider, A really big Github icon flashes on page load

[Jared-Dahlke]

Bug report

Describe the bug

A really big Github icon flashes on page load for only a few milliseconds, I took a video of it so i could find and take a screenshot of the correct frame, here it is:

To Reproduce

here is my login page:

export const Login: NextPage = () => {
  const session = useSession()
  const router = useRouter()
  const supabase = useSupabaseClient()

  return (
    <div className="mt-8">
      <Auth 
         providers={['github']} 
         supabaseClient={supabase} 
       />
    </div>
  )
}

Expected behavior

I expect the login page to load with no flash of a github icon

System information

macbook chrome "@supabase/auth-ui-react": "^0.2.6", "@supabase/supabase-js": "^2.0.4",

[PhilBookst]

• 1. Same behaviour here but with the google logo

[vymao]

Bump, same.

[fedorish]

If you're using Nextjs you can do step 1-3 here since getCssText is exported from @supabase/auth-ui-react and the styles will be loaded on server. But it but it seems like it breaks the themes so not really a solution unless you use minimal/default theme.

If you want you could use the above solution and instead of using a theme you can style it manually. But that can also be a issue if you want to style Provider buttons and Sign-in buttons differently.

 appearance={{
              style: { anchor: { color: "red" } },
            }}

If I find the time I can help and try to find a proper solution, but can't say when I'll have the opportunity to look into it.

[silentworks]

A fix was submitted by @rdylina that got released in version 0.3.5.