feat: integrate nuxt-session

nuxt.config.ts

@@ -1,5 +1,14 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  app: {
+    head: {
+      link: [{
+        rel: 'icon',
+        type: 'image/x-icon',
+        href: 'logo_64x64.png',
+      }],
+    },
+  },
   // Maping `.env` variables
   // refs: https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables
   runtimeConfig: {
@@ -10,26 +19,24 @@ export default defineNuxtConfig({
   },
   modules: [
     '@nuxt/ui',
-    '@vueuse/nuxt',
     '@nuxtjs/i18n',
+    '@vueuse/nuxt',
+    '@sidebase/nuxt-session',
   ],
   i18n: {
     vueI18n: './i18n.config.ts',
     // compilation: {
     //   jit: false,
     // },
   },
+  // refs: https://github.com/sidebase/nuxt-session/blob/main/README.md#configuration
+  session: {
+    session: {
+      expiryInSeconds: 60 * 60 * 24 * 7, // 7 days
+    },
+  },
   build: {
     transpile: ['trpc-nuxt'],
   },
-  app: {
-    head: {
-      link: [{
-        rel: 'icon',
-        type: 'image/x-icon',
-        href: 'logo_64x64.png',
-      }],
-    },
-  },
   devtools: { enabled: true },
 })

package.json

@@ -36,6 +36,7 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@nuxt/devtools": "latest",
     "@nuxtjs/i18n": "8.0.0-rc.4",
+    "@sidebase/nuxt-session": "^0.2.7",
     "@types/bcryptjs": "^2.4.4",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",

pages/index.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="w-screen h-screen flex flex-col items-center justify-center">
+  <div class="h-screen flex flex-col items-center justify-center">
     <h2>Hi</h2>
     <div class="mt-8">
       <NuxtLink to="/login">

pages/login.vue

@@ -13,8 +13,8 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 const state = ref({
-  email: undefined,
-  password: undefined,
+  email: '[email protected]',
+  password: 'apibeer',
 })
 
 const form = ref<Form<Schema>>()
@@ -23,8 +23,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
   const { email, password } = event.data
   submiting.value = true
   try {
-    // TODO: Use `cookie` auth strategy
-    const _user = await $client.auth.login.mutate({
+    await $client.auth.login.mutate({
       email,
       password,
     })
@@ -62,7 +61,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           <UInput v-model="state.email" placeholder="[email protected]" icon="i-heroicons-envelope" />
         </UFormGroup>
         <UFormGroup label="Password" name="password">
-          <UInput v-model="state.password" placeholder="123456" icon="i-heroicons-lock-closed" />
+          <UInput v-model="state.password" placeholder="Your Password" icon="i-heroicons-lock-closed" />
         </UFormGroup>
         <div class="flex justify-end">
           <UButton type="submit" :loading="submiting">

prisma/seed.ts

@@ -17,8 +17,8 @@ async function seedUsers() {
   // TODO: skip exist
   await prisma.user.create({
     data: {
-      username: 'apibeer',
       email: '[email protected]',
+      username: 'apibeer',
       password: {
         create: { hash: await bcrypt.hash('123456', 10) },
       },

server/trpc/context.ts

@@ -1,3 +1,5 @@
+import type { User } from '@prisma/client'
+import type { Session } from '@sidebase/nuxt-session'
 import type { inferAsyncReturnType } from '@trpc/server'
 import type { H3Event } from 'h3'
 
@@ -14,6 +16,7 @@ export function createContext(event: H3Event) {
    */
   return {
     prisma: event.context.prisma,
+    session: event.context.session as Session & { user?: User },
   }
 }
 

server/trpc/routers/auth.ts

@@ -9,17 +9,22 @@ export const authRouter = router({
         password: z.string().min(6),
       }),
     )
-    .mutation(async ({ input, ctx }) => {
+    .mutation(async (event) => {
+      const { input, ctx } = event
       // TODO: implement login
       const user = await ctx.prisma.user.findUnique({
         where: {
           email: input.email,
         },
       })
+
       // TODO: Wrap trpc error
       if (!user)
         throw new Error('invalid credentials')
 
+      // Storge session
+      ctx.session.user = user
+
       return user
     }),
 })