Fix mongodb connection in Heroku deployment

README.md

@@ -20,7 +20,7 @@ You have free tech selection, but it is desirable that the resulting application
 
 #### Technologies
 
-This is a Nuxt3 application using Vue3 (composition API), Vuetify (component library & theme), Pinia (store), Mongoose & MongoDB (database), SASS (styling), Google OAuth2 (authentication), Docker (deployment) and Yarn (package manager).
+This is a Nuxt3 application using Vue3 (composition API) & TypeScript, Vuetify (component library & theme), Pinia (store), Mongoose & MongoDB (database), SASS (styling), Google OAuth2 (authentication), Docker (deployment) and Yarn (package manager).
 
 #### Highlights
 
@@ -48,6 +48,7 @@ This is a Nuxt3 application using Vue3 (composition API), Vuetify (component lib
 4. Fixing minor bugs (there are minor things I've discovered but not had time to fix)
 5. Add more OAuth2 methods (Facebook, Apple, LinkedIn etc...)
 6. Find a better way to handle roles (currently just stored in database)
+7. Improve accessibility with aria-labels etc. and manual testing with a screen reader
 
 #### Reflections
 
@@ -65,9 +66,10 @@ yarn  install
 
 And add the following environment variables in a `.env` file
 
-1. MONGODB_URI
-2. GOOGLE_CLIENT_ID
-3. GOOGLE_CLIENT_SECRET
+1. SIDEBASE_AUTH_SECRET
+2. MONGODB_URI
+3. GOOGLE_CLIENT_ID
+4. GOOGLE_CLIENT_SECRET
 
 ### Development Server
 

nuxt.config.ts

@@ -34,6 +34,12 @@ export default defineNuxtConfig({
       "process.env.DEBUG": false,
     },
   },
+  nuxtServerUtils: {
+    mongodbUri: process.env.MONGODB_URI,
+  },
+  nitro: {
+    plugins: ["~/server/index.ts"],
+  },
   hooks: {
     "vite:extendConfig": (config) => {
       config.plugins?.push(

package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
+    "start": "nuxt dev",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
@@ -13,9 +14,9 @@
     "@mdi/font": "^7.4.47",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@pinia/nuxt": "^0.5.1",
-    "mongoose": "^8.2.3",
+    "mongoose": "^8.3.0",
     "next-auth": "4.21.1",
-    "nuxt": "^3.11.1",
+    "nuxt": "^3.11.2",
     "nuxt-server-utils": "^0.0.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "sass": "^1.72.0",

server/api/auth/[...].ts

@@ -2,6 +2,7 @@ import { NuxtAuthHandler } from "#auth";
 import GoogleProvider from "next-auth/providers/google";
 
 export default NuxtAuthHandler({
+  secret: process.env.SIDEBASE_AUTH_SECRET,
   providers: [
     // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
     GoogleProvider.default({

server/index.ts

@@ -0,0 +1,9 @@
+import mongoose from "mongoose";
+export default async () => {
+  try {
+    await mongoose.connect(process.env.MONGODB_URI || "");
+    console.log("DB connection established.");
+  } catch (err) {
+    console.error("DB connection failed.", err);
+  }
+};