From 517d4fae1158159ebeea9e0ee231751a26a5ed79 Mon Sep 17 00:00:00 2001
From: Parker Atkins <parker.cattell.atkins@gmail.com>
Date: Mon, 11 Dec 2023 13:52:10 -0800
Subject: [PATCH] BCSC Authentication

* WIP debug BCSC openID connect flow

* BCSC authentication

* Await all oidcStore calls
---
 .../appsettings.Development.json              |  2 +-
 .../src/App.vue                               | 37 +++++++++--
 .../src/api/client.ts                         |  5 +-
 .../src/components/pages/Home.vue             | 27 +++++---
 .../src/components/pages/Login.vue            | 16 ++++-
 .../src/components/pages/LogoutCallback.vue   | 13 ++--
 .../src/components/pages/SigninCallback.vue   | 11 ++--
 .../src/components/pages/SilentCallback.vue   | 10 ++-
 .../src/main.ts                               |  1 +
 .../src/oidc-config.ts                        |  2 +-
 .../src/store/config.ts                       | 14 ++++-
 .../src/store/oidc.ts                         | 49 +++++++++++++++
 .../src/store/user.ts                         | 62 +++++--------------
 .../src/types/authority.d.ts                  |  2 +
 14 files changed, 170 insertions(+), 81 deletions(-)
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/oidc.ts
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/authority.d.ts

diff --git a/src/ECER.Clients.RegistryPortal/ECER.Clients.RegistryPortal.Server/appsettings.Development.json b/src/ECER.Clients.RegistryPortal/ECER.Clients.RegistryPortal.Server/appsettings.Development.json
index 23d32fb40..848fac59e 100644
--- a/src/ECER.Clients.RegistryPortal/ECER.Clients.RegistryPortal.Server/appsettings.Development.json
+++ b/src/ECER.Clients.RegistryPortal/ECER.Clients.RegistryPortal.Server/appsettings.Development.json
@@ -6,6 +6,6 @@
     }
   },
   "cors": {
-    "allowedOrigins": "https://dev.loginproxy.gov.bc.ca/"
+    "allowedOrigins": "https://dev.loginproxy.gov.bc.ca/;https://idtest.gov.bc.ca/"
   }
 }
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/App.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/App.vue
index ddc47190a..76a321c70 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/App.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/App.vue
@@ -17,19 +17,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, watch } from "vue";
+import { useRouter } from "vue-router";
 
 import { useUserStore } from "@/store/user";
 
