CORS error with Github Apps Authentication

[markattcf]

I am getting a CORS error with my implementation of Outstatic. I am on nextjs v14.0.4 and my app is hosted on AWS Amplify. The errors I am getting when navigating to the content editor page are:

Access to fetch at 'https://github.com/login/oauth/authorize?client_id=Iv1.17f8b7a08ffde065&scope=read%3Auser%2Cuser%3Aemail%2Crepo&response_type=code&redirect_uri=https%3A%2F%2Fwww.manager.sitename.org%2Fapi%2Foutstatic%2Fcallback' (redirected from 'https://www.manager.sitename.org/api/outstatic/login?_rsc=w6hlw') from origin 'https://www.manager.sitename.org' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
938-72406dcc29c0b027.js:1

GET https://github.com/login/oauth/authorize?client_id=Iv1.17f8b7a08ffde065&scope=read%3Auser%2Cuser%3Aemail%2Crepo&response_type=code&redirect_uri=https%3A%2F%2Fwww.manager.sitename.org%2Fapi%2Foutstatic%2Fcallback net::ERR_FAILED
938-72406dcc29c0b027.js:1

Failed to fetch RSC payload for https://www.manager.sitename.org/api/outstatic/login. Falling back to browser navigation. TypeError: Failed to fetch
at s (938-72406dcc29c0b027.js:1:41689)
at 938-72406dcc29c0b027.js:1:55487
at Object.u [as task] (938-72406dcc29c0b027.js:1:30172)
at c.s (938-72406dcc29c0b027.js:1:30877)
at c.enqueue (938-72406dcc29c0b027.js:1:30302)
at c (938-72406dcc29c0b027.js:1:55450)
at f (938-72406dcc29c0b027.js:1:64179)
at Object.action (938-72406dcc29c0b027.js:1:75354)
at c (938-72406dcc29c0b027.js:1:74379)
at 938-72406dcc29c0b027.js:1:74988

The Github App page appears as expected and will navigate to the Github login page, but after signing in, I am redirected to localhost rather than back to my content editor page. During that sign in process, I am also seeing a 404 error for the api.github.com/login despite it loading (error: githubBase.bundle.js:1 GET https://api.github.com/users/login 404 (Not Found)).

folder structure:

I have the following env variables set:
OST_GITHUB_ID: set to app client id
OST_GITHUB_SECRET: set to app client secret
OST_TOKEN_SECRET: set to random token per docs
OST_GITHUB_CALLBACK_URL: https://www.manager.sitename.org/api/outstatic/callback
OST_REPO_BRANCH: main
OST_REPO_SLUG: public_site

I have set the GitHub App to use the url https://www.manager.sitename.org and the callback url to https://www.manager.sitename.org/api/outstatic/callback

Despite the CORS error and the redirect to localhost, if I manually go back to manager.sitename.org, the content editor loads and I am able to make content without issue (minus one issue with image references not persisting after save).

I am not quite sure what to do, I've tried adding Access-Control-Allow-Origin and -Methods and -Headers to my next.config.js for the outstatic api path, but I can't figure out how to resolve the CORS error. Was wondering if there are any suggestions for resolving these CORS issues (if it is a CORS issue at all).

[avitorio]

Hey,
Sorry to hear this. CORS errors are usually a pain to solve.

You are saying that after login you are redirected to localhost even though you have the callback url set to your domain name? That doesn't make sense.

I haven't deployed sites to AWS amplify before so I can't really help here.

I would suggest double checking the variables on your GitHub oAuth app and make sure the callback url is exactly as it is suggested in the docs.

Let me know if you figure it out.