Theo's Typesafe Cult•2y ago

How to implement redirect based on user role

Hi, I would love to implement redirections based on the user role. I want to implement it so that on every single page, I can explicitly define which roles are allowed to view the current page and the redirect url to which the user will be redirected if he isn't authorized to view the page. Now I have implemented a simple hook which works but the content of the page still flashes before the user gets redirected. What is the recommended way to protect routes in t3-app based on roles?
My implementation: useRoleRedirect.ts:

import { type Role } from "@prisma/client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

const useRoleRedirect = (allowedRoles: Role[], redirect: string) => {
  const userRole = useSession().data?.user.role;
  const router = useRouter();

  useEffect(() => {
    if (userRole && !allowedRoles.includes(userRole)) {
      void router.push(redirect);
    }
  }, [router, userRole, redirect, allowedRoles]);
};

export default useRoleRedirect;

import { type Role } from "@prisma/client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

const useRoleRedirect = (allowedRoles: Role[], redirect: string) => {
  const userRole = useSession().data?.user.role;
  const router = useRouter();

  useEffect(() => {
    if (userRole && !allowedRoles.includes(userRole)) {
      void router.push(redirect);
    }
  }, [router, userRole, redirect, allowedRoles]);
};

export default useRoleRedirect;

Usage of hook in other component:

const Page: NextPage = () => {
  useRoleRedirect([Role.ADMIN, Role.MANAGER], "/");
...

const Page: NextPage = () => {
  useRoleRedirect([Role.ADMIN, Role.MANAGER], "/");
...

Now this thing works but the original content from "Page" still gets flashed which I would like to prevent. I'm also just curious what the standard way of handling this type of problem is. I greatly appreciate any advice 🙂

5 Replies

Neto•2y ago

middlewares

clemwoOP•2y ago

Do you have any resources on how I could implement that specifically? Or a good example? I already found out that I can have protected pages with nextAuth: https://next-auth.js.org/tutorials/securing-pages-and-api-routes Im not sure how to access the session object there to get the user role

Securing pages and API routes | NextAuth.js

You can easily protect client and server side rendered pages and API routes with NextAuth.js.

Neto•2y ago

https://authjs.dev/guides/basics/role-based-access-control

Role-based access control | Auth.js

There are two ways to add role-based access control (RBAC) to your application, based on the session strategy you choose. Let's see an example for each of these.

Neto•2y ago

how to add role to the auth js side of things the middleware side, the matcher is whatever you define but you shold check if the user exists, and later check his role both of those operations should redirect to whatever you need but the docs are awful

clemwoOP•2y ago

Thanks for the link, I'll check it out

Gaming

Programming

How to implement redirect based on user role