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
- When you open the worker URL, it will redirect to the OAuth App’s login URL on github.com (example).
- It accepts a
POSTrequest with the OAuth
coderetrieved from the OAuth callback redirect and returns an OAuth access token in return
- 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.
Fork this repository
Create a Cloudflare account (it’s free!) if you don’t have one yet.
wranglerCLI and login with your account
npm install --global @cloudflare/wrangler wrangler login
wrangler.tomlfile, change the value for
account_idto your own (select your account, then find your Account ID at the bottom of the side bar)
Add the following secrets to your Cloudflare worker:
CLIENT_SECRET: In your GitHub (OAuth) App’s settings page, find
wrangler secret put CLIENT_ID wrangler secret put CLIENT_SECRET
Add the following secret in your fork’s repository settings:
CF_API_TOKEN: Create a new token, use the “Edit Cloudflare Workers” template
Enable GitHub Pages in your repository settings, select
Sourceto be the
In index.html, replace the
gr2mworkers subdomain with your own, in
WORKER_URLand the login
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.
The OAuth App Avatar and this repository’s social preview are using @cameronmcefee‘s cloud Octodex graphic