Auth0 Login Redirction works

.env

@@ -0,0 +1,6 @@
+VITE_API_SERVER_URL=http://localhost:6060
+VITE_AUTH0_DOMAIN=dev-gi0zusfv0z1zvt1x.us.auth0.com
+VITE_AUTH0_CLIENT_ID=clCyl1SjISWMmL2iMStXnQzHTBy44wwq
+VITE_AUTH0_CALLBACK_URL=http://localhost:5173/callback
+VITE_AUTH0_AUDIENCE=https://dev-gi0zusfv0z1zvt1x.us.auth0.com/api/v2/
+# VITE_API_SERVER_URL=https://fuprqaj0n4.execute-api.us-east-1.amazonaws.com/Prod

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-vue": "^2.3.2",
     "@unocss/reset": "^0.56.5",
     "axios": "^1.5.1",
     "vue": "^3.3.4",

src/main.js

@@ -1,27 +1,26 @@
 import "./assets/main.css";
 
 //Added for Auth) login
-// import { createAuth0 } from '@auth0/auth0-vue'
+import { createAuth0 } from '@auth0/auth0-vue'
 
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 
 const app = createApp(App);
 
-//Original app.use()
-app.use(router);
-
-//Auth0 app.use()
-// app.use(
-//     createAuth0({
-//         domain:"dev-gi0zusfv0z1zvt1x.us.auth0.com",
-//         clientId: "clCyl1SjISWMmL2iMStXnQzHTBy44wwq",
-//         authorizationParams: {
-//             redirect_uri: window.location.origin
-//         }
-//     })
-// );
-
+//From Lab
+app
+    .use(router)
+    .use(
+        createAuth0({
+            domain: import.meta.env.VITE_AUTH0_DOMAIN,
+            clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+            authorizationParams: {
+                audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+                redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
+            },
+        })
+    )
 
 app.mount("#app");

src/router/index.js

@@ -9,6 +9,7 @@ import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
 import StudentCourseView from "../views/StudentCourseView.vue";
+import Test from "../views/Test.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -59,6 +60,11 @@ const router = createRouter({
       name: "mycourses",
       component: StudentCourseView,
     },
+    {
+      path: "/test",
+      name: "test",
+      component: Test,
+    },
   ],
 });
 

src/views/Test.vue

@@ -0,0 +1,38 @@
+<template>
+    <header>This is a test page</header>
+    <div>
+      <button @click="handleLogin">Log in</button>
+    </div>
+  </template>
+
+ <!--From Lab  -->
+<script setup>
+import { useAuth0 } from "@auth0/auth0-vue";
+
+const { loginWithRedirect } = useAuth0();
+
+const handleLogin = () => {
+  loginWithRedirect({
+    appState: {
+      target: "/profile",
+    },
+  });
+};
+</script>
+
+<!-- From Auth0 Quickstart Tutorial -->
+  <!-- <script>
+    import { useAuth0 } from '@auth0/auth0-vue';
+
+    export default {
+      setup() {
+        const { loginWithRedirect } = useAuth0();
+
+        return {
+          login: () => {
+            loginWithRedirect();
+          }
+        };
+      }
+    };
+  </script> -->