Merge pull request #76 from bywhitebird/72-add-github-authentication-…

…to-alakazam

feat(Alakazam): add github auth and pages and api routes for auth

apps/alakazam/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
 
   modules: [
     'nuxt-typed-router',
+    'nuxt-auth-utils',
   ],
 
   alias: {
@@ -38,4 +39,13 @@ export default defineNuxtConfig({
   build: {
     transpile: ['fsevents'],
   },
+
+  runtimeConfig: {
+    oauth: {
+      github: {
+        clientId: process.env.NUXT_OAUTH_GITHUB_CLIENT_ID,
+        clientSecret: process.env.NUXT_OAUTH_GITHUB_CLIENT_SECRET,
+      }
+    }
+  }
 })

apps/alakazam/package.json

@@ -18,6 +18,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "glob": "^10.3.4",
     "nuxt": "^3.7.1",
+    "nuxt-auth-utils": "^0.0.5",
     "nuxt-typed-router": "^3.3.1"
   }
 }

apps/alakazam/src/features/auth/pages/login.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Button from "@whitebird/ui/vue/button"
+
+const { loggedIn, user, session, clear: clearSession, fetch: fetchSession } = useUserSession()
+
+async function login() {
+  await navigateTo(`/api/auth/github`, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
+}
+
+function logout() {
+  clearSession()
+}
+
+onMounted(() => {
+  window.addEventListener(
+    "message",
+    (event) => {
+      if (event.data.type === "auth") {
+        fetchSession()
+      }
+    },
+    false,
+  );
+})
+</script>
+
+<template>
+  <div
+    :class="css({
+      bg: 'appBackground',
+      color: 'highContrastForeground',
+
+      height: '100dvh',
+      width: '100dvw',
+
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'safe center',
+
+      overflow: 'auto',
+      scrollbarGutter: 'stable',
+    })"
+  >
+    <Button
+      text="Login with GitHub"
+      variant="primary"
+      icon-name="github"
+      @click="login"
+    />
+    <Button
+      text="Logout"
+      variant="secondary"
+      icon-name="logout-box"
+      @click="logout"
+    />
+    <pre>{{ loggedIn }}</pre>
+    <pre>{{ session }}</pre>
+    <pre>{{ user }}</pre>
+  </div>
+</template>

apps/alakazam/src/features/auth/routes.ts

@@ -0,0 +1,9 @@
+import { defineNuxtRoutes } from "~/shared/utils/define-nuxt-routes";
+
+export default defineNuxtRoutes(__dirname, [
+  {
+    name: 'login-page',
+    path: '/login',
+    file: './pages/login.vue',
+  },
+])

apps/alakazam/src/server/api/auth/github.get.ts

@@ -0,0 +1,32 @@
+export default oauth.githubEventHandler({
+  config: {
+    scope: ['repo'],
+  },
+  async onSuccess(event, data) {
+    await setUserSession(event, {
+      user: {
+        provider: 'github',
+        token: data.tokens.access_token,
+        id: data.user.id,
+        login: data.user.login,
+        name: data.user.name,
+        avatarUrl: data.user.avatar_url,
+      },
+      loggedInAt: Date.now(),
+    })
+
+    setResponseHeaders(event, {
+      'content-type': 'text/html',
+    })
+    return `
+    <script>
+      window.opener.postMessage({
+        type: 'auth',
+        status: 'success',
+        provider: 'github',
+      })
+      window.close()
+    </script>
+    ` as never as void
+  }
+})

apps/alakazam/src/server/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json"
+  "extends": "../../.nuxt/tsconfig.server.json"
 }

apps/alakazam/src/types/auth.d.ts

@@ -0,0 +1,15 @@
+declare module '#auth-utils' {
+  interface UserSession {
+    loggedInAt: number
+    user: (
+      | {
+        provider: 'github'
+        token: string
+        id: number
+        login: string
+        name: string
+        avatarUrl: string
+      }
+    )
+  }
+}