What could be the best way to implement authentication using access token in React app?

Question

I am a newbie to React. Trying to implement authentication using Express.js in react web application. I have set token in response cookies on backend with HttpOnly flag but unable to read it on front end(react app). I have been through several tutorials of cookies and understood that it won't be readable in Javascript if it is HttpOnly.

I thought of creating cookies on React app but they will be non-HttpOnly which would make my website vulnerable. What would be the best way to implement authentication in React app using access token?

I have set cookies using max-age, secure, and domain but unable to access cookies with HttpOnly flag in React app and setting cookies in React app won't make them HttpOnly.

Answer 1

We don't need to store or pass the token; we don't even have access to it from JavaScript because it's stored in an HttpOnly cookie.

Instead of readign the access token from server side response, use your server side code to set the cookie when its sending the response. Use axios and The withCredentials property indicates to Axios that it should send the cookie for the API domain along with the request. Ref: https://www.bignerdranch.com/blog/react-data-layer-part-3-login/