Skip to content

gr2m/cloudflare-worker-github-oauth-login

Repository files navigation

cloudflare-worker-github-oauth-login

A Cloudflare Worker + GitHub Pages Login Example

The github-oauth-login.js file is a Cloudflare Worker which is continuously deployed using GitHub Actions (see .github/workflows/deploy.yml).

The worker does 3 things

  1. When you open the worker URL, it will redirect to the OAuth App's login URL on github.com (example).
  2. It accepts a POST request with the OAuth code retrieved from the OAuth callback redirect and returns an OAuth access token in return
  3. It enables CORS.

The index.html file is a demo of a "Login with GitHub" app, you can see the demo at gr2m.github.io/cloudflare-worker-github-oauth-login/index.html. Look at its source code. If something is unclear, please feel free to open an issue or ping me on twitter.

Step-by-step instructions to create your own

Note that you require access to the new GitHub Actions for the automated deployment to work.

  1. Create a GitHub App or GitHub OAuth App

  2. Fork this repository

  3. Create a Cloudflare account (it's free!) if you don't have one yet.

  4. Install the wrangler CLI and login with your account

    npm install --global wrangler
    wrangler login
    
  5. Edit the wrangler.toml file, change the value for account_id to your own (select your account, then find your Account ID at the bottom of the side bar)

  6. Add the following secrets to your Cloudflare worker:

    • CLIENT_ID, CLIENT_SECRET: In your GitHub (OAuth) App's settings page, find Client ID and Client SECRET

      wrangler secret put CLIENT_ID
      wrangler secret put CLIENT_SECRET
      
  7. Add the following secret in your fork's repository settings:

  8. Enable GitHub Pages in your repository settings, select Source to be the master branch.

  9. In index.html, replace the gr2m workers subdomain with your own, in WORKER_URL and the login <a href="..."> tag.

That should be it. The github-oauth-login.js file will now be continously deployed to Cloudflare each time there is a commit to master.

See also

Credits

The OAuth App Avatar and this repository's social preview are using @cameronmcefee's cloud Octodex graphic :octocat:💖

License

ISC