If you are here, you are probably having CORS issues while implementing the Github OAuth web flow.
I’ve lost most of my day trying to understand what exactly I was doing wrong. Hope this litle post helps.
These are the steps for successfully authenticating an user to your Github app:
1. Users are redirected to request their GitHub identity
2. Users are redirected back to your site by GitHub
3. Use the access token to access the API
On step 2 Github redirects the user back to your site by sending the code
as a parameter. Then you need to send the code
parameter content on the POST https://github.com/login/oauth/access_token
request, so you can exchange this code
for an fresh new access_token
. And that’s exactly where things get shaky.
If you have a pure-javascript in-browser app, or somehow are performing this request from a browser, the response will be an OPTIONS method error
.
Why does it happen?
Hard-coding your client_id and client_secret into a webpage or some .js file loaded into your app for everyone to see is not recomended. This can cause security concerns, since the client_secret should be kept secret. If someone got hold of your client_id and client_secret, they could easily impersonate you application, for example, wiping all the tokens for that application using a Revoke Authorization request.
There is a github issue that explains this security concern, see: https://github.com/isaacs/github/issues/330
Workaround (maybe definitive solution?)
I have solved this problem by creating a 30 line Nodejs file, to perform the POST https://github.com/login/oauth/access_token
request and bring me the user access_token
. See:
I still don’t know if I call it a workaround or definitive solution (doesn’t matter). It works fine because obviously, this code is running in a lightweight Nodejs server, not in the client-side anymore.
References and useful links
- Cross origin resource sharing
- Authorization options for OAuth Apps
- Troubleshooting OAuth App access token request errors