Next.js Discord

Discord Forum

Best practices for using decorators for requiring logins

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
hey guys, I'm fresh out of Django, and I admit it's where I'm coming from with this - I'd like an easy, pastable way to require logins on given page routes. Django lets use something to the effect of @require_login or something like that. Can we do that in NextJS? is that a good idea? What does the implemenetation look like? Let's say we have a function called "requireLogin" which returns a user or null based on the client's cookie state (A user with a crypto-cookie that says their ID is 1 for example is logged in. I guess that means we'll need to pass the request argument to it). The page we're trying to protect looks like this:

export default function UserProfile() {
    return (<Layout>
        <Head>
            <title>User Profile</title>
        </Head>
<div className="flex flex-col items-center justify-center w-full h-full">
    <h1>You're logged in!</h1>
    <h2> User id: {user.id}</h2>
</div>
        </Layout>)
}


Thanks for the help.
Answered by ncls.
Yeah, so if you are using NextAuth for your authentication, you can simply use middleware to protect specific routes: https://next-auth.js.org/configuration/nextjs#middleware
View full answer

28 Replies

Northeast Congo LionOP
I guess I'm also wondering how to keep the logic on the backend "in the NextJS way" - It'd be nice to be able to get the user's profile data on the backend without worrying the user will have access to the logic or keys or be able to edit their cookie or anything
it's also worth mentioning that this is the very first project I'm doing with NextJS, and among my first with React
I want to avoid using an API route for login verification at the very least, because the cookie's validity should be enough to validate the user. It seems un-optimal to hit the API twice effectively - once to get the page and the second time while on the page to get if you're logged in.
Northeast Congo LionOP
@ncls. this is the question
@Northeast Congo Lion <@602953499407286331> this is the question
ncls.
Yeah, so if you are using NextAuth for your authentication, you can simply use middleware to protect specific routes: https://next-auth.js.org/configuration/nextjs#middleware
Answer
Northeast Congo LionOP
I'm not using nextAuth but I think middleware is the route I should go.
Ideally, the middleware should just grab the cookies, validate them, if invalid redirect to login, if valid get out of the way (While providing the appropriate props, such as the user data)
@Northeast Congo Lion I'm not using nextAuth but I think middleware is the route I should go.
ncls.
You can also use middleware without NextAuth of course but NextAuth just makes the whole process of authenticating incredibly easy
Here's a guide on how to use middleware to implement your own logic: https://nextjs.org/docs/pages/building-your-application/routing/middleware

Edit: Updated link to pages router since you said that you use it.
Northeast Congo LionOP
Yeah, I get nervous because I'm using a big, teetery stack (SST for one) that might have its own opinions on how to implement auth
so I've kinda just decided to implement it on my own for now, will learn nextauth later down the road
ncls.
Alright then. The guide should explain everything. How to use cookies, match routes, redirect, etc.
Northeast Congo LionOP
rog, thanks - may come back here if I hit a snag I can't resolve myself. Thanks big time!
Northeast Congo LionOP
Ok, cookie is disappearing... did my browser eat it!?!
@Northeast Congo Lion Ok, cookie is disappearing... did my browser eat it!?!
ncls.
Depends on when you fed it last
Northeast Congo LionOP
I fed it bad params 🥵
Northeast Congo LionOP
Error: The edge runtime does not support Node.js 'crypto' module.
coming from jwt.verify in the middleware
Also why does it care about frontend stuff in a backend only middleware
ncls.
Can you share the error please?
Northeast Congo LionOP
- error Error: The edge runtime does not support Node.js 'crypto' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
    at Object.get (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/globals.js:33:19)
    at eval (webpack-internal:///(middleware)/./node_modules/jsonwebtoken/verify.js:112:62)
    at getSecret (webpack-internal:///(middleware)/./node_modules/jsonwebtoken/verify.js:95:20)
    at module.exports [as verify] (webpack-internal:///(middleware)/./node_modules/jsonwebtoken/verify.js:98:12)
    at Object.middleware [as handler] (webpack-internal:///(middleware)/./middleware.ts:48:70)
    at adapter (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/adapter.js:161:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: undefined
https://stackoverflow.com/questions/76080784/next-js-middleware-error-error-the-edge-runtime-does-not-support-node-js-c according to this rando, we're supposed to use jose with nextjs, not jwt
Northeast Congo LionOP
Alright, to Jose it is then
@Northeast Congo Lion Alright, to Jose it is then
ncls.
That's also what they used in their JWT auth example. If you're curious, you can check how they did it: https://github.com/vercel/examples/tree/main/edge-middleware/jwt-authentication
Northeast Congo LionOP
ty!
Northeast Congo LionOP
@ncls. I'm going to close this as my nextjs login system is now working.
Thanks again!