After login, blank page

bs-prashant-gautam commented 1 week ago

Created a user with role admin exacly as shown in video, but still after login, it just shows blank page.

Gdoor777 commented 1 week ago

same here, lama-dev-next-dashboard@0.1.0 dev

next dev

⚠ Port 3000 is in use, trying 3001 instead. ⚠ Port 3001 is in use, trying 3002 instead. ⚠ Port 3002 is in use, trying 3003 instead. ▲ Next.js 14.2.5

Local: http://localhost:3003
Environments: .env.local, .env

✓ Starting... ✓ Ready in 2.4s ○ Compiling /src/middleware ... ✓ Compiled /src/middleware in 971ms (181 modules) [ { matcher: [Function], allowedRoles: [ 'admin' ] }, { matcher: [Function], allowedRoles: [ 'student' ] }, { matcher: [Function], allowedRoles: [ 'teacher' ] }, { matcher: [Function], allowedRoles: [ 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher' ] }, { matcher: [Function], allowedRoles: [ 'admin' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] }, { matcher: [Function], allowedRoles: [ 'admin', 'teacher', 'student', 'parent' ] } ] Middleware triggered Session claims: { "azp": "http://localhost:3003", "exp": 1727009604, "iat": 1727009544, "iss": "https://amused-alpaca-74.clerk.accounts.dev", "nbf": 1727009534, "sid": "sess_2mNzbSAxBP88888888887Asw4pT", "sub": "user_2mNuQ888888888886UYOJC6Z2" } User role: undefined Org role: undefined Effective role: student ○ Compiling /[[...sign-in]] ... ✓ Compiled /[[...sign-in]] in 2.6s (890 modules) ✓ Compiled in 370ms (363 modules) GET / 200 in 3647ms ✓ Compiled /favicon.ico in 249ms (556 modules) GET /favicon.ico 200 in 438ms Middleware triggered Session claims: { "azp": "http://localhost:3003", "exp": 1727009588, "iat": 1727009528, "iss": "https://amused-alpaca-74.clerk.accounts.dev", "nbf": 1727009518, "sid": "sess_2mNzbSAxB88888888887Asw4pT", "sub": "user_2mNuQ9v4bz58888888888886Z2" } User role: undefined Org role: undefined Effective role: student

Gdoor777 commented 1 week ago

I had to change the middleware to this: import { clerkMiddleware } from '@clerk/nextjs/server'; import { NextResponse } from 'next/server'; import { routeAccessMap } from './lib/settings'; import { createRouteMatcher } from '@clerk/nextjs/server';

const matchers = Object.keys(routeAccessMap).map((route) => ({ matcher: createRouteMatcher([route]), allowedRoles: routeAccessMap[route], }));

export default clerkMiddleware((auth, req) => { const { sessionClaims } = auth();

// Access public metadata from sessionClaims const publicMetadata = sessionClaims?.['https://clerk.dev/user_public_metadata'] as { role?: string; };

// Extract the role from public metadata const role = publicMetadata?.role || 'guest';

console.log('Extracted Role:', role);

// Implement role-based access control for (const { matcher, allowedRoles } of matchers) { if (matcher(req) && !allowedRoles.includes(role)) { console.log( Access denied for role '${role}' on route '${req.nextUrl.pathname}' ); if (role === 'guest') { return NextResponse.redirect(new URL('/no-role', req.url)); } return NextResponse.redirect(new URL(/${role}, req.url)); } } });

export const config = { matcher: ['/((?!_next|[^?]\.(?:.)).*)'], };