chore: auth is ready (#232)

* chore: removed old extensions

* chore: auth is ready

.devcontainer/devcontainer.json

@@ -16,13 +16,10 @@
       // Add the IDs of extensions you want installed when the container is created.
       "extensions": [
         "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
         "Vue.volar",
-        "nrwl.angular-console",
-        "ms-playwright.playwright",
         "ms-azuretools.vscode-docker",
-        "vitest.explorer",
-        "Codeium.codeium"
+        "Codeium.codeium",
+        "Vercel.turbo-vsc"
       ]
     }
   }

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "prettier.enable": false,
   "editor.formatOnSave": false,
 
   "editor.codeActionsOnSave": {

apps/website/app/components/MenuProfile.vue

@@ -5,19 +5,19 @@
       class="profile-avatar"
       @click="handleMenuClick"
     >
-      <div>{{ user }}!</div>
-      <img src="~/assets/img/icons/twitch/112.png" alt="">
+      <img :src="user?.imageUrl ?? '/icons/twitch/112.png'" alt="">
     </button>
     <a v-else class="twitch" href="/api/auth/twitch">Войти</a>
   </div>
 </template>
 
 <script setup lang="ts">
 const { isFeedOpened } = useApp()
-const { loggedIn, user } = useUserSession()
+const { loggedIn, user, clear } = useUserSession()
 
 function handleMenuClick() {
   isFeedOpened.value = !isFeedOpened.value
+  clear()
 }
 </script>
 
@@ -43,7 +43,6 @@ function handleMenuClick() {
 }
 
 .profile-avatar {
-  padding: 0.2em;
   width: 58px;
   height: 58px;
   background-color: var(--bronze-4);

apps/website/package.json

@@ -26,7 +26,6 @@
     "@twurple/eventsub-ws": "^7.1.0",
     "@twurple/pubsub": "^7.1.0",
     "howler": "^2.2.4",
-    "jsonwebtoken": "^9.0.2",
     "pixi.js": "~8.2.6",
     "zod": "^3.23.8"
   },
@@ -36,7 +35,6 @@
     "@nuxt/devtools": "^1.3.9",
     "@nuxt/kit": "^3.10.0",
     "@types/howler": "^2.2.11",
-    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.14.8",
     "@vueuse/core": "^11.0.1",
     "@vueuse/nuxt": "^11.0.1",

apps/website/server/api/auth/me.get.ts

@@ -1,28 +1,12 @@
-import jwt from 'jsonwebtoken'
-import type { WebsiteProfile } from '@chat-game/types'
+export default defineEventHandler(async (event) => {
+  const session = await getUserSession(event)
 
-export default defineEventHandler((event) => {
-  const { public: publicEnv, jwtSecretKey } = useRuntimeConfig()
-
-  const token = getCookie(event, publicEnv.cookieKey)
-  if (!token) {
+  if (!session?.user) {
     throw createError({
       statusCode: 401,
       statusMessage: 'Unauthorized',
     })
   }
 
-  try {
-    const { profile } = jwt.verify(token, jwtSecretKey) as { profile: WebsiteProfile }
-    return profile
-  } catch (error) {
-    if (error instanceof jwt.TokenExpiredError) {
-      deleteCookie(event, publicEnv.cookieKey, { path: '/' })
-    }
-  }
-
-  throw createError({
-    statusCode: 401,
-    statusMessage: 'Unauthorized',
-  })
+  return session.user
 })

apps/website/server/api/auth/twitch.get.ts

@@ -1,19 +1,42 @@
 const logger = useLogger('twitch-auth')
 
+interface TwitchUser {
+  id: string
+  login: string
+  display_name: string
+  type: string
+  broadcaster_type: 'affiliate' | 'partner'
+  description: string
+  profile_image_url: string
+  offline_image_url: string
+  view_count: number
+  email: string
+  created_at: Date
+}
+
 export default oauthTwitchEventHandler({
   config: {
     emailRequired: true,
   },
-  async onSuccess(event, { user }) {
-    logger.log(JSON.stringify(user))
+  async onSuccess(event, result: { user: TwitchUser }) {
+    logger.success(JSON.stringify(result.user))
+
+    const repository = new DBRepository()
+
+    const profileInDB = await repository.findOrCreateProfile({
+      userId: result.user.id,
+      userName: result.user.login,
+    })
 
     await setUserSession(event, {
       user: {
-        id: user.id,
-        twitchId: user.id,
-        userName: user.userName,
+        id: profileInDB.id,
+        twitchId: profileInDB.twitchId,
+        userName: profileInDB.userName,
+        imageUrl: result.user.profile_image_url,
       },
     })
+
     return sendRedirect(event, '/')
   },
   // Optional, will return a json error and 401 status code by default

apps/website/server/middleware/auth.ts

@@ -10,6 +10,10 @@ export default defineEventHandler((event) => {
       return
     }
 
+    if (event.path === '/api/_auth/session') {
+      return
+    }
+
     if (!token || token !== `Bearer ${websiteBearer}`) {
       return createError({
         statusCode: 403,

apps/website/types/auth.d.ts

@@ -1,8 +1,9 @@
 declare module '#auth-utils' {
   interface User {
     id: string
-    twitchId: number
+    twitchId: string
     userName: string
+    imageUrl: string
   }
 
   interface UserSession {