This project will spin a CloudFlare worker to handle GitHub Oauth for your Netlify CMS.
At the moment, it has a few hardcoded variables referencing my own domain, but at some point I'd like to make this instantly reusable.
Fork and clone this project, and install the CloudFlare CLI tool, wrangler
:
npm i @cloudflare/wrangler -g
Then authenticate wrangler
to link the CLI with your CloudFlare account:
wrangler login
I'm using my own domain instead of the worker dev URLs, so I needed to fill in zone_id
and routes
.
The zone_id
value can be found on the landing page for your domain in Cloudflare in the right panel, under the heading API.
If you're wondering where the routes end up, check your domain again after publishing and click on Workers in the nav.
If you'd prefer to just use the worker dev URL (something like your-project-name.your-worker-subdomain.workers.dev
), switch workers_dev
to true
, and remove account_id
, zone_id
and routes
.
Log into GitHub, and set up a new Oauth app: https://github.com/settings/developers
- Application name
When the user logs in, the GitHub popup will display "Sign in to GitHub to continue toApplication Name
" and once they have logged in, the next window wll show "AuthorizeApplication Name
". So to avoid confusion, the name should ideally include something about the Netlify CMS. - Homepage URL
Although this is required, it does not seem to be used. You can use the same URL asAuthorization callback URL
. - Authorization callback URL
This is the important one. If you're setting this up against your domain, the it's just the domain name. (i.e.https://your-domiain.com
).
If you're planning on using the dev worker URL, you won't have that yet. That's okay! Just addhttp://localhost
or something temp for now. At this point, we really just need theCLIENT_ID
andCLIENT_SECRET
. You should come back and update this URL after thewrangler publish
step that will generate a worker URL for you.
Grab your Client ID, and generate a new client secret.
Be careful when copying the values, and triple check there isn't extra whitespace at the start or end of the secret.
wrangler secret put CLIENT_ID
wrangler secret put CLIENT_SECRET
wrangler publish
Your config should look something like this:
backend:
name: github
repo: your-github-username/your-project-name
branch: main
base_url: https://your-domain.com
Replace base_url
with your own domain (where the routes are set up), or the worker dev URL.
Visit the /admin/
of your Netlify CMS, and you should see a Login with GitHub button.
When you click on that, a popup will open asking you to log into GitHub. Once you've logged in, the popup will close, and you should be redirected to the Netlify CMS admin interface.
You can also confirm your Oauth app appears in your GitHub Authorized Oauth Apps here: https://github.com/settings/applications
If not, start over from the top and confirm you've followed all steps -- being especially careful with the copy/paste of CLIENT_ID
and CLIENT_SECRET
.
Heavily inspired by https://github.com/gr2m/cloudflare-worker-github-oauth-login and https://github.com/ublabs/netlify-cms-oauth.