fix: live admin page authenticates with github

api/_lib/oauth2.ts

@@ -0,0 +1,30 @@
+import * as simpleOauthModule from "simple-oauth2"
+
+export const create = () =>
+  simpleOauthModule.create({
+    client: {
+      id: process.env.OAUTH_CLIENT_ID || "",
+      secret: process.env.OAUTH_CLIENT_SECRET || "",
+    },
+    auth: {
+      tokenHost: `https://github.com`,
+      tokenPath: `/login/oauth/access_token`,
+      authorizePath: `/login/oauth/authorize`,
+    },
+  })
+
+export const renderBody = (status: string, content: object) => `
+<script>
+  const receiveMessage = (message) => {
+    window.opener.postMessage(
+      'authorization:github:${status}:${JSON.stringify(content)}',
+      message.origin
+    );
+
+    window.removeEventListener("message", receiveMessage, false);
+  }
+  window.addEventListener("message", receiveMessage, false);
+
+  window.opener.postMessage("authorizing:github", "*");
+</script>
+`

astro.config.mjs

@@ -2,11 +2,16 @@ import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
-
 import react from "@astrojs/react";
 
+import node from "@astrojs/node";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://example.com",
-  integrations: [mdx(), sitemap(), tailwind(), react()]
+  output: "hybrid",
+  integrations: [mdx(), sitemap(), tailwind(), react()],
+  adapter: node({
+    mode: "standalone"
+  })
 });

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@astrojs/check": "^0.5.3",
     "@astrojs/mdx": "^2.1.1",
+    "@astrojs/node": "^8.3.3",
     "@astrojs/react": "^3.1.0",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
@@ -36,11 +37,13 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-select": "^5.8.0",
+    "simple-oauth2": "2.5.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
     "@brown-ccv/eslint-config": "^0.3.0",
+    "@types/simple-oauth2": "^2.5.2",
     "eslint": "^8.56.0",
     "eslint-plugin-astro": "^0.31.4",
     "prettier": "^3.2.5",

public/admin/config.yml

@@ -3,7 +3,8 @@ local_backend: true
 backend:
   name: github
   repo: brown-ccv/mmp
-  base_url: /
+  base_url: https://mmp-site-b1c9b.web.app/
+  auth_endpoint: api/auth
 media_folder: public/images
 media_library:
   max_file_size: 734003200

src/pages/api/auth.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import { GET } from "./auth"
+
+const auth = await GET(Astro.url.origin)
+---
+
+<Layout title="Authenticate" description="" />

src/pages/api/auth.ts

@@ -0,0 +1,16 @@
+import crypto from "crypto"
+import { create } from "../../../api/_lib/oauth2.ts"
+
+export const prerender = false
+
+export const GET = (host: string) => {
+  const randomString = () => crypto.randomBytes(4).toString(`hex`)
+  const oauth2 = create()
+
+  const url = oauth2.authorizationCode.authorizeURL({
+    redirect_uri: `${host}/api/callback`,
+    scope: `repo,user`,
+    state: randomString(),
+  })
+  return Response.redirect(url, 301)
+}

src/pages/api/callback.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import { GetCallback } from "./callback"
+
+const callback = GetCallback(Astro.request, Astro.url.origin)
+---
+
+<Layout title="Callback" description="" />

src/pages/api/callback.ts

@@ -0,0 +1,26 @@
+import { create, renderBody } from "../../../api/_lib/oauth2.ts"
+
+export const prerender = false
+
+export const GetCallback = async (req: Request, host: string) => {
+  const params = new URLSearchParams(req.url)
+  const code = params.get("code") || ""
+  const oauth2 = create()
+
+  try {
+    const accessToken = await oauth2.authorizationCode.getToken({
+      code,
+      redirect_uri: `${host}/api/callback`,
+    })
+    const { token } = oauth2.accessToken.create(accessToken)
+    return new Response(
+      renderBody("success", {
+        token: token.access_token,
+        provider: "github",
+      }),
+      { status: 200 }
+    )
+  } catch (e: any) {
+    return new Response(renderBody("error", e.message), { status: 200 })
+  }
+}