GitHub OAuth Busy Developer's Guide

github_oauth_busy_developer_guide.md

GitHub OAuth Busy Developer's Guide

This is a quick guide to OAuth2 support in GitHub for developers. This is still experimental and could change at any moment. This Gist will serve as a living document until it becomes finalized at Develop.GitHub.com.

OAuth2 is a protocol that lets external apps request authorization to private details in your GitHub account without getting your password. All developers need to register their application before getting started.

Web Application Flow

• Redirect to this link to request GitHub access:

https://github.com/login/oauth/authorize?
  client_id=...&
  redirect_uri=http://www.example.com/oauth_redirect

• If the user accepts your request, GitHub redirects back to your site with a temporary code in a code parameter. Exchange this for an access token:

POST https://github.com/login/oauth/access_token?
  client_id=...&
  redirect_uri=http://www.example.com/oauth_redirect&
  client_secret=...&
  code=...

RESPONSE:
access_token=...

• You have the access token, so now you can make requests on the user's behalf:

GET https://github.com/api/v2/json/user/show?
  access_token=...

Javascript Flow

Disabled, for now...

Desktop flow

Disabled, for now...

Scopes

• (no scope) - public read-only access (includes user profile info, public repo info, and gists).
• user - DB read/write access to profile info only.
• public_repo - DB read/write access, and Git read access to public repos.
• repo - DB read/write access, and Git read access to public and private repos.
• gist - write access to gists.

Your application can request the scopes in the initial redirection:

https://github.com/login/oauth/authorize?
  client_id=...&
  scope=user,public_repo&
  redirect_uri=http://www.example.com/oauth_redirect

References

• OAuth 2 spec
• Facebook API
• Ruby OAuth2 lib
• simple ruby/sinatra example
• simple python example using python-oauth2
• Ruby OmniAuth example
• Ruby Sinatra extension
• Ruby Warden strategy
• Node.js demo using Nozzle

Is it right to use client_secret in a open source project which is visible for everyone? or have security concerns for OAuth apps? @technoweenie

Definitely not Okay.

Secret token in combination with client ID is enough to access all user information.

But if we're putting the client secret and ID in the URL, anyone can easily find them in the browser's network tab.

function requestGithubToken(options, code) {
  let data = new FormData()
  data.append('client_id', options.client_id)
  data.append('client_secret', options.client_secret)
  data.append('code', code)
  
  fetch(`https://github.com/login/oauth/access_token`, {
    method: 'POST',
    body: data
  })
  .then((response) => {
    return response.text()
  })
  .then((paramsString) => {
    let params = new URLSearchParams(paramsString)
    console.log('access_token', params.get('access_token'))
  });
}

This works!

function requestGithubToken(options, code) {
  let data = new FormData()
  data.append('client_id', options.client_id)
  data.append('client_secret', options.client_secret)
  data.append('code', code)
  
  fetch(`https://github.com/login/oauth/access_token`, {
    method: 'POST',
    body: data
  })
  .then((response) => {
    return response.text()
  })
  .then((paramsString) => {
    let params = new URLSearchParams(paramsString)
    console.log('access_token', params.get('access_token'))
  });
}

I'm getting a CORS error when trying to run it locally. Anyone else having the same issue?

Access to fetch at 'https://github.com/login/oauth/access_token' from origin 'http://localhost:8000' 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.

This worked for me.
The problem is not whether JSON or FormData, just to be embarrassed, misspelled.
Hope this helps.

clientId -> client_id
clientSecret -> client_secret

const GetGithubAccessToken = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  const body = {
    client_id: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID,
    client_secret: process.env.NEXT_PUBLIC_GITHUB_CLIENT_SECRET,
    code: req.body.code
  };
  const url = 'https://github.com/login/oauth/access_token';
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
  })
    .then((res) => res.json())
    .catch((err) => {
      console.log({ err });
      return err;
    });
  res.status(200).json(response);
};

+1 a CORS error when trying to run it locally, any solution please?