Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save technoweenie/419219 to your computer and use it in GitHub Desktop.
Save technoweenie/419219 to your computer and use it in GitHub Desktop.
GitHub OAuth Busy Developer's Guide

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

@jayporta
Copy link

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.

@Kameshwaran
Copy link

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!

@bhaumik55231
Copy link

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.

@hiroshinishio
Copy link

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);
};

@khalid-jarrad
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment