From 3d93c30064b76312fc8beb843fbb3a6a6942d5fc Mon Sep 17 00:00:00 2001
From: Aofei Sheng <aofei@aofeisheng.com>
Date: Thu, 17 Oct 2024 09:27:56 +0800
Subject: [PATCH] refactor(sign-in): redirect to intended page after signing in
 (#990)

Fixes #985
Fixes #986

Signed-off-by: Aofei Sheng <aofei@aofeisheng.com>
---
 spx-gui/package-lock.json                     |  22 ++-
 spx-gui/package.json                          |   3 +-
 .../src/components/navbar/NavbarProfile.vue   |   2 +-
 spx-gui/src/main.ts                           |   2 +-
 spx-gui/src/pages/editor/index.vue            |   2 +-
 spx-gui/src/pages/sign-in/callback.vue        |   9 +-
 spx-gui/src/stores/user.ts                    | 147 +++++++++--------
 spx-gui/src/utils/casdoor.ts                  | 150 ------------------
 8 files changed, 104 insertions(+), 233 deletions(-)
 delete mode 100644 spx-gui/src/utils/casdoor.ts

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 9c03596b9..fc96986d4 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -25,14 +25,15 @@
         "@vue/runtime-dom": "^3.4.10",
         "@vue/test-utils": "^2.4.5",
         "@vue/tsconfig": "^0.5.1",
+        "casdoor-js-sdk": "^0.15.0",
         "dayjs": "^1.11.10",
         "eslint": "^8.56.0",
         "eslint-plugin-vue": "^9.20.1",
         "file-saver": "^2.0.5",
         "happy-dom": "^14.3.6",
         "install": "^0.13.0",
-        "js-pkce": "^1.4.0",
         "jszip": "^3.10.1",
+        "jwt-decode": "^4.0.0",
         "konva": "^9.3.1",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
@@ -4258,6 +4259,16 @@
         }
       ]
     },
+    "node_modules/casdoor-js-sdk": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/casdoor-js-sdk/-/casdoor-js-sdk-0.15.0.tgz",
+      "integrity": "sha512-hVQLnWLGnRd1ve4TqIidA8/LRoSDZb69u2JNsD6dXil+Xs68aHZgguqXLM7nE85/0YE0DOr2fSJgBRSgH9R7ug==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "js-pkce": "^1.3.0",
+        "jwt-decode": "^4.0.0"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -6537,6 +6548,15 @@
       "integrity": "sha512-silMIRiFjUWlfaDhkgSzpuAyQ6EX/o09Eu8ZBfmFwQMbax7+LQzeIU2CBrICT6Ne4l86ITCGvUCBpCubWYy0Yw==",
       "license": "MIT"
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 76627abe6..6f331aa77 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -30,14 +30,15 @@
     "@vue/runtime-dom": "^3.4.10",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
+    "casdoor-js-sdk": "^0.15.0",
     "dayjs": "^1.11.10",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.20.1",
     "file-saver": "^2.0.5",
     "happy-dom": "^14.3.6",
     "install": "^0.13.0",
-    "js-pkce": "^1.4.0",
     "jszip": "^3.10.1",
+    "jwt-decode": "^4.0.0",
     "konva": "^9.3.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index d5de75528..ac6def268 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!userStore.userInfo" class="sign-in">
-    <UIButton type="secondary" :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
+    <UIButton type="secondary" :disabled="!isOnline" @click="userStore.initiateSignIn()">{{
       $t({ en: 'Sign in', zh: '登录' })
     }}</UIButton>
   </div>
