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.

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 @cloudflare/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:

   • CF_API_TOKEN: Create a new token, use the "Edit Cloudflare Workers" template

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.

• Cloudflare Worker GitHub App Example

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

ISC