Next.js Discord

Discord Forum

Proctect pages from unauthenticated users

Unanswered
Oriental chestnut gall wasp posted this in #help-forum
Open in Discord
Oriental chestnut gall waspOP
I want to secure pages by unauthenticated users and have following middleware file located in my src/ directory: 

export { default } from "next-auth/middleware";

export const config = { matcher: ["/recipe/create", "/recipe/:id/edit"] };


It even redirects me to my custom signin page, when I'm logged in via the Discord Provider.
Using Next.js 14.0.3 and NextAuth 4.23.0

14 Replies

B33fb0n3
you can check the login inside your middleware, to check if the user is logged in. If not, redirect him to the signin/signup page or else show the page
@B33fb0n3 you can check the login inside your middleware, to check if the user is logged in. If not, redirect him to the signin/signup page or else show the page
Oriental chestnut gall waspOP
But shouldn't that be implemented with the default configuration from nextAuth? Should I use the withAuth function from nextAuth here?
B33fb0n3
Even if you using next auth, you should check the auth. I prefer checking in middleware
@B33fb0n3 Even if you using next auth, you should check the auth. I prefer checking in middleware
Oriental chestnut gall waspOP
By using the withAuth function or implement authentication check in a standard middleware function like this: https://nextjs.org/docs/app/building-your-application/routing/middleware#example
Oriental chestnut gall waspOP
And for what purpose should the nextAuth middleware function be used then?
B33fb0n3
you can either check the auth yourself (like I mentioned), to have more control and maintainability or do it via the [mentioned methods from nextauth](https://next-auth.js.org/configuration/nextjs#basic-usage). That's the faster way, but not that controllable or maintainable
Oriental chestnut gall waspOP
When using the default export from nextAuth or the withAuth function I get redirected even if I'm authenticated.

When using the next.js middleware you've linked like that: 
import { getServerAuthSession } from "~/server/auth";

import { NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  const session = await getServerAuthSession();

  if (!session) {
    // Respond with JSON indicating an error message
    return Response.json(
      { success: false, message: "authentication failed" },
      { status: 401 },
    );
  }
}
export const config = { matcher: ["/recipe/create", "/recipe/:id/edit"] };

I get following error: 
Server Error
TypeError: Cannot read properties of undefined (reading 'substring')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
node_modules\oidc-token-hash\lib\shake256.js (3:0)
substring
node_modules\oidc-token-hash\lib\shake256.js (3:39)
Oriental chestnut gall waspOP
Since I use the T3 Stack I found out, that I have to enable JWT for my middleware to work. https://create.t3.gg/en/usage/next-auth#usage-with-nextjs-middleware
@B33fb0n3 more like [this](https://nextjs.org/docs/app/building-your-application/routing/middleware#producing-a-response)
Oriental chestnut gall waspOP
Is it possible to define dynamic routes in a conditional matcher? Or can I alternatively create single matchers for different middlewares?
B33fb0n3
I think you can't
Oriental chestnut gall waspOP
Can I create a matcher that applies on all pages, included by the matcher, with different behaviour?
@Oriental chestnut gall wasp Can I create a matcher that applies on all pages, included by the matcher, with different behaviour?
Plott Hound
this should work in your middleware:
export { default } from "next-auth/middleware";

export const config = {
    matcher: [
        "/profile", 
        "/example/:path*", // dynamic routes eg /example/[id]
    ],
};

make sure you're using jwt too.
@Plott Hound this should work in your middleware: export { default } from "next-auth/middleware"; export const config = { matcher: [ "/profile", "/example/:path*", // dynamic routes eg /example/[id] ], }; make sure you're using jwt too.
Oriental chestnut gall waspOP
Yes this works for me. But it would be neat if I can e.g. do a redirect when the User is signed in and wants to access the login page. So the behavior changes from route to route.