trying to add Auth0

.github/workflows/azure-staticwebapp.yml

@@ -24,8 +24,10 @@ env:
   APP_LOCATION: "/" # location of your client code
   APP_ARTIFACT_LOCATION: "dist" # location of client code build output
   AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing deployment token for your static web app
-  VITE_API_URL: ${{ secrets.VITE_API_URL }} # secret containing deployment token for your static web app
-  VITE_API_CODE: ${{ secrets.VITE_API_CODE }} # secret containing deployment token for your static web app
+  VITE_API_URL: ${{ secrets.VITE_API_URL }} # 
+  VITE_AUTH0_DOMAIN: ${{ secrets.VITE_AUTH0_DOMAIN }} # 
+  VITE_AUTH0_CLIENT_ID: ${{ secrets.VITE_AUTH0_CLIENT_ID }} # 
+  VITE_AUTH0_AUDIENCE: ${{ secrets.VITE_AUTH0_AUDIENCE }} # 
 
 permissions:
   contents: read

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-vue": "^2.3.3",
     "pinia": "^2.3.0",
     "vue": "^3.4.38",
     "vue-router": "^4.5.0",

src/App.vue

@@ -1,5 +1,18 @@
 <script setup lang="ts">
+import { reactive, watch, onMounted } from 'vue'
+import { useAuth0 } from '@auth0/auth0-vue'
+import { useIterateStore } from '@/stores/iterate'
 import Footer from '@/components/Footer.vue'
+
+const iterate = useIterateStore()
+const auth = reactive(useAuth0())
+
+onMounted(() => {
+	watch(auth, async (authState) => {
+    const token = authState.isAuthenticated ? await authState.getAccessTokenSilently() : '00000000-0000-0000-0000-000000000000'
+		iterate.authenticateChange(token, authState.isAuthenticated)
+	})
+})
 </script>
 
 <template>

src/components/ActionSection.vue

