NextJS middleware helper sends user to unauthorized route after signInWithOTP() is fired.
Hi,
When I try to login with the signInWithOTP function and click on the magic link, the supabase/next middleware helper sends me to the unauthorized route even though I just authorized with the magic link. However, if I keep the cookies that were just stored then try to go to any protected routes or do signInWithOTP again, it works fine. Is there any way to work around this?
Code:
Middleware.ts
Login.tsx
When I try to login with the signInWithOTP function and click on the magic link, the supabase/next middleware helper sends me to the unauthorized route even though I just authorized with the magic link. However, if I keep the cookies that were just stored then try to go to any protected routes or do signInWithOTP again, it works fine. Is there any way to work around this?
Code:
Middleware.ts
export const middleware: NextMiddleware = withMiddlewareAuth({
redirectTo: "/login",
authGuard: {
isPermitted: async (user): Promise<boolean> => {
const res = await supabase.rpc("user_has_any_role", {
user_id_: user.id,
});
return !!res.data;
},
redirectTo: "/unauthorized",
},
});
// See "Matching Paths" below to learn more
export const config = {
matcher: ["/((?!api|_next|fonts|login|unauthorized|[\\w-]+\\.\\w+).*)"],
};Login.tsx
const handleLogin = async (email) => {
try {
setLoading(true);
const { error } = await supabase.auth.signInWithOtp({
email,
options: { emailRedirectTo: "/shows" },
});
if (error) throw error;
alert("Check your email for the login link!");
} catch (error) {
alert(error.error_description || error.message);
} finally {
setLoading(false);
}
};
