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
- When you open the worker URL, it will redirect to the OAuth App’s login URL on github.com (example).
- It accepts a
POST
request with the OAuthcode
retrieved 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.
-
Install the
wrangler
CLI and login with your accountnpm install --global @cloudflare/wrangler wrangler login
-
Edit the
wrangler.toml
file, change the value foraccount_id
to 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_ID
,CLIENT_SECRET
: In your GitHub (OAuth) App’s settings page, findClient ID
andClient SECRET
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
Source
to be themaster branch
. -
In index.html, replace the
gr2m
workers subdomain with your own, inWORKER_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