added authorization flow

web/app.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <NuxtPage />
 </template>

web/nuxt.config.ts

@@ -1,9 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  extends: 'node_modules/@xeovalyte/nuxt-xvui',
+  devtools: true,
+  ssr: false,
   modules: [
     '@nuxtjs/tailwindcss',
-    '@xeovalyte/nuxt-xvui',
+    '@xeovalyte/nuxt-xvtoast',
     'nuxt-icon',
     '@nuxtjs/tailwindcss',
-  ]
+  ],
+  runtimeConfig: {
+    discordId: '',
+    discordSecret: '',
+    jwtSecret: '',
+  }
 })

web/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint ."
   },
   "devDependencies": {
+    "@nuxt/devtools": "^0.4.1",
     "@nuxtjs/eslint-module": "^4.0.2",
     "@nuxtjs/tailwindcss": "^6.6.6",
     "@types/node": "^18",
@@ -19,6 +20,8 @@
   },
   "dependencies": {
     "@nuxt/eslint-config": "^0.1.1",
-    "@xeovalyte/nuxt-xvui": "^1.1.1"
+    "@xeovalyte/nuxt-xvtoast": "^1.1.3",
+    "@xeovalyte/nuxt-xvui": "git+https://gitea.xeovalyte.dev/xeovalyte/nuxt-xvui.git",
+    "jsonwebtoken": "^9.0.0"
   }
 }

web/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full h-screen bg-neutral-900 text-primary">
+    <a href="https://discord.com/api/oauth2/authorize?client_id=1052974736432443432&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth&response_type=code&scope=identify">Login with Discord</a>
+  </div>
+</template>

web/server/api/auth/index.js

@@ -0,0 +1,34 @@
+export default defineEventHandler(async (event) => {
+  const { code } = getQuery(event)
+
+  const config = useRuntimeConfig()
+
+  if (!code) sendRedirect(event, '/', 302)
+
+  try {
+    const tokenResponseData = await $fetch('https://discord.com/api/oauth2/token', {
+      method: 'POST',
+      body: new URLSearchParams({
+        client_id: config.discordId,
+        client_secret: config.discordSecret,
+        code: code,
+        grant_type: 'authorization_code',
+        redirect_uri: 'http://localhost:3000/api/auth',
+        scope: 'identify',
+      }).toString(),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    })
+    
+    const token = createToken(tokenResponseData.access_token, tokenResponseData.refresh_token, tokenResponseData.expires_in)
+
+    setCookie(event, 'jwt', token, { httpOnly: true, maxAge: tokenResponseData.expires_in * 1000 })
+  } catch (e) {
+    console.log(e)
+
+    throw createError({ statusCode: 500, statusMessage: 'Error creating login token'})
+  }
+
+  return sendRedirect(event, '/', 302)
+});

web/server/utils/auth.js

@@ -0,0 +1,9 @@
+import jwt from 'jsonwebtoken'
+
+const config = useRuntimeConfig()
+
+export const createToken = (accessToken, refreshToken, maxAge) => {
+  return jwt.sign({ accessToken, refreshToken }, config.jwtSecret, {
+    expiresIn: maxAge,
+  })
+}

web/tailwind.config.js

@@ -2,7 +2,12 @@
 module.exports = {
   content: [],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#4bd6ef',
+        secondary: '#4bacef',
+      }
+    },
   },
   plugins: [],
 }