How to implement the correct middleware in NextJS TRPC

I'm confused why this middleware doesn't work on nextjs version 13 which uses the pages directory. /middleware.ts

import routesDashboard from "@/dashboard/routes"
import withAuthorization from "@/middlewares/withAuthorization"
import { type NextMiddleware, type NextRequest, NextResponse } from "next/server"

const dashboardMiddleware: NextMiddleware = (_: NextRequest) => {
  const res = NextResponse.next()
  return res
}

export default withAuthorization(dashboardMiddleware, routesDashboard)

import routesDashboard from "@/dashboard/routes"
import withAuthorization from "@/middlewares/withAuthorization"
import { type NextMiddleware, type NextRequest, NextResponse } from "next/server"

const dashboardMiddleware: NextMiddleware = (_: NextRequest) => {
  const res = NextResponse.next()
  return res
}

export default withAuthorization(dashboardMiddleware, routesDashboard)

/src/middlewares/withAuthorization

// ...import

export default function withAuthorization(
  middleware: NextMiddleware,
  requireAuth: RoutesDashboard[] = []
) {
  return async (req: NextRequest, next: NextFetchEvent) => {
    const pathname = req.nextUrl.pathname
    const token = await getToken({
      req,
      secret: process.env.NEXTAUTH_SECRET,
    })

    if (pathname.startsWith("/auth")) {
      if (token) {
        const url = new URL("/dashboard", req.url)
        return NextResponse.rewrite(url)
      }
    }

    if (pathname.startsWith("/dashboard")) {
      const path = requireAuth.find(
        (path) =>
          pathname.startsWith(`${path.layout}${path.path}`)
      )

      if (path) {
        if (!token) {
          const url = new URL("/auth/signin", req.url)
          url.searchParams.set("callbackUrl ", encodeURI(req.url))
          return NextResponse.redirect(url)
        }

        if (path.children) {
          //...logic
        } else {
          if (
            path.rules &&
            path.rules.includes(token.role)
          ) {
            const url = new URL("/403", req.url)
            return NextResponse.rewrite(url)
          }
        }
      }
    }

    return middleware(req, next)
  }
}

// ...import

export default function withAuthorization(
  middleware: NextMiddleware,
  requireAuth: RoutesDashboard[] = []
) {
  return async (req: NextRequest, next: NextFetchEvent) => {
    const pathname = req.nextUrl.pathname
    const token = await getToken({
      req,
      secret: process.env.NEXTAUTH_SECRET,
    })

    if (pathname.startsWith("/auth")) {
      if (token) {
        const url = new URL("/dashboard", req.url)
        return NextResponse.rewrite(url)
      }
    }

    if (pathname.startsWith("/dashboard")) {
      const path = requireAuth.find(
        (path) =>
          pathname.startsWith(`${path.layout}${path.path}`)
      )

      if (path) {
        if (!token) {
          const url = new URL("/auth/signin", req.url)
          url.searchParams.set("callbackUrl ", encodeURI(req.url))
          return NextResponse.redirect(url)
        }

        if (path.children) {
          //...logic
        } else {
          if (
            path.rules &&
            path.rules.includes(token.role)
          ) {
            const url = new URL("/403", req.url)
            return NextResponse.rewrite(url)
          }
        }
      }
    }

    return middleware(req, next)
  }
}

Solution:

FIX Sorry it was an error in the folder placement...

Jump to solution

3 Replies

Solution

Nizar•9mo ago

FIX Sorry it was an error in the folder placement

Gustavo Becelli•9mo ago

where should it be placed?

Nizar•9mo ago

For middleware.ts it must be in the project such as if using src then it must be in src, if directly root project then in root project example: use src /src/middleware.ts use root projek /middleware.ts

Gaming

Programming

How to implement the correct middleware in NextJS TRPC