Next.js Discord

Discord Forum

How to integrate C# asp.net 8 api into next-auth?

Unanswered
Atlantic menhaden posted this in #help-forum
Open in Discord
Atlantic menhadenOP
Hello,

I am building a web3 application (nextjs 13.5.6 with app dir), and i am using next-auth to authorize users. What i want to do is pass the creation of jwt token into my backend which is asp.net core 8 api. I want the backend to create jwt and pass it back to next-auth. Is that possible and how would i achieve such a thing?

Any feedback or better options are very welcomed.
Thank you

167 Replies

Korat
Hello, you can achieve something like that by using credentials provider which you can find in the next auth documentation.

Your dotnet backend will be responsible for creating and returning the jwt when user logs in.
@Korat Hello, you can achieve something like that by using credentials provider which you can find in the next auth documentation. Your dotnet backend will be responsible for creating and returning the jwt when user logs in.
Atlantic menhadenOP
And then how do i save the jwt token that has been returned? And the next-auth will take care of user session automatically?
why do you need to use next-auth if you have backend for authentication?
@Ray why do you need to use next-auth if you have backend for authentication?
Korat
Why does next-auth have a credentials-provider?
I think that if someone use a custom backend for the jwt token creation, he can use next auth to keep the data in the session, jwt in the cookie and use it across the app
Korat
I am currently doing it like so
please enlighten me in this one
Ray
and credentials provider from next-auth only support jwt strategy
sure you can do that but it is not necessary
if the backend return the token, I can just set it to cookie with nextjs
why need a extra package for it?
Korat
Yeah but we have to deal with all the secure flags right?
its not just storing the jwt in the cookie
Ray
well if you have a backend with authentication, you will have to deal with it anyway
he said his backend is returning the jwt token
it is already handling the authentication
with credentials-provider, we need to return the user object
and next-auth will generate the token
Korat
Are you saying that credentials provider shouldnt be used for taking the user object & jwt token from a custom backend?
Would i be able to handle social media authentication without next auth as well
my mind is a bit blurry right now
@Ray sure you can do that but it is not necessary
Ray
as i said, you can use it but i won't personally
@Korat Are you saying that credentials provider shouldnt be used for taking the user object & jwt token from a custom backend?
Atlantic menhadenOP
i am actually building web3 app, so i will only be authenticating with metamask
i am using next-auth for ease of use, all the hooks and security that comes out of the box
Korat
Can you suggest me any resource how to handle nextjs authentication with an external backend?
Atlantic menhadenOP
but if i can easily make it withoout next-auth i would like to hear
Korat
Yeah i feel the same
But on second thought, nextjs wasnt created in mind to be used with an external backend
so it makes sense that we dont need next auth
if we handle the authentication in another backend
but im a bit lost here
i dont know how to use cookies and its secure flags
@Atlantic menhaden but if i can easily make it withoout next-auth i would like to hear
Ray
if your backend is returning the jwt token, you could set it to cookies with cookies() .
whenever you need to fetch data from backend, just grab the token from cookies and attach it to the headers
Korat
would i be able to do that inside axios interceptor?
Atlantic menhadenOP
how do i do the client side session validation?
Ray
if you want to use with next-auth, your backend should return a user object (eg, id, email)
@Korat would i be able to do that inside axios interceptor?
Ray
yes but i think nextjs work better with fetch
and return the session
you could create a custom hook like what next-auth does
@Ray yes but i think nextjs work better with `fetch`
Korat
I have a case where in one of my projects, we cant use fetch so we went with axios
Okay just to be clear, if using a custom backend, i dont need next auth right, in login i save the jwt in a cookie using cookies()
and where would you suggest to save and retrieve the user data that comes along with jwt token ?
Korat
Aight, i think i need to do more research on this and i think its the right way to stop using next auth in this case
Also do you think that is possible to handle social media authetication as well
without next auth?
@Korat Also do you think that is possible to handle social media authetication as well
Ray
well it should be handled by the backend
Korat
Alright, thanks a lot man,
And about the cookies, do you think its secure to just store the data there after login? or do i need to set any extra options for security
Korat
Sorry, i come from an era where storing jwt in localstorage would be a normal thing
Ray
and set it to secure in production
Korat
do you have any resource for it just so i dont make any dumb question here
Ray
oh I have stopped using localstorage for jwt many year
resource for what?
Korat
storing user data and jwt in cookies securely
Korat
I feel a bit bad man cause me and some colleagues decided to switch to nextjs because of seo and other cool stuff nextjs 14 brings for all our projects, but for every project we handle the backend separately, thats why we went with nextjs because we thought theres no other easy way around it
Ray
what lang do you use in the backend
Korat
dotnet currently
Ray
if you page doesn't need much interaction, html template + htmx owns👍🏾
Im not sure the template system in dotnet, but in golang it work very well with htmx
Korat
Yeah but we cant really change it anymore, we switched the stack to dotnet & nextjs
which thing im not the proudest lol
but it has worked great up until now, but we gotta work harder to build the mentality to use nextjs with a separate backend which is quite difficult to be honest
Korat
Agreed
Ray
nextjs can't develop good api, they can only learn from other framework😆
when remix support server component and server action, nextjs will become better
Korat
They tricked us with the seo performance haha
by the way, since you mentioned server actions, they are useless when dealing with a custom backend right
Ray
I would use remix over nextjs If you ask me lol
with server action, you only need one round trip to server
Korat
what do you mean round trip
oh
Ray
you submit the post request with server action, the ui will be updated with the response
if you are using route handler, you have to revalidate by running the GET endpoint again
and server action will still work without javascript
Korat
okay, i wanted to ask you if you use a custom backend for your nextjs apps?
Ray
well I won't but my client does lol
Korat
Yeah same here
Ray
life is hard
Korat
im overwhelmed man right now
too much stuff
just got promoted to a team leader, so i guess ill spend this weekend learning nextjs concepts
Ray
oh congrats
Korat
thanks brother, it was a difficult year to achieve it and the switch to nextjs was very difficult
specially when using it with a custom backend🤣
Thanks a lot for the time man, it cleared some of the thoughts on next-auth
Ray
hmm I don't think there will be any problem with custom backend?
np
Korat
yeah, im assuming its okay to do 2 round trips for request and response right
i read it somewhere people do that
Ray
yeah lot of ppl doing that
server action just make it better
Korat
can we talk about server actions for a bit
Ray
you having hard time with server action + custom backend?
Korat
yeah mutating has been difficult, im using react query for that
Ray
I think you should create a post instead hijacking this one lol
Korat
yeahh i know , i was about to tell you before
is it okay if i make a general one
Ray
yeah
Korat
@Atlantic menhaden sorry for going out of context man, btw i dont know if next auth is suite for web3 ? i might be wrong
@Korat <@738468319878971563> sorry for going out of context man, btw i dont know if next auth is suite for web3 ? i might be wrong
Atlantic menhadenOP
hey thank you both for joining this convo, you asked a lot of questions i was interested in, thanks for both your feedback 💪
Korat
We switched to another post for more questions if you like
@Korat We switched to another post for more questions if you like
Atlantic menhadenOP
sure, give me the link
Korat
@Ray From the next-auth documentation, seems like credentials provider is the way to go for cases with custom backend right ?
Ray
wdym?
as I said, you can use it with custom backend but keep in mind that, credentials provider only support jwt strategy
if your backend is doing the authentication work and handling the session, then you wouldn't need it
Korat
I think we misunderstood each other, the backend is only responsible for returning the jwt to the client
so i guess next auth credentials provider is good to use in this case
Ray
have you tried to intergrate credentials provider in next-auth?
Korat
yes
Ray
you have to return a user object in the authorize function
right?
then next-auth create the jwt token base on the object
Korat
yeah
i mean no
wait
ill send u a code
authorize will return the user object / jwt token / refresh token
i only see user object from their example
Korat
Yeah, but our backend is returning the jwt as well, spares me the code to write the logic to create it myself
right
Something like this
Ray
yeah its fine
Korat
One thing i've noticed is that if not used thoughtfully, session will be called a lot of times (if you check the network),

