diff --git a/vue/src/App.vue b/vue/src/App.vue index 34f7712..2813730 100644 --- a/vue/src/App.vue +++ b/vue/src/App.vue @@ -15,7 +15,7 @@ import { watch, watchEffect } from 'vue'; import { RouterView, useRoute } from 'vue-router' import { useAuth0 } from '@auth0/auth0-vue'; import { storeToRefs } from 'pinia' -import { LAST_AUTH_TIMESTAMP, URL_PARAM_TOPICS, URL_PARAM_LIST_SEPARATOR } from "@/constants"; +import { URL_PARAM_TOPICS, URL_PARAM_LIST_SEPARATOR } from "@/constants"; import { useMainStore } from '@/store'; import TopHeader from './components/TopHeader.vue'; @@ -28,61 +28,38 @@ const route = useRoute(); console.log(`App load/auth: ${isLoading.value}/${isAuthenticated.value}`); -// save auth details in the localStorage -if (isLoading.value) { - console.log("Auth is loading"); -} else { - updateAuth(); -} - -// needed to minimize auth errors when the token is requested before the auth is complete -watch(isLoading, (newVal, OldVal) => { +// get token details as soon as the user is authenticated +watch(isAuthenticated, (newVal) => { if (newVal) { - console.log(`Auth is still loading: ${newVal} / ${OldVal}`); - } else { - updateAuth(); + addTokenClaimsToStore(); } }); -function updateAuth() { - if (isAuthenticated.value) { - // a flag to tell the app that the user was authenticated before - // and it is OK to ask to re-authenticate if the token is expired - localStorage.setItem(LAST_AUTH_TIMESTAMP, Date.now().toString()); - // console.log("Auth status updated in LS"); - console.log(idTokenClaims.value); - email.value = idTokenClaims.value?.email; - token.value = idTokenClaims.value?.__raw; - // console.log(`Email: ${email.value}`); - } - else { - // console.log("Not authenticated"); - (async () => { - // log in the user if the the user was logged in before - const lastAuth = localStorage.getItem(LAST_AUTH_TIMESTAMP); - // console.log(`Last auth/auth'd: ${lastAuth}/${isAuthenticated.value}`); - if (lastAuth && !isAuthenticated.value) { - console.log("User was logged in before, logging in again"); - try { - const accessToken = await getAccessTokenSilently(); - // console.log(`Access token: ${accessToken}`); - } catch (e) { - console.log(`Error getting access token: ${e}`); - loginWithRedirect(); - } - } - })(); +/// copy token details to the store +function addTokenClaimsToStore() { + if (!isAuthenticated.value) { + console.log("Cannot update token - not authenticated"); + return; } + + // console.log("Auth status updated in LS"); + console.log("idTokenClaims", idTokenClaims.value); + // console.log(`Email: ${email.value}`); + email.value = idTokenClaims.value?.email; + token.value = idTokenClaims.value?.__raw; } +/// 1. copy the list of topics from the URL to the store +/// 2. copy the token details to the store watchEffect(() => { - // use query string parameters to preset the selected topics const qsTopics = route.query[URL_PARAM_TOPICS]?.toString(); if (qsTopics) { console.log("Setting selected topics from query string: ", qsTopics); selectedTopics.value = qsTopics.split(URL_PARAM_LIST_SEPARATOR); } + + addTokenClaimsToStore(); }); \ No newline at end of file diff --git a/vue/src/components/HomeForm.vue b/vue/src/components/HomeForm.vue index ea0d6ef..c5f1bbf 100644 --- a/vue/src/components/HomeForm.vue +++ b/vue/src/components/HomeForm.vue @@ -6,7 +6,10 @@

or

@@ -15,7 +18,7 @@
- + @@ -24,10 +27,10 @@ diff --git a/vue/src/components/SubscriptionForm.vue b/vue/src/components/SubscriptionForm.vue index 121bc4e..e7be149 100644 --- a/vue/src/components/SubscriptionForm.vue +++ b/vue/src/components/SubscriptionForm.vue @@ -110,7 +110,7 @@ async function subscribe() { watchEffect(async () => { console.log(`Fetching user details for: ${email.value}`); - // only fetch if topic is set + // only fetch if the user is known if (!email.value) return; // redirect the user to login with the list of topics as a parameter diff --git a/vue/src/main.ts b/vue/src/main.ts index 5052ddc..cad650e 100644 --- a/vue/src/main.ts +++ b/vue/src/main.ts @@ -16,7 +16,7 @@ app.use(router) app.use(PrimeVue, { theme: { - preset: Aura + preset: Aura } }) @@ -25,7 +25,7 @@ app.use( domain: "dev-lbpjc402mmk4uxbs.us.auth0.com", clientId: "p2xjvyoxb8HoKSt1QNDx7CQ8Ka2lXgUJ", authorizationParams: { - redirect_uri: window.location.href + redirect_uri: window.location.origin, } }) ); diff --git a/vue/src/router/index.ts b/vue/src/router/index.ts index 977e5b9..5c0110e 100644 --- a/vue/src/router/index.ts +++ b/vue/src/router/index.ts @@ -1,5 +1,5 @@ import { createRouter, createWebHistory } from 'vue-router' -import { createAuth0, authGuard } from '@auth0/auth0-vue'; +import { authGuard } from '@auth0/auth0-vue'; import HomeView from '../views/HomeView.vue' import QuestionFormView from '@/views/QuestionFormView.vue' @@ -7,32 +7,42 @@ import QuestionView from '@/views/QuestionView.vue' import AboutView from '../views/AboutView.vue' import SubscriptionView from '../views/SubscriptionView.vue' +/// A list of page names used elsewhere in the app +export const PageNames = { + HOME: 'home', + ADD: 'add', + QUESTION: 'question', + ABOUT: 'about', + SUBSCRIPTION: 'subscription', +} + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', - name: 'home', + name: PageNames.HOME, component: HomeView }, { - path: '/add', - name: 'add', - component: QuestionFormView + path: '/' + PageNames.ADD, + name: PageNames.ADD, + component: QuestionFormView, + beforeEnter: authGuard }, { - path: '/question', - name: 'question', + path: '/' + PageNames.QUESTION, + name: PageNames.QUESTION, component: QuestionView, }, { - path: '/about', - name: 'about', + path: '/' + PageNames.ABOUT, + name: PageNames.ABOUT, component: AboutView }, { - path: '/subscription', - name: 'subscription', + path: '/' + PageNames.SUBSCRIPTION, + name: PageNames.SUBSCRIPTION, component: SubscriptionView, beforeEnter: authGuard } diff --git a/vue/src/views/HomeView.vue b/vue/src/views/HomeView.vue index 5282f34..3018111 100644 --- a/vue/src/views/HomeView.vue +++ b/vue/src/views/HomeView.vue @@ -1,20 +1,35 @@