Open democrazyfi opened 1 year ago
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
Oh shoot, that's why my redirects are not working...I spent two hours trying to figure this out haha!
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
I have this issue as well
same
same
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"
/>
Hey - it shows the redirectTo
in the docs. Anyone know when this will be fixed?
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.
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.
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]);
This is not an issue, these components aren't smart components and
redirectTo
is only supported forviews
that send emails likemagic_link
,sign_up
andforgotten_password
. The issue with the megaAuth
component is it's doing too much and there is no type narrowing to show which property is available for whichview
. 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 noredirectTo
property as you should handle this using theonAuthStateChange
method from. thesupabase-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.
This is not an issue, these components aren't smart components and
redirectTo
is only supported forviews
that send emails likemagic_link
,sign_up
andforgotten_password
. The issue with the megaAuth
component is it's doing too much and there is no type narrowing to show which property is available for whichview
. 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 noredirectTo
property as you should handle this using theonAuthStateChange
method from. thesupabase-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();
});
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
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
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 />
Bug report
Describe the bug
redirectTo
param on the Auth component is ignored in email sign inTo Reproduce
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 honouredScreenshots
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