Next js Custom Session Provider
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
I want once the user open the app, to check if it has token in cookies, if it have cookies to get the info of that token from the backend, and once its returned, i want the user info to be used so i can manage my app how ?
Answered by B33fb0n3
You can use context providers, to first fetch your data serverside (cookie & data in your case) and then provide it to the context provider to be able to read it in all client components: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
11 Replies
@Asiatic Lion I want once the user open the app, to check if it has token in cookies, if it have cookies to get the info of that token from the backend, and once its returned, i want the user info to be used so i can manage my app how ?
You can use context providers, to first fetch your data serverside (cookie & data in your case) and then provide it to the context provider to be able to read it in all client components: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
Answer
Asiatic LionOP
i mean on all my app
once the app is opened
@Asiatic Lion i mean on all my app
yea, then place the context provider on the top of your tree
Asiatic LionOP
context or zustand ?
what is better
that's a personal preference
Asiatic LionOP
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import {adminRoutes, DEFAULT_LOGGED_OUT_REDIRECT_URL, supplierRoutes} from "@/routes";
import {cookies} from "next/headers";
import {getUserInfo} from "@/app/_api/auth";
import {User} from "@/app/model/user.model";
import {ROLES} from "@/app/model/auth/roles-enum";
let user : User | undefined;
// This function can be marked
export async function middleware(request: NextRequest) {
const { nextUrl } = request;
const token = cookies().get("party-pals-token");
if(!user && token){
user = await getUserInfo(token.value)
}
console.log(user, 'user')
const isLoggedIn = cookies().get("party-pals-token");
const isAdmin = user?.role_id === ROLES.ADMIN.id;
const isSupplier = user?.role_id === ROLES.SUPPLIER.id;
const isAdminRoute = nextUrl.pathname.startsWith(adminRoutes);
const isSupplierRoute = nextUrl.pathname.startsWith(supplierRoutes);
const isProtectedRoute = isAdminRoute || isSupplierRoute;
if(isProtectedRoute && !isLoggedIn){
return NextResponse.redirect(new URL(DEFAULT_LOGGED_OUT_REDIRECT_URL, nextUrl));
}
if (isAdminRoute && !isAdmin) {
return NextResponse.redirect(new URL('/', request.url));
}
if (isSupplierRoute && !isSupplier) {
return NextResponse.redirect(new URL('/', request.url));
}
return null;
}
// See "Matching Paths" below to learn more
export const config = {
matcher: ['/admin/:path', '/supplier/:path'],
}
import type { NextRequest } from 'next/server'
import {adminRoutes, DEFAULT_LOGGED_OUT_REDIRECT_URL, supplierRoutes} from "@/routes";
import {cookies} from "next/headers";
import {getUserInfo} from "@/app/_api/auth";
import {User} from "@/app/model/user.model";
import {ROLES} from "@/app/model/auth/roles-enum";
let user : User | undefined;
// This function can be marked
async if using await insideexport async function middleware(request: NextRequest) {
const { nextUrl } = request;
const token = cookies().get("party-pals-token");
if(!user && token){
user = await getUserInfo(token.value)
}
console.log(user, 'user')
const isLoggedIn = cookies().get("party-pals-token");
const isAdmin = user?.role_id === ROLES.ADMIN.id;
const isSupplier = user?.role_id === ROLES.SUPPLIER.id;
const isAdminRoute = nextUrl.pathname.startsWith(adminRoutes);
const isSupplierRoute = nextUrl.pathname.startsWith(supplierRoutes);
const isProtectedRoute = isAdminRoute || isSupplierRoute;
if(isProtectedRoute && !isLoggedIn){
return NextResponse.redirect(new URL(DEFAULT_LOGGED_OUT_REDIRECT_URL, nextUrl));
}
if (isAdminRoute && !isAdmin) {
return NextResponse.redirect(new URL('/', request.url));
}
if (isSupplierRoute && !isSupplier) {
return NextResponse.redirect(new URL('/', request.url));
}
return null;
}
// See "Matching Paths" below to learn more
export const config = {
matcher: ['/admin/:path', '/supplier/:path'],
}
is this middleware legit ?
that seems like a different issue for me. Please open a new thread.