nextjs 13 supabase cookie can be read with javascr...
# help-and-questions
n
Hi, I am trying to set up an app with nextjs 13 (with app router) and supabase, and setting up authentication for log in/log out with private page routes. I managed to set up a basic POC app using @supabase/auth-helpers-nextjs and @supabase/supabase-js. The problem is that when I log in, the cookie created is readable by javascript on the browser. (i.e. type "document.cookie" in the console.). Where can I change the cookie options such as httpOnly, secure, maxAge, etc. so that the cookie cannot be read by the front end,etc.? I am not sure if this is nextjs or supabase settings. Just for your refence, here is my repo https://github.com/nfabacus/supabase-nextjs13-example-app. Thank you in advance. 🙂
j
You can set the domain, secure, samesite, path and maxage options, along with the cookie name, by passing in an object for the 4th parameter of createClientComponentClient. A bit more complicated to explain for createMiddlewareClient, but you can find it here: https://github.com/supabase/auth-helpers/blob/main/packages/nextjs/src/middlewareClient.ts#L72-L83
Regarding security, I liked an auth0 article https://auth0.com/blog/secure-browser-storage-the-facts/ I think Supabase's approach is understandable and reasonably secure, but technically insecure. It's difficult to protect against every scenario.
n
Thanks @Jason Creviston for the above info.🙂 I will play around with the createMiddlewareSupabaseClient. As for the createClientComponentClient, I don't think the frontend should ever be able to set cookie options such as httpOnly. As you mentioned, I will definitely not want to use an insecure cookie that the frontend can read as I think it is vulnerable to xss attacks..😥
j
Yeah, this is one of the reasons I built my own auth helper; but it's only for SvelteKit, not Next.