Bug report

Clicking on 'Set object' of appearance prop on Auth storybook throw exception
on line number 117 appearance?.theme[theme] should be fixed to appearance?.theme?.[theme]

To Reproduce

1. Go to default Auth story
2. Click on 'Set object' of appearance prop on controls tab
3. See error

Expected behavior

Error should not be thrown when clicking on 'Set object' of appearance

Screenshots

System information

OS: macOS
Browser: chrome
Version of supabase-js: 2.0.0-rc.7
Version of Node.js: v16.18.1

I want to try to change the component. I want to listen to the listening events of his button clicks, but in fact I haven't found the corresponding API. Do you have sample code

Bug report

Describe the bug

When onAuthStateChange is called from the UserContext provider for the TOKEN_REFRESHED event the new session does not contain a provider_token. This means the user can no longer interact with the provider api, even though the old provider_token is still valid.

To Reproduce

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

The

1. Go to https://app.supabase.com/project/<project_id>/auth/settings
2. Enable github provider
3. Set JWT expiry limit to 20 seconds
4. Login via github on the client
5. Wait 20 seconds, see that the new session has removed the provider_token

Expected behavior

I'm not sure what the correct behavior should be here, but the provider_token should not be lost without being refreshed. If the provider_token is still valid there is no reason to remove it from the session.

Additional context

The issue stems from setting the session without the old provider_token here: https://github.com/supabase-community/auth-ui/blob/main/packages/react/src/components/Auth/UserContext.tsx#L30

Hi, in the supabse auth docs, it says you can request scopes if needing additional data from an OAuth provider.
https://supabase.com/docs/reference/javascript/v1/auth-signin

