Sample Auth UI looks different from the one in the docs

[lkoehl]

Bug report

Describe the bug

Using the sample code with some minor styling I get a different UI. Looking at the example provided the UI looks different. Some changes I noticed are:

• Login button has no color
• Border radius of input fields is not set properly
• Forgot password text is centered
• The "or continue with" text is missing.

To Reproduce

<div className="mx-auto grid h-screen w-full max-w-md place-items-center p-6 ">
    <div className="w-full rounded-xl border border-gray-200 bg-white p-4 shadow-sm sm:p-7">
      <Auth
          supabaseClient={supabase}
          appearance={{
            theme: ThemeSupa,
          }}
          providers={["google"]}
        />
    </div>
</div>

Expected behavior

I expect the UI to look like the UI shown in the docs.

Screenshots

System information

• OS: macOS
• Browser: Safari
• Version of supabase-js: 2.7.0
• Version of Node.js: 19.6.0

[Hallidayo]

Hi @lkoehl - Which sample code are you using? Is it from the docs?

[lkoehl]

@Hallidayo It is. If you take a look at the social providers, I just removed facebook and twitter. I also did some external styling so that the UI does not stretch across the entire width. I did not apply any other styling.

[silentworks]

The styling provided is that of just the form itself which includes buttons and inputs. Anything outside of the form isn't styled by the library, that would be up to you the developer. I have included an example in the examples directory of the styling being done base on the Solid.js version of the package.

[lkoehl]

@silentworks I would like to reopen this issue. Some time has passed and the example project has been updated, which helps to clarify my point.

Working backwards from the example, I was able to reproduce my issue.

The code below is responsible for the colored shadow around the auth component. Taking a look behind the styles, it provides the following css properties to a div. https://github.com/supabase/auth-ui/blob/1e7c3549a7795802cc23c43c4e50b13f3dd98f13/examples/react/src/App.tsx#L14-L19

. container-redshadow {
  min-width: 300px;
  box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
  border-radius: 1rem;
}

Removing the code and the associated div removes the shadow. But the "Sign In" button is also affected. Looking at the css properties, the button should not be affected.

You can compare both screenshots.

[silentworks]

I'm unsure what you are mentioning here as the change you made has nothing to do with the Theme or the component itself. As I've stated before this is userland code that you would produce, I changed the examples do folks could see how to get this done. If you are hitting a different issue then create a minimal reproducible repo with the issue and I'll have a look into it.