Cookies not setting properly supabase ssr #36
Description
Bug report
I have already checked and cant see the same issue.
- [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
I am using supabase-ssr package to log on.
I thought this was only an issue in dev mode as when I ran build mode on Friday it worked, but perhaps I had not properly deleted the cookie when I was testing so am getting the error again now.
Basically the auth-token cookie is not setting properly. If I log on twice, it sets but the first time i log on only sb-__-auth-token-code-verifier is set.
I am unsure if it is something on my side which is causing the error or if there is something timing out in the setting of the second cookie. My code is below.
Note I am using a otp sent to emails for this.
To Reproduce
This is to get the code:
export async function signuplogin(prevState: any, formData: FormData) {
console.log(formData);
const validatedFields = schema.safeParse({
email: formData.get("email"),
});
console.log(validatedFields);
if (!validatedFields.success) {
console.log(validatedFields.error.flatten().fieldErrors.email);
return {
message: validatedFields.error.flatten().fieldErrors,
};
}
console.log(formData);
const email = formData.get("email") as string;
return signInOTP({ email });
}
This is the server component for createClient:
import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";
export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
return createServerClient<Database>(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
get(name: string) {
return cookieStore.get(name)?.value;
},
set(name: string, value: string, options: CookieOptions) {
try {
cookieStore.set({ name, value, ...options });
} catch (error) {
// The `set` method was called from a Server Component.
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
remove(name: string, options: CookieOptions) {
try {
cookieStore.set({ name, value: "", ...options });
} catch (error) {
// The `delete` method was called from a Server Component.
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
},
}
);
};
This is to check the OTP code:
export async function precheckOTP(prevState: any, formData: FormData) {
console.log(formData);
const validatedFields = schema.safeParse({
code: formData.get("code"),
});
console.log(validatedFields);
if (!validatedFields.success) {
console.log(validatedFields.error.flatten().fieldErrors.code);
return {
message: validatedFields.error.flatten().fieldErrors,
};
}
console.log(formData);
const code = formData.get("code") as string;
const user = formData.get("user") as string;
return checkOTP({ token: code, user: user });
}
const checkOTP = async ({ token, user }: { token: string; user: string }) => {
const cookieStore = cookies();
const supabase = createClient(cookieStore);
const email = atob(user);
try {
const { error } = await supabase.auth.verifyOtp({
email,
token,
type: "email",
options: {
redirectTo: "/dashboard",
},
});
if (error) {
return {
message: { error: "Something went wrong. Please try again." },
};
}
} catch (error) {
console.log(error);
return {
message: { error: "Something went wrong. Please try again." },
};
}
return redirect("/dashboard");
};
I am redirected to the dashboard.
However the cookies are not being set properly. The first time:
sb--auth-token-code-verifier is set properly.
The second time I log on sb--auth-token is set
(Note this is called when someone is on protected:
export async function updateSession(request: NextRequest) {
let response = NextResponse.next({
request: {
headers: request.headers,
},
});
const supabase = createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
get(name: string) {
return request.cookies.get(name)?.value;
},
set(name: string, value: string, options: CookieOptions) {
request.cookies.set({
name,
value,
...options,
});
response = NextResponse.next({
request: {
headers: request.headers,
},
});
response.cookies.set({
name,
value,
...options,
});
},
remove(name: string, options: CookieOptions) {
request.cookies.set({
name,
value: "",
...options,
});
response = NextResponse.next({
request: {
headers: request.headers,
},
});
response.cookies.set({
name,
value: "",
...options,
});
},
},
}
);
await supabase.auth.getUser();
return { supabase, response };
}
I have tried with our without this: await supabase.auth.getUser();
But then what happens is I get thrown from the route a moment later or if I try to navigate and I am thrown out of the protected route.
I then have to log in again in which case the second cookie is set.
Expected behavior
That the cookies would all set in the first instance and the user is not required to log on twice for them to set
Screenshots
If applicable, add screenshots to help explain your problem.
System information
- OS: [e.g. macOS,]
- Browser (if applies) [e.g., safari and firefox]
- Version of supabase-js: [e.g. 2.42.3] (ssr 0.0.10)
- Version of Node.js: [e.g. 18.17.0]
nextjs version - 14.1.4
Additional context
Add any other context about the problem here.