[edit: have successfully used this method by making my own spotify login button, but wondering if it's possible to do via Auth-UI]

The example is for github, but am assuming similar for other providers.

I am using Spotify and would like to utilise the web player sdk and need some additional scopes for my app (e.g. to stream music if the user has a spotify premium account from within the app).

How can these be requested using the auth-ui component?

Feature request

I would like to request the option to localize error and info messages for e-mail auth.

Is your feature request related to a problem? Please describe.

I am using the german localization of the auth ui. However if invalid credentials are entered the error message will be displayed in english. Same goes for the info message that is displayed if a user resets their password.

Describe the solution you'd like

I would like to be able to provide localization strings for all the different messages that the ui might display.

Describe alternatives you've considered

Currently my workaround is to hide the messages and append a pseudo element to display a different error. This feels incredibly janky.

Bug report

Describe the bug

 <Auth
   supabaseClient={supabase}
    appearance={{ theme: ThemeSupa, 
    variables: {
    default: {
         colors: {
             brand: 'red',
             brandAccent: 'darkred',
                    },
           },
   }}
  theme="default"
  />

I added the Azure login in the settings and the option does not appear on the login screen.

Property for Third Party Providers

Link

Legacy Auth component.
Current Auth UI component

Describe the problem

Definitely could be user error on my part, but I couldn't find anything for third party providers in the current docs. I went back to the legacy component and used providers={['google', 'facebook', 'github']} Not sure if it was mentioned anywhere else but it would be nice to know the option was there. <3

I want to use Tailwind for customization, but I can't because the Button component has a default style and the generateClassNames always will concat if the customization, in my case overwriting.

https://github.com/supabase/auth-ui/blob/76ca3e8de4b3ed28f3b6dd21beca7fc8f7315419/packages/react/src/components/UI/Button.tsx#L63

I believe the lines of this comment are important to avoid this case.

https://github.com/supabase/auth-ui/blob/76ca3e8de4b3ed28f3b6dd21beca7fc8f7315419/packages/react/common/theming/utils.ts#L41-L46

Add SSR support for the Auth UI so it will render when using a server side rendering framework like NextJS. Currently if this component is used on a SSR page it doesn't load until the client side code has loaded. Stitches allows for SSR in its config.

Feature request

Is your feature request related to a problem? Please describe.

Yes, For Combatting spam. Would love to have H-Captcha Intergrated directly inside auth ui.

Describe the solution you'd like

1, Just add it as dependency or let us specify a "React Node" that we can pass as a component so that before the FORM SUBMIT button, there is a captcha,
2, Allow us to specify the verified token , which can then be taken as a state inside Auth UI so that depending on verification, the state changes and behaves accordingly (to give error or to allow auth request)

Since H-captcha has quite the presence inside the docs and Supabase even has the the server verifying it (as per dashboard auth option), i think this is a very legitimate request,

Describe alternatives you've considered

Imperfect Workarounds

It would be great to be able to hide the sign-up link. In our case, our app is closed in beta and we just don't want people to sign up.

Bug report

Describe the bug

Auth component returns nothing in Deno. I'm unsure whether this is an issue with Deno, this package, or ESM.

To Reproduce

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

1. Go to https://tiny-todos.deno.dev/x. You'll see an empty web page, even though it uses the following code. This is essentially the same as the first snippet from the documentation:

import { createClient } from "https://esm.sh/@supabase/[email protected]";
import { Auth } from "https://esm.sh/@supabase/[email protected]?alias=react:preact/compat&[email protected]";

const supabaseClient = createClient(
  Deno.env.get("SUPABASE_URL")!,
  Deno.env.get("SUPABASE_ANON_KEY")!,
);

export default function Component() {
  return <Auth supabaseClient={supabaseClient} />;
}

Expected behavior

The Auth UI should be rendered as seen in the thumbnail of the video in the documentation.

Screenshots

System information

• OS: macOS
• Version of supabase-js: 2.7.0
• Version of Deno (not Node.js): 1.30.3
• Version of auth-ui-react: 0.2.6
• Version of fresh: 1.1.3

Additional context

I have not yet seen any examples of the Auth UI package being used in Deno, so I wonder whether this is even possible with the current code base and Deno runtime. Am I doing something wrong?

While attempting to install auth-ui with the nextjs project:

❯ npm install @supabase/supabase-js@rc @supabase/auth-ui-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.1" from @supabase/[email protected]
npm ERR! node_modules/@supabase/auth-ui-react
npm ERR!   @supabase/auth-ui-react@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

The localization files should be stored in a common package that can be used between all auth ui libraries.

Problems

1. Currently we are duplicating the task of having every package bundling and storing the language files in their own independent directories. This creates an issue of maintenance and it also means that we have to load all languages when we only need one (or a few) for a given project.
2. We currently have no way of localizing the Supabase error messages that are sent back from the auth server, until this has been resolved by including proper error codes with the error responses from the auth server there is no reliable way of creating localized messages in the auth-ui packages.

The Svelte auth-ui library is currently doing its own thing when handling CSS. On this project we decided to use stitches so that the styles can be shared across libraries.

Bug report

Describe the bug

There are SVG elements within Icons.tsx that have invalid React DOM attribute names. These invalid names cause React to emit a warning when these SVG elements are used. I received these warnings when using the Azure provider.

To Reproduce

Use the Auth component with either the azure, bitbucket or notion providers

import { createClient } from '@supabase/supabase-js';
import { Auth } from '@supabase/auth-ui-react';

const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>');

const App = () => <Auth supabaseClient={supabase} providers={['azure', 'bitbucket', 'notion']}/>;

Expected behavior

All occurences of the HTML attributes clip-rule, fill-rule, stop-color and stop-opacity within Icons.tsx should be camel-cased, as specfied by the React docs.

System information

• OS: Windows
• Browser: Chrome
• Version of @supabase/supabase-js: 2.1.0
• Version of @supabase/auth-ui-react: 0.2.6
• Version of Node.js: 19.0.1

I'm pretty sure this will be solved when there's a concrete example of how to use it but when you first set it up, this is what you get 👇 which is far from close to the video demo you shared. It seems that there's still quite a lot of styling to add outside the component like giving a maxWidth, add a title, ...

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",

When the Auth component is placed in a NextJS page, the parent page needs the ability to access the current view state to display a relevant title and supporting copy.

Currently there is no way to determine the state of a the Auth component - e.g. whether it is displaying the Sign In, Sign Up or Forgotten Password screen. As such, it is not possible to display a relevant title or subtitle on the page.

If the page is able to determine the state of the component, the content and styling of the page can be updated to reflect this - specifically copy referring to "Please sign in" could change to "Please sign up" as the Auth screens change. Further, when the user signs up and has to click on the confirmation email, this could become part of a broader on-boarding journey if the parent app is aware of the change of state.

Possible solutions:

1. A callback function could be accepted by the Auth component and be used to update the parent on state changes

The use of a callback function would enable the Page to be synchronised and updated as the user navigated through the Auth component.

2. Alternatively, perhaps the SessionContext object could be used with a signin state that could be accessed by the parent page - e.g. "Sign In" / "Sign Up" / "Needs confirmation" / "Password Reset" etc

Example screenshot - Sign Up screen with Sign In header:

Bug report

Describe the bug

When trying to import @supabase/auth-ui-react the types are no longer found if the tsconfig module resolution is set to NodeNext. This was working in version 0.2.7 so it's a recent change that broke it.

To Reproduce

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

• Clone my example repo
• Checkout the bug/node-next branch
• Build the react example pnpm build:example:react

Build will fail with error on the lines of:

@example/react:build:example: src/App.tsx(4,22): error TS7016: Could not find a declaration file for module '@supabase/auth-ui-react'

Expected behavior

For the types to resolve

Additional context

Looks like there might be an issue on the package.json export.

It should export the type as well, something like this:

"exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js"
    }
  },

