CODEWITHSUNDEEP
javascriptcookiesoauth-2.0csrfcreate-react-app
John Smith
John Smith

Reputation: 8821

Should the OAuth2 Redirect URL be to the frontend or backend?

I'm setting up OAuth2 in my app using the Authorization Grant flow. I am also using create-react-app, such that I'm developing on localhost:3000, which proxies to my app server backend on localhost:8080.

Everything mostly works, except for the fact that I cannot get the CSRF token working.

I realized it was because I was having the OAuth2 Redirect URL set to the backend, and as a result it was not sending the private encrypted csrf_state cookie along, because the request was originating from google instead of my app.

I don't think this will be a problem in production, because there won't be a proxy server. Instead, both the backend and frontend will be served from the same mydomain.com

So, should I just not have this work in development? Or should I have the OAuth2 redirect URL set to my frontend (localhost:3000), which then automatically redirects to the backend (localhost:8080), such that it can send the private encrypted CSRF token along?

Or is there a way to have the cookie originate from google, without having the multiple redirects? Or should I just not bother with CSRF, since SameSite has such large support amongst browsers now?

Upvotes: 18

Views: 8569

Answers (2)

Gary Archer
Gary Archer

Reputation: 29243

Ahmad is right - and here is some more context on standard usage for react apps and APIs:

If you're using React then you have an SPA that should redirect directly to Google during logins

So your redirect url should be localhost:3000

Your SPA should be entirely cookieless - and much simpler - which is one of the benefits of SPAs - also you can turn off CSRF checks in the API

Your SPA will then send an access token to your API and the API will need to validate the token rather than cookies

My tutorial and code sample may help you understand the moving parts: https://authguidance.com/2017/09/24/basicspa-overview/

Upvotes: 0

Irfan434
Irfan434

Reputation: 1681

The OAuth2.0 Authorization Code grant includes CSRF protection using the state parameter. Use this instead of relying on cookies.

state

RECOMMENDED. An opaque value used by the client to maintain state between the request and callback. The authorization server includes this value when redirecting the user-agent back to the client. The parameter SHOULD be used for preventing cross-site request forgery as described in Section 10.12.

Source: https://www.rfc-editor.org/rfc/rfc6749#section-4.1

Upvotes: 0

Related Questions