[TAS-2061] ✨ Retrieve JWT token during signLogin

src/components/AuthRequiredView.vue

@@ -70,7 +70,7 @@ export default {
   },
   mounted() {
     const { login } = this.$route.query;
-    if (!this.walletIsMatchedSession && login) {
+    if (!this.getSessionWallet && login) {
       this.onClickLogin();
     }
   },

src/components/EventModal/Collect/index.vue

@@ -723,7 +723,7 @@ export default {
       try {
         switch (method) {
           case 'crypto': {
-            if (!this.getAddress) {
+            if (!this.getSessionWallet) {
               const isConnected = await this.connectWallet();
               if (!isConnected) return;
             }
@@ -755,7 +755,7 @@ export default {
             await this.collectNFTWithStripe(classId, { memo: this.memo });
             break;
           case 'free': {
-            if (!this.getAddress) {
+            if (!this.getSessionWallet) {
               const isConnected = await this.connectWallet();
               if (!isConnected) return;
             }

src/components/SiteHeader.vue

@@ -57,7 +57,7 @@
       </Dropdown>
 
       <ButtonV2
-        v-if="!loginAddress"
+        v-if="!getSessionWallet"
         class="hidden laptop:flex"
         preset="secondary"
         :text="$t('header_button_connect_to_wallet')"
@@ -70,7 +70,7 @@
 
       <Dropdown class="hidden laptop:block ml-[4px]">
         <template #trigger="{ toggle }">
-          <div v-if="loginAddress" class="relative">
+          <div v-if="getSessionWallet" class="relative">
             <Identity
               class="cursor-pointer"
               :avatar-url="walletUserAvatar"
@@ -136,7 +136,7 @@
 
       {{ /* phone version */ }}
       <ButtonV2
-        v-if="!loginAddress"
+        v-if="!getSessionWallet"
         class="laptop:hidden"
         preset="plain"
         @click="handleOpenSlider"
@@ -171,7 +171,7 @@
       @close="isShowMobileMenu = false"
     >
       <ButtonV2
-        v-if="!loginAddress"
+        v-if="!getSessionWallet"
         class="w-full"
         preset="secondary"
         @click="handleConnectWallet"
@@ -292,6 +292,7 @@
       'getUserId',
       'getNotificationCount',
       'shoppingCartBookProductList',
+      'getSessionWallet',
     ]),
     currentLocale() {
       return this.$i18n.locale;
@@ -317,10 +318,10 @@
     },
   },
   async mounted() {
-    await this.restoreSession();
+    await this.restoreAuthSession();
   },
   methods: {
-    ...mapActions(['updatePreferences', 'userLogout']),
+    ...mapActions(['updatePreferences', 'userLogout', 'restoreAuthSession']),
     handleClickGoStore() {
       logTrackerEvent(this, 'site_header', 'site_header_click_store', '', 1);
     },
@@ -338,7 +339,7 @@
         );
         await this.connectWallet();
       } catch (err) {
         console.error(err);
         this.alertPromptError(err);
       }
     },
@@ -366,7 +367,7 @@
           this.$router.push(
             this.localeLocation({
               name: 'bookshelf',
-              params: { id: this.loginAddress },
+              params: { id: this.getSessionWallet },
               query: { tab: 'collected' },
             })
           );
@@ -392,12 +393,12 @@
     handleOpenSlider() {
       this.isShowMobileMenu = true;
 
-      if (this.loginAddress) {
+      if (this.getSessionWallet) {
         logTrackerEvent(
           this,
           'site_menu',
           'site_menu_click_slider_menu',
-          this.loginAddress,
+          this.getSessionWallet,
           1
         );
       } else {

src/mixins/wallet.js

@@ -36,6 +36,9 @@ export default {
       'walletIsMatchedSession',
       'walletIsLoggingIn',
       'loginAddress',
+      'getToken',
+      'getSessionWallet',
+      'getIsRestoringSession',
     ]),
     hasConnectedWallet() {
       return !!this.getAddress && !!this.walletMethodType;

src/pages/_id/index.vue

@@ -516,7 +516,7 @@ export default {
         1
       );
 
-      if (!this.getAddress) {
+      if (!this.getSessionWallet) {
         const isConnected = await this.connectWallet();
         if (!isConnected) return;
         this.walletFetchLIKEBalance();

src/pages/bookshelf/index.vue

@@ -193,7 +193,7 @@ export default {
       'walletFollowees',
     ]),
     wallet() {
-      return this.loginAddress;
+      return this.getSessionWallet;
     },
   },
   watch: {

src/pages/nft/claim/index.vue

@@ -760,7 +760,7 @@ export default {
       );
     },
     claimingAddress() {
-      return this.loginAddress;
+      return this.getSessionWallet;
     },
     claimingEmail() {
       return this.walletEmail || this.walletEmailUnverified;

src/pages/reader.vue

@@ -127,15 +127,15 @@ export default {
       await this.fetchISCNMetadata();
       await this.restoreSession();
       // TODO: use loginAddress
-      if (this.getAddress) {
+      if (this.getSessionWallet) {
         await Promise.all([
           this.fetchUserCollectedCount(),
           this.updateNFTOwners(),
         ]);
         if (
           (!this.userCollectedCount && this.isLoginRequired) ||
           (this.nftCollectorWalletAddress &&
-            this.nftCollectorWalletAddress !== this.getAddress)
+            this.nftCollectorWalletAddress !== this.getSessionWallet)
         ) {
           this.$router.replace(
             this.localeLocation({

src/pages/shopping-cart/wnft.vue

@@ -237,7 +237,7 @@ export default {
         1
       );
       try {
-        if (!this.getAddress) {
+        if (!this.getSessionWallet) {
           const isConnected = await this.connectWallet();
           if (!isConnected) return;
         } else {

src/store/index.js

@@ -11,6 +11,7 @@ import staticData from './modules/staticData';
 import wallet from './modules/wallet';
 import nft from './modules/nft';
 import cart from './modules/cart';
+import bookStoreAPI from './modules/bookStoreApi';
 
 const createStore = () =>
   new Vuex.Store({
@@ -49,6 +50,7 @@ const createStore = () =>
       wallet,
       nft,
       cart,
+      bookStoreAPI,
     },
   });
 

src/store/modules/bookStoreApi.js

@@ -0,0 +1,84 @@
+/* eslint no-param-reassign: "off" */
+
+import { postAuthenticate } from '~/util/api';
+import {
+  saveAuthSession,
+  clearAuthSession,
+  loadAuthSession,
+} from '~/util/auth';
+import {
+  BOOKSTORE_API_SET_TOKEN,
+  BOOKSTORE_API_SET_SESSION_WALLET,
+  BOOKSTORE_API_SET_IS_LOADING,
+} from '../mutation-types';
+
+const initialState = () => ({
+  token: '',
+  sessionWallet: '',
+  isRestoringSession: false,
+});
+
+const mutations = {
+  [BOOKSTORE_API_SET_TOKEN](state, token) {
+    state.token = token;
+  },
+  [BOOKSTORE_API_SET_SESSION_WALLET](state, wallet) {
+    state.sessionWallet = wallet;
+  },
+  [BOOKSTORE_API_SET_IS_LOADING](state, isLoading) {
+    state.isRestoringSession = isLoading;
+  },
+};
+
+const actions = {
+  async authenticate({ commit }, { inputWallet = '', signature = {} }) {
+    try {
+      const { token } = await this.$api.$post(postAuthenticate(), signature);
+      if (!token) {
+        throw new Error('INVALID_SIGNATURE');
+      }
+      commit(BOOKSTORE_API_SET_TOKEN, token);
+      commit(BOOKSTORE_API_SET_SESSION_WALLET, inputWallet);
+      saveAuthSession({ wallet: inputWallet, token });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      throw new Error('AUTHENTICATION_FAILED');
+    }
+  },
+
+  clearSession({ commit }) {
+    commit(BOOKSTORE_API_SET_TOKEN, '');
+    commit(BOOKSTORE_API_SET_SESSION_WALLET, '');
+    clearAuthSession();
+  },
+
+  async restoreAuthSession({ commit, dispatch }) {
+    try {
+      commit(BOOKSTORE_API_SET_IS_LOADING, true);
+      const session = loadAuthSession();
+      if (session) {
+        commit(BOOKSTORE_API_SET_TOKEN, session.token);
+        commit(BOOKSTORE_API_SET_SESSION_WALLET, session.wallet);
+        if (session.wallet) {
+          await dispatch('restoreSession');
+        }
+      }
+    } finally {
+      commit(BOOKSTORE_API_SET_IS_LOADING, false);
+    }
+  },
+};
+
+const getters = {
+  getToken: state => state.token,
+  getSessionWallet: state => state.sessionWallet,
+  getIsRestoringSession: state => state.isRestoringSession,
+};
+
+export default {
+  actions,
+  getters,
+  state: initialState,
+  mutations,
+};

src/store/modules/wallet.js

@@ -470,6 +470,7 @@ const actions = {
     commit(WALLET_SET_SIGNER, null);
     commit(WALLET_SET_CONNECTOR, null);
     commit(WALLET_SET_LIKERINFO, null);
+    dispatch('clearSession');
     await dispatch('walletLogout');
   },
 
@@ -943,11 +944,18 @@ const actions = {
     try {
       commit(WALLET_SET_IS_LOGGING_IN, true);
       const { signer, methodType } = state;
-      const data = await signLoginMessage(signer, address);
+      const data = await signLoginMessage(signer, address, 'authorize', [
+        'profile',
+        'read:nftbook',
+        'write:nftbook',
+        'read:nftcollection',
+        'write:nftcollection',
+      ]);
       const result = await this.$api.$post(postUserV2Login(), {
         loginMethod: methodType,
         ...data,
       });
+      await dispatch('authenticate', { inputWallet: address, signature: data });
       await setLoggerUser(this, {
         wallet: address,
         method: methodType,
@@ -956,6 +964,8 @@ const actions = {
       await dispatch('walletFetchSessionUserData');
     } catch (error) {
       commit(WALLET_SET_USER_INFO, null);
+      dispatch('disconnectWallet');
+      dispatch('clearSession');
       if (error.message === 'Request rejected') {
         // User rejected login request
       } else {

src/store/mutation-types.js

@@ -97,3 +97,7 @@ export const WALLET_SET_TOTAL_RESALES = 'WALLET_SET_TOTAL_RESALES';
 export const WALLET_SET_SALES_DETAILS = 'WALLET_SET_SALES_DETAILS';
 export const WALLET_SET_ROYALTY_DETAILS = 'WALLET_SET_ROYALTY_DETAILS';
 export const WALLET_SET_RESALE_DETAILS = 'WALLET_SET_RESALE_DETAILS';
+export const BOOKSTORE_API_SET_TOKEN = 'BOOKSTORE_API_SET_TOKEN';
+export const BOOKSTORE_API_SET_SESSION_WALLET =
+  'BOOKSTORE_API_SET_SESSION_WALLET';
+export const BOOKSTORE_API_SET_IS_LOADING = 'BOOKSTORE_API_SET_IS_LOADING';

src/util/api/index.js

@@ -630,3 +630,5 @@ export const fetchGutenbergCsv = () =>
 
 export const postSubstackSubscribe = () =>
   `https://substackapi.com/api/subscribe`;
+
+export const postAuthenticate = () => `${LIKECOIN_API_BASE}/wallet/authorize`;

src/util/auth.js

@@ -0,0 +1,38 @@
+const AUTH_SESSION_KEY = 'likecoin_nft_book_press_token';
+
+export function loadAuthSession() {
+  try {
+    if (window.localStorage) {
+      const data = window.localStorage.getItem(AUTH_SESSION_KEY);
+      if (data) {
+        const { wallet, token } = JSON.parse(data);
+        return {
+          wallet,
+          token,
+        };
+      }
+    }
+  } catch {}
+
+  return null;
+}
+
+export function saveAuthSession(session) {
+  try {
+    if (!window.localStorage) {
+      return;
+    }
+
+    window.localStorage.setItem(AUTH_SESSION_KEY, JSON.stringify(session));
+  } catch {}
+}
+
+export function clearAuthSession() {
+  try {
+    if (!window.localStorage) {
+      return;
+    }
+
+    window.localStorage.removeItem(AUTH_SESSION_KEY);
+  } catch {}
+}