Changing that does resolve the type you can confirm that by running pnpm tsc --traceResolution | grep @supabase/auth-ui-react inside of the react example folder. But then a new error pops up of src/App.tsx(4,10): error TS2305: Module '"@supabase/auth-ui-react"' has no exported member 'Auth'..

Feature request

Is your feature request related to a problem? Please describe.

I don't want to have to use the inbuilt styles and components built by you (no offence).

I want to be able to pass a custom button component, form, and input.

Describe the solution you'd like

Maybe an overrides or components object could be passed that would be used instead of the ones already in place

Describe alternatives you've considered

I've tried my own for but for some reason it just doesn't work correctly, plus it would be nice to use the inbuilt logic of this package without having to re write it just to have custom elements

Additional context

Add any other context or screenshots about the feature request here.

Bug report

Describe the bug

With Google provider enabled, the Google logo is huge for a split second when loading the view.

To Reproduce

Loading this view.
<Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa, variables: { default: { colors: { brand: "#3d808c", brandAccent: "#2c5b63", }, }, }, }} providers={["google"]} magicLink localization={{ variables: { sign_in: { email_label: "Din epostadresse", password_label: "Ditt passord", email_input_placeholder: "Epost", password_input_placeholder: "Passord", social_provider_text: "Logg inn med", button_label: "Logg inn", link_text: "Har du allerede en konto? Logg inn", }, sign_up: { email_label: "Din epostadresse", password_label: "Ditt passord", email_input_placeholder: "Epost", password_input_placeholder: "Passord", social_provider_text: "Logg inn med", button_label: "Opprett konto", link_text: "Har du ikke en konto? Opprett konto", }, magic_link: { email_label: "Din epostadresse", email_input_placeholder: "Epost", button_label: "Send innloggingslenke på epost", link_text: "Logg inn uten passord", }, forgotten_password: { email_label: "Din epostadresse", password_label: "Ditt passord", email_input_placeholder: "Epost", button_label: "Send meg nytt possord på epost", link_text: "Har du glemt passordet?", }, update_password: { password_label: "Nytt passord", password_input_placeholder: "Ditt nye passord", button_label: "Oppdater passordet", }, }, }} />

Expected behavior

Not seeing a huge Google logo when loading the view.

System information

All devices

Chore

This package will probably be driven by the community a lot. To not frustrate contributors, it would be great to have a more immediate release cycle. As an example, I added the locales two weeks back and it has not been released yet. The release should be either instant with every PR or at least twice a week.

