Next.js Discord

Discord Forum

NextJS + Supabase - Parallel Protected routes with role based Auth

Unanswered
zaxtun posted this in #help-forum
Open in Discord
zaxtunOP
Doe anyone know how to accomplish this? I am getting the following behavior on my setup:
__
Folder structure looks like the attached picture

- Dashboard
- - '@engineer'
- - '@rep'
- layout.tsx
__
layout.tsx has the following code:

import { getSession, getUserDetails } from '@/app/supabase-server';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import {cache} from 'react'

export default async function Layout(props: {
children: React.ReactNode;
engineer: React.ReactNode;
rep: React.ReactNode;
}) {
const session = await getSession();
console.log('this is the console log in layout' + session);
return <section lang="en">{session ? props.engineer : props.rep}</section>;
}
__
Here is the getSession function:

export async function getSession() {
const supabase = createServerSupabaseClient();
try {
const {
data: { session }
} = await supabase.auth.getSession();
return session;
} catch (error) {
console.error('Error:', error);
return null;
}
}
__
Here is the middleware file
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'
import type { Database } from '@/typesdb'

export async function middleware(req: NextRequest) {
const res = NextResponse.next()
const supabase = createMiddlewareClient<Database>({ req, res })
await supabase.auth.getSession()
return res
}

__

3 Replies

zaxtunOP
After a successful login, I use router.push('/dashboard') and am correctly navigated to the '/dashboard' route with the '@engineer' page. This matches the next.js parallel routes docs.

After a hard refresh, I am sent to the '@rep' page, though I should still have a session.

Questions:
1) Is there a better way to handle parallel routes with role-based-auth?
2) Why is session returning 'null' in layout.tsx on a hard refresh, but correctly getting the session on a router.push('/dashboard')
3) Is there a way to force layout.tsx to run the const session = await getSession(); code again?

_
Resources:
- Reviewed this repo: https://github.com/joschan21/breadit
- Reviewed this video (it doesn't use parallel routes) : https://www.youtube.com/watch?v=SUS1t6Kq7-8&list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF&index=3
- Reviewed the parallel routes docs (see attached screenshot). https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
zaxtunOP
Slightly more info, I had a export const dynamic = 'force-static'; in my root layout folder. When I delete this, the routes work as expected
but if I run an npm run build, I get the ofllowing error: Error: DynamicServerError: Dynamic server usage: cookies
at staticGenerationBailout (/home/ben/repos/specfrog/.next/server/chunks/683.js:81:21)
at Object.cookies (/home/ben/repos/specfrog/.next/server/chunks/511.js:8027:62)
at NextServerComponentAuthStorageAdapter.getCookie (/home/ben/repos/specfrog/.next/server/chunks/799.js:199:42)
at NextServerComponentAuthStorageAdapter.getItem (/home/ben/repos/specfrog/.next/server/chunks/799.js:571:28)
at /home/ben/repos/specfrog/.next/server/chunks/511.js:3008:37
at Generator.next (<anonymous>)
at /home/ben/repos/specfrog/.next/server/chunks/511.js:2916:71
at new Promise (<anonymous>)
at __awaiter (/home/ben/repos/specfrog/.next/server/chunks/511.js:2898:12)
at getItemAsync (/home/ben/repos/specfrog/.next/server/chunks/511.js:3007:38) {
digest: 'DYNAMIC_SERVER_USAGE'
}