diff --git a/spx-gui/src/main.ts b/spx-gui/src/main.ts
index 4b42b78a6..27359bfc1 100644
--- a/spx-gui/src/main.ts
+++ b/spx-gui/src/main.ts
@@ -22,7 +22,7 @@ dayjs.extend(timezone)
 
 const initApiClient = async () => {
   const userStore = useUserStore()
-  client.setAuthProvider(userStore.getFreshAccessToken)
+  client.setAuthProvider(userStore.ensureAccessToken)
 }
 
 async function initApp() {
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 6304c3155..fdc745e05 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -46,7 +46,7 @@ watchEffect(() => {
   // This will be called on mount and whenever userStore changes,
   // which are the cases when userStore.signOut() is called
   if (!userStore.isSignedIn) {
-    userStore.signInWithRedirection()
+    userStore.initiateSignIn()
   }
 })
 
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index 6317b1193..fcdd96f06 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -16,8 +16,13 @@ try {
   if (lang === 'en' || lang === 'zh') {
     i18n.setLang(lang)
   }
-  await userStore.consumeCurrentUrl()
-} finally {
+
+  await userStore.completeSignIn()
+
+  const returnTo = params.get('returnTo')
+  window.location.replace(returnTo != null ? returnTo : '/')
+} catch (e) {
+  console.error('failed to complete sign-in', e)
   window.location.replace('/')
 }
 </script>
diff --git a/spx-gui/src/stores/user.ts b/spx-gui/src/stores/user.ts
index 861f5b6a2..c6ad6fdb0 100644
--- a/spx-gui/src/stores/user.ts
+++ b/spx-gui/src/stores/user.ts
@@ -1,39 +1,30 @@
-import CasdoorSdk from '@/utils/casdoor'
+import Sdk from 'casdoor-js-sdk'
 import { casdoorConfig } from '@/utils/env'
-import type ITokenResponse from 'js-pkce/dist/ITokenResponse'
+import { jwtDecode } from 'jwt-decode'
 import { defineStore } from 'pinia'
 
-// https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library
-const parseJwt = (token: string) => {
-  const base64Url = token.split('.')[1]
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
-  const jsonPayload = decodeURIComponent(
-    atob(base64)
-      .split('')
-      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
-      })
-      .join('')
-  )
-
-  return JSON.parse(jsonPayload)
-}
-
 export interface UserInfo {
-  name: string
   id: string
+  name: string
   displayName: string
   avatar: string
-  email: string
-  emailVerified: boolean
-  phone: string
 }
 
