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 OAuthcoderetrieved 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.
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
wranglerCLI and login with your accountnpm install --global wrangler wrangler login -
Edit the
wrangler.tomlfile, change the value foraccount_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_ID,CLIENT_SECRET: In your GitHub (OAuth) App's settings page, findClient IDandClient SECRETwrangler 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 themaster branch. -
In index.html, replace the
gr2mworkers subdomain with your own, inWORKER_URLand 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.
The OAuth App Avatar and this repository's social preview are using @cameronmcefee's cloud Octodex graphic
💖