What is the appropriate way to use/setup next-auth/middlware's config matcher?

[rdbarr]

Hi all,
I am kind of new to next, next-auth and I am trying to figure out if I'm using the next/auth-middleware dependency correctly.
From what I understand is that I can pass routes to the config.matcher inside middleware.ts and it should restrict access to said routes.

At the moment, I am just trying to do the strategy outline in the Basic usage with the matcher to restrict access to certain routes, but after logging in, the middleware still kicks me back to the signin page.

If I don't use the middleware, I can use useSession() to get a session object and a status. From there, I could use conditionals to restrict access based on that. But I want to achieve this using middleware (if it does what I think it does)

The _app.tsx already contains the SessionProvider, and the [...nextauth].ts seems to be working and using the sesssion.strategy = 'jwt'.

I feel like there is more that I need to add to the middleware (2 lines of code can't be it), or there might be something that I'm missing at the _app.tsx.

// from /src/middleware.ts
export { default } from 'next-auth/middleware';

export const config = { matcher: ['/events', '/users/:id*', '/welcome' /*...etc*/] };

// example welcome page
// /src/pages/welcome.tsx

import { useSession } from "next-auth/react"

const Welcome = () => {
  const { data: session, status } = useSession()

  console.log('SESSION', session)
  console.log('STATUS', status)

  if (status === "loading") {
    return <p>Loading...</p>
  }

  if (status === "unauthenticated") {
    return <p>Access Denied</p>
  }

  return (
    <>
      <h1>Protected Page</h1>
      <p>You can view this page because you are signed in.</p>
    </>
  )
}

export default Welcome

Thanks for your help

[thejessewinton]

@rdbarr and I work together, so I'm bumping the question and adding some clarification for our use case. Using the boilerplate withAuth is technically working:

import { withAuth } from 'next-auth/middleware';

const middleware = withAuth({
  pages: {
    signIn: '/sign-in',
  },
});

export default middleware;

It redirects to my custom sign-in page, but it's blank, and the console is showing this error in 6 files:

Uncaught SyntaxError: Unexpected token '<'.

The sign-in page doesn't return that error if it's not redirected there from middleware.

[balazsorban44]

see #4848

[rdbarr]

Thank you so much @balazsorban44 I think that did the trick 😄