V2 - Auth Redirects (#192)

* set redirect urls on home page
* set redirect urls on ppr-marketing page
* add missing redirects and auth pages

app/pages/dashboard.vue

@@ -2,7 +2,7 @@
 const productStore = useUserProductsStore()
 const { t } = useI18n()
 const localePath = useLocalePath()
-const { clearLoginRedirectUrl } = useKeycloak()
+const { clearLoginRedirectUrl, setLogoutRedirectUrl } = useKeycloak()
 
 useHead({
   title: t('page.dashboard.title')
@@ -15,12 +15,16 @@ definePageMeta({
 const helpHref = 'https://www2.gov.bc.ca/gov/content/employment-business/business/managing-a-business/permits-licences/news-updates/modernization-updates/modernization-resources'
 
 onMounted(async () => {
+  const config = useRuntimeConfig().public
+  clearLoginRedirectUrl()
+  setLogoutRedirectUrl(config.baseURL)
+
+  await productStore.getUserProducts()
+
   setBreadcrumbs([
     { to: localePath('/'), label: t('ConnectBreadcrumb.default') },
     { label: t('page.dashboard.h1') }
   ])
-  await productStore.getUserProducts()
-  clearLoginRedirectUrl()
 })
 </script>
 <template>

app/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const localePath = useLocalePath()
+const { setLoginRedirectUrl, setLogoutRedirectUrl } = useKeycloak()
 useHead({
   title: t('page.home.title')
 })
@@ -19,6 +20,16 @@ const homeItems = [
 setBreadcrumbs([
   { label: t('ConnectBreadcrumb.default') }
 ])
+
+onMounted(() => {
+  const config = useRuntimeConfig().public
+  // if user logs in from this page, go to dashboard
+  setLoginRedirectUrl(`${config.baseURL}${locale.value}/dashboard`)
+  // if user logs out from this page, return here
+  setLogoutRedirectUrl(`${config.baseURL}${locale.value}`)
+  // siteminder url to clear cookie
+  setSiteMinderLogoutUrl()
+})
 </script>
 <template>
   <div>

app/pages/auth/signin.vue → app/pages/login.vue

@@ -1,24 +1,33 @@
 <script setup lang="ts">
 const connectNav = reactive(useConnectNav())
 const { t } = useI18n()
-const localePath = useLocalePath()
 
 useHead({
   title: t('page.signin.title')
 })
 
-definePageMeta({
-  middleware: ['signin-page']
-})
-
 const items = computed(() => {
   return connectNav.loggedOutUserOptions[1]
 })
 
-setBreadcrumbs([
-  { to: localePath('/'), label: t('labels.bcRegAndOLServices') },
-  { label: t('page.signin.h1') }
-])
+onMounted(async () => {
+  const keycloak = reactive(useKeycloak())
+  const localePath = useLocalePath()
+  const route = useRoute()
+
+  const returnUrl = route.query.return
+
+  if (keycloak.isAuthenticated) {
+    returnUrl ? await navigateTo(returnUrl as string, { external: true }) : await navigateTo(localePath('/dashboard'))
+  } else if (returnUrl) {
+    keycloak.setLoginRedirectUrl(returnUrl as string)
+  }
+
+  setBreadcrumbs([
+    { to: localePath('/'), label: t('labels.bcRegAndOLServices') },
+    { label: t('page.signin.h1') }
+  ])
+})
 </script>
 <template>
   <ClientOnly>

app/pages/ppr-marketing.vue

@@ -82,10 +82,18 @@ watchDebounced(width, () => {
   }
 }, { immediate: true, debounce: 100 })
 
-setBreadcrumbs([
-  { to: localePath('/'), label: t('labels.bcRegAndOLServices') },
-  { label: t('labels.ppr') }
-])
+onMounted(() => {
+  const config = useRuntimeConfig().public
+  setBreadcrumbs([
+    { to: localePath('/'), label: t('labels.bcRegAndOLServices') },
+    { label: t('labels.ppr') }
+  ])
+
+  // if user logs in from this page, go to dashboard
+  keycloak.setLoginRedirectUrl(`${config.baseURL}${locale.value}/dashboard`)
+  // if user logs out from this page, return here
+  keycloak.setLogoutRedirectUrl(`${config.baseURL}${locale.value}/ppr-marketing`)
+})
 </script>
 <template>
   <div>

app/pages/signin.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+definePageMeta({
+  path: '/signin/:slug'
+})
+
+onMounted(async () => {
+  const route = useRoute()
+  const config = useRuntimeConfig().public
+  const keycloak = reactive(useKeycloak())
+  const localePath = useLocalePath()
+  const { locale } = useI18n()
+
+  if (keycloak.isAuthenticated) {
+    await navigateTo(localePath('/dashboard'))
+  } else {
+    const sessionLoginUrl = sessionStorage.getItem('LOGIN_URL')
+    const loginUrl = sessionLoginUrl || `${config.baseURL}${locale.value}/dashboard`
+    const slug = route.params.slug as IdpHint | undefined
+
+    if (slug && [IdpHint.BCEID, IdpHint.BCSC, IdpHint.IDIR].includes(slug)) {
+      keycloak.login(slug, loginUrl)
+    } else {
+      await navigateTo('/login')
+    }
+  }
+})
+</script>
+<template>
+  <ClientOnly>
+    <ConnectSpinner overlay />
+  </ClientOnly>
+</template>

app/pages/signout.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+onMounted(() => {
+  const keycloak = useKeycloak()
+  const { locale } = useI18n()
+  const config = useRuntimeConfig().public
+
+  const redirectUrl = sessionStorage.getItem('LOGOUT_URL') || `${config.baseURL}${locale.value}`
+
+  keycloak.logout(redirectUrl)
+})
+</script>
+<template>
+  <ClientOnly>
+    <ConnectSpinner overlay />
+  </ClientOnly>
+</template>

app/utils/setSiteMinderLogoutUrl.ts

@@ -0,0 +1,7 @@
+/** Sets site minder URL to clear cookie. */
+export function setSiteMinderLogoutUrl (): void {
+  const url = useRuntimeConfig().public.siteMinderLogoutUrl
+  if (url?.includes('http')) {
+    sessionStorage.setItem('SITEMINDER_LOGOUT_URL', url)
+  }
+}