✨ Add authcore login

likecoin · Mar 7, 2024 · f2c11f4 · f2c11f4
1 parent 0b86ca0
commit f2c11f4
Show file tree

Hide file tree

Showing 8 changed files with 472 additions and 48 deletions.
diff --git a/components/Alerts/SignFailed.vue b/components/Alerts/SignFailed.vue
@@ -42,7 +42,7 @@ export default class SignFailed extends Vue {
   @walletModule.Action closeSnackbar!: () => void
   @walletModule.Action('disconnectWallet') disconnectWallet!: () => void
   @walletModule.Action('openConnectWalletModal')
-  openConnectWalletModal!: (params: { language: string }) => Promise<any>
+  openConnectWalletModal!: (params: { language: string, fullPath?: string }) => Promise<any>
 
   @walletModule.Action('initWallet') initWallet!: (params: {
     method: any
@@ -72,6 +72,7 @@ export default class SignFailed extends Vue {
     await this.disconnectWallet()
     const connection = await this.openConnectWalletModal({
       language: this.$i18n.locale.split('-')[0],
+      fullPath: this.$route.fullPath,
     })
     if (connection) {
       const { method, accounts } = connection

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -162,7 +162,7 @@ const walletModule = namespace('wallet')
 export default class AppHeader extends Vue {
   @walletModule.Getter('getType') walletType!: string | null
   @walletModule.Action('disconnectWallet') disconnectWallet!: () => void
-  @walletModule.Action('openConnectWalletModal') openConnectWalletModal!: (params: { language: string }) => Promise<any>
+  @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.Getter('getWalletAddress') currentAddress!: string
 
@@ -182,6 +182,7 @@ export default class AppHeader extends Vue {
   async handleConnectWalletButtonClick() {
     const connection = await this.openConnectWalletModal({
       language: this.$i18n.locale.split('-')[0],
+      fullPath: this.$route.fullPath,
     })
     if (connection) {
       const { method, accounts } = connection

diff --git a/constant/network.ts b/constant/network.ts
@@ -1,5 +1,6 @@
 import {
   IS_TESTNET,
+  SITE_URL,
   LIKECOIN_CHAIN_ID,
   LIKECOIN_CHAIN_NFT_RPC,
   LIKECOIN_CHAIN_API,
@@ -62,11 +63,12 @@ export const LIKECOIN_WALLET_CONNECTOR_CONFIG = {
   bech32PrefixConsAddr: 'likevalcons',
   bech32PrefixConsPub: 'likevalconspub',
   availableMethods: [
+    'liker-id',
     'keplr',
     'keplr-mobile',
     'cosmostation',
     'cosmostation-mobile',
-    'liker-id',
+    'likerland-app',
     'leap',
     'metamask-leap',
     'walletconnect-v2',
@@ -81,6 +83,10 @@ export const LIKECOIN_WALLET_CONNECTOR_CONFIG = {
     icons: ['https://like.co/logo.png'],
     name: 'app.like.co',
   },
+  authcoreApiHost: IS_TESTNET
+    ? 'https://likecoin-integration-test.authcore.io'
+    : 'https://authcore.like.co',
+  authcoreRedirectUrl: `${SITE_URL}/auth/redirect?method=liker-id`,
 };
 
 const combinedConfig = {

diff --git a/layouts/wallet.vue b/layouts/wallet.vue
@@ -21,7 +21,7 @@ const walletModule = namespace('wallet')
 @Component
 export default class WalletLayout extends Vue {
   @walletModule.Getter('getWalletAddress') walletAddress!: string
-  @walletModule.Action('openConnectWalletModal') openConnectWalletModal!: (params: { language: string }) => Promise<any>
+  @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('restoreSessionIfNecessary') restoreSessionIfNecessary!: () => Promise<any>
 
@@ -41,6 +41,7 @@ export default class WalletLayout extends Vue {
     if (!this.walletAddress) {
       const connection = await this.openConnectWalletModal({
         language: this.$i18n.locale.split('-')[0],
+        fullPath: this.$route.fullPath,
       })
       // Re-login
       if (connection) {

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@keplr-wallet/types": "^0.11.4",
     "@likecoin/iscn-js": "^0.6.10",
     "@likecoin/iscn-message-types": "^0.0.7",
-    "@likecoin/wallet-connector": "^0.25.3",
+    "@likecoin/wallet-connector": "^0.26.1",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/i18n": "^7.0.1",
     "@nuxtjs/pwa": "^3.3.5",

diff --git a/pages/auth/redirect.vue b/pages/auth/redirect.vue
@@ -0,0 +1,73 @@
+<template>
+  <main class="redirect-page">
+    <div class="flex flex-col items-center my-48">
+      <h1 class="text-24">{{ $t('RedirectPage.title') }}</h1>
+      <ProgressIndicator preset="thin" />
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import logTrackerEvent, { setLoggerUser } from '~/utils/logger'
+
+const walletModule = namespace('wallet')
+
+@Component
+export default class RedirectPage extends Vue {
+  @walletModule.Action('initWallet') initWallet!: (params: { method: any; accounts: any; offlineSigner?: any }) => Promise<any>
+  @walletModule.Action('handleConnectorRedirect') handleConnectorRedirect!: (params: { method: string; params: any }) => Promise<any>
+
+  async mounted() {
+    const { error, method, code } = this.$route.query;
+    if (method && code) {
+      try {
+        const connection = await this.handleConnectorRedirect({
+          method: method as string,
+          params: { code },
+        });
+        if (connection) {
+          const { accounts } = connection
+          logTrackerEvent(
+            this,
+            'user',
+            `connected_wallet_${method}`,
+            'connected_wallet',
+            1,
+          )
+          setLoggerUser(this, {
+            wallet: accounts[0].address,
+            method: method as string,
+          })
+          await this.initWallet(connection)
+        }
+        let postAuthRoute = '/';
+        if (window.sessionStorage) {
+          const storedRoute = window.sessionStorage.getItem(
+            'USER_POST_AUTH_ROUTE',
+          );
+          if (storedRoute) {
+            postAuthRoute = storedRoute;
+            window.localStorage.removeItem('USER_POST_AUTH_ROUTE');
+          }
+        }
+        this.$router.replace(postAuthRoute);
+      } catch (err) {
+        this.$nuxt.error({
+          statusCode: 400,
+          message: (err as Error).toString(),
+        });
+      }
+    } else {
+      if (window.sessionStorage) {
+        window.sessionStorage.removeItem('USER_POST_AUTH_ROUTE');
+      }
+      this.$nuxt.error({
+        statusCode: 400,
+        message: error as string,
+      });
+    }
+  }
+};
+</script>
diff --git a/store/wallet.ts b/store/wallet.ts
@@ -196,14 +196,30 @@ export default class Wallet extends VuexModule {
 
   @Action
   // eslint-disable-next-line class-methods-use-this
-  async openConnectWalletModal({ language }: { language: string }) {
+  async openConnectWalletModal({ language, fullPath }: { language: string, fullPath?: string }) {
+    if (window.sessionStorage && fullPath) {
+      window.sessionStorage.setItem(
+        'USER_POST_AUTH_ROUTE',
+        fullPath,
+      );
+    }
     const connector = await getConnector()
     const connection = await connector.openConnectionMethodSelectionDialog({
       language,
     })
     return connection
   }
 
+  @Action
+  // eslint-disable-next-line class-methods-use-this
+  async handleConnectorRedirect(
+    { method, params }: { method: string, params: string },
+  ) {
+    const connector = await getConnector()
+    const connection = await connector.handleRedirect(method, params);
+    return connection;
+  }
+
   @Action
   disconnectWallet() {
     connectorInstance.disconnect()