This is not an issue, these components aren’t smart components and redirectTo is only supported for views that send emails like magic_link, sign_up and forgotten_password. The issue with the mega Auth component is it’s doing too much and there is no type narrowing to show which property is available for which view. I have since pulled the views out into individual components to make it easier to see what properties are available. So you can use <SignIn /> component instead and you will see there is no redirectTo property as you should handle this using the onAuthStateChange method from. the supabase-js library instead. In the case of NextJS you can find an example here https://github.com/supabase-community/supabase-by-example/blob/main/reset-flow/auth-ui/nextjs/app/auth/signin/sign-in-form.tsx and in the case of just a normal React app you can find an example here https://github.com/supabase-community/supabase-by-example/blob/main/reset-flow/auth-ui/react/src/routes/auth/signin.tsx.

Oh shoot, that’s why my redirects are not working…I spent two hours trying to figure this out haha!

I’m really confused by this - it’s in the official docs that this should work, no?

https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs

 <Auth
      supabaseClient={supabase}
      view="magic_link"
      appearance={{ theme: ThemeSupa }}
      theme="dark"
      showLinks={false}
      providers={[]}
      redirectTo="http://localhost:3000/auth/callback"
    />

This is not an issue, these components aren’t smart components and redirectTo is only supported for views that send emails like magic_link, sign_up and forgotten_password. The issue with the mega Auth component is it’s doing too much and there is no type narrowing to show which property is available for which view. I have since pulled the views out into individual components to make it easier to see what properties are available. So you can use <SignIn /> component instead and you will see there is no redirectTo property as you should handle this using the onAuthStateChange method from. the supabase-js library instead. In the case of NextJS you can find an example here https://github.com/supabase-community/supabase-by-example/blob/main/reset-flow/auth-ui/nextjs/app/auth/signin/sign-in-form.tsx and in the case of just a normal React app you can find an example here https://github.com/supabase-community/supabase-by-example/blob/main/reset-flow/auth-ui/react/src/routes/auth/signin.tsx.

Thanks for this awesome solution! After looking at the supabase/auth-ui repo, it seems that the <SignIn /> component is actually just the <Auth /> component with a view="sign_in" prop: https://github.com/supabase/auth-ui/blob/026a3824a7dbff1512a9bacb242ded7ff6b6c2d1/packages/react/src/components/Auth/ui/index.tsx#L47C1-L58C2 So the main thing to remember for redirecting after login would be, as you mentioned, the supabase.auth.onAuthStateChange listener which is also working with the <Auth /> component:

const supabase = createClientComponentClient();
const router = useRouter();

useEffect(() => {
  const {
    data: { subscription },
  } = supabase.auth.onAuthStateChange((event) => {
    if (event === "SIGNED_IN") {
      router.refresh();
      router.replace("/redirect_where_you_want")
    }
  });

  return () => subscription.unsubscribe();
});

This is not an issue, these components aren’t smart components and redirectTo is only supported for views that send emails like magic_link, sign_up and forgotten_password. The issue with the mega Auth component is it’s doing too much and there is no type narrowing to show which property is available for which view. I have since pulled the views out into individual components to make it easier to see what properties are available. So you can use <SignIn /> component instead and you will see there is no redirectTo property as you should handle this using the onAuthStateChange method from. the supabase-js library instead. In the case of NextJS you can find an example here https://github.com/supabase-community/supabase-by-example/blob/main/reset-flow/auth-ui/nextjs/app/auth/signin/sign-in-form.tsx and in the case of just a normal React app you can find an example here https://github.com/supabase-community/supabase-by-example/blob/main/reset-flow/auth-ui/react/src/routes/auth/signin.tsx.

This helped alot thank you mate i was looking into this way to long.

Hey, +1 here. I was going through supabase docs today for a new project and the AuthUI seemed like the suggested way to handle Auth. Found the same issue in code as OP found in the EmailView. RedirectTo isn’t used.

Fix should be just providing options hash to signup call