+import { useOidcStore } from "./store/oidc";
+
 export default defineComponent({
   name: "App",
   setup() {
     const userStore = useUserStore();
-    return { userStore };
+    const oidcStore = useOidcStore();
+    const router = useRouter();
+
+    // Watch for changes to isAuthenticated flag
+    watch(
+      () => userStore.isAuthenticated,
+      (newValue: boolean) => {
+        if (!newValue) {
+          // If not authenticated, navigate to the login page
+          router.push("/login");
+        } else {
+          // If authenticated, navigate to the home page
+          router.push("/"); // Adjust the route name based on your routes
+        }
+      },
+    );
+
+    return { userStore, oidcStore };
   },
   methods: {
-    logout: async function () {
-      await this.userStore.logout();
+    async logout() {
+      if (this.userStore.isAuthenticated && this.userStore.authority) {
+        if (this.userStore.authority == "bceid") {
+          await this.oidcStore.logout(this.userStore.authority);
+        }
+        if (this.userStore.authority == "bcsc") {
+          // BCSC does not support a session logout callback endpoint so just remove session data from client
+          await this.oidcStore.removeUser(this.userStore.authority);
+          this.userStore.$reset();
+        }
+      }
     },
   },
 });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/api/client.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/api/client.ts
index 922ff9f68..bf6603f2f 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/api/client.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/api/client.ts
@@ -12,15 +12,12 @@ export const getClient = async (appendToken: boolean = true) => {
 
   if (appendToken) {
     const userStore = useUserStore();
-    const access_token = await userStore.getAccessToken();
+    const access_token = userStore.getAccessToken;
 
     // Add a request interceptor to append the access token to the request
     axiosClient.interceptors.request.use((config) => {
       if (access_token) {
         config.headers.Authorization = `Bearer ${access_token}`;
-      } else {
-        // If we've failed to get an access token from oidc-client-ts sessionStorage, clear the profile and logout
-        userStore.clearProfile();
       }
       return config;
     });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Home.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Home.vue
index f587bac27..b416db833 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Home.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Home.vue
@@ -1,17 +1,23 @@
 <template>
   <main>
-    <button type="button" @click="handleTokenRefresh">Refresh token with BCeID</button>
-    <p>User: {{ profile?.display_name }}</p>
+    <!-- Only BCeID supports refresh token flow -->
+    <button v-if="userStore.getAuthority == 'bceid'" type="button" @click="handleTokenRefresh">Refresh token</button>
+
+    <p>Profile: {{ userStore.getProfile }}</p>
+
+    <p>Authority: {{ userStore.getAuthority }}</p>
+
+    <p>Access Token: {{ userStore.getAccessToken }}</p>
 
     <Applications />
   </main>
 </template>
 
 <script lang="ts">
-import { mapState } from "pinia";
 import { defineComponent } from "vue";
 
 import Applications from "@/components/Applications.vue";
+import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
 
 export default defineComponent({
@@ -21,16 +27,17 @@ export default defineComponent({
   },
   setup() {
     const userStore = useUserStore();
-    return { userStore };
-  },
-  computed: {
-    ...mapState(useUserStore, ["profile"]),
+    const oidcStore = useOidcStore();
+    return { userStore, oidcStore };
   },
+
   methods: {
     handleTokenRefresh: async function () {
-      const user = await this.userStore.signinSilent();
-      if (user?.profile) {
-        this.userStore.setProfile(user?.profile);
+      if (this.userStore.isAuthenticated && this.userStore.authority) {
+        const user = await this.oidcStore.signinSilent(this.userStore.authority);
+        if (user) {
+          this.userStore.setUser(user);
+        }
       }
     },
   },
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Login.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Login.vue
index 2220a8b50..1edbf6aab 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Login.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Login.vue
@@ -3,7 +3,10 @@
     <h1>Login</h1>
 
     <div>
-      <button type="button" @click="userStore.login()">Login with BCeID</button>
+      <button type="button" @click="handleLogin('bceid')">Login with BCeID</button>
+    </div>
+    <div>
+      <button type="button" @click="handleLogin('bcsc')">Login with BCSC</button>
     </div>
   </div>
 </template>
@@ -11,13 +14,22 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
+import type { Authority } from "@/types/authority";
 
 export default defineComponent({
   name: "Login",
   setup() {
     const userStore = useUserStore();
-    return { userStore };
+    const oidcStore = useOidcStore();
+    return { userStore, oidcStore };
+  },
+  methods: {
+    async handleLogin(authority: Authority) {
+      this.userStore.setAuthority(authority);
+      await this.oidcStore.login(authority);
+    },
   },
 });
 </script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/LogoutCallback.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/LogoutCallback.vue
index d3bd5d5e3..efdc934e4 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/LogoutCallback.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/LogoutCallback.vue
@@ -1,22 +1,25 @@
 <template><div></div></template>
 
 <script lang="ts">
+import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
 
 export default {
   setup() {
     const userStore = useUserStore();
+    const oidcStore = useOidcStore();
 
-    return { userStore };
+    return { userStore, oidcStore };
   },
   mounted() {
     this.handleCallback();
   },
   methods: {
-    handleCallback() {
-      this.userStore.completeLogout();
-      this.userStore.clearProfile();
-      this.$router.push("/");
+    async handleCallback() {
+      if (this.userStore.isAuthenticated && this.userStore.authority) {
+        await this.oidcStore.completeLogout(this.userStore.authority);
+        this.userStore.$reset();
+      }
     },
   },
 };
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SigninCallback.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SigninCallback.vue
index 90d913d73..0167555b7 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SigninCallback.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SigninCallback.vue
@@ -1,22 +1,25 @@
 <template><div></div></template>
 
 <script lang="ts">
+import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
 
 export default {
   setup() {
     const userStore = useUserStore();
+    const oidcStore = useOidcStore();
 
-    return { userStore };
+    return { userStore, oidcStore };
   },
   mounted() {
     this.handleCallback();
   },
   methods: {
     async handleCallback(): Promise<void> {
-      const user = await this.userStore.signinCallback();
-      this.userStore.setProfile(user.profile);
-      this.$router.push("/");
+      if (this.userStore.authority) {
+        const user = await this.oidcStore.signinCallback(this.userStore.authority);
+        this.userStore.setUser(user);
+      }
     },
   },
 };
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SilentCallback.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SilentCallback.vue
index c44b4c301..205d2ba28 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SilentCallback.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/SilentCallback.vue
@@ -1,20 +1,24 @@
 <template><div></div></template>
 
 <script lang="ts">
+import { useOidcStore } from "@/store/oidc";
 import { useUserStore } from "@/store/user";
 
 export default {
   setup() {
     const userStore = useUserStore();
+    const oidcStore = useOidcStore();
 
-    return { userStore };
+    return { userStore, oidcStore };
   },
   mounted() {
     this.handleCallback();
   },
   methods: {
-    handleCallback() {
-      this.userStore.silentCallback();
+    async handleCallback() {
+      if (this.userStore.isAuthenticated && this.userStore.authority) {
+        await this.oidcStore.silentCallback(this.userStore.authority);
+      }
     },
   },
 };
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/main.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/main.ts
index cd3e26d24..23339cb2c 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/main.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/main.ts
@@ -16,6 +16,7 @@ app.use(router);
 
 const configStore = useConfigStore();
 
+// Fetch OIDC configuration from the API and initialize the store before mounting the app
 configStore.initialize().then(() => {
   app.mount("#app");
 });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/oidc-config.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/oidc-config.ts
index d35c60c81..ceda490d9 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/oidc-config.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/oidc-config.ts
@@ -7,7 +7,7 @@ type BaseUserManagerSettings = Pick<UserManagerSettings, "redirect_uri" | "post_
 const oidcConfig: BaseUserManagerSettings = {
   redirect_uri: `${window.location.origin}/signin-callback`,
   post_logout_redirect_uri: `${window.location.origin}/logout-callback`,
-  silent_redirect_uri: `${window.location.origin}/silent-renew`,
+  silent_redirect_uri: `${window.location.origin}/silent-callback`,
   response_type: "code",
 };
 
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/config.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/config.ts
index 55f921f12..0b8ee4f96 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/config.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/config.ts
@@ -17,7 +17,7 @@ export const useConfigStore = defineStore("config", {
     applicationConfiguration: {} as Components.Schemas.ApplicationConfiguration,
   }),
   getters: {
-    oidcConfiguration: (state): UserManagerSettings => {
+    bceidOidcConfiguration: (state): UserManagerSettings => {
       const oidc = state.applicationConfiguration?.authenticationMethods ? state.applicationConfiguration?.authenticationMethods["bceid"] : null;
 
       const combinedConfig: UserManagerSettings = {
@@ -27,6 +27,18 @@ export const useConfigStore = defineStore("config", {
         scope: oidc?.scope ?? "",
       };
 
+      return combinedConfig;
+    },
+    bcscOidcConfiguration: (state): UserManagerSettings => {
+      const oidc = state.applicationConfiguration?.authenticationMethods ? state.applicationConfiguration?.authenticationMethods["bcsc"] : null;
+
+      const combinedConfig: UserManagerSettings = {
+        ...oidcConfig,
+        client_id: oidc?.clientId ?? "",
+        authority: oidc?.authority ?? "",
+        scope: oidc?.scope ?? "",
+      };
+
       return combinedConfig;
     },
   },
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/oidc.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/oidc.ts
new file mode 100644
index 000000000..27084766f
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/oidc.ts
@@ -0,0 +1,49 @@
+import type { SignoutResponse, User } from "oidc-client-ts";
+import { UserManager } from "oidc-client-ts";
+import { defineStore } from "pinia";
+
+import type { Authority } from "@/types/authority";
+
+import { useConfigStore } from "./config";
+
+export interface UserState {
+  bceidUserManager: UserManager;
+  bcscUserManager: UserManager;
+}
+
+export const useOidcStore = defineStore("oidc", {
+  state: (): UserState => ({
+    bceidUserManager: new UserManager(useConfigStore().bceidOidcConfiguration),
+    bcscUserManager: new UserManager(useConfigStore().bcscOidcConfiguration),
+  }),
+
+  actions: {
+    async login(authority: Authority): Promise<void> {
+      return authority === "bceid" ? await this.bceidUserManager.signinRedirect() : await this.bcscUserManager.signinRedirect();
+    },
+
+    async removeUser(authority: Authority): Promise<void> {
+      return authority === "bceid" ? await this.bceidUserManager.removeUser() : await this.bcscUserManager.removeUser();
+    },
+
+    async signinCallback(authority: Authority): Promise<User> {
+      return authority === "bceid" ? await this.bceidUserManager.signinRedirectCallback() : await this.bcscUserManager.signinRedirectCallback();
+    },
+
+    async silentCallback(authority: Authority): Promise<void> {
+      return authority === "bceid" ? await this.bceidUserManager.signinSilentCallback() : await this.bcscUserManager.signinSilentCallback();
+    },
+
+    async signinSilent(authority: Authority): Promise<User | null> {
+      return authority === "bceid" ? await this.bceidUserManager.signinSilent() : await this.bcscUserManager.signinSilent();
+    },
+
+    async logout(authority: Authority): Promise<void> {
+      return authority === "bceid" ? await this.bceidUserManager.signoutRedirect() : await this.bcscUserManager.signoutRedirect();
+    },
+
+    async completeLogout(authority: Authority): Promise<SignoutResponse> {
+      return authority === "bceid" ? await this.bceidUserManager.signoutRedirectCallback() : await this.bcscUserManager.signoutRedirectCallback();
+    },
+  },
+});
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/user.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/user.ts
index abee19cdf..d83dfac96 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/user.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/user.ts
@@ -1,66 +1,36 @@
-import type { SignoutResponse, User, UserProfile } from "oidc-client-ts";
-import { UserManager } from "oidc-client-ts";
+import type { User, UserProfile } from "oidc-client-ts";
 import { defineStore } from "pinia";
 
-import { useConfigStore } from "./config";
+import type { Authority } from "@/types/authority";
 
 export interface UserState {
   profile: UserProfile | null;
-  userManager: UserManager;
+  accessToken: string;
+  authority: Authority | null;
 }
 
 export const useUserStore = defineStore("user", {
   persist: {
-    paths: ["profile"],
+    paths: ["profile", "accessToken", "authority"],
   },
   state: (): UserState => ({
     profile: null,
-    userManager: new UserManager(useConfigStore().oidcConfiguration),
+    accessToken: "",
+    authority: null,
   }),
   getters: {
-    isAuthenticated: (state) => state.profile !== null,
+    isAuthenticated: (state) => state.accessToken !== "",
+    getAccessToken: (state) => state.accessToken,
+    getAuthority: (state) => state.authority,
+    getProfile: (state) => state.profile,
   },
   actions: {
-    clearProfile(): void {
-      this.profile = null;
+    setUser(user: User): void {
+      this.accessToken = user.access_token;
+      this.profile = user.profile;
     },
-
-    setProfile(user: UserProfile | null): void {
-      this.profile = user;
-    },
-
-    async getAccessToken(): Promise<string | null> {
-      const user = await this.userManager.getUser();
-      return user?.access_token ?? null;
-    },
-
-    async getRefreshToken(): Promise<string | null> {
-      const user = await this.userManager.getUser();
-      return user?.access_token ?? null;
-    },
-
-    async login(): Promise<void> {
-      return await this.userManager.signinRedirect();
-    },
-
-    async signinCallback(): Promise<User> {
-      return await this.userManager.signinRedirectCallback();
-    },
-
-    async silentCallback(): Promise<void> {
-      return this.userManager.signinSilentCallback();
-    },
-
-    async signinSilent(): Promise<User | null> {
-      return await this.userManager.signinSilent();
-    },
-
-    async logout(): Promise<void> {
-      return this.userManager.signoutRedirect();
-    },
-
-    async completeLogout(): Promise<SignoutResponse> {
-      return this.userManager.signoutRedirectCallback();
+    setAuthority(authority: Authority | null): void {
+      this.authority = authority;
     },
   },
 });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/authority.d.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/authority.d.ts
new file mode 100644
index 000000000..6d7067630
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/authority.d.ts
@@ -0,0 +1,2 @@
+export type Authority = "bceid" | "bcsc";
+