Supabase client

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}`;
const supabaseAnonKey = `${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}`;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

const handleLogin = async () => {
    const { error: signInError } = await supabaseClient.auth?.signIn(
      {
        email: '[email protected]',
        password: '123456789'
      },
      { redirectTo: '/' }
    );
    console.log(signInError);
  };

dependencies

"next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
 "@supabase/supabase-js": "^2.0.0-rc.6",
    "@supabase/ui": "^0.36.5",

is supabase support react 18 ?

Bug report

Describe the bug

Haven't look into how these buttons are styled yet, but they don't seem to wrap after extending out of the parent container.

To Reproduce

At Storybook, I choose the horizontal layout for a story that has all Social Auth.

Expected behavior

I expect all the social auth to be contained within the width of the main component

Screenshots

System information

• OS: macOS
• Browser (if applies) Chrome
• Version of supabase-js: NA
• Version of Node.js: NA

Additional context

Discovered while writing up #39

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

Bug report

Describe the bug

I'm trying to setup an auth with Supabase and supabase auth. Unfortunately the redirectTo argument seems either ignored or works not as expected.

To Reproduce

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

1. create a new app with nextjs + react + supabase-auth-ui-react.
2. use the following code

import { Auth, ThemeSupa } from '@supabase/auth-ui-react';

export default function JoinPage() {
    const session = useSession()
    const supabase = useSupabaseClient()
    
    <Auth
                    supabaseClient={supabase}
                    providers={["github"]}
                    theme="evenDarker"
                    redirectTo='/me'
                />
}

3. go to browser and try to auth with any method.

With email, it remains the same.
With github, it adds a # to the end of the URL, but none of this makes a proper redirect.

Expected behavior

Redirect happens.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows] macOS
• Browser (if applies) [e.g. chrome, safari] chrome
• Version of supabase-js: [e.g. 6.0.2]:

        "@supabase/auth-helpers-nextjs": "^0.5.2",
        "@supabase/auth-helpers-react": "^0.3.1",
        "@supabase/auth-ui-react": "^0.2.6",
        "@supabase/supabase-js": "^2.1.0",

• Version of Node.js: [e.g. 10.10.0]:

> node -v                                                                                                                                             
v18.12.1

Additional context

Add any other context about the problem here.

Bug report

Describe the bug

Appearance.classNames don't appear to make it to the DOM for email components.

To Reproduce

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

1. Create Auth component:

<Auth
    supabaseClient={supaClient}
    appearance={{ theme: ThemeSupa, className: { input: "foo" }}
/>

2. Inspect DOM [note no 'foo' class on input as expected]

Expected behavior

In the example about, should see the foo class on the input elements.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: all
• Browser Chrome (expect all)
• Version of supabase-js: ^2
• Version of Node.js: 16

Additional context

Please assign me if this should be fixed. I was able to trace most of this already

Improve documentation

Describe the problem

I was trying to run the react package locally to try and fix #79. Sadly, I couldn't get the react package to run, but I did notice there are a few typos here and there in the READMEs mostly.

Describe the improvement

Fix the typos.

Bug report

Describe the bug

Using the Auth component with only email authentication, I get the error when the login form is submitted:
`
Unhandled Runtime Error
TypeError: supabaseClient.auth.signInWithPassword is not a function