-const casdoorSdk = new CasdoorSdk({
+interface TokenResponse {
+  access_token: string
+  refresh_token: string
+  expires_in: number
+  refresh_expires_in: number
+}
+
+const casdoorAuthRedirectPath = '/callback'
+const casdoorSdk = new Sdk({
   ...casdoorConfig,
-  redirectPath: '/callback'
+  redirectPath: casdoorAuthRedirectPath
 })
 
+const tokenExpiryDelta = 60 * 1000 // 1 minute in milliseconds
+
 export const useUserStore = defineStore('spx-user', {
   state: () => ({
     accessToken: null as string | null,
@@ -43,74 +34,78 @@ export const useUserStore = defineStore('spx-user', {
     accessTokenExpiresAt: null as number | null,
     refreshTokenExpiresAt: null as number | null
   }),
+  getters: {
+    isAccessTokenValid(): boolean {
+      return !!(
+        this.accessToken &&
+        (this.accessTokenExpiresAt === null ||
+          this.accessTokenExpiresAt - tokenExpiryDelta > Date.now())
+      )
+    },
+    isRefreshTokenValid(): boolean {
+      return !!(
+        this.refreshToken &&
+        (this.refreshTokenExpiresAt === null ||
+          this.refreshTokenExpiresAt - tokenExpiryDelta > Date.now())
+      )
+    },
+    isSignedIn(): boolean {
+      return this.isAccessTokenValid || this.isRefreshTokenValid
+    },
+    userInfo(): UserInfo | null {
+      if (!this.isSignedIn) return null
+      return jwtDecode<UserInfo>(this.accessToken!)
+    }
+  },
   actions: {
-    async getFreshAccessToken(): Promise<string | null> {
+    initiateSignIn(
+      returnTo: string = window.location.pathname + window.location.search + window.location.hash
+    ) {
+      // Workaround for casdoor-js-sdk not supporting override of `redirectPath` in `signin_redirect`.
+      const casdoorSdk = new Sdk({
+        ...casdoorConfig,
+        redirectPath: `${casdoorAuthRedirectPath}?returnTo=${encodeURIComponent(returnTo)}`
+      })
+      casdoorSdk.signin_redirect()
+    },
+    async completeSignIn() {
+      const resp = await casdoorSdk.exchangeForAccessToken()
+      this.handleTokenResponse(resp)
+    },
+    signOut() {
+      this.accessToken = null
+      this.refreshToken = null
+      this.accessTokenExpiresAt = null
+      this.refreshTokenExpiresAt = null
+    },
+    async ensureAccessToken(): Promise<string | null> {
       if (this.isAccessTokenValid) return this.accessToken
 
       if (this.isRefreshTokenValid) {
         try {
-          const tokenResp = await casdoorSdk.pkce.refreshAccessToken(this.refreshToken!)
-          this.setToken(tokenResp)
+          const resp = await casdoorSdk.refreshAccessToken(this.refreshToken!)
+          this.handleTokenResponse(resp)
         } catch (e) {
-          console.error('Failed to refresh access token', e)
+          console.error('failed to refresh access token', e)
           throw e
         }
 
-        // Due to js-pkce's lack of error handling, we must check if the access token is valid after calling `PKCE.refreshAccessToken`.
-        // The token might still be invalid if, e.g., the server has already revoked the refresh token.
+        // Due to casdoor-js-sdk's lack of error handling, we must check if the access token is valid after calling
+        // `casdoorSdk.refreshAccessToken`. The token might still be invalid if, e.g., the server has already revoked
+        // the refresh token.
         if (this.isAccessTokenValid) return this.accessToken
       }
 
       this.signOut()
       return null
     },
-    setToken(tokenResp: ITokenResponse) {
-      const accessTokenExpiresAt = tokenResp.expires_in
-        ? Date.now() + tokenResp.expires_in * 1000
+    handleTokenResponse(resp: TokenResponse) {
+      this.accessToken = resp.access_token
+      this.refreshToken = resp.refresh_token
+      this.accessTokenExpiresAt = resp.expires_in ? Date.now() + resp.expires_in * 1000 : null
+      this.refreshTokenExpiresAt = resp.refresh_expires_in
+        ? Date.now() + resp.refresh_expires_in * 1000
         : null
-      const refreshTokenExpiresAt = tokenResp.refresh_expires_in
-        ? Date.now() + tokenResp.refresh_expires_in * 1000
-        : null
-      this.accessToken = tokenResp.access_token
-      this.refreshToken = tokenResp.refresh_token
-      this.accessTokenExpiresAt = accessTokenExpiresAt
-      this.refreshTokenExpiresAt = refreshTokenExpiresAt
-    },
-    signOut() {
-      this.accessToken = null
-      this.refreshToken = null
-      this.accessTokenExpiresAt = null
-      this.refreshTokenExpiresAt = null
-    },
-    async consumeCurrentUrl() {
-      const tokenResp = await casdoorSdk.pkce.exchangeForAccessToken(window.location.href)
-      this.setToken(tokenResp)
-    },
-    signInWithRedirection() {
-      casdoorSdk.signinWithRedirection()
-    }
-  },
-  getters: {
-    isAccessTokenValid(state): boolean {
-      const delta = 60 * 1000 // 1 minute
-      return !!(
-        state.accessToken &&
-        (state.accessTokenExpiresAt === null || state.accessTokenExpiresAt - delta > Date.now())
-      )
-    },
-    isRefreshTokenValid(state): boolean {
-      const delta = 60 * 1000 // 1 minute
-      return !!(
-        state.refreshToken &&
-        (state.refreshTokenExpiresAt === null || state.refreshTokenExpiresAt - delta > Date.now())
-      )
-    },
-    isSignedIn(): boolean {
-      return this.isAccessTokenValid || this.isRefreshTokenValid
-    },
-    userInfo(state): UserInfo | null {
-      if (!this.isSignedIn) return null
-      return parseJwt(state.accessToken!) as UserInfo
     }
   },
   persist: true
diff --git a/spx-gui/src/utils/casdoor.ts b/spx-gui/src/utils/casdoor.ts
deleted file mode 100644
index 134806a34..000000000
--- a/spx-gui/src/utils/casdoor.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-// The following content is copied from the casdoor-sdk package, as
-// we need to modify some of the code.
-// Original source:
-// https://github.com/casdoor/casdoor-js-sdk/blob/master/src/sdk.ts
-// The original source is a relatively simple SDK that wraps around
-// the js-pkce package. We need to modify the code to expose the
-// PKCE object, so that we can use it to refresh the access token.
-
-// Copyright 2021 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import PKCE from 'js-pkce'
-import type IObject from 'js-pkce/dist/IObject'
-
-interface SdkConfig {
-  serverUrl: string // your Casdoor server URL, e.g., "https://door.casbin.com" for the official demo site
-  clientId: string // the Client ID of your Casdoor application, e.g., "014ae4bd048734ca2dea"
-  appName: string // the name of your Casdoor application, e.g., "app-casnode"
-  organizationName: string // the name of the Casdoor organization connected with your Casdoor application, e.g., "casbin"
-  redirectPath?: string // the path of the redirect URL for your Casdoor application, will be "/callback" if not provided
-  signinPath?: string // the path of the signin URL for your Casdoor applcation, will be "/api/signin" if not provided
-  scope?: string // apply for permission to obtain the user information, will be "profile" if not provided
-  storage?: Storage // the storage to store the state, will be sessionStorage if not provided
-}
-
-// reference: https://github.com/casdoor/casdoor-go-sdk/blob/90fcd5646ec63d733472c5e7ce526f3447f99f1f/auth/jwt.go#L19-L32
-export interface CasdoorAccount {
-  organization: string
-  username: string
-  type: string
-  name: string
-  avatar: string
-  email: string
-  phone: string
-  affiliation: string
-  tag: string
-  language: string
-  score: number
-  isAdmin: boolean
-  accessToken: string
-}
-
-class Sdk {
-  config: SdkConfig
-  pkce: PKCE
-
-  constructor(config: SdkConfig) {
-    this.config = config
-    if (config.redirectPath === undefined || config.redirectPath === null) {
-      this.config.redirectPath = '/callback'
-    }
-
-    if (config.scope === undefined || config.scope === null) {
-      this.config.scope = 'profile'
-    }
-
-    this.pkce = new PKCE({
-      client_id: this.config.clientId,
-      redirect_uri: `${window.location.origin}${this.config.redirectPath}`,
-      authorization_endpoint: `${this.config.serverUrl.trim()}/login/oauth/authorize`,
-      token_endpoint: `${this.config.serverUrl.trim()}/api/login/oauth/access_token`,
-      requested_scopes: this.config.scope || 'profile',
-      storage: this.config.storage
-    })
-  }
-
-  getOrSaveState(): string {
-    const state = sessionStorage.getItem('casdoor-state')
-    if (state !== null) {
-      return state
-    } else {
-      const state = Math.random().toString(36).slice(2)
-      sessionStorage.setItem('casdoor-state', state)
-      return state
-    }
-  }
-
-  clearState() {
-    sessionStorage.removeItem('casdoor-state')
-  }
-
-  public getSignupUrl(enablePassword: boolean = true): string {
-    if (enablePassword) {
-      sessionStorage.setItem('signinUrl', this.getSigninUrl())
-      return `${this.config.serverUrl.trim()}/signup/${this.config.appName}`
-    } else {
-      return this.getSigninUrl().replace('/login/oauth/authorize', '/signup/oauth/authorize')
-    }
-  }
-
-  public getSigninUrl(): string {
-    const redirectUri =
-      this.config.redirectPath && this.config.redirectPath.includes('://')
-        ? this.config.redirectPath
-        : `${window.location.origin}${this.config.redirectPath}`
-    const state = this.getOrSaveState()
-    return `${this.config.serverUrl.trim()}/login/oauth/authorize?client_id=${this.config.clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${this.config.scope}&state=${state}`
-  }
-
-  // TODO: Rewrite this function. Is access_token really need to be passed with the url?
-  public getUserProfileUrl(userName: string, account: CasdoorAccount): string {
-    let param = ''
-    if (account !== undefined && account !== null) {
-      param = `?access_token=${account.accessToken}`
-    }
-    return `${this.config.serverUrl.trim()}/users/${this.config.organizationName}/${userName}${param}`
-  }
-
-  // TODO: The same as getUserProfileUrl
-  public getMyProfileUrl(account: CasdoorAccount, returnUrl: String = ''): string {
-    let params = ''
-    if (account !== undefined && account !== null) {
-      params = `?access_token=${account.accessToken}`
-      if (returnUrl !== '') {
-        params += `&returnUrl=${returnUrl}`
-      }
-    } else if (returnUrl !== '') {
-      params = `?returnUrl=${returnUrl}`
-    }
-    return `${this.config.serverUrl.trim()}/account${params}`
-  }
-
-  public signinWithRedirection(additionalParams?: IObject) {
-    window.location.assign(this.pkce.authorizeUrl(additionalParams))
-  }
-
-  // TODO: move to apis
-  public async getUserInfo(accessToken: string) {
-    return fetch(`${this.config.serverUrl.trim()}/api/userinfo`, {
-      method: 'GET',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        'Content-Type': 'application/json'
-      }
-    }).then((res) => res.json())
-  }
-}
-
-export default Sdk