Tự code GitHub OAuth Proxy cho Decap CMS trên Vercel

Hành trình tự build GitHub OAuth Proxy cho Decap CMS trên Vercel (Đang viết dở)

Dự án: my-private-docs (Astro 5 + Starlight) Vấn đề: Decap CMS cần backend tĩnh để xác thực với GitHub, nhưng các giải pháp có sẵn đều lỗi.

---

1. Tại sao các giải pháp có sẵn đều Fail?

Ban đầu, để Decap CMS hoạt động được trên Vercel, mình đã thử 2 cách phổ biến nhất:

1. Cách 1: Netlify Public Proxy (api.netlify.com)

   • Lỗi: Not Found.
   • Nguyên nhân: Netlify yêu cầu tham số site_id phải trỏ đúng vào một trang được host trên hạ tầng của Netlify. Domain vercel.cudem.io.vn bị từ chối truy cập API.

2. Cách 2: GitHub PKCE Auth (Client-side 100%)

   • Cấuhình auth_type: pkce trong config.
   • Thất bại do Starlight chặn CSS khiến render bị trắng bảng, và Vercel không hỗ trợ static callback tốt đối với SPA React của Decap khi kẹp trong Astro build.

---

2. Giải pháp: Tự Build OAuth Provider bằng Node.js (Astro API)

Thay vì đi vòng vèo, chọn rẽ thẳng: Build luôn một Backend Serverless trên Vercel!

Vercel cho phép chạy API siêu đơn giản. Ta dùng package simple-oauth2 để tạo 2 endpoint Astro:

• Endpoint 1 (/api/oauth/auth.js): Nhận request từ nút “Login with GitHub”, tự động tạo OAuth URL và Redirect người dùng sang trang Đăng nhập của GitHub.
• Endpoint 2 (/api/oauth/callback.js): Nhận Auth Code từ GitHub trả về, gọi request xin Access Token. Sau thi có Access Token, nhúng mã JS window.opener.postMessage để bơm token ngược lại vào màn hình Decap CMS.

Cấu hình Vercel Environment Variables:

Để mã nguồn bảo mật, CẦN config 3 biến môi trường trên Vercel ngay sáng mai:

• GITHUB_CLIENT_ID
• GITHUB_CLIENT_SECRET
• OAUTH_CALLBACK_URL

(Bài viết sẽ được update tiếp sau khi test thành công trên Vercel vào sáng mai)