0

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.

Tejas Hande
  • 3
  • 4
  • The title of this question does not match the question asked in the question body. Indeed, the title question is answered in the question body, and in the name of the cookie type "HttpOnly". The question in the body is broad and opinion based; there are many, many ways of implementing authentication in React -- which way is "best" depends on a number of factors. – Heretic Monkey Oct 30 '19 at 12:54
  • "Is there a way to read Httponly cookies set by response in React?" - No. "What would be the best way to implement authentication in React app using access token?" - this is too broad and opinion based. – Yury Tarabanko Oct 30 '19 at 12:54
  • Sorry, if the question title was inappropriate to question body. I am trying to figure out a way to implement authentication in react app using access token provided by express application. Please suggest the ways to get started. – Tejas Hande Oct 30 '19 at 13:04
  • just search "mern stack jsonwebtoken" at google. – SuleymanSah Oct 30 '19 at 14:48
  • Thanks @SuleymanSah. I have decided to use server side cookies and validating user on it. – Tejas Hande Oct 30 '19 at 17:11

1 Answers1

0

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/

Senthil
  • 2,156
  • 1
  • 14
  • 19
  • Thank you for the suggestion. The cookies(access token) are set from the server response. But while making other calls, the server is not validating access token from the cookie and it is not in my control. – Tejas Hande Oct 30 '19 at 14:17
  • Thank you all for your inputs. I have set cookies in the response of API. Validating access token from the cookies on the server-side using fetch with credentials include as suggested by Senthil. – Tejas Hande Oct 30 '19 at 17:09
  • Hi @Senthil, Your suggestion works perfectly well in Chrome and Firefox but Safari won't allow you to set cookies from third party at all. My API and react app is running on Heroku which means different domains and authentication fails in Safari. My Next hurdle is even if I buy a domain, Heroku won't allow you to set the same custom domain for different apps. – Tejas Hande Oct 31 '19 at 10:09
  • Set this in middle ware and see whether it resolves the issue : res.set('credentials', 'include'); Ref : https://stackoverflow.com/questions/50717702/express-session-is-empty-in-safari Ref 2 : https://github.com/expressjs/session/issues/610 – Senthil Oct 31 '19 at 10:37
  • I just found a similar question on https://stackoverflow.com/questions/42301884. Cookies are not set on Safari and it doesn't seem to be a problem with res.set as they are not set at the first place. – Tejas Hande Oct 31 '19 at 10:52
  • In node js after any redirects you have ie. 302, then set the cookie value in the target route . Ref here : https://stackoverflow.com/questions/1144894/safari-doesnt-set-cookie-but-ie-ff-does – Senthil Oct 31 '19 at 11:09
  • In my case, I get 200 status code from the login API. After successful login, I am calling get user details API in which there is no cookie returning 401 Unauthorized forcing me to logout user. – Tejas Hande Oct 31 '19 at 11:22
  • Might be a safari bug. Share your code snippet or github link which is used for authentication and setting cookie logic in node js. Based on that can provide suggestion . As per the safari bug, you should not set cookie and do a redirect in node js flow . Ref to this solution : https://stackoverflow.com/questions/44318960/safari-isnt-saving-cookies-but-chrome-is – Senthil Nov 01 '19 at 09:37
  • I am setting cookies in after remote hook of login method. ` res.cookie('access_token', accessToken.id, { maxAge: 1000 * accessToken.ttl, secure: true, httpOnly: true, sameSite: 'None', }); ` For further requests, I am logging out user if it returns 401 error or displaying response. – Tejas Hande Nov 01 '19 at 14:24