Merge pull request #5 from useElven/native-auth-fix

fix native auth login token handling

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 build
+.vscode

CHANGELOG.md

@@ -1,3 +1,6 @@
+### [0.6.1](https://github.com/useElven/core/releases/tag/v0.6.1) (2023-06-07)
+- fix native auth login token handling
+
 ### [0.6.0](https://github.com/useElven/core/releases/tag/v0.6.0) (2023-06-04)
 - improvements for nonce incrementation to let trigger multiple transactions at the same time. The logic is slightly different, but it shouldn't break anything (you can test it [here](https://useelven-react-vite-demo.netlify.app/). For now, additional steps are required for the Web Wallet to manage the pending states in UI properly. They solution is presented in the [demo here](https://github.com/useElven/react-vite/blob/main/src/components/demo/EgldTx.tsx)). There will be more improvements in that regard.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useelven/core",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Core hooks for MultiversX React DApps",
   "license": "MIT",
   "author": "Julian Ćwirko <julian.io>",
@@ -48,7 +48,7 @@
     "@multiversx/sdk-core": "12.2.1",
     "@multiversx/sdk-extension-provider": "2.0.7",
     "@multiversx/sdk-hw-provider": "6.0.0",
-    "@multiversx/sdk-native-auth-client": "^1.0.2",
+    "@multiversx/sdk-native-auth-client": "1.0.2",
     "@multiversx/sdk-network-providers": "1.4.0",
     "@multiversx/sdk-wallet-connect-provider": "3.2.1",
     "@multiversx/sdk-web-wallet-provider": "3.0.0",
