Add Auth to Any App with OAuth2 Proxy

There are two ways to use OAuth2 Proxy: route your traffic through it directly or use it with the Nginx auth_request directive. I’d recommend routing traffic through Nginx if possible, but I’ll walk through both options and explain my recommendation below.


This is a companion discussion topic for the original entry at https://developer.okta.com/blog/2022/07/14/add-auth-to-any-app-with-oauth2-proxy

Hi Brian, great article, thanks you so much!
Unfortunately I spent quite some time over it, but couldn’t get it working: I kickoff the flow, but after logging in via Okta, OAuth2-Proxy always returns me a 403 Error, “Login Failed: Unable to find a valid CSRF token. Please try again.”.
I can reliably reproduce it on a remote Linux machine as well as on my Mac.
Any idea what might be wrong?

thanks for this useful post. But I have question. How I can get the username in web_app (upstream application)? I tried getting it from request but that doesn’t seems available. More info here: oauth 2.0 - get username in opengrok from oauth2-proxy - Stack Overflow
Please help asap.

Very nice post… I am looking to make a React app front-end to this whole setup, that will work with the rest of the setup starting with NGINX reverse proxy …
I was wondering if you have built some react app to complement your setup here or can refer to some resource that shows how to…

In my example, the auth state is managed by a session cookie. Session cookies should work with just about every framework :wink:

I am wondering whether the react app should be checking whether the user is logged in or not

  • is there an endpoint that can be queried to find out ?

In my React app -
I am currently doing this …
I just am making the API calls from the page where ever it needs the data.
it makes the calls via nginx to oauth-proxy,
if the react app does not send the SESSION cookie, the oauth2-proxy enters the login flow and comes back with access token and issues a session cookie for it (storing the accesstoken in redis).

Once that is done, the oauth2-proxy makes the API call to upstream , then I simply end up with the data in the browser. My React app is left behind,
I do not know how to redirect back to the React App on the page from where the call was made from.

The Oauth proxy’s ==> /oauth2/start endpoint does not support sending rd parameter, so how do i communicate to oauth-proxy, where to go back to once all is said and done with upstream api call.

You could configure your REST API endpoints to return a 40x instead of a 302. Then have your front-end trigger handle the redirect in a user-friendly manner.
That way, you can still make use of your browser and the backend to handle the sessions, and your front-end doesn’t need to contain a lot of auth logic.