How to Send Refresh Token to post request in useRefreshToken.js

[himal-rawal]

Hello Sir, I encountered problem while following your tutorial.

Your Code for userefreshtoken.js

const  refresh= async()=>{
        const response= await axios.get("/auth/refresh-token",{
            withCredentials:true
        });

As I am using post request for acessing /auth/refresh-token endpoint in my backend. so I changed it from get to post request. Than I have to send the json body also but i don't know how can i send refreshtoken to my request.

Backend request :

POST /auth/refresh-token HTTP/1.1
Host: localhost:3000
Content-Type: application/json
Content-Length: 225

{
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2NDg1NTM0NDIsImV4cCI6MTY4MDExMTA0MiwiYXVkIjoiNjIwYzAyYTNlN2MyMWM0NzNhMjZmNGUxIiwiaXNzIjoic29jaWFsLmNvbSJ9.iQiSGutds1ZPrwrJi2lx0UOGUB4Ed6OQdUQAskq3BR0"
}

my code for userefreshtoken.js: but I dont know where is refresh token stored in frontend to send it to this request

const  refresh= async()=>{
        const response= await axios.post("/auth/refresh-token",{
            headers:{'Content-Type': 'application/json'},
            withCredentials:true
        });

As I haven't given refresh token I am getting 400 bad request error. Please help me!!

[gitdagray]

You should watch the introduction and explanation at the beginning of the video again.

The refresh token should not be stored with Javascript. It should only be sent as a secure httpOnly cookie that is not accessible to Javascript.

Dave

On Tue, Mar 29, 2022 at 7:47 AM traitor @.***> wrote:

Hello Sir, I encountered problem while following your tutorial.

Your Code for userefreshtoken.js

const refresh= async()=>{ const response= await axios.get("/auth/refresh-token",{ withCredentials:true });

As I am using post request for acessing /auth/refresh-token endpoint in my backend. so I changed it from get to post request. Than I have to send the json body also but i don't know how can i send refreshtoken to my request.

Backend request :

POST /auth/refresh-token HTTP/1.1 Host: localhost:3000 Content-Type: application/json Content-Length: 225

{ "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2NDg1NTM0NDIsImV4cCI6MTY4MDExMTA0MiwiYXVkIjoiNjIwYzAyYTNlN2MyMWM0NzNhMjZmNGUxIiwiaXNzIjoic29jaWFsLmNvbSJ9.iQiSGutds1ZPrwrJi2lx0UOGUB4Ed6OQdUQAskq3BR0" }

my code for userefreshtoken.js: but I dont know where is refresh token stored in frontend to send it to this request

const refresh= async()=>{ const response= await axios.post("/auth/refresh-token",{ headers:{'Content-Type': 'application/json'}, withCredentials:true });

As I haven't given refresh token I am getting 400 bad request error. Please help me!! [image: Screenshot (44)] https://user-images.githubusercontent.com/38320749/160613982-da0066a0-4066-4f05-b8cc-1251e902e41c.png

— Reply to this email directly, view it on GitHub https://github.com/gitdagray/react_jwt_auth/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHRWJNZ45SF2FMTQV6ODZBLVCL3ULANCNFSM5R6JL6RA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[himal-rawal]

Yes Sir I watched it and thanks for uploading very good content. We are using httponly cookie to prevent xss. But My problem is that How can I send this httpOnly cookie through Post Request as Post Request needs Body otherwise it gives 400 error.

Here withCredentials is sending cookies i.e refresh-token but In my backend I am sending refresh token through requests body using post request.

Backend Request:

POST /auth/refresh-token HTTP/1.1
Host: localhost:3000
Content-Type: application/json
Content-Length: 225

{
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2NDg1NTM0NDIsImV4cCI6MTY4MDExMTA0MiwiYXVkIjoiNjIwYzAyYTNlN2MyMWM0NzNhMjZmNGUxIiwiaXNzIjoic29jaWFsLmNvbSJ9.iQiSGutds1ZPrwrJi2lx0UOGUB4Ed6OQdUQAskq3BR0"
}

I Tried:

const  refresh= async()=>{
        const response= await axios.post("/auth/refresh-token",{
            headers:{'Content-Type': 'application/json'},
            withCredentials:true
        });

And it is giving 400 error as expected. How can I send refresh token to this post request?

[gitdagray]

I thought I explained in the video, but maybe not well enough. The cookie is sent with ALL requests as long as Axios has withCredentials: true.

Wishing you the best,

Dave

On Wed, Mar 30, 2022, 4:48 AM traitor @.***> wrote:

Yes Sir I watched it and thanks for uploading very good content. We are using httponly cookie to prevent xss. But My problem is that How can I send this httpOnly cookie through Post Request as Post Request needs Body otherwise it gives 400 error. I Tried:

const refresh= async()=>{ const response= await axios.post("/auth/refresh-token",{ headers:{'Content-Type': 'application/json'}, withCredentials:true });

And it is giving 400 error as expected. How can I send refresh token to this post request?

— Reply to this email directly, view it on GitHub https://github.com/gitdagray/react_jwt_auth/issues/1#issuecomment-1082868387, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHRWJN77VXIVX27TADQXGY3VCQPOXANCNFSM5R6JL6RA . You are receiving this because you commented.Message ID: @.***>

[Sushant-Borsania]

Checkout if the cookie in authController is set with secure:true res.cookie('jwt', refreshToken, { httpOnly: true, sameSite: 'None', secure: true, maxAge: 24 * 60 * 60 * 1000 });

[RichmondRamil]

Thank you Sir @Sushant-Borsania it works for me