you might want to give us a little more detail: you want to protect routes? protect what kind of routes? What data? Who is able to access? How they are confirmed that they can access? ...

Hi! And yes for sure

I do want protected routes like /dashboard for premium and standard members

for that purpose you can use nextjs middleware to protect any route from any one .
but caming to your quesion, with express, you have to do manually by your own setup of middlware but it is veeeeeeeeery annoying? isnt?

It is but its because

Im using passport.js

I was going to use passport.js for things like magic links, hashing passwords, jwt , Oauth, and more

How the user will be confirmed is via a database with jwt

I am not aware of that libaray but have just seeen on google and but did you check if they support nexjts or did you try to use inside nextjs?

Hmm passport.js i think is for express.js

It can be used with next but there is very little docs on it

Most of the docs in passport is for node js

So you guys think its okay to use next middleware and another server like express?

Or should I just use express middleware

what you wnat to achieve tell me in form of points and I will tell what i think you should do?

Thanks!

- i want to use passport.js in express to handle all the auth logic

- my app will need protected routes for the dashboard page for normal, premium and extra premium member each having different privileges and also have different login methods

- i would like to reduce any latency or unnecessary network; i know in next.js its bad to call an external api in server components or in the api as it adds extra networks but not sure if its the same for middleware

- im unsure of the trade offs of the point above ^

okie, that is very nice points to consider, but you can do the fallowing:

1. for authentications,nextjs, has auth.js that suppports both crendential based and OAuth2.0 providers and manages most tedios work from you.

2. auth.js also ahs middle that you specificy the procted routes easily .

3. for next work latency, it seems you want to optimise that nad I beliave you make research on that how do in the nexts but you will find like catching also instead of server components , you can use api routes in the nexjs.

but always authenticatins and authorization (different privileges) is veeeery easy in the nexjs.

Thanks and i forgot to mention i did a previous post

How i want to implement auth from scratch

For learning purposes

But also use magic links which isnt supprt in next auth, not sure about auth.js

Next auth uses lots of black box and doesnt allow to implement custom logic and not much docs on this topic especially as a beginner

But i get it now , its to use caching

Is this what you meant or did you mean catching?

yeah, I am catching and revalidating on either on demand or time based .

I am not sure or even dont know about magic links , I gonna make some research on it now and Ill share with you as I find .

yeaha, auth.js does all heavy work for you but for custom I dont know what you mean you may tell me.

Yeah so next auth doesnt support magic links where when user signs in they can use their email as a login but receieve a login code in their inbox that they need to enter

for magic link https://vercel.com/guides/add-auth-to-nextjs-with-magic

And custom logic as in , i want to learn auth without much libraries or third party help

So I would like to do the hashing passsword and jwt myself

Including sessions

And user password login

Pretty much everything for auth

Is what i want to do but from scratch with limited help

yeah, for learning purpose but with real world project , it might be very insecure and better option would be to learn conceptually and then use libraries that does all the sill and tedios operations from you .

by the way if you are curios about nextjs authntications and more detail beyond the basics then I wrote full page on notion and here i the link

https://abdifitahabdulkadir.notion.site/Ultimate-Guide-Nextjs-Authentication-And-Authorization-13c2a319398380db8985c59eb45a21b6?pvs=74

Thanks- il check it out! And yeah it just for learning purposes

I do want to use a lib like passport for example to handle trhe Oauth protocol

But yeah im just trying to see which lib is best for this use case

Just where i can implement everything from scratch

Yet still be secure

Oauth is supported by auth.js for allmost every signle provider you can imagine frm google, to github and so on

Yes , il check out the link you posted

I guess for the original question, it best to not do that middleware with next from what i understand if i plan to use some other backend, but i can use invalidate like you say using react query and caching in next then do the middleware in express

Il checkout auth.js if it allows custom auth logic and if it does then il go with that otherwise i will try passport.js

for custom auth , you mean email and passwrod yesss ?

Oh like for example;

Lets say this workflow:


1) user signs up
- i want to handle all the hasing and verification if they choose email, and sanization
2) client sends response to server that then
- hashes password etc
- sanize input where possible
- store in db
3) while client waiting on server response
- we handle the loading state
4) server:
- creates the jwt refresh and access token sends back to client
- handles all the sessions , anytike user log out/change password we want to change the refresh token
- anytime user upgrade to a plan premium or higher we want to handle all the privileges and logic for handling protected routes
- we also want to handle email magic links and other sign in options like Google or Github while also handling the logic for the session if possible

Everything i listed i would like if possible to do myself without the black box

Auth.js will only do the fallowing for you:


1. creating jwt and you can add user information like name and so n you can use in the different pages of your page.

2. it supports both crdendentials like email, password and son and OAuth providers.

3. for hasing you can hash the passwords suing bcyrpt libarary or your own custom algorhtim .

4. for manaing privledges, you can track user type like standard,premium and so on and when user purchases or subscribes then update his table in the db and make user type to "premium" based on that flag or state you show some parts of interface in the client and hide accordingly as welll.


got it it ver easy in the nexts ,

I am sorry if you are beginner and this made you fell very overwhelming brother.

No its okay, thanks and ahh okay… yeah ill think ill just stick to passport since it offers more flexibility for custom logic

yeah, and let me know if it works well for you and thne I might consider in future.

Sure! Thanks for your help!

welcome bro and that was nice exchange.

hye, auth.js supports magic links also and this is the link https://authjs.dev/getting-started/providers/resend#customization


it uses resend libarary which is veeer popular library for the sending emials.

you get user email from input field then give to resend as auth provider (mroe about in the docs) then simply it will send email including magic link the user clicks that link will take page -- you can customise that page using api routes and give proper response.

hope that will help you