middleware.ts and Bearer Token
Answered
(-.-) posted this in #help-forum
(-.-)OP
Hello everyone, after searching a lot, I didn't find any material about this, I wanted to send a bearer token in all my requests without having to pass it manually, can I do this with
middleware.ts from next ? Could you share some material on how to do this?41 Replies
@(-.-) Hello everyone, after searching a lot, I didn't find any material about this, I wanted to send a bearer token in all my requests without having to pass it manually, can I do this with `middleware.ts` from next ? Could you share some material on how to do this?
which request? client side request or server side request
@ᴉuɐpɹɐɐ which request? client side request or server side request
(-.-)OP
client side request
@(-.-) client side request
who owns the bearer token? is it Next.js or an external back end?
(-.-)OP
External Backend
@(-.-) External Backend
where are the bearer tokens stored in the client?
(-.-)OP
In my server side requests I can get the token from the cookies and send it in the request, but not on the client side, because it has httpOnly
well you can proxy your request to your external backend then
client -> hit next.js api (read cookie) -> hit external backend
Answer
@ᴉuɐpɹɐɐ well you can proxy your request to your external backend then
(-.-)OP
for example, have an api/getToken api where I can get the token?
no, for example
api/getData where you read client httpOnly cookie and get data from external backend
api/getData where you read client httpOnly cookie and get data from external backend
or use server action so you dont need to create a route for every backend route
(-.-)OP
but can I use server actions for get requests?
@(-.-) but can I use server actions for get requests?
does the get request done in the run time or at request time?
(-.-)OP
will be made in the request time, when the user clicks on a button
you can just do it in the page.jsx,
no need for server action
unless you want to fetch data after a page has been rendered/without triggering a page render
(-.-)OP
I need to do this with a button click, but my component is client side because it uses some client hooks
so its a runtime data fetching right?
in that case its okay to use server action to fetch data
I need to fetch data after rendering the page, fetching this data will depend on the user's action
in the server action, you can read cookies and then pass the bearer token to the fetch and hit your external backend
I understand, I thought I could only use actions for mutations, post, put or delete
you'll break semantics ofc
all server action will be done using POST
but you can still do anything with it
(-.-)OP
So maybe it would be more semantic to use apis, right?
right but you lose the DX
(-.-)OP
Is it still recommended to use axios for client-side requests?
no its not, you can do anything with the current fetch api
@ᴉuɐpɹɐɐ right but you lose the DX
(-.-)OP
In your opinion, would it be better to lose DX and make it more semantic?
I would prefer to lose semantic and get more DX and ship product faster
@ᴉuɐpɹɐɐ no its not, you can do anything with the current fetch api
(-.-)OP
I'm using react query to search for data on the client, is it still useful?
you should be able to user server action inside the mutationFn or queryFn yeah
(-.-)OP
Thank you very much, I learned a lot from you. Sorry for my English, I'm from Brazil
no problem! i understand what you are saying!
do let me know if it works so i can mark it as resolved
(-.-)OP
yes, it worked well.