cloudflare-worker-github-oauth-login

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 OAuth code 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.

Install the wrangler CLI and login with your account

npm install --global @cloudflare/wrangler
wrangler login

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)
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
```
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 the master branch.
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.

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

Post Views: 147