upgrade to @nuxtjs/auth-next v5 + dependency updates

Provide a working example for the recommended version v5 🔥
Check https://auth.nuxtjs.org/providers/auth0

Author: hmaack

.env.example

@@ -1,2 +1,3 @@
 AUTH0_CLIENT_ID=""
 AUTH0_DOMAIN=""
+AUTH0_AUDIENCE=""

README.md

@@ -8,11 +8,12 @@ You can access a simple demo here: https://auth0.nuxtjs.org
 
 ## Setup
 
-* Create an account at Auth0 (https://auth0.com)
-* Add your endpoints to your client's allowed urls like this ![nuxt-callbacks](https://cloud.githubusercontent.com/assets/904724/22703633/23f35724-ed65-11e6-83e4-227ad77c00ff.png)
-* Add your logout endpoint to your account allowed urls like this ![nuxt-logout-cb](https://cloud.githubusercontent.com/assets/904724/22703768/9782bbbc-ed65-11e6-93b7-9c1e4d5d7984.png)
+- Create an account at Auth0 (https://auth0.com)
+- Add your endpoints to your client's allowed urls like this ![nuxt-callbacks](https://cloud.githubusercontent.com/assets/904724/22703633/23f35724-ed65-11e6-83e4-227ad77c00ff.png)
+- Add your logout endpoint to your account allowed urls like this ![nuxt-logout-cb](https://cloud.githubusercontent.com/assets/904724/22703768/9782bbbc-ed65-11e6-93b7-9c1e4d5d7984.png)
 
-* Copy the file `.env.example` at the root folder, rename it as `.env` and add your Auth0 keys
+- Copy the file `.env.example` at the root folder, rename it as `.env` and add your Auth0 keys
+- Find the audience value at https://manage.auth0.com/#/apis
 
 ## Running Locally
 
@@ -22,4 +23,3 @@ cd example-auth0
 npm install
 npm run dev
 ```
-

nuxt.config.js

@@ -1,51 +1,52 @@
-import 'dotenv/config'
+import "dotenv/config";
 
 export default {
   /*
-  ** Headers of the page
-  */
+   ** Headers of the page
+   */
   head: {
-    title: 'Nuxt.js + Auth0',
+    title: "Nuxt.js + Auth0",
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "Nuxt.js project" }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: 'https://nuxtjs.org/favicon.ico' }
+      {
+        rel: "icon",
+        type: "image/x-icon",
+        href: "https://nuxtjs.org/favicon.ico"
+      }
     ]
   },
   /*
-  ** Global CSS
-  */
-  css: [
-    'normalize.css',
-    '@/assets/main.css'
-  ],
+   ** Global CSS
+   */
+  css: ["normalize.css", "@/assets/main.css"],
   /*
-  ** Modules
-  */
+   ** Modules
+   */
   modules: [
     // axios is required by @nuxtjs/auth
-    '@nuxtjs/axios',
+    "@nuxtjs/axios",
     // https://auth.nuxtjs.org
-    '@nuxtjs/auth'
+    "@nuxtjs/auth-next"
   ],
   auth: {
     redirect: {
-      login: '/', // redirect user when not connected
-      callback: '/auth/signed-in'
+      login: "/", // redirect user when not connected
+      callback: "/auth/signed-in"
     },
     strategies: {
-      local: false,
       auth0: {
         domain: process.env.AUTH0_DOMAIN,
-        client_id: process.env.AUTH0_CLIENT_ID
+        clientId: process.env.AUTH0_CLIENT_ID,
+        audience: process.env.AUTH0_AUDIENCE
       }
     }
   },
   build: {
     // For stormkit.io
-    publicPath: process.env.PUBLIC_PATH,
+    publicPath: process.env.PUBLIC_PATH
   }
-}
+};

package.json

@@ -10,13 +10,13 @@
     "start": "nuxt-start"
   },
   "dependencies": {
-    "@nuxtjs/auth": "^4.9.1",
-    "@nuxtjs/axios": "^5.12.2",
-    "dotenv": "^8.2.0",
+    "@nuxtjs/auth-next": "^5.0.0-1622918202.e815752",
+    "@nuxtjs/axios": "^5.13.6",
+    "dotenv": "^10.0.0",
     "normalize.css": "^8.0.1",
-    "nuxt-start": "^2.14.3"
+    "nuxt-start": "^2.15.6"
   },
   "devDependencies": {
-    "nuxt": "^2.14.3"
+    "nuxt": "^2.15.6"
   }
 }