Storing Users Current Organization
Unanswered
Horned oak gall posted this in #help-forum
Horned oak gallOP
Hey everyone,
I am new to NextJS and coming over from more of a .Net experience. I have been working on a multitenant app with NextJS 14 with app router and Supabase. I have everything set up in Supabase with organizations and org id on all tables. My main question is how to track client and server side what the users current selected organization is. I have been leaning towards a cookie with the org id that could be accessed from both client and server. Would this be the best approach?
I am new to NextJS and coming over from more of a .Net experience. I have been working on a multitenant app with NextJS 14 with app router and Supabase. I have everything set up in Supabase with organizations and org id on all tables. My main question is how to track client and server side what the users current selected organization is. I have been leaning towards a cookie with the org id that could be accessed from both client and server. Would this be the best approach?
25 Replies
@Horned oak gall Hey everyone,
I am new to NextJS and coming over from more of a .Net experience. I have been working on a multitenant app with NextJS 14 with app router and Supabase. I have everything set up in Supabase with organizations and org id on all tables. My main question is how to track client and server side what the users current selected organization is. I have been leaning towards a cookie with the org id that could be accessed from both client and server. Would this be the best approach?
cookies can be one solution, but it's not readable from clientside.
Another solution would be to store it inside the current session.
Also another solution would be to pass it inside the url.
I recommend you the session way
Another solution would be to store it inside the current session.
Also another solution would be to pass it inside the url.
I recommend you the session way
using query param will be the best option @Horned oak gall
Horned oak gallOP
@James4u going that route is there a way to force a fall back page or redirect a user to a page if they don't have that set on first login?
did you mean fall back page for un-authenticated users?
so like after they login, they don't ahve org_id in the url, you would like to append first org_id from your table?
in the url?
Horned oak gallOP
Yeah exactly. A user can belong to multiple orgs so on first login they might not have one selected already. I was thinking I will need a way to either set it automatically after they successfully login or redirect them to a page where they can select one.
well it's up to you
after they login without any org_id in the url, you can show a page where they can choose an org
otherwise in the server side, you fetch all orgs for him and get first id (maybe) and then append it in the url
@Horned oak gall Yeah exactly. A user can belong to multiple orgs so on first login they might not have one selected already. I was thinking I will need a way to either set it automatically after they successfully login or redirect them to a page where they can select one.
Doing it inside the url is an option as well (as said here: https://nextjs-forum.com/post/1255320164778381324#message-1255409780919504966) but it’s also a lot to maintain (as you see now). Also the url is sometimes not that easy accessible. In page.tsx you can directly access the params. And in client using the „useParams“ Hook you can go that too, but what about server components, that are component, that may be deeply nested in your page.tsx. Passing everything down?
@B33fb0n3 Doing it inside the url is an option as well (as said here: https://discord.com/channels/752553802359505017/1255320164778381324/1255409780919504966) but it’s also a lot to maintain (as you see now). Also the url is sometimes not that easy accessible. In page.tsx you can directly access the params. And in client using the „useParams“ Hook you can go that too, but what about server components, that are component, that may be deeply nested in your page.tsx. Passing everything down?
Fair, but it's just in case of using Next.js and ofc we are talking about next.js haha.
why not use Server Context?
why not use Server Context?
@James4u Fair, but it's just in case of using Next.js and ofc we are talking about next.js haha.
why not use Server Context?
Where is the data saved when using server context? Headers? Cookies? URL? Database? Cache? …? …?
yeah maybe header.
middleware.ts
import { NextResponse } from 'next/server';
export default function middleware(request: NextRequest, event: NextFetchEvent) {
request.headers.set('x-url', request.url);
return next(request, event);
}
import { headers } from 'next/headers';
export const ServerComponent = () => {
const url = new URL(headers().get('x-url')!);
const searchParams = url.searchParams;
// ...
}what about this?
only concern is that this server component will be always rendered dynamically
@James4u yeah maybe header.
middleware.ts
import { NextResponse } from 'next/server';
export default function middleware(request: NextRequest, event: NextFetchEvent) {
request.headers.set('x-url', request.url);
return next(request, event);
}
import { headers } from 'next/headers';
export const ServerComponent = () => {
const url = new URL(headers().get('x-url')!);
const searchParams = url.searchParams;
// ...
}
That’s also a way of doing it, but keep in mind, that if you use headers, that your routes will be dynamically rendered
So my recommendation of storing the org_id inside the session has reasons 🙂
@James4u is your problem solved like that?
@James4u ?
in case you didn't notice, James is not the OP.
@joulev in case you didn't notice, James is not the OP.
Oh Shit. I didn’t notice. Thanks 🙏