✨Retrieve JWT token during wallet connection

likecoin · Sep 11, 2024 · ee902c6 · ee902c6
1 parent 8abb50e
commit ee902c6
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 19 deletions.
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -157,14 +157,21 @@ import logTrackerEvent, { setLoggerUser } from '~/utils/logger'
 import { IS_TESTNET } from '~/constant'
 
 const walletModule = namespace('wallet')
+const bookApiModule = namespace('book-api')
 
 @Component
 export default class AppHeader extends Vue {
   @walletModule.Getter('getType') walletType!: string | null
   @walletModule.Action('disconnectWallet') disconnectWallet!: () => void
   @walletModule.Action('openConnectWalletModal') openConnectWalletModal!: (params: { language: string, fullPath?: string }) => Promise<any>
   @walletModule.Action('initWallet') initWallet!: (params: { method: any, accounts: any, offlineSigner?: any }) => Promise<any>
+  @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise<any>
   @walletModule.Getter('getWalletAddress') currentAddress!: string
+  @walletModule.Getter('getSigner') signer!: any
+  @bookApiModule.Action('authenticate') authenticate!: ({inputWallet = '', signature = {}}: {inputWallet?: string, signature?: any}) => Promise<any>
+  @bookApiModule.Action('clearSession') clearSession!: () => void
+
+  isLoading = false
 
   // eslint-disable-next-line class-methods-use-this
   get isTestnet() {
@@ -184,11 +191,13 @@ export default class AppHeader extends Vue {
   }
 
   async handleConnectWalletButtonClick() {
+    this.isLoading = true
     const connection = await this.openConnectWalletModal({
       language: this.$i18n.locale.split('-')[0],
       fullPath: this.$route.fullPath,
     })
-    if (connection) {
+    try {
+      if (connection) {
       const { method, accounts } = connection
       logTrackerEvent(
         this,
@@ -201,9 +210,24 @@ export default class AppHeader extends Vue {
         wallet: accounts[0].address,
         method,
       })
-      return this.initWallet(connection)
+      await this.initWallet(connection)
+      if (!this.currentAddress || !this.signer) return
+      const signature = await this.signMessageMemo('authorize', [
+        'read:nftbook',
+        'write:nftbook',
+        'read:nftcollection',
+        'write:nftcollection',
+      ])
+      if (!signature) { return }
+      await this.authenticate({inputWallet:this.currentAddress, signature})
+    }
+    } catch (error) {
+      this.disconnectWallet()
+      this.clearSession()
+      // eslint-disable-next-line no-console
+      console.error('handleConnectWalletButtonClick error', error)
     }
-    return false
+    this.isLoading = false
   }
 }
 </script>
diff --git a/layouts/wallet.vue b/layouts/wallet.vue
@@ -23,9 +23,14 @@ const bookApiModule = namespace('book-api')
 @Component
 export default class WalletLayout extends Vue {
   @walletModule.Getter('getWalletAddress') walletAddress!: string
+  @walletModule.Action('disconnectWallet') disconnectWallet!: () => void
   @walletModule.Action('openConnectWalletModal') openConnectWalletModal!: (params: { language: string, fullPath?: string }) => Promise<any>
   @walletModule.Action('initWallet') initWallet!: (params: { method: any, accounts: any, offlineSigner?: any }) => Promise<any>
+  @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise<any>
+  @walletModule.Getter('getSigner') signer!: any
   @bookApiModule.Action('restoreSession') restoreSession!: () => void
+  @bookApiModule.Action('authenticate') authenticate!: ({inputWallet = '', signature = {}}: {inputWallet?: string, signature?: any}) => Promise<any>
+  @bookApiModule.Action('clearSession') clearSession!: () => void
 
   @walletModule.Action toggleAlert!: (
     isShow: boolean,
@@ -45,24 +50,44 @@ export default class WalletLayout extends Vue {
         fullPath: this.$route.fullPath,
       })
       // Re-login
-      if (connection) {
-        const { method, accounts } = connection
-        logTrackerEvent(
-          this,
-          'user',
-          `connected_wallet_${method}`,
-          'connected_wallet',
-          1,
-        )
-        setLoggerUser(this, {
-          wallet: accounts[0].address,
-          method,
-        })
-        return this.initWallet(connection)
+      try {
+        if (connection) {
+          const { method, accounts } = connection
+          logTrackerEvent(
+            this,
+            'user',
+            `connected_wallet_${method}`,
+            'connected_wallet',
+            1,
+          )
+          setLoggerUser(this, {
+            wallet: accounts[0].address,
+            method,
+          })
+          await this.initWallet(connection)
+          if (!this.walletAddress || !this.signer) return
+          const signature = await this.signMessageMemo('authorize', [
+            'read:nftbook',
+            'write:nftbook',
+            'read:nftcollection',
+            'write:nftcollection',
+          ])
+          if (!signature) {
+            return
+          }
+          await this.authenticate({
+            inputWallet: this.walletAddress,
+            signature,
+          })
+        }
+        this.$router.go(-1)
+      } catch (error) {
+        this.disconnectWallet()
+        this.clearSession()
+        // eslint-disable-next-line no-console
+        console.error('handleConnectWalletButtonClick error', error)
       }
-      return this.$router.go(-1)
     }
-    return true
   }
 
   @Watch('walletAddress')

diff --git a/pages/auth/redirect.vue b/pages/auth/redirect.vue
@@ -13,11 +13,19 @@ import { namespace } from 'vuex-class'
 import logTrackerEvent, { setLoggerUser } from '~/utils/logger'
 
 const walletModule = namespace('wallet')
+const bookApiModule = namespace('book-api')
 
 @Component
 export default class RedirectPage extends Vue {
   @walletModule.Action('initWallet') initWallet!: (params: { method: any; accounts: any; offlineSigner?: any }) => Promise<any>
+  @walletModule.Action('disconnectWallet') disconnectWallet!: () => void
   @walletModule.Action('handleConnectorRedirect') handleConnectorRedirect!: (params: { method: string; params: any }) => Promise<any>
+  @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise<any>
+  @walletModule.Getter('getSigner') signer!: any
+  @walletModule.Getter('getWalletAddress') currentAddress!: string
+
+  @bookApiModule.Action('authenticate') authenticate!: ({inputWallet = '', signature = {}}: {inputWallet?: string, signature?: any}) => Promise<any>
+  @bookApiModule.Action('clearSession') clearSession!: () => void
 
   async mounted() {
     const { error, method, code } = this.$route.query;
@@ -41,6 +49,15 @@ export default class RedirectPage extends Vue {
             method: method as string,
           })
           await this.initWallet(connection)
+          if (!this.currentAddress || !this.signer) return
+          const signature = await this.signMessageMemo('authorize', [
+            'read:nftbook',
+            'write:nftbook',
+            'read:nftcollection',
+            'write:nftcollection',
+          ])
+          if (!signature) { return }
+          await this.authenticate({inputWallet:this.currentAddress, signature})
         }
         let postAuthRoute = '/';
         if (window.sessionStorage) {
@@ -58,6 +75,8 @@ export default class RedirectPage extends Vue {
           statusCode: 400,
           message: (err as Error).toString(),
         });
+        this.disconnectWallet()
+        this.clearSession()
       }
     } else {
       if (window.sessionStorage) {