upgrade deprecated code

Author: smorcuend

.env.example

@@ -0,0 +1,8 @@
+AUTH0_BASE_URL=
+AUTH0_ISSUER_BASE_URL=
+AUTH0_CLIENT_ID=
+AUTH0_CLIENT_SECRET=
+AUTH0_AUDIENCE=
+AUTH0_COOKIE_NAME=
+AUTH0_DOMAIN=
+

README.md

@@ -33,6 +33,8 @@ Make sure to install the dependencies
 yarn install
 ```
 
+Rename .env.example as .env and set environment values
+
 ## Development
 
 Start the development server on http://localhost:3000

layouts/default.vue

@@ -45,6 +45,11 @@
       label: "About",
       icon: "pi pi-fw pi-file",
       to: "/about"
+    },
+    {
+      label: "Profile",
+      icon: "pi pi-fw pi-user",
+      to: "/profile"
     }
   ];
 </script>

nuxt.config.ts

@@ -1,19 +1,17 @@
 import { defineNuxtConfig } from "nuxt";
 
 const {
-  AUTH0_SECRET,
   AUTH0_BASE_URL,
   AUTH0_ISSUER_BASE_URL,
   AUTH0_CLIENT_ID,
   AUTH0_CLIENT_SECRET,
   AUTH0_AUDIENCE,
-  AUTH0_COOKIE_NAME,
+  AUTH0_COOKIE_NAME
 } = process.env;
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
   app: {
-
     head: {
       charset: "utf-8",
       viewport: "width=device-width, initial-scale=1",
@@ -25,27 +23,25 @@ export default defineNuxtConfig({
           content: "Nuxt3 + Auth0"
         }
       ],
-      link: [
-        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
-      ]
-    },
+      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
+    }
   },
   typescript: {
-    shim: false,
+    shim: false
   },
   runtimeConfig: {
-    AUTH0_SECRET,
     AUTH0_BASE_URL: AUTH0_BASE_URL || process.env.URL,
     AUTH0_ISSUER_BASE_URL,
     AUTH0_CLIENT_ID,
     AUTH0_CLIENT_SECRET,
     AUTH0_AUDIENCE,
     AUTH0_COOKIE_NAME,
+    public: {
+      AUTH0_COOKIE_NAME
+    }
   },
   build: {
-    transpile: [
-      'primevue'
-    ],
+    transpile: ["primevue"]
   },
   // css
   css: [
@@ -56,6 +52,6 @@ export default defineNuxtConfig({
   ],
   components: {
     global: true,
-    dirs: ['~/components']
-  },
+    dirs: ["~/components"]
+  }
 });

package.json

@@ -2,7 +2,8 @@
   "private": true,
   "scripts": {
     "dev": "nuxi dev",
-    "build": "nuxi build",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {

pages/profile.vue

@@ -1,3 +1,12 @@
 <template>
-  <div>Profile</div>
+  <Card>
+    <template #title> Profile </template>
+    <template #content>
+      {{ user }}
+    </template>
+  </Card>
 </template>
+
+<script lang="ts" setup>
+  const user = useUser();
+</script>

plugins/session.server.ts

@@ -1,5 +1,7 @@
+import { defineNuxtPlugin } from '#app'
+
 export default defineNuxtPlugin((nuxt) => {
-  const session = nuxt.ssrContext.req?.session;
+  const session = nuxt.ssrContext.event.context?.session;
   if (session && session.user) {
     useState("user", () => session.user);
   }

server/api/auth/callback.ts

@@ -4,7 +4,7 @@ import * as Iron from '@hapi/iron'
 // import { createRemoteJWKSet, jwtVerify } from 'jose'
 import * as jose from 'jose'
 
-export default async (req, res) => {
+export default defineEventHandler(async (event) => {
   const {
     AUTH0_BASE_URL,
     AUTH0_ISSUER_BASE_URL,
@@ -13,7 +13,7 @@ export default async (req, res) => {
     AUTH0_COOKIE_NAME,
   } = process.env;
 
-  const query = parse(req.url, true).query
+  const query = parse(event.req.url, true).query
 
   if (query?.error || !query.code) {
     throw new Error(String(query.message))
@@ -61,9 +61,9 @@ export default async (req, res) => {
   const date = new Date();
   date.setDate(date.getDate() + 1);
 
-  res.writeHead(302, {
+  event.res.writeHead(302, {
     "Set-cookie": `${AUTH0_COOKIE_NAME}=${sealedCookie}; Path=/; Secure; SameSite=Lax; Expires=${date.toUTCString()}`,
     Location: "/",
   });
-  res.end();
-};
+  event.res.end();
+});

server/api/auth/login.ts

@@ -1,15 +1,13 @@
-export default async (req, res) => {
+export default defineEventHandler(async (event) => {
   const {
     AUTH0_BASE_URL,
     AUTH0_ISSUER_BASE_URL,
     AUTH0_CLIENT_ID,
     AUTH0_AUDIENCE,
   } = process.env;
-
   const loginUrl = `${AUTH0_ISSUER_BASE_URL}/authorize?response_type=code&client_id=${AUTH0_CLIENT_ID}&redirect_uri=${AUTH0_BASE_URL}/api/auth/callback&scope=openid%20profile%20email&audience=${AUTH0_AUDIENCE}`;
-
-  res.writeHead(302, {
+  event.res.writeHead(302, {
     Location: loginUrl,
   });
-  res.end();
-};
+  event.res.end();
+})

server/api/auth/logout.ts

@@ -1,9 +1,8 @@
-export default async (req, res) => {
+export default defineEventHandler(async (event) => {
   const { AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_COOKIE_NAME } = process.env;
-
-  res.writeHead(302, {
-    "Set-cookie": `${AUTH0_COOKIE_NAME}=; Path=/; Secure; SameSite=Lax; Max-Age=0`,
+  event.res.writeHead(302, {
+    "Set-cookie": `${AUTH0_COOKIE_NAME}=; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=0`,
     Location: `${AUTH0_ISSUER_BASE_URL}/v2/logout?client_id=${AUTH0_CLIENT_ID}`,
   });
-  res.end();
-};
+  event.res.end();
+})

server/api/auth/me.ts

@@ -1,8 +1,24 @@
-export default async (req, res) => {
-  const data = await fetch(`${process.env.AUTH0_ISSUER_BASE_URL}/userinfo`, {
-    headers: {
-      Authorization: `Bearer ${req.session.access_token}`,
-    },
-  });
-  return await data.json();
-};
+import { getCookie } from 'h3'
+import Iron from '@hapi/iron';
+
+const { AUTH0_COOKIE_NAME, AUTH0_CLIENT_SECRET } = process.env
+
+export default defineEventHandler(async (event) => {
+  try {
+    const sealed = getCookie(event, AUTH0_COOKIE_NAME)
+    if (sealed) {
+      const unsealed = await Iron.unseal(sealed, AUTH0_CLIENT_SECRET, Iron.defaults);
+      return unsealed.user
+      
+      // console.log(unsealed.access_token)
+      // const data = await fetch(`${process.env.AUTH0_ISSUER_BASE_URL}/userinfo`, {
+      //   headers: {
+      //     Authorization: `Bearer ${unsealed.access_token}`,
+      //   },
+      // });
+      // return await data.json();
+    }
+  } catch (err) {
+    console.log(err.message);
+  }
+})

server/middleware/auth.ts

@@ -0,0 +1,22 @@
+import { getCookie } from 'h3'
+export default defineEventHandler((event) => {
+  const { AUTH0_COOKIE_NAME } = process.env
+  const token = getCookie(event, AUTH0_COOKIE_NAME)
+  if (event.req.url.includes('/api/auth/')) {
+    return
+  }
+  if (event.req.url.includes('/api/')) {
+    if (Boolean(token) !== true) {
+      event.res.statusCode = 401
+      event.res.end('You must be signed in to access to resource.')
+    }
+  } else {
+    // if (Boolean(token) !== true) {
+    //   event.res.writeHead(302, {
+    //     "Set-cookie": `${AUTH0_COOKIE_NAME}=; Path=/; Secure; SameSite=Lax; Expires=`,
+    //     Location: "/login",
+    //   });
+    //   event.res.end();
+    // }
+  }
+})

server/middleware/session.ts

@@ -1,16 +1,16 @@
 import Iron from "@hapi/iron";
 import { getCookie } from 'h3'
 
-export default async (req, res) => {
+export default defineEventHandler(async (event) => {
   const { AUTH0_COOKIE_NAME, AUTH0_CLIENT_SECRET } = process.env;
-  const cookie = getCookie(req, AUTH0_COOKIE_NAME)
+  const cookie = getCookie(event.req, AUTH0_COOKIE_NAME)
 
   if (cookie != null) {
     const session = await Iron.unseal(
       cookie,
       AUTH0_CLIENT_SECRET,
       Iron.defaults
     );
-    req.session = session;
+    event.context.session = session;
   }
-};
+});