@@ -59,18 +59,18 @@
   "devDependencies": {
     "@types/lodash.clonedeep": "4.5.7",
     "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@typescript-eslint/eslint-plugin": "5.59.7",
-    "@typescript-eslint/parser": "5.59.7",
+    "@types/react": "18.2.8",
+    "@typescript-eslint/eslint-plugin": "5.59.9",
+    "@typescript-eslint/parser": "5.59.9",
     "esbuild": "0.17.19",
-    "eslint": "8.41.0",
+    "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "prettier": "2.8.8",
     "rimraf": "5.0.1",
-    "typescript": "5.0.4"
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
     "react": "18.2.0"

src/hooks/common-helpers/getLoginToken.ts

@@ -0,0 +1,26 @@
+import { getNativeAuthClient } from 'src/utils/getNativeAuthClient';
+import {
+  setLoginInfoState,
+  loginInfoState,
+  setLoggingInState,
+} from '../../store/auth';
+import { errorParse } from 'src/utils/errorParse';
+
+export const getLoginToken = async () => {
+  const client = getNativeAuthClient();
+  let token = loginInfoState.loginToken;
+
+  if (!token) {
+    try {
+      setLoggingInState('pending', true);
+      token = await client.initialize();
+    } catch (e) {
+      setLoggingInState('error', errorParse(e));
+    } finally {
+      setLoggingInState('pending', false);
+    }
+  }
+
+  setLoginInfoState('loginToken', token);
+  return token;
+};

src/hooks/useExtensionLogin.tsx

@@ -13,24 +13,17 @@ import { useLogout } from './useLogout';
 import { Login } from '../types/account';
 import { useLoggingIn } from './useLoggingIn';
 import { errorParse } from '../utils/errorParse';
+import { getLoginToken } from './common-helpers/getLoginToken';
 import { useNetwork } from './useNetwork';
-import { useNativeAuthLoginToken } from './useNativeAuthLoginToken';
+import { getNativeAuthClient } from 'src/utils/getNativeAuthClient';
 
 export const useExtensionLogin = (params?: Login) => {
   const { logout } = useLogout();
   const { loggedIn, pending, error } = useLoggingIn();
   const networkStateSnap = useNetwork();
-  const { loginToken, nativeAuthClient } = useNativeAuthLoginToken();
 
   const login = async () => {
-    if (!loginToken) {
-      setLoggingInState(
-        'error',
-        'Login token is not present. Please try again.'
-      );
-      setLoggingInState('pending', false);
-      return;
-    }
+    const loginToken = await getLoginToken();
 
     const providerInstance = ExtensionProvider.getInstance();
 
@@ -101,6 +94,8 @@ export const useExtensionLogin = (params?: Login) => {
       setLoginInfoState('expires', getNewLoginExpiresTimestamp());
       setLoggingInState('loggedIn', Boolean(address));
 
+      const nativeAuthClient = getNativeAuthClient();
+
       if (signature && nativeAuthClient) {
         setLoginInfoState('signature', signature);
         const accessToken = nativeAuthClient.getToken(

src/hooks/useLedgerLogin.tsx

@@ -14,23 +14,16 @@ import { Login } from '../types/account';
 import { useLoggingIn } from './useLoggingIn';
 import { errorParse } from '../utils/errorParse';
 import { useNetwork } from './useNetwork';
-import { useNativeAuthLoginToken } from './useNativeAuthLoginToken';
+import { getLoginToken } from './common-helpers/getLoginToken';
+import { getNativeAuthClient } from 'src/utils/getNativeAuthClient';
 
 export const useLedgerLogin = (params?: Login) => {
   const { logout } = useLogout();
   const { loggedIn, pending, error } = useLoggingIn();
   const networkStateSnap = useNetwork();
-  const { loginToken, nativeAuthClient } = useNativeAuthLoginToken();
 
   const login = async (addressIndex = 0) => {
-    if (!loginToken) {
-      setLoggingInState(
-        'error',
-        'Login token is not present. Please try again.'
-      );
-      setLoggingInState('pending', false);
-      return;
-    }
+    const loginToken = await getLoginToken();
 
     const apiNetworkProvider = networkStateSnap.apiNetworkProvider;
     const dappProvider = networkStateSnap.dappProvider;
@@ -65,6 +58,8 @@ export const useLedgerLogin = (params?: Login) => {
           userAddress = loginInfo.address;
         }
 
+        const nativeAuthClient = getNativeAuthClient();
+
         if (loginInfo.signature && nativeAuthClient) {
           const sigString = loginInfo.signature.toString('hex');
           setLoginInfoState('signature', sigString);

src/hooks/useMobileAppLogin.tsx

@@ -24,7 +24,8 @@ import { DappProvider } from '../types/network';
 import { ApiNetworkProvider } from '@multiversx/sdk-network-providers/out';
 import { useConfig } from './useConfig';
 import { useNetwork } from './useNetwork';
-import { useNativeAuthLoginToken } from './useNativeAuthLoginToken';
+import { getLoginToken } from './common-helpers/getLoginToken';
+import { getNativeAuthClient } from 'src/utils/getNativeAuthClient';
 
 export const useMobileAppLogin = (params?: Login) => {
   const { logout } = useLogout();
@@ -35,7 +36,6 @@ export const useMobileAppLogin = (params?: Login) => {
   >();
   const networkStateSnap = useNetwork();
   const configStateSnap = useConfig();
-  const { loginToken, nativeAuthClient } = useNativeAuthLoginToken();
 
   const dappProviderRef = useRef<DappProvider>(
     networkStateSnap.dappProvider as DappProvider
@@ -49,14 +49,7 @@ export const useMobileAppLogin = (params?: Login) => {
   };
 
   const login = async () => {
-    if (!loginToken) {
-      setLoggingInState(
-        'error',
-        'Login token is not present. Please try again.'
-      );
-      setLoggingInState('pending', false);
-      return;
-    }
+    const loginToken = await getLoginToken();
 
     const relayAddress = getRelayAddressFromNetwork(
       configStateSnap.walletConnectV2RelayAddresses as string[]
@@ -97,6 +90,9 @@ export const useMobileAppLogin = (params?: Login) => {
           setAccountState('nonce', account.nonce.valueOf());
 
           setLoggingInState('loggedIn', Boolean(address));
+
+          const nativeAuthClient = getNativeAuthClient();
+
           if (signature && nativeAuthClient) {
             setLoginInfoState('signature', signature);
             const accessToken = nativeAuthClient.getToken(
@@ -184,6 +180,8 @@ export const useMobileAppLogin = (params?: Login) => {
 
         setLoginInfoState('loginMethod', LoginMethodsEnum.walletconnect);
 
+        const loginToken = await getLoginToken();
+
         await dappProvider.login({
           token: loginToken,
           approval,

src/hooks/useWebWalletLogin.tsx

@@ -8,25 +8,17 @@ import { Login } from '../types/account';
 import { useLoggingIn } from './useLoggingIn';
 import { errorParse } from '../utils/errorParse';
 import { useConfig } from './useConfig';
-import { useNativeAuthLoginToken } from './useNativeAuthLoginToken';
+import { getLoginToken } from './common-helpers/getLoginToken';
 
 export const useWebWalletLogin = (params?: Login) => {
   const { logout } = useLogout();
   const { loggedIn, pending, error } = useLoggingIn();
   const configStateSnap = useConfig();
-  const { loginToken } = useNativeAuthLoginToken();
 
   const login = async () => {
     setLoggingInState('pending', true);
 
-    if (!loginToken) {
-      setLoggingInState(
-        'error',
-        'Login token is not present. Please try again.'
-      );
-      setLoggingInState('pending', false);
-      return;
-    }
+    const loginToken = await getLoginToken();
 
     const providerInstance = new WalletProvider(
       `${configStateSnap.walletAddress}${DAPP_INIT_ROUTE}`

src/utils/getNativeAuthClient.ts

@@ -0,0 +1,5 @@
+import { NativeAuthClient } from '@multiversx/sdk-native-auth-client';
+import { configState } from '../store/config';
+
+export const getNativeAuthClient = () =>
+  new NativeAuthClient({ apiUrl: configState.apiAddress });