Supabase Auth UI: Google OAuth is redirecting, but email is not

Question

Edit:I found the source of this issue. The redirectTo param of the Auth component works for OAuth providers, but does not work for email or magiclink. Does anyone know how to redirect users to a certain page when the user signs in with email while using the Auth UI component?

I am using the Supabase Auth UI component.

When a user signs in with Google, they are correctly redirected to http://localhost:3001/loginrouting/ as specified in the redirectTo field. However when the user logs in via email and pw, they are not redirected and remain on the http://localhost:3001/login/ page. I was able to confirm that the login request was successful when using email and pw. The only thing that is not working is the redirect.

See screen recording here: https://www.loom.com/share/f32306a460ad4704b07f7ff0f6fb061b

Email is enabled as an Auth Provider in my Supabase Authentication settings.

Code here:

import { useSupabaseClient } from "@supabase/auth-helpers-react";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";

export default function LoginPage() {
  const supabase = useSupabaseClient();

  return (
    <div className="items-center justify-center mx-12 h-screen">
      <Auth
        redirectTo="http://localhost:3001/loginrouting"
        supabaseClient={supabase}
        appearance={{ theme: ThemeSupa }}
        theme="default"
        providers={["google"]}
      />
    </div>
  );
}

Answer 1

I had this same issue, looks like you have to listen to onAuthStateChange as follows:

const router = useRouter()

const { data } = supabase.auth.onAuthStateChange(
  async (event, session) => {
    console.log("auth state changed: ", session);
    if (session) {
      router.push('/dashboard');
  
    }
  }
)