@Alaska pollock you can use a middleware, to not let the user peak the content. You can find more about it here: https://nextjs.org/docs/app/building-your-application/routing/middleware

like this, you mean?

c++
app.get('/profile', authenticateToken,...

Cuz I do.

or does it have to be a middleware.ts?

yea, you need to create the middleware.ts and check it inside it. When he's authenticated, then don't do anything with the request you get in the middleware and when he's not logged in, redirect him to the sign in/up page. The middleware will be executed, before your page.js will be executed @Alaska pollock

Okay so wait, basically then I'll send two requests (to the same api). one in the middle ware that'll check the token the api will return the users information then re-send the request in the page.tsx. is this ideal to do?

you don't need to resend something. You can just let your code end. The "is the user authenticated"-stuff inside your page.js will be removed, because you check that inside your middleware

example?

how would it look from the login componenet?

that's the middleware and you don't need to change it dependently on the requested path. The middleware.ts is a different file

so I dont import?

then how would i get the response?

maybe you understand it a little better with this self made image lol ^^

Uh I know what middle ware is and how it works, I just want to know how do I send the response to the login component?

or access it

what kind of response? the client get's the response. Not your components 🙂

Yes but I would like to access it

what would you like to do? What is the goal?

id like to print the users data from the database which is recieved from the api itself, And i have a middleware for every after-login apis which checks the jwt token validation

You can change the response from the middleware and return json. This json can be read and displayed

could you provide an example?

const fetchUserData = () => {
axios
.get("http://localhost:3001/profile", { withCredentials: true })
.then((response) => {
setUserData(response.data.user);
})
.catch((error) => {
redirectToLogin();
});
};

here i want to call the function setUserData

Can anyone point me in the right direction for handling checkout/order calculation via api endpoints? Using latest app router and not using a db. Just localstorage for now

bruh

Thx. Not sure how I posted in here by accident. Barely use discord

you can see an example here: https://nextjs.org/docs/app/building-your-application/routing/middleware#producing-a-response

return Response.json(
      { success: false, message: 'authentication failed' },
      { status: 401 }
    )

Here you can share your data to the client

and how would I go ahead to access it from the client?

I also appreciate your help <3

that's then the page. It's like if you ask a api. Then it's just data. Take a look at this page: https://dummyjson.com/products
It's also just data 🙂

middleware:

c++
import { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
import axios from "axios";
 
export const config = {
  matcher: '/dashboard',
}
 
export function middleware(request: NextRequest) {
    axios
    .get("http://localhost:3001/profile", { withCredentials: true })
    .then((response) => {
        return Response.json(response);
    })
    .catch(() => {
        return NextResponse.redirect(new URL('/login', request.url));
    });
}

Dashboard:

c++
const [userData, setUserData] = useState<UserData | null>(null);

One last question, how would I go and set "userData" to the middleware response

if you really want to show the user the data I know only one way: fetch the url first. If you get json, render the json, if not, redirect the user. When I would be you, I would redirect him to the sign up/in page or if it's another not handled error, create a error log and redirect the user to a new site with the specific error id. Fetch the error id serverside and render it for the user. That's what I would do, when I would be you

I do fetch the user information, However, Its peeking the page first while the request is being sent.

it can't peek, when you use middleware and redirect the client, because the middleware is executed and completely ended BEFORE the page.js

Well, I dont know how to send the response to the client

yup, I want to send the response to the client

from middleware to client if thats possible, otherwise ill be sending two http requests which isnt ideal

you can follow this message: https://nextjs-forum.com/post/1179424253184061450#message-1179522647038640219

Okay thats good, But if the jwt token is valid it returns the users information, and if i "get the json" how would the client read it?

do you see now, if its not yes i can redirect without it peeking, However, I cant display content if the json is there correctly

in your example your middleware should only say if the user should able to see the content from your page. So the middleware checks

"is jwt valid"
|> yes: let the request through
|> no: redirect to login.
If the user pass the check and will get to the requested page, you can fetch the userdata on the page

so i need to send two requests,
1. to check the jwt token
2. to fetch the user data

The jwt check should only be a jwt check and not a fetch userdata when jwt is valid

Yup that was I was saying.

or I can do that too, i guess?

c++
const [userData, setUserData] = useState<UserData | null>(null);

  useEffect(() => {
    const fetchUserData = () => {
      axios
        .get("http://localhost:3001/profile", { withCredentials: true })
        .then((response) => {
          setUserData(response.data.user);
        })
        .catch(() => {
          redirectToLogin();
        });
    };

    fetchUserData();
  }, []);

  if (userData === null) {
    return null;
  }

if (userData === null) {
return null;
}

???

what?

itll return null so they cant see the content

its like a waiting thing until they're redirected.

that doesn't make any sense...

this is on your page.js?

damn it, ill just use express sessions

yes

jwt = pain, for me, atleast.

anyways, Appreciate the help

<3 !!

I thought I visulized it good enough. Just to get this right: The middleware will be exectued BEFORE the page.js loads. So if you check in the middleware if he's auth. and maybe redirect him then to a public page, your requested page.js will NEVER been shown. So you can remove all the other stuff and just imagine that there is a user anytime

jwt is fairly easy if we understood this topic

this can be done in single request since jwt token are stored in cookies and you can check the cookies before fetching the user data

Yup, But I cant check the validation of it.

without sending an api request to the server to do so.

your auth server is detached from Next.js backend?

wdym? i use node.js & express

so it is separate from next.js backend

does the data fetching also separate from next.js backend and your auth server?

ig

so your auth server and your data server is different?

well then 2 requests are necessary then :v

So, wait how do I do it un-seperate from the front-end?

Implement the auth verification logic in next.js instead of at ur custom express backend

and how should my front-end code look like?

could you provide me with an example from github or sum?

i dont have one thats readily available right now

but you can just hit fetchdata() and authenticate inside that function directly

okay, thanks!

Securing in middleware can sometimes be tricky because you are limited to the edge runtime

not that you can also check authentication at page level by turning the page into a React server component

doing page level security at the middleware level is kind of the "grail", because it allows for static personalization without dynamic per-request rendering

if you can achive that, that's awesome

but sometimes, you need to get the current user from the database (session based auth) or have a way to invalidate JWT that relies on a database => you can't connect via TCP ("normal" long running db client you have in Node.js code) so you have to have an HTTP interface to your db

this explains why services like Upstash are getting popular: you can use Redis with fetch calls, so it works in middleware

but it's not really the norm yet and not super mature, for instance I had to raise an issue in upstash client that made it incompatible with static rendering until recently

THANK YOU!!! EXACTLY WHAT I WANTED <333@Eric Burel

This dates from earlier version of next so not updated to the app router

Maybe take a look at the devographics code I've shared, it has authentication using passport and pages are protected (you cannot peek a user response without being logged and owning this response)

That's a big app but shows a complete setup

whats being used for the back-end?