Call Stack
eval
node_modules/@supabase/auth-ui-react/dist/esm/src/components/Auth/interfaces/EmailAuth.js (61:10)
`

To Reproduce

My code is:
<Auth supabaseClient={supabaseClient} providers={[]} />

Expected behavior

I expect

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS

• Browser: all (chrome, safari, firefox)

• Version of supabase-js:
  "@supabase/auth-helpers-nextjs": "^0.2.8",
  "@supabase/auth-helpers-react": "^0.2.4",
  "@supabase/auth-ui-react": "^0.2.0",
  "@supabase/supabase-js": "^1.35.7",

• Version of Node.js: 18.2.0

Chore

Describe the chore

It takes some work to use stiches with SSR: https://stitches.dev/docs/server-side-rendering

If someone tries to use this library now they will see an flash of unstyled components (including blown up images for the logos) and then a rehydration failure logged in the console.

Feature request

Add ability to pass scopes option to Auth component for third-party providers

Is your feature request related to a problem? Please describe.

When users sign in via a third-party provider I'd like to request additional scopes.

Describe the solution you'd like

According to the docs, the supabase.auth.signInWithOAuth function can take an optional options object with redirectTo and scopes properties.

Currently the <Auth> component only accepts the redirectTo property.

I'm proposing adding a providerScopes (or similar) propery to the <Auth> component.

<Auth
    supabaseClient={supabase}
    appearance={{ theme: ThemeSupa }}
    theme="dark"
    providers={['google']}
    providerScopes={['https://www.googleapis.com/auth/youtube.readonly']}
/>

An update to Auth.tsx and SocialAuth.tsx would need to happen to accept the prop and pass it along to the handleProviderSignIn function.

From

...
const handleProviderSignIn = async (provider: Provider) => {
  setLoading(true)
  const { error } = await supabaseClient.auth.signInWithOAuth({
    provider,
    options: { redirectTo },
})
...

To

...
const handleProviderSignIn = async (provider: Provider) => {
  setLoading(true)
  const { error } = await supabaseClient.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo,
      scopes: providerScopes,
    },
})
...

Describe alternatives you've considered

The only alternative here is to recreate the <Auth> component locally and add the missing functionality.

Additional context

I'm happy to make the changes and open a PR for this but the contributing guidelines mentioned that a feature request should be first.

Feature request

Currently we do have Storybook for auth-ui, but it isn't very obvious that it exists.

Below are some suggestions for enhancing Storybook.

Describe the solution you'd like

• Add docs for starting storybook in README
• Storybook theming to follow Supabase theme
  • this will be nice when Supabase decides to deploy Storybook to prod
• Remove controls that do not affect UI appearance e.g. redirectTo, supabaseClient
• Fix stories where props are not affecting the UI
  • At the Appearance>Default story, none of the controls affect the appearance
  • Story With Social Large Buttons is not showing large buttons
  • StoryWith Coloured Social Auth is not showing colored
  • Story Update Password and Magic Link shows only an input with a red button w/ no text
• Fix bug of seeing unstyled components (refer below)

Bug of seeing unstyled components

Running pnpm storybook, while clicking between components and trying to change props, sometimes it will suddenly show every Auth component as unstyled, even after multiple refreshes. I have to close the tab and reopen it to see it styled again.

Additional context

Original Tweet thread

Bug report

Describe the bug

Impossible to setup redirectTo for signup action in email confirmation

To Reproduce

Use this code:

<Auth
					
  supabaseClient={supabase}
  redirectTo={"http://localhost:3001/app/login"}
  appearance={{ theme: ThemeSupa }}
  theme="dark" 

/>

Expected behavior

In the case of signup i have this bad url on email confirmation:

http://localhost:8000/auth/v1/verify?token=3b5354ca745399152ae8e25808ca51a7514fff1f70599d0e3db9c31e&type=signup&redirect_to=http://localhost:3001/

I would like to have this url:

http://localhost:8000/auth/v1/verify?token=3b5354ca745399152ae8e25808ca51a7514fff1f70599d0e3db9c31e&type=signup&redirect_to=http://localhost:3001/app/login

In the case of recovery i have the right url on recovery email

http://localhost:8000/auth/v1/verify?token=dd5c6a230f2013250d4e945d1fb56dcb893e65dbe999b758d8f4f3b0&type=recovery&redirect_to=http://localhost:3001/app/login

Thank you for your help

Why not specify that there is not yet a UI component for password resets? If it is not there, I will have to make it myself, and then I will be able to make up my mind. If I don't know if it's there or not, I'll have to seek it out...

Bug report

Describe the bug

While running the pnpm dev command in the top most folder, unable to find the dev port for react package

To Reproduce

Running pnpm dev in root folder.

Expected behavior

If I am not wrong then like sevlte and solid we should also have port for react, to see the changes made live.

Screenshots

System information

• OS: Windows
• Browser (if applies) chrome
• Version of Node.js: v16.18.1

Additional context

Wanted to implement HCaptcha in Auth-ui-react.

Release scripts are failing (e.g. this)

because https://github.com/supabase/auth-ui/blob/main/packages/svelte/package.json is missing

 "publishConfig": {
    "access": "public"
  },

And potentially a bunch of other stuff like main, module, files, types etc?

When using supabase-js v2.5.0 in my project, I get this type error:

www:build: Type error: Type 'import("/vercel/path0/apps/www/node_modules/@supabase/supabase-js/dist/module/SupabaseClient").default<any, "public", any>' is not assignable to type 'import("/vercel/path0/node_modules/@supabase/supabase-js/dist/module/SupabaseClient").default<any, "public", any>'.
--
16:10:23.820 | www:build:   Property 'supabaseUrl' is protected but type 'SupabaseClient<Database, SchemaName, Schema>' is not a class derived from 'SupabaseClient<Database, SchemaName, Schema>'.
16:10:23.820 | www:build:
16:10:23.820 | www:build:   79 \|                   </p>
16:10:23.820 | www:build:   80 \|                 </div>
16:10:23.820 | www:build: > 81 \|                 <Auth.UserContextProvider supabaseClient={supabase}>
16:10:23.821 | www:build:      \|                                           ^
16:10:23.821 | www:build:   82 \|                   <AuthContainer supabaseClient={supabase}>
16:10:23.822 | www:build:   83 \|                     <Auth

I have an assumption that this might be because of the RC dev dependency.

Issue happening here: supabase/supabase#12220

Bug report

I think it still works but gives the following warning:

next-dev.js?3515:20 Warning: Received `false` for a non-boolean attribute `loading`.

If you want to write it to the DOM, pass a string instead: loading="false" or loading={value.toString()}.

If you used to conditionally omit it with loading={condition && value}, pass loading={condition ? value : undefined} instead.
    at button
    at Button (webpack-internal:///./node_modules/@supabase/auth-ui-react/dist/esm/src/components/UI/Button.js:57:5)
    at div
    at Container (webpack-internal:///./node_modules/@supabase/auth-ui-react/dist/esm/src/components/UI/Container.js:47:5)
    at div
    at Container (webpack-internal:///./node_modules/@supabase/auth-ui-react/dist/esm/src/components/UI/Container.js:47:5)
    at form
    at MagicLink (webpack-internal:///./node_modules/@supabase/auth-ui-react/dist/esm/src/components/Auth/interfaces/MagicLink.js:31:5)

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

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

Code:

    <Auth supabaseClient={supabaseClient} appearance={{ theme: ThemeSupa }} magicLink={true} />

Just click on "send a magic link email" with chrome dev tools open and you should see this error.

I am using the latest version of Next.js and React.

1. Go to '…'
2. Click on '…'
3. Scroll down to '…'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of supabase-js: [e.g. 6.0.2]
• Version of Node.js: [e.g. 10.10.0]

Additional context

Add any other context about the problem here.

It seems like there is no way to alter the text and style it. The variables doesn't contain a property for this line of text either. I have checked the ThemeVariables and messageText or messageTextDanger didn't work. How to modify the text and style it?

Also, the Check your email for the password reset link message falls under this category too. Seems like there is no way to change it.

Bug report

I'm trying to set up password reset flow in my nextjs app with supabase and supabase auth ui. It's not working and I'm struggling to understand the root cause.

Describe the bug

When a reset link is clicked, no password reset dialog is shown.

To Reproduce

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

1. Instantiate a nextjs app with supabase and auth-ui
2. Create a new page with the following content:

// LOCATED IN pages/auth-ui.jsx
import {
    Auth,
    // Import predefined theme
    ThemeSupa,
} from '@supabase/auth-ui-react'
import {useSupabaseClient} from "@supabase/auth-helpers-react";
import Container from "@mui/material/Container";

const AuthUi = () => {
    const supabase = useSupabaseClient();

    return(
        <Container maxWidth={"sm"}>
            <Auth
                supabaseClient={supabase}
                appearance={{ theme: ThemeSupa }}
                theme="dark"
                redirectTo={`http://app.local/auth-ui`}
            />
        </Container>

    )
}

