What should my OAuth2 Redirect URL be with an S3 static site frontend and an EC2 API backend?

Question

I'm running the usual setup with React apps where I'm using S3 and Cloudfront for the frontend for my single page application and then having them query an EC2 backend for any data that they need. This works well.

My issue I'm having is with creating the OAuth2 Authorization Code flow. I have it working such that the client is redirected to Google to login, but what I am now confused about is where I should redirect the user to upon successful authentication.

The "frontend" is basically www.website.com and is hosted in an S3 bucket configured to serve as a static website, whereas the "backend" is www.website.com/api/ . I have Cloudfront set up such that www.website.com/api/ calls redirect to the EC2 instance, and every other route redirects to the S3 bucket.

In this situation, what do I specify as the redirect URL? It seems to be the case that if I specify the "backend", then after the backend EC2 route is hit, then redirecting back to the "frontend" doesn't work.

Is the recommended way to instead specify the OAuth2 Redirect URL to the "frontend" (the static S3 site), and have a frontend route which then does a request to the EC2 backend? My concern is that the frontend (and hence user) should not be given access to the response data of the OAuth2 response route, but I'm unsure of any alternatives.

Answer 1

You have a single page app and an SPA hosting model so the redirect should return to your SPA front end, which should use Authorization Code Flow (PKCE). See this doc .

Once the SPA has tokens it can just call your API directly. You may want to consider an API domain such as api.mysite.com in front of your EC2 server, and to make AWS API Gateway the entry point.

Out of interest I have a very similar architecture for a sample SPA which you can run from this page and compare to your own.

My React SPA code is here and uses the oidc client library to manage SPA login + token handling, though I use Cognito and not Google.