redirectTo does not work for sign in

[democrazyfi]

Bug report

• [x] I confirm this is a bug with Supabase, not with my own application.
• [x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

redirectTo param on the Auth component is ignored in email sign in

To Reproduce

    <Auth
      supabaseClient={supabase}
      redirectTo={"http://localhost:3000/dashboard"}
    />

See related code in https://github.com/supabase/auth-ui/blob/main/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte#L41-L47 (where sign up is using redirectTo but not sign in)

Expected behavior

redirectTo prop value to be honoured

Screenshots

N/A

System information

N/A

Additional context

We should be able to provide a better ux for users if we're able to redirect them to where they were before when they sign in, just like we do for sign up

[fvkramer]

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

[yingw787]

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

[democrazyfi]

It seems this is by design https://github.com/supabase/gotrue-js/issues/217#issuecomment-1049628656

And unlikely to be fixed due to tehcnical limitations in the base auth lib

[Slyracoon23]

I have this issue as well

[danielhangan]

same

[this-is-allan]

same

[blackmad]

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

[christopheragnus]

Hey - it shows the redirectTo in the docs. Anyone know when this will be fixed?

[silentworks]

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.

[democrazyfi]

Solved this by having the auth-ui component (login / sign up) as a modal in the current view instead of being a separate page.

That way if you sign in the UI state will update on sign in without the need for redirection, and for sign up the redirectTo behaviour already works.

[zdzarski]

It sounds like it's by design, however if you want it to work you can figure it out in the LoginPage.

  const { session } = useAuth(); // returns watched auth session form supabase
  const navigate = useNavigate(); // router v6
  useEffect(() => {
    if (session) {
      navigate('/'); // url can be configured by params or location state
    }
  }, [session, navigate]);

[BriwwWoxoW]

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.

[efd1]

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();
});

[Cayllen]

For SvelteKit this solution pretty much worked for me

	import { onMount } from 'svelte';
	onMount(() => {
		const {
			data: { subscription }
		} = data.supabase.auth.onAuthStateChange((event) => {
			if (event === 'SIGNED_IN') {
				goto('/logging-in?redirect=' + '/main', { invalidateAll: true });
			}
		});
		return () => subscription.unsubscribe();
	});

Below that is the Auth component

[rufataliy]

What is the status of this issue? Redirect only works if there is an exact matching url in allowlist whereas. The documentation says wildcards can be used (see the screenshot). Not sure what is the right way to use redirectTo

[dewhurstwill]

Workaround:

import { createContext, useContext, useEffect, useState } from "react";
// @ts-ignore
import { supabase } from "../lib/supabaseClient";

const AuthContext = createContext({});

export const useAuth = (): any => useContext(AuthContext);

const login = (email: string, password: string) =>
  supabase.auth.signInWithPassword({ email, password });

function AuthProvider({ children }: any) {
  const [session, setSession] = useState<any>(null);
  const [user, setUser] = useState(null);
  const [auth, setAuth] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    supabase.auth.getSession().then(({ data }: any) => {
      setSession(data?.session)
      setUser(data?.session?.user);
      setLoading(false);
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event: any, _session: any) => {
      if (_event === "INITIAL_SESSION") {
        setSession(_session);
        setUser(_session.user);
        setAuth(true);
        setLoading(false);
      } else if (_event === "SIGNED_IN") {
        setSession(_session);
        setUser(_session.user);
        setAuth(true);
        setLoading(false);
      } else if (_event === "SIGNED_OUT") {
        setSession(null);
        setUser(null);
        setAuth(false);
        setLoading(false);
      }
    })

    return () => subscription.unsubscribe()
  }, []);

  return (
    <AuthContext.Provider value={{ session, user, login, loading }}>
      { !loading && children }
    </AuthContext.Provider>
  );
};

export default AuthProvider;

const { user } = useAuth();

if (user) return (
  <Navigate to="/dashboard" />
)
return <Component />