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;

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], "/");
...

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

Neto•7/6/23, 1:49 PM

middlewares

NNeto middlewares

clemwoOP•7/6/23, 2:00 PM

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•7/6/23, 2:03 PM

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•7/6/23, 2:03 PM

how to add role to the auth js side of things

Neto•7/6/23, 2:04 PM

the middleware side, the matcher is whatever you define

Neto•7/6/23, 2:04 PM

but you shold check if the user exists, and later check his role

Neto•7/6/23, 2:05 PM

both of those operations should redirect to whatever you need

Neto•7/6/23, 2:05 PM

but the docs are awful

clemwoOP•7/6/23, 2:10 PM

Thanks for the link, I'll check it out

How to implement redirect based on user role

Similar Threads

Similar Threads

Similar Threads