setup oauth flow via github for decap

public-convenience-ltd · Apr 26, 2024 · 25bd446 · 25bd446
1 parent 9156a1d
commit 25bd446
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -50,3 +50,5 @@ generated
 # DecapCMS
 
 out/
+
+certificates
diff --git a/public/admin/config.yml b/public/admin/config.yml
@@ -1,6 +1,9 @@
 backend:
   name: github
   repo: public-convenience-ltd/toiletmap
+  site_domain: toiletmap.org.uk
+  base_url: https://toiletmap.org.uk
+  auth_endpoint: api/decap-oauth
 site_url: https://toiletmap.org.uk/
 display_url: https://toiletmap.org.uk/
 publish_mode: editorial_workflow

diff --git a/public/admin/index.html b/public/admin/index.html
diff --git a/src/pages/api/admin.page.tsx b/src/pages/api/admin.page.tsx
@@ -0,0 +1,23 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.setHeader('Content-Type', 'text/html');
+  return res.send(`
+    <!doctype html>
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="robots" content="noindex" />
+        <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
+        <title>Content Manager</title>
+      </head>
+      <body>
+        <!-- Include the script that builds the page and powers Decap CMS -->
+        <script src="https://unpkg.com/decap-cms@^3.1.10/dist/decap-cms.js"></script>
+      </body>
+    </html>
+  `);
+}
+
+export default handler;
diff --git a/src/pages/api/decap-oauth/callback.page.ts b/src/pages/api/decap-oauth/callback.page.ts
@@ -0,0 +1,59 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { clientId, clientSecret, tokenUrl } from './config';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  const data = {
+    code: req.query?.code as string,
+    client_id: clientId,
+    client_secret: clientSecret,
+  };
+
+  try {
+    const accessTokenResponse = await fetch(tokenUrl, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!accessTokenResponse.ok) {
+      throw new Error(
+        `Failed to fetch access token: ${accessTokenResponse.statusText}`,
+      );
+    }
+
+    const body = await accessTokenResponse.json();
+
+    const authContent = {
+      token: body.access_token,
+      provider: 'github',
+    };
+
+    const script = `
+      <script>
+        const receiveMessage = (message) => {
+          window.opener.postMessage(
+            'authorization:${authContent.provider}:success:${JSON.stringify(authContent)}',
+            message.origin
+          );
+
+          window.removeEventListener("message", receiveMessage, false);
+        }
+        window.addEventListener("message", receiveMessage, false);
+
+        window.opener.postMessage("authorizing:${authContent.provider}", "*");
+      </script>
+    `;
+
+    res.setHeader('Content-Type', 'text/html');
+    return res.send(script);
+  } catch (err) {
+    console.log(err);
+    return res.redirect('/?error=decap_oauth_error');
+  }
+}
diff --git a/src/pages/api/decap-oauth/config.ts b/src/pages/api/decap-oauth/config.ts
@@ -0,0 +1,5 @@
+export const clientId = process.env.DECAP_OAUTH_GITHUB_CLIENT_ID;
+export const clientSecret = process.env.DECAP_OAUTH_GITHUB_CLIENT_SECRET;
+
+export const authUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&scope=repo,user`;
+export const tokenUrl = 'https://github.com/login/oauth/access_token';
diff --git a/src/pages/api/decap-oauth/index.page.ts b/src/pages/api/decap-oauth/index.page.ts
@@ -0,0 +1,6 @@
+import { authUrl } from './config';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(_: NextApiRequest, res: NextApiResponse) {
+  res.redirect(authUrl);
+}