test video
Published: April 17, 2025
You are right. When deploying to Cloudflare Pages and using `backend: github` in Decap CMS, you cannot use Netlify Identity for the authentication helper service, as that service is tied to Netlify hosting.
The `backend: github` in Decap CMS uses the standard GitHub OAuth flow, which requires a small server-side component to securely exchange the temporary code received from GitHub for a permanent access token. Netlify Identity provides this component for Netlify-hosted sites. For Cloudflare Pages, you need to provide this component yourself.
The solution recommended by Decap CMS for this scenario is to set up a **Self-Hosted Authentication Server**.
Here’s the concept:
-
**The Need for a Server:** The OAuth “Authorization Code Grant Flow” (which is more secure than the implicit flow) requires a server to handle the final step: receiving the temporary code from GitHub and securely exchanging it for an access token using your GitHub OAuth App’s **Client Secret** (which should *never* be exposed client-side).
-
**What the Self-Hosted Server Does:** This small server application:
* Receives the callback from GitHub after a user authorizes your OAuth App.
* Uses the temporary `code` from the callback, your GitHub OAuth App’s `Client ID`, and `Client Secret` to make a server-to-server request to GitHub’s API to get an access token.
* Sends this access token back to the Decap CMS client running in the user’s browser.
-
**Deployment Location:** This self-hosted authentication server needs to be deployed somewhere accessible via a public URL. Cloudflare Pages itself cannot run arbitrary server code, but you can deploy this helper as a **Cloudflare Worker** or on another serverless platform (like AWS Lambda, Vercel Functions, etc.) or even a small dedicated server if you prefer. Cloudflare Workers are a good fit as they integrate well with Cloudflare Pages.
-
**Decap CMS Configuration (`config.yml`):** You would configure your `static/admin/config.yml` to point to this self-hosted authentication server. The `backend.base_url` would become the URL of your deployed serverless function/worker, and you might need an `auth_endpoint` as well, depending on the implementation.
\ ```yaml
\ backend:
\ name: github
\ repo: your_github_username/your_repo_name # CHANGE THIS
\ branch: main # CHANGE THIS
# base_url: https://your-deployed-auth-worker-url.workers.dev # CHANGE THIS - URL of your auth helper
# auth_endpoint: /auth # Example endpoint path if your worker handles multiple routes
# You might need these configured if the base_url points to the worker
# media_folder: “static/uploads”
# public_folder: “/uploads”
# … rest of your config …
\ ```
- **GitHub OAuth App Configuration:** The “Authorization callback URL” in your GitHub OAuth App settings would need to be the URL of your deployed self-hosted authentication server/worker, followed by the expected callback path (e.g., `https://your-deployed-auth-worker-url.workers.dev/callback`).
**Implementing the Self-Hosted Authentication Server:**
This is the part that requires writing a small amount of code and deploying it. The exact code depends on the platform you choose (e.g., JavaScript for Cloudflare Workers).
The Decap CMS documentation provides guidance and examples for implementing this self-hosted authentication. This is the official way to use the `github` backend without relying on Netlify Identity.
**Key Decap CMS Documentation Resource:**
Refer to the official Decap CMS documentation on setting up custom authentication or self-hosted backends. Look for sections related to the “GitHub” backend and “Authentication”.
* **Decap CMS Authentication Overview:** [https://decapcms.org/docs/authentication/](https://decapcms.org/docs/authentication/)
* **Decap CMS GitHub Backend:** [https://decapcms.org/docs/github-backend/](https://decapcms.org/docs/github-backend/) (This page often links out to auth methods)
**In summary:**
Using `backend: github` on Cloudflare Pages requires you to deploy a small, separate authentication helper service (like a Cloudflare Worker) that handles the secure OAuth token exchange with GitHub. Your Decap CMS `config.yml` and your GitHub OAuth App callback URL will point to this helper service.
This is more complex than the Netlify Identity setup but provides vendor independence for the authentication layer. You’ll need to follow the Decap CMS documentation closely to implement and deploy this helper service.