export default AuthUi

2. Setup your auth settings in supabase:

Site URL: http://app.local
Redirect Url: http://app.local

Side note - I'm using http here since I have a local instance of my app on this redirect URL, so the certificate is not a concern.

3. Using the AuthUI, generate an email for a password reset. The link in the email will be in the format of:

https://XXX.supabase.co/auth/v1/verify?token=XXX&type=recovery&redirect_to=http://app.local/auth-ui

4. Click the link
5. Auth flow will end up with the following path:

http:/app.local/auth-ui#

The user will remain signed in, but no reset password view will be shown.

Expected behavior

It works and doesn't require users to debug this - it's such a basic functionality, strange that it's not working correctly by default.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows] macos
• Browser (if applies) [e.g. chrome, safari] chrome
• Version of supabase-js: [e.g. 6.0.2]:

    "@supabase/auth-helpers-nextjs": "^0.5.2",
    "@supabase/auth-helpers-react": "^0.3.1",
    "@supabase/auth-ui-react": "^0.2.6",
    "@supabase/supabase-js": "^2.1.0",

• Version of Node.js: [e.g. 10.10.0]:

> node -v    
v16.7.0

Additional context

If you'll click the link second time, you'll not get a proper error handle, instead, the redirect will look like this:

http://xxx.local/auth-ui#error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