@@ -29,7 +29,9 @@ const start = async () => {
           message = 'Unauthorized: Access denied.';
           break;
         case 429:
-          message = 'Timeout: Try again in 1 hour.';
+          const body = await error.text()
+          console.log('RetryAfter', body)
+          message = 'Timeout: Please come back tomorrow.';
           break;
         case 500:
           message = 'Error: We messed up.';

src/components/Footer.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+  import { useAuth0 } from '@auth0/auth0-vue';
+  const { loginWithRedirect, logout, isAuthenticated } = useAuth0();
+
+  const loginHandler = () => {
+    loginWithRedirect();
+  }
+  const logoutHandler = () => {
+  logout({ logoutParams: { returnTo: window.location.origin } });
+}
+</script>
+
 <template>
   <footer class="bg-zinc-900 ">
     <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
@@ -12,7 +24,8 @@
           <div>
             <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
             <ul class="text-gray-400 font-medium">
-              <li class="mb-4"><a href="#" class="hover:underline">Login</a></li>
+              <li v-if="isAuthenticated" class="mb-4"><a href="#" @click="logoutHandler" class="hover:underline">Logout</a></li>
+              <li v-else class="mb-4"><a href="#" @click="loginHandler" class="hover:underline">Login</a></li>
               <li class="mb-4"><RouterLink to="/subscriptions" class="hover:underline">Subscriptions</RouterLink></li>
               <li class="mb-4"><RouterLink to="/docs" class="hover:underline">Documentation</RouterLink></li>
               <li><RouterLink to="/faqs" class="hover:underline">FAQs</RouterLink></li>

src/main.ts

@@ -1,14 +1,28 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { createAuth0 } from '@auth0/auth0-vue';
 
 import router from './router'
 import App from './App.vue'
 
 import './style.css'
 
+const AUTH0_DOMAIN = import.meta.env.VITE_AUTH0_DOMAIN
+const AUTH0_CLIENT_ID = import.meta.env.VITE_AUTH0_CLIENT_ID
+const VITE_AUTH0_AUDIENCE = import.meta.env.VITE_AUTH0_AUDIENCE
+
+const auth0 = createAuth0({
+  domain: AUTH0_DOMAIN,
+  clientId: AUTH0_CLIENT_ID,
+  authorizationParams: {
+    audience: VITE_AUTH0_AUDIENCE,
+    redirect_uri: window.location.origin + '/callback'
+  }
+})
 const pinia = createPinia()
 const app = createApp(App)
 
 app.use(router)
 app.use(pinia)
-app.mount('#app')
+app.use(auth0)
+app.mount('#app')

src/stores/iterate.ts

@@ -16,8 +16,8 @@ export const useIterateStore = defineStore('iterate', {
       instructions: '',
       input: '',
       output: [] as string[],
-      status_url: '',
-      status_terminate: '',
+      isAuthenticated: false,
+      token: '',
     }
   },
   getters: {
@@ -59,13 +59,30 @@ export const useIterateStore = defineStore('iterate', {
     },
     isTerminated(state): boolean {
       return state.state === 'Terminated'
+    },
+    headers(state): HeadersInit {
+      if(state.isAuthenticated) {
+        return { 
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer ' + state.token
+        }
+      } else {
+        return { 
+          'Content-Type': 'application/json'
+        }
+      }
     }
   },
   actions: {
+    authenticateChange(token: string, isAuthenticated: boolean) {
+      this.token = token
+      this.isAuthenticated = isAuthenticated
+    },
     next() {
-      fetch(`${URL_BASE}/runtime/webhooks/durabletask/instances/${this.id}?code=${API_CODE}`, {
+      const url = `${URL_BASE}/runtime/webhooks/durabletask/instances/${this.id}?code=${API_CODE}`
+      fetch(url, {
         method: 'GET',
-        headers: { 'Content-Type': 'application/json' }
+        headers: this.headers,
       })
       .then(response => response.json())
       .then(data => {
@@ -93,7 +110,7 @@ export const useIterateStore = defineStore('iterate', {
         console.error('Error:', error)
       });
     },
-    start() {
+    async start() {
       if(this.isLocked === true) {
         throw new Error('Exceeds enumeration limit.')
       }
@@ -107,37 +124,35 @@ export const useIterateStore = defineStore('iterate', {
         throw new Error('Instructions is blank.')
       }
 
-      return fetch(`${URL_BASE}/api/Iterator_Start`, {
+      const url = `${URL_BASE}/api/Iterator_Start`
+      const response = await fetch(url, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: this.headers,
         body: JSON.stringify({
           values: this.collection,
           instructions: this.instructions
         })
       })
-      .then(response => {
-        if(response.ok) {
-          return response.json()
-        } else {
-          throw response
-        }
-      })
-      .then(data => {
-        const { id } = data;
+
+      if(response.ok) {
+        const { id } = await response.json();
         this.id = id
         this.interval = setInterval(() => this.next(), 1000)
         this.next()
-      });
+      } else {
+        throw response
+      }
     },
-    stop() {
-      return fetch(`${URL_BASE}/runtime/webhooks/durabletask/instances/${this.id}/terminate?reason=Canceled&code=${API_CODE}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' }
-      })
-      .catch(error => {
-        console.error('Error:', error)
+    async stop() {
+      try {
+        const url = `${URL_BASE}/runtime/webhooks/durabletask/instances/${this.id}/terminate?reason=Canceled&code=${API_CODE}`;
+        await fetch(url, {
+          method: 'POST',
+          headers: this.headers,
+        })
+      } catch (error) {
         clearInterval(this.interval)
-      });
+      }
     },
     reset() {
       clearInterval(this.interval)

src/views/AboutView.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 </script>
 
 <template>

src/views/DocumentationView.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 </script>
 
 <template>

src/views/PrivacyView.vue

@@ -1,6 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 </script>
 
+
 <template>
    <main class="min-h-screen">
     <section class="pt-6 flex items-stretch justify-center p-6">

src/views/QuestionsView.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 </script>
 
 <template>

src/views/SubscriptionsView.vue

@@ -1,6 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 </script>
 
+
 <template>
    <main class="min-h-screen">
     <section class="pt-6 flex items-stretch justify-center p-6">

src/views/TermsView.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 </script>
 
 <template>