Protected routes in Nextjs?
In the past I have made protected routes using react router so that if a user is not authenticated and tries to go to a page, they are redirected to the login page and then once logged in, brought to the page they were trying to go. I’m now trying to learn Nextjs and wanna know firstly if this is the best way to ensure authentication, and also the best way to do it with Nextjs routing if it is. I’ve found varying answers online so I figured I’d ask here.
30 Replies
with next you have the power to redirect at the original request level (i.e. if a user requests
/admin-panel and they're not an admin, instead of downloading all the javascript for the page, parsing it, running it, then getting redirected, nextjs can tell the browser to redirect back to /home (a name i just made up, any will work) without the browser needing to download any html or js)
you would do this kind of route protection in getServerSideProps() in NextJS v12 and below, i dont know exactly how you'd do it in NextJS v13's app directory betaOh that's super cool! I'll have to look more into that. Does create-t3-app currently use NextJS 12?
Next 13
But not app dir
Oh ok so I would still do that in getServerSideProps then?
Yea
Awesome thx! I'm still totally new to next and SSR so it's definitely a learning process
Gl with the studies
I did see that on the t3app page it says
getServerSideProps is generally discouraged unless there is a good reason for it, due to the fact that it is a blocking call and will slow down your site. Incremental Static Regeneration↗ is a great alternative to getServerSideProps when the data is dynamic and can be fetched incrementally.Is this case an exception to that rule?
my message was a bit misleading, Next13 is still completely backwards compatable with gSSP and that kind of stuff, the
/app directory is an opt-in beta feature
yes, the t3 way of doing things is getting a quick TTFB (time to first btye; the time it takes for the response to start to be sent) and loading the data via tRPC. That quote is talking about that you shouldn't use getServerSideProps if you're going to be loading data since that increases the initial loading time of the app for users. getServerSideProps can be used for checking authahhhh ok. That makes sense
I think you can also do path-based auth blocking in the
./src/_middleware.ts file (might not exist by default, but if you do make it, nextjs will load it)I don't need to do anything crazy. Just route to login for people not logged in and also block people from visiting pages they weren't invited to
I'm rebuilding a project I did at the end of college, but I did it with 4 other people who had never done any web development and its all in poorly coded javascript and using firebase so I decided to just start from scratch and try to do it right
Should I do something like this?
https://www.youtube.com/watch?v=pmAnWOofqJE
Josh tried coding
YouTube
Securely using JWT on the Edge: Authentication in NextJS Middleware!
Handling JWT-based authentication inside of NextJS middleware is super fast, and very useful but can be a bit tricky to implement. Let's look at best practises for implementing JWT auth inside of NextJS middleware, eliminating the need to call a separate API route to handle the JWT authentication. We'll also pass back the JWT from a tRPC backend...
He uses a JWT here
Idk if that's what I want or not
from what i've seen we generally avoid jwt's in favor of session cookies
that guy doesn't have a git repo in the description :/