It's quite clear that it should look like this (query, not an anchor):

http://xxx.local/auth-ui?error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

Bug report

Appears to be implemented correctly in svelte but not tsx. I've been running into this for weeks and thought I had a bug in my code

Describe the bug

See https://github.com/supabase/auth-ui/blob/2232e5f9d388648e0c37d84ba021518137579747/packages/react/src/components/Auth/interfaces/EmailAuth.tsx#L87
vs
https://github.com/supabase/auth-ui/blob/14245e3fa1df03e20a734252e317fb59e72b2d57/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte#L48

the emailRedirectTo param is not passed to the auth.signUp function.

To Reproduce

Set up a Auth usage and specify a url to redirectTo

Chore

Describe the chore

lodash is not tree-shakable. So about 69.9kB of your 127.7kB (minimized) bundle size is used for this single import:

import { merge } from 'lodash'

Instead you should import

import merge from 'lodash/merge'

this is 'just' 9.8 kB.

I was on "^0.1.7", it auto-upgraded to "^0.1.8"

which broke my sign-in

I am on supabase v1 which was working with 0.1.7, but after this patch this error is showing

For now, I've reverted to "0.1.7"

Original request: supabase/auth-helpers#58

Relatively similar to the email and magic link workflows, Supabase supports phone auth.

I'd love to see Supabase auth add support for this as it builds out more providers!

Thanks so much for all your work. Truly one of the easiest auth integrations I've ever done.

Bug report

I am using @supabase/auth-ui-react with Nextjs 13, and when I deployed my app to Vercel and went to the auth page, it gave me an client-side error like the screenshot shows below. Application error: a client-side exception has occurred (see the browser console for more information).

I got no error when developing locally with yarn dev, and no error when yarn build either. It only occurs when deployed to Vercel. Is this a bug related to Webpack?

Screenshots

I clicked into the file prompted by the last line of error at MessagePort.T (framework-3b5a00d5d7e8d93b.js:33:1904) and it seems like Webpack-related.

System information

• OS: Windows 11
• Browser: Edge
• Version of supabase-js: latest
• Version of Node.js: 18.12.0

Feature request

Support automatically focusing the first focusable element in the auth form.

Is your feature request related to a problem? Please describe.

When showing the auth form, it's likely that I want to bring the focus to the first field. This is particularly important if the auth form is in a modal; bringing the focus into the modal is required by the WCAG accessibility standard.

Describe the solution you'd like

In auth-ui-react, the Auth component could accept an autoFocus prop that gets passed through to the first focusable element it renders.

Describe alternatives you've considered

I can use a MutationObserver to observe the DOM where the form will render, then focus the first focusable element that renders. 🙈

Using the latest version of @supabase/auth-ui-react (0.2.2) and @supabase/supabase-js (2.0.0)

In a React app (NextJS), using e-mail/password authentication, the redirectTo prop doesn't appear to do anything. No redirection takes place after login, although the login is successful.

This is how I'm using the component within a page:

export default function LoginPage()
{
    return <Auth supabaseClient={ supabase } redirectTo={ "http://localhost:3000/" } appearance={ { theme: ThemeSupa } } />;
}

The Supabase console has http://localhost:3000/ in the list of redirects.

I've tried with and without the forward slash.

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