For each call to axios (which takes the token from getSession -> which calls the session) is going to trigger session call which i think its okay based per some questions an answer i've done specially for that before some days.

What do you think about that
Ray
what do you mean on each call to axios?
Korat
if i call axios.get for example
inside of that axios instance i take the jwt token right
to send is as bearer
Ray
ah i see
Korat
so say, if i got to /users page
and if that calls three endpoints
Ray
well yes, because it need to fetch from the route handler
Korat
so that's normal i guess
Ray
if you are doing server side fetch, you could use getSeverSession
Korat
i used to be worried for performance issues or maybe cost issues when i had seen sessions all over the network
Ray
you doing client side fetching > route handler > backend?
Korat
no, i don't think so, is route handler the api folder for a route ?
I dont have those, im simply using react query to directly call an endpoint
Ray
yes
so client > backend api?
Korat
yeah
in one of the projects ofc haha
Ray
if you set the token in the cookie with your backend url in domain
you don't need to attach it
Korat
hmm, how does that work ?
im not good at cookies
Ray
the cookie will send alone with it
eg, your backend url: https://api.example.com

then set the cookie with domain: api.example.com. When it make request to api.example.com, it will send the cookies also
Korat
but the backend looks for a jwt in the Authorization header ?
Ray
well yeah, need to change it to look for cookie or header
Korat
yeah, i dont think i can convince them to do that
ill stick to this implementation for now, i dont think its a performance nor a cost issue if sessions gets called to many times
Original message was deleted
Ray
you could create your own hook, grab the token from cookies and make a request to your backend which return the session.
useSession() make a request to /api/auth/session which return a session
Original message was deleted
Korat
There is a word for that called claims, backend sends you the claims inside jwt, e.x
users: {create: true}

based on this information you can show the add button or not
you probably will have to decode the jwt in jwt callback and forward the claims to session
Korat
:/