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?

Originally posted by @Traitor00 in #1 (comment)

store auth info in local storage at login then update context by updating state using useEffect in AuthProvider.js

I am having an app using mongodb anonymous login, when site first load anonymous user is successfull but at that time no refresh token is there making the refresh token request fail hence no data loads, but when we refresh the page data loads immediately, so my question is how to mount the component load again, I tried so many things but still no success

How can i keep session open after refresh site?, everytime i press f5 its ask me again the credentials

The useEffect's dependency list in Users.js should contain: axiosPrivate, location, navigate (or be removed)

while using the FormData, interceptors don't handle it, it shows the error "The submitted data was not a file. Check the encoding type on the form"
how to use set up interceptors while using FormData?

Hello, I'm having some issue with useAxiosPrivate, it seems refresh is not being called from useEffect.

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!!