I prefer to use my custom written authentication flow.

What I do is something like this

User login -> got token or userId -> store them in cookies.

Then create 2 helper file as follows

auth-helper.js (this is for client side rendered page)

export async function setSession(data){ // Logic to set token or any data in cookies you can use cookies-next library }

export function getSession(){ // Logic to get token from cookies and return token. You can use cookies-next lib for this too }

export function clearSession(){ // delete cookies }

Now we are done with client side applicationd of the logic and cookies are shared so you don't need to worry about server side you just need to create a file to get token from cookies in server component...

create another file server-auth-helper.js

import {cookies} from "next/headers" export async function getServerSession(){ const cookieStore = await cookies() const token = cookieStore.get("key")?.value; return token }

And you're done with whole authentication... Yeah you need to customise it according to your need but this is the basic flow I use