@dynamic-labs/sdk-react-core 4.25.5 → 4.25.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/package.cjs +1 -1
- package/package.js +1 -1
- package/package.json +11 -11
- package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.cjs +5 -1
- package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.d.ts +5 -2
- package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.js +5 -1
- package/src/lib/utils/hooks/useGetMfaToken/useGetMfaToken.cjs +68 -0
- package/src/lib/utils/hooks/useGetMfaToken/useGetMfaToken.js +64 -0
- package/src/lib/utils/hooks/useMfa/useMfa.cjs +23 -12
- package/src/lib/utils/hooks/useMfa/useMfa.d.ts +3 -2
- package/src/lib/utils/hooks/useMfa/useMfa.js +23 -12
- package/src/lib/utils/hooks/useMfaModals/useMfaModals.cjs +7 -1
- package/src/lib/utils/hooks/useMfaModals/useMfaModals.js +7 -1
- package/src/lib/utils/hooks/usePromptMfaAuth/usePromptMfaAuth.cjs +10 -4
- package/src/lib/utils/hooks/usePromptMfaAuth/usePromptMfaAuth.d.ts +5 -1
- package/src/lib/utils/hooks/usePromptMfaAuth/usePromptMfaAuth.js +10 -4
- package/src/lib/utils/hooks/useSetWalletConnectorFetchers/useSetWalletConnectorFetchers.cjs +3 -0
- package/src/lib/utils/hooks/useSetWalletConnectorFetchers/useSetWalletConnectorFetchers.js +3 -0
- package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs +1 -1
- package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js +1 -1
- package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.cjs +5 -2
- package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.d.ts +1 -0
- package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.js +5 -2
- package/src/lib/views/MfaVerificationView/MfaVerificationView.cjs +18 -3
- package/src/lib/views/MfaVerificationView/MfaVerificationView.d.ts +2 -1
- package/src/lib/views/MfaVerificationView/MfaVerificationView.js +18 -3
- package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.cjs +15 -3
- package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.d.ts +5 -1
- package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.js +15 -3
- package/src/lib/views/viewToComponentMap.d.ts +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
|
|
2
|
+
### [4.25.7](https://github.com/dynamic-labs/dynamic-auth/compare/v4.25.6...v4.25.7) (2025-07-28)
|
|
3
|
+
|
|
4
|
+
### [4.25.6](https://github.com/dynamic-labs/dynamic-auth/compare/v4.25.5...v4.25.6) (2025-07-28)
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
* don't create a new user when linking a wallet to a user with no wallets ([#9252](https://github.com/dynamic-labs/dynamic-auth/issues/9252)) ([30f846e](https://github.com/dynamic-labs/dynamic-auth/commit/30f846e89f2dffd112e656201bfa1cc24b787f03))
|
|
10
|
+
* Nufi EVM wallet showing up twice in wallet list ([#9256](https://github.com/dynamic-labs/dynamic-auth/issues/9256)) ([213488e](https://github.com/dynamic-labs/dynamic-auth/commit/213488e2226ef55965e12a1a548845cb100e859f))
|
|
11
|
+
|
|
2
12
|
### [4.25.5](https://github.com/dynamic-labs/dynamic-auth/compare/v4.25.4...v4.25.5) (2025-07-27)
|
|
3
13
|
|
|
4
14
|
|
package/package.cjs
CHANGED
package/package.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamic-labs/sdk-react-core",
|
|
3
|
-
"version": "4.25.
|
|
3
|
+
"version": "4.25.7",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@dynamic-labs/sdk-api-core": "0.0.728",
|
|
6
6
|
"@dynamic-labs-sdk/client": "0.0.1-alpha.19",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
"yup": "0.32.11",
|
|
16
16
|
"react-international-phone": "4.5.0",
|
|
17
17
|
"bs58": "5.0.0",
|
|
18
|
-
"@dynamic-labs/assert-package-version": "4.25.
|
|
19
|
-
"@dynamic-labs/iconic": "4.25.
|
|
20
|
-
"@dynamic-labs/logger": "4.25.
|
|
21
|
-
"@dynamic-labs/multi-wallet": "4.25.
|
|
22
|
-
"@dynamic-labs/rpc-providers": "4.25.
|
|
23
|
-
"@dynamic-labs/store": "4.25.
|
|
24
|
-
"@dynamic-labs/types": "4.25.
|
|
25
|
-
"@dynamic-labs/utils": "4.25.
|
|
26
|
-
"@dynamic-labs/wallet-book": "4.25.
|
|
27
|
-
"@dynamic-labs/wallet-connector-core": "4.25.
|
|
18
|
+
"@dynamic-labs/assert-package-version": "4.25.7",
|
|
19
|
+
"@dynamic-labs/iconic": "4.25.7",
|
|
20
|
+
"@dynamic-labs/logger": "4.25.7",
|
|
21
|
+
"@dynamic-labs/multi-wallet": "4.25.7",
|
|
22
|
+
"@dynamic-labs/rpc-providers": "4.25.7",
|
|
23
|
+
"@dynamic-labs/store": "4.25.7",
|
|
24
|
+
"@dynamic-labs/types": "4.25.7",
|
|
25
|
+
"@dynamic-labs/utils": "4.25.7",
|
|
26
|
+
"@dynamic-labs/wallet-book": "4.25.7",
|
|
27
|
+
"@dynamic-labs/wallet-connector-core": "4.25.7",
|
|
28
28
|
"eventemitter3": "5.0.1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
@@ -108,6 +108,7 @@ require('../../../../index.cjs');
|
|
|
108
108
|
var apiUrl = require('../../constants/waas/apiUrl.cjs');
|
|
109
109
|
var useClientSessionKeys = require('../useClientSessionKeys/useClientSessionKeys.cjs');
|
|
110
110
|
var useRefreshUser = require('../useRefreshUser/useRefreshUser.cjs');
|
|
111
|
+
var useGetMfaToken = require('../useGetMfaToken/useGetMfaToken.cjs');
|
|
111
112
|
var constants = require('./constants.cjs');
|
|
112
113
|
require('../../../store/state/tokenBalances.cjs');
|
|
113
114
|
require('../../../store/state/multichainBalances.cjs');
|
|
@@ -115,13 +116,14 @@ require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
|
|
|
115
116
|
var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
|
|
116
117
|
|
|
117
118
|
const dynamicWaasKey = 'dynamicwaas';
|
|
118
|
-
const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, getSignedSessionId, }) => {
|
|
119
|
+
const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, getSignedSessionId, getMfaToken, }) => {
|
|
119
120
|
var _a;
|
|
120
121
|
walletConnector.setEnvironmentId(environmentId);
|
|
121
122
|
walletConnector.setBaseApiUrl((_a = (apiBaseUrl || apiUrl.DEFAULT_WAAS_API_URL)) === null || _a === void 0 ? void 0 : _a.replace('/api/v0', ''));
|
|
122
123
|
walletConnector.setGetAuthTokenFunction(() => authToken !== null && authToken !== void 0 ? authToken : '');
|
|
123
124
|
walletConnector.setGetSignedSessionIdFunction(getSignedSessionId);
|
|
124
125
|
walletConnector.setRelayUrl(relayUrl);
|
|
126
|
+
walletConnector.setGetMfaTokenFunction(getMfaToken);
|
|
125
127
|
return walletConnector;
|
|
126
128
|
};
|
|
127
129
|
const useDynamicWaas = () => {
|
|
@@ -146,6 +148,7 @@ const useDynamicWaas = () => {
|
|
|
146
148
|
const dynamicWaasIsEnabled = defaultWalletVersion === sdkApiCore.EmbeddedWalletVersionEnum.V3;
|
|
147
149
|
const authToken = getMinAuthToken.getMinAuthToken();
|
|
148
150
|
const { getSignedSessionId } = useClientSessionKeys.useClientSessionKeys();
|
|
151
|
+
const getMfaToken = useGetMfaToken.useGetMfaToken();
|
|
149
152
|
const isCookieAuthEnabled = projectSettings$1 && isCookieEnabled.isCookieEnabled(projectSettings$1);
|
|
150
153
|
const getWalletConnector = React.useCallback((chainName) => {
|
|
151
154
|
var _a;
|
|
@@ -163,6 +166,7 @@ const useDynamicWaas = () => {
|
|
|
163
166
|
apiBaseUrl: apiBaseUrl || apiUrl.DEFAULT_WAAS_API_URL,
|
|
164
167
|
authToken,
|
|
165
168
|
environmentId,
|
|
169
|
+
getMfaToken,
|
|
166
170
|
getSignedSessionId,
|
|
167
171
|
relayUrl: relayUrl !== null && relayUrl !== void 0 ? relayUrl : '',
|
|
168
172
|
walletConnector,
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import { ChainEnum } from '@dynamic-labs/sdk-api-core';
|
|
1
|
+
import { ChainEnum, MFAAction } from '@dynamic-labs/sdk-api-core';
|
|
2
2
|
import { IDynamicWaasConnector } from '@dynamic-labs/wallet-connector-core';
|
|
3
|
-
export declare const configWaasWalletConnector: ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, getSignedSessionId, }: {
|
|
3
|
+
export declare const configWaasWalletConnector: ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, getSignedSessionId, getMfaToken, }: {
|
|
4
4
|
walletConnector: IDynamicWaasConnector;
|
|
5
5
|
environmentId: string;
|
|
6
6
|
apiBaseUrl: string;
|
|
7
7
|
authToken: string | undefined;
|
|
8
8
|
relayUrl: string;
|
|
9
9
|
getSignedSessionId: () => Promise<string>;
|
|
10
|
+
getMfaToken: (props?: {
|
|
11
|
+
mfaAction?: MFAAction;
|
|
12
|
+
}) => Promise<string | undefined>;
|
|
10
13
|
}) => IDynamicWaasConnector;
|
|
11
14
|
export declare const useDynamicWaas: () => {
|
|
12
15
|
createWalletAccount: (chainNames: ChainEnum[]) => Promise<({
|
|
@@ -104,6 +104,7 @@ import '../../../../index.js';
|
|
|
104
104
|
import { DEFAULT_WAAS_API_URL } from '../../constants/waas/apiUrl.js';
|
|
105
105
|
import { useClientSessionKeys } from '../useClientSessionKeys/useClientSessionKeys.js';
|
|
106
106
|
import { useRefreshUser } from '../useRefreshUser/useRefreshUser.js';
|
|
107
|
+
import { useGetMfaToken } from '../useGetMfaToken/useGetMfaToken.js';
|
|
107
108
|
import { DYNAMIC_WAAS_CONNECTOR_NOT_FOUND_ERROR, EMBEDDED_WALLET_NOT_ENABLED_ERROR, NO_ENABLED_CHAINS_ERROR, INVALID_CHAINS_ERROR, WALLET_CREATION_FAILED_ERROR } from './constants.js';
|
|
108
109
|
import '../../../store/state/tokenBalances.js';
|
|
109
110
|
import '../../../store/state/multichainBalances.js';
|
|
@@ -111,13 +112,14 @@ import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
|
111
112
|
import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
|
|
112
113
|
|
|
113
114
|
const dynamicWaasKey = 'dynamicwaas';
|
|
114
|
-
const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, getSignedSessionId, }) => {
|
|
115
|
+
const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, getSignedSessionId, getMfaToken, }) => {
|
|
115
116
|
var _a;
|
|
116
117
|
walletConnector.setEnvironmentId(environmentId);
|
|
117
118
|
walletConnector.setBaseApiUrl((_a = (apiBaseUrl || DEFAULT_WAAS_API_URL)) === null || _a === void 0 ? void 0 : _a.replace('/api/v0', ''));
|
|
118
119
|
walletConnector.setGetAuthTokenFunction(() => authToken !== null && authToken !== void 0 ? authToken : '');
|
|
119
120
|
walletConnector.setGetSignedSessionIdFunction(getSignedSessionId);
|
|
120
121
|
walletConnector.setRelayUrl(relayUrl);
|
|
122
|
+
walletConnector.setGetMfaTokenFunction(getMfaToken);
|
|
121
123
|
return walletConnector;
|
|
122
124
|
};
|
|
123
125
|
const useDynamicWaas = () => {
|
|
@@ -142,6 +144,7 @@ const useDynamicWaas = () => {
|
|
|
142
144
|
const dynamicWaasIsEnabled = defaultWalletVersion === EmbeddedWalletVersionEnum.V3;
|
|
143
145
|
const authToken = getMinAuthToken();
|
|
144
146
|
const { getSignedSessionId } = useClientSessionKeys();
|
|
147
|
+
const getMfaToken = useGetMfaToken();
|
|
145
148
|
const isCookieAuthEnabled = projectSettings && isCookieEnabled(projectSettings);
|
|
146
149
|
const getWalletConnector = useCallback((chainName) => {
|
|
147
150
|
var _a;
|
|
@@ -159,6 +162,7 @@ const useDynamicWaas = () => {
|
|
|
159
162
|
apiBaseUrl: apiBaseUrl || DEFAULT_WAAS_API_URL,
|
|
160
163
|
authToken,
|
|
161
164
|
environmentId,
|
|
165
|
+
getMfaToken,
|
|
162
166
|
getSignedSessionId,
|
|
163
167
|
relayUrl: relayUrl !== null && relayUrl !== void 0 ? relayUrl : '',
|
|
164
168
|
walletConnector,
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
|
+
|
|
6
|
+
var _tslib = require('../../../../../_virtual/_tslib.cjs');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var client$1 = require('@dynamic-labs-sdk/client');
|
|
9
|
+
var utils = require('@dynamic-labs/utils');
|
|
10
|
+
var client = require('../../../client/client.cjs');
|
|
11
|
+
require('@dynamic-labs/sdk-api-core');
|
|
12
|
+
var logger = require('../../../shared/logger.cjs');
|
|
13
|
+
require('@dynamic-labs/iconic');
|
|
14
|
+
require('@dynamic-labs/wallet-connector-core');
|
|
15
|
+
require('react/jsx-runtime');
|
|
16
|
+
require('../../../context/ViewContext/ViewContext.cjs');
|
|
17
|
+
require('@dynamic-labs/wallet-book');
|
|
18
|
+
require('../../constants/colors.cjs');
|
|
19
|
+
require('../../constants/values.cjs');
|
|
20
|
+
require('../../../shared/consts/index.cjs');
|
|
21
|
+
var projectSettings = require('../../../store/state/projectSettings/projectSettings.cjs');
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Get MFA token
|
|
25
|
+
*
|
|
26
|
+
* @returns Function to get MFA token
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* const App = () => {
|
|
31
|
+
* const getMfaToken = useGetMfaToken();
|
|
32
|
+
*
|
|
33
|
+
* return (
|
|
34
|
+
* <button
|
|
35
|
+
* onClick={() => getMfaToken({ mfaAction: MFAAction.UpdateUser })}
|
|
36
|
+
* >
|
|
37
|
+
* Get MFA token
|
|
38
|
+
* </button>
|
|
39
|
+
* );
|
|
40
|
+
* }
|
|
41
|
+
*/
|
|
42
|
+
const useGetMfaToken = () => {
|
|
43
|
+
const client$2 = client.useDynamicClient();
|
|
44
|
+
return React.useCallback((...args_1) => _tslib.__awaiter(void 0, [...args_1], void 0, function* ({ mfaAction } = {}) {
|
|
45
|
+
var _a, _b, _c;
|
|
46
|
+
const projectSettings$1 = projectSettings.getProjectSettings();
|
|
47
|
+
const isMfaRequiredForAction = (_c = (_b = (_a = projectSettings$1 === null || projectSettings$1 === void 0 ? void 0 : projectSettings$1.security) === null || _a === void 0 ? void 0 : _a.mfa) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.some((action) => action.action === mfaAction && action.required);
|
|
48
|
+
if (mfaAction && !isMfaRequiredForAction) {
|
|
49
|
+
// if mfa token is not required, return undefined
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
try {
|
|
53
|
+
const mfaToken = client$1.consumeMfaToken(client$2);
|
|
54
|
+
return mfaToken;
|
|
55
|
+
}
|
|
56
|
+
catch (error) {
|
|
57
|
+
if (!mfaAction) {
|
|
58
|
+
logger.logger.warn('No MFA token found', error);
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const errorMessage = `MFA Token required for this action: ${mfaAction}`;
|
|
62
|
+
logger.logger.error(errorMessage, error);
|
|
63
|
+
throw new utils.DynamicError(errorMessage);
|
|
64
|
+
}
|
|
65
|
+
}), [client$2]);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
exports.useGetMfaToken = useGetMfaToken;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
import { __awaiter } from '../../../../../_virtual/_tslib.js';
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
import { consumeMfaToken } from '@dynamic-labs-sdk/client';
|
|
5
|
+
import { DynamicError } from '@dynamic-labs/utils';
|
|
6
|
+
import { useDynamicClient } from '../../../client/client.js';
|
|
7
|
+
import '@dynamic-labs/sdk-api-core';
|
|
8
|
+
import { logger } from '../../../shared/logger.js';
|
|
9
|
+
import '@dynamic-labs/iconic';
|
|
10
|
+
import '@dynamic-labs/wallet-connector-core';
|
|
11
|
+
import 'react/jsx-runtime';
|
|
12
|
+
import '../../../context/ViewContext/ViewContext.js';
|
|
13
|
+
import '@dynamic-labs/wallet-book';
|
|
14
|
+
import '../../constants/colors.js';
|
|
15
|
+
import '../../constants/values.js';
|
|
16
|
+
import '../../../shared/consts/index.js';
|
|
17
|
+
import { getProjectSettings } from '../../../store/state/projectSettings/projectSettings.js';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Get MFA token
|
|
21
|
+
*
|
|
22
|
+
* @returns Function to get MFA token
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const App = () => {
|
|
27
|
+
* const getMfaToken = useGetMfaToken();
|
|
28
|
+
*
|
|
29
|
+
* return (
|
|
30
|
+
* <button
|
|
31
|
+
* onClick={() => getMfaToken({ mfaAction: MFAAction.UpdateUser })}
|
|
32
|
+
* >
|
|
33
|
+
* Get MFA token
|
|
34
|
+
* </button>
|
|
35
|
+
* );
|
|
36
|
+
* }
|
|
37
|
+
*/
|
|
38
|
+
const useGetMfaToken = () => {
|
|
39
|
+
const client = useDynamicClient();
|
|
40
|
+
return useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* ({ mfaAction } = {}) {
|
|
41
|
+
var _a, _b, _c;
|
|
42
|
+
const projectSettings = getProjectSettings();
|
|
43
|
+
const isMfaRequiredForAction = (_c = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security) === null || _a === void 0 ? void 0 : _a.mfa) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.some((action) => action.action === mfaAction && action.required);
|
|
44
|
+
if (mfaAction && !isMfaRequiredForAction) {
|
|
45
|
+
// if mfa token is not required, return undefined
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
try {
|
|
49
|
+
const mfaToken = consumeMfaToken(client);
|
|
50
|
+
return mfaToken;
|
|
51
|
+
}
|
|
52
|
+
catch (error) {
|
|
53
|
+
if (!mfaAction) {
|
|
54
|
+
logger.warn('No MFA token found', error);
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const errorMessage = `MFA Token required for this action: ${mfaAction}`;
|
|
58
|
+
logger.error(errorMessage, error);
|
|
59
|
+
throw new DynamicError(errorMessage);
|
|
60
|
+
}
|
|
61
|
+
}), [client]);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export { useGetMfaToken };
|
|
@@ -36,7 +36,7 @@ var useUserAuth = require('../useUserAuth/useUserAuth.cjs');
|
|
|
36
36
|
const useMfa = () => {
|
|
37
37
|
const client$2 = client.useDynamicClient();
|
|
38
38
|
const { completeAuth } = useUserAuth.useUserAuth({});
|
|
39
|
-
const handleMfaAuth = React.useCallback((
|
|
39
|
+
const handleMfaAuth = React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ code, type, deviceId, createMfaToken, resultHandler, }) {
|
|
40
40
|
let result;
|
|
41
41
|
yield completeAuth({
|
|
42
42
|
onValidUpdatedJwt: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -48,9 +48,7 @@ const useMfa = () => {
|
|
|
48
48
|
}
|
|
49
49
|
const response = yield client$1.authTotpMfaDevice(client$2, {
|
|
50
50
|
code,
|
|
51
|
-
createMfaTokenOptions:
|
|
52
|
-
singleUse: true,
|
|
53
|
-
},
|
|
51
|
+
createMfaTokenOptions: createMfaToken,
|
|
54
52
|
deviceId,
|
|
55
53
|
});
|
|
56
54
|
result = resultHandler(response);
|
|
@@ -89,21 +87,34 @@ const useMfa = () => {
|
|
|
89
87
|
// since if it is completed we won't show the QR code again
|
|
90
88
|
yield user.refreshUserJwt({ environmentId: dynamicContextProps.getEnvironmentId() });
|
|
91
89
|
}), [client$2]);
|
|
92
|
-
const addDevice = React.useCallback((...
|
|
90
|
+
const addDevice = React.useCallback((...args_1) => _tslib.__awaiter(void 0, [...args_1], void 0, function* (type = sdkApiCore.MFADeviceType.Totp) {
|
|
93
91
|
if (type === sdkApiCore.MFADeviceType.Totp) {
|
|
94
92
|
return client$1.registerTotpMfaDevice(client$2);
|
|
95
93
|
}
|
|
96
94
|
throw new Error('Unsupported MFA device type');
|
|
97
95
|
}), [client$2]);
|
|
98
|
-
const authDevice = React.useCallback((
|
|
96
|
+
const authDevice = React.useCallback((code_1, ...args_2) => _tslib.__awaiter(void 0, [code_1, ...args_2], void 0, function* (code, type = sdkApiCore.MFADeviceType.Totp, deviceId) {
|
|
99
97
|
let isValid = false;
|
|
100
|
-
yield handleMfaAuth(
|
|
101
|
-
|
|
102
|
-
|
|
98
|
+
yield handleMfaAuth({
|
|
99
|
+
code,
|
|
100
|
+
deviceId,
|
|
101
|
+
resultHandler: () => {
|
|
102
|
+
isValid = true;
|
|
103
|
+
return true;
|
|
104
|
+
},
|
|
105
|
+
type,
|
|
103
106
|
});
|
|
104
107
|
return isValid;
|
|
105
108
|
}), [handleMfaAuth]);
|
|
106
|
-
const authenticateDevice = React.useCallback((
|
|
109
|
+
const authenticateDevice = React.useCallback((_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ code, type = sdkApiCore.MFADeviceType.Totp, deviceId, createMfaToken, }) {
|
|
110
|
+
return handleMfaAuth({
|
|
111
|
+
code,
|
|
112
|
+
createMfaToken,
|
|
113
|
+
deviceId,
|
|
114
|
+
resultHandler: (response) => response.mfaToken,
|
|
115
|
+
type,
|
|
116
|
+
});
|
|
117
|
+
}), [handleMfaAuth]);
|
|
107
118
|
const authRecoveryCode = React.useCallback((code) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
108
119
|
let isValid = false;
|
|
109
120
|
yield completeAuth({
|
|
@@ -131,7 +142,7 @@ const useMfa = () => {
|
|
|
131
142
|
});
|
|
132
143
|
return isValid;
|
|
133
144
|
}), [client$2, completeAuth]);
|
|
134
|
-
const verifyDevice = React.useCallback((
|
|
145
|
+
const verifyDevice = React.useCallback((code_2, ...args_3) => _tslib.__awaiter(void 0, [code_2, ...args_3], void 0, function* (code, type = sdkApiCore.MFADeviceType.Totp) {
|
|
135
146
|
if (type === sdkApiCore.MFADeviceType.Totp) {
|
|
136
147
|
const device = yield verifyTotpMfaDevice.verifyTotpMfaDevice(client$2, {
|
|
137
148
|
code,
|
|
@@ -143,7 +154,7 @@ const useMfa = () => {
|
|
|
143
154
|
}
|
|
144
155
|
throw new Error('Unsupported MFA device type');
|
|
145
156
|
}), [client$2]);
|
|
146
|
-
const getRecoveryCodes = React.useCallback((...
|
|
157
|
+
const getRecoveryCodes = React.useCallback((...args_4) => _tslib.__awaiter(void 0, [...args_4], void 0, function* (generateNewCodes = false) {
|
|
147
158
|
if (generateNewCodes) {
|
|
148
159
|
const { recoveryCodes } = yield client$1.createNewMfaRecoveryCodes(client$2);
|
|
149
160
|
return recoveryCodes;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MFADevice, MFADeviceType } from '@dynamic-labs/sdk-api-core';
|
|
1
|
+
import { CreateMfaToken, MFADevice, MFADeviceType } from '@dynamic-labs/sdk-api-core';
|
|
2
2
|
type UseMfaHookResult = {
|
|
3
3
|
/**
|
|
4
4
|
* Add a new device to the user's account.
|
|
@@ -19,10 +19,11 @@ type UseMfaHookResult = {
|
|
|
19
19
|
* Authenticates a device and returns a single use MFA token
|
|
20
20
|
* if the authentication is successful.
|
|
21
21
|
*/
|
|
22
|
-
authenticateDevice: ({ code, type, deviceId, }: {
|
|
22
|
+
authenticateDevice: ({ code, type, deviceId, createMfaToken, }: {
|
|
23
23
|
code: string;
|
|
24
24
|
type?: MFADeviceType;
|
|
25
25
|
deviceId?: string;
|
|
26
|
+
createMfaToken?: CreateMfaToken;
|
|
26
27
|
}) => Promise<string | undefined>;
|
|
27
28
|
completeAcknowledgement: () => Promise<void>;
|
|
28
29
|
/**
|
|
@@ -32,7 +32,7 @@ import { useUserAuth } from '../useUserAuth/useUserAuth.js';
|
|
|
32
32
|
const useMfa = () => {
|
|
33
33
|
const client = useDynamicClient();
|
|
34
34
|
const { completeAuth } = useUserAuth({});
|
|
35
|
-
const handleMfaAuth = useCallback((
|
|
35
|
+
const handleMfaAuth = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ code, type, deviceId, createMfaToken, resultHandler, }) {
|
|
36
36
|
let result;
|
|
37
37
|
yield completeAuth({
|
|
38
38
|
onValidUpdatedJwt: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -44,9 +44,7 @@ const useMfa = () => {
|
|
|
44
44
|
}
|
|
45
45
|
const response = yield authTotpMfaDevice(client, {
|
|
46
46
|
code,
|
|
47
|
-
createMfaTokenOptions:
|
|
48
|
-
singleUse: true,
|
|
49
|
-
},
|
|
47
|
+
createMfaTokenOptions: createMfaToken,
|
|
50
48
|
deviceId,
|
|
51
49
|
});
|
|
52
50
|
result = resultHandler(response);
|
|
@@ -85,21 +83,34 @@ const useMfa = () => {
|
|
|
85
83
|
// since if it is completed we won't show the QR code again
|
|
86
84
|
yield refreshUserJwt({ environmentId: getEnvironmentId() });
|
|
87
85
|
}), [client]);
|
|
88
|
-
const addDevice = useCallback((...
|
|
86
|
+
const addDevice = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (type = MFADeviceType.Totp) {
|
|
89
87
|
if (type === MFADeviceType.Totp) {
|
|
90
88
|
return registerTotpMfaDevice(client);
|
|
91
89
|
}
|
|
92
90
|
throw new Error('Unsupported MFA device type');
|
|
93
91
|
}), [client]);
|
|
94
|
-
const authDevice = useCallback((
|
|
92
|
+
const authDevice = useCallback((code_1, ...args_2) => __awaiter(void 0, [code_1, ...args_2], void 0, function* (code, type = MFADeviceType.Totp, deviceId) {
|
|
95
93
|
let isValid = false;
|
|
96
|
-
yield handleMfaAuth(
|
|
97
|
-
|
|
98
|
-
|
|
94
|
+
yield handleMfaAuth({
|
|
95
|
+
code,
|
|
96
|
+
deviceId,
|
|
97
|
+
resultHandler: () => {
|
|
98
|
+
isValid = true;
|
|
99
|
+
return true;
|
|
100
|
+
},
|
|
101
|
+
type,
|
|
99
102
|
});
|
|
100
103
|
return isValid;
|
|
101
104
|
}), [handleMfaAuth]);
|
|
102
|
-
const authenticateDevice = useCallback((
|
|
105
|
+
const authenticateDevice = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ code, type = MFADeviceType.Totp, deviceId, createMfaToken, }) {
|
|
106
|
+
return handleMfaAuth({
|
|
107
|
+
code,
|
|
108
|
+
createMfaToken,
|
|
109
|
+
deviceId,
|
|
110
|
+
resultHandler: (response) => response.mfaToken,
|
|
111
|
+
type,
|
|
112
|
+
});
|
|
113
|
+
}), [handleMfaAuth]);
|
|
103
114
|
const authRecoveryCode = useCallback((code) => __awaiter(void 0, void 0, void 0, function* () {
|
|
104
115
|
let isValid = false;
|
|
105
116
|
yield completeAuth({
|
|
@@ -127,7 +138,7 @@ const useMfa = () => {
|
|
|
127
138
|
});
|
|
128
139
|
return isValid;
|
|
129
140
|
}), [client, completeAuth]);
|
|
130
|
-
const verifyDevice = useCallback((
|
|
141
|
+
const verifyDevice = useCallback((code_2, ...args_3) => __awaiter(void 0, [code_2, ...args_3], void 0, function* (code, type = MFADeviceType.Totp) {
|
|
131
142
|
if (type === MFADeviceType.Totp) {
|
|
132
143
|
const device = yield verifyTotpMfaDevice(client, {
|
|
133
144
|
code,
|
|
@@ -139,7 +150,7 @@ const useMfa = () => {
|
|
|
139
150
|
}
|
|
140
151
|
throw new Error('Unsupported MFA device type');
|
|
141
152
|
}), [client]);
|
|
142
|
-
const getRecoveryCodes = useCallback((...
|
|
153
|
+
const getRecoveryCodes = useCallback((...args_4) => __awaiter(void 0, [...args_4], void 0, function* (generateNewCodes = false) {
|
|
143
154
|
if (generateNewCodes) {
|
|
144
155
|
const { recoveryCodes } = yield createNewMfaRecoveryCodes(client);
|
|
145
156
|
return recoveryCodes;
|
|
@@ -154,7 +154,13 @@ const useMfaModals = () => {
|
|
|
154
154
|
if (!isTotpMfaEnabled) {
|
|
155
155
|
return;
|
|
156
156
|
}
|
|
157
|
-
|
|
157
|
+
// creating the mfa token in case the customer is using
|
|
158
|
+
// otp verification to delete the device
|
|
159
|
+
// this is mainly for backwards compatibility with the
|
|
160
|
+
// suggested flow before passkeys were introduced
|
|
161
|
+
clearStackAndPush('mfa-verification', {
|
|
162
|
+
createMfaToken: true,
|
|
163
|
+
});
|
|
158
164
|
}
|
|
159
165
|
setShowAuthFlow(value, { emitCancelAuth: true });
|
|
160
166
|
}, [isTotpMfaEnabled, setShowAuthFlow, clearStackAndPush]);
|
|
@@ -150,7 +150,13 @@ const useMfaModals = () => {
|
|
|
150
150
|
if (!isTotpMfaEnabled) {
|
|
151
151
|
return;
|
|
152
152
|
}
|
|
153
|
-
|
|
153
|
+
// creating the mfa token in case the customer is using
|
|
154
|
+
// otp verification to delete the device
|
|
155
|
+
// this is mainly for backwards compatibility with the
|
|
156
|
+
// suggested flow before passkeys were introduced
|
|
157
|
+
clearStackAndPush('mfa-verification', {
|
|
158
|
+
createMfaToken: true,
|
|
159
|
+
});
|
|
154
160
|
}
|
|
155
161
|
setShowAuthFlow(value, { emitCancelAuth: true });
|
|
156
162
|
}, [isTotpMfaEnabled, setShowAuthFlow, clearStackAndPush]);
|
|
@@ -107,7 +107,7 @@ const usePromptMfaAuth = () => {
|
|
|
107
107
|
const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
|
|
108
108
|
const { pushView } = ViewContext.useViewContext();
|
|
109
109
|
const getUserMfaMethods = useGetUserMfaMethods.useGetUserMfaMethods();
|
|
110
|
-
const promptMfaAuth = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
110
|
+
const promptMfaAuth = React.useCallback((props) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
111
111
|
const methods = yield getUserMfaMethods();
|
|
112
112
|
const allMethods = [
|
|
113
113
|
...methods.passkeys.map((passkey) => (Object.assign(Object.assign({}, passkey), { type: sdkApiCore.MFADeviceType.Passkey }))),
|
|
@@ -115,7 +115,9 @@ const usePromptMfaAuth = () => {
|
|
|
115
115
|
];
|
|
116
116
|
setShowAuthFlow(true);
|
|
117
117
|
if (!methods.userHasVerifiedMfaMethods || allMethods.length === 0) {
|
|
118
|
-
pushView('mfa-choose-device'
|
|
118
|
+
pushView('mfa-choose-device', {
|
|
119
|
+
createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
|
|
120
|
+
});
|
|
119
121
|
return;
|
|
120
122
|
}
|
|
121
123
|
const lastCreatedMethod = allMethods.reduce((a, b) => {
|
|
@@ -129,10 +131,14 @@ const usePromptMfaAuth = () => {
|
|
|
129
131
|
});
|
|
130
132
|
switch (lastCreatedMethod.type) {
|
|
131
133
|
case sdkApiCore.MFADeviceType.Passkey:
|
|
132
|
-
pushView('passkey-confirm'
|
|
134
|
+
pushView('passkey-confirm', {
|
|
135
|
+
createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
|
|
136
|
+
});
|
|
133
137
|
break;
|
|
134
138
|
case sdkApiCore.MFADeviceType.Totp:
|
|
135
|
-
pushView('mfa-verification'
|
|
139
|
+
pushView('mfa-verification', {
|
|
140
|
+
createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
|
|
141
|
+
});
|
|
136
142
|
break;
|
|
137
143
|
default:
|
|
138
144
|
throw new Error('Error determining MFA method to use');
|
|
@@ -103,7 +103,7 @@ const usePromptMfaAuth = () => {
|
|
|
103
103
|
const { setShowAuthFlow } = useInternalDynamicContext();
|
|
104
104
|
const { pushView } = useViewContext();
|
|
105
105
|
const getUserMfaMethods = useGetUserMfaMethods();
|
|
106
|
-
const promptMfaAuth = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
106
|
+
const promptMfaAuth = useCallback((props) => __awaiter(void 0, void 0, void 0, function* () {
|
|
107
107
|
const methods = yield getUserMfaMethods();
|
|
108
108
|
const allMethods = [
|
|
109
109
|
...methods.passkeys.map((passkey) => (Object.assign(Object.assign({}, passkey), { type: MFADeviceType.Passkey }))),
|
|
@@ -111,7 +111,9 @@ const usePromptMfaAuth = () => {
|
|
|
111
111
|
];
|
|
112
112
|
setShowAuthFlow(true);
|
|
113
113
|
if (!methods.userHasVerifiedMfaMethods || allMethods.length === 0) {
|
|
114
|
-
pushView('mfa-choose-device'
|
|
114
|
+
pushView('mfa-choose-device', {
|
|
115
|
+
createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
|
|
116
|
+
});
|
|
115
117
|
return;
|
|
116
118
|
}
|
|
117
119
|
const lastCreatedMethod = allMethods.reduce((a, b) => {
|
|
@@ -125,10 +127,14 @@ const usePromptMfaAuth = () => {
|
|
|
125
127
|
});
|
|
126
128
|
switch (lastCreatedMethod.type) {
|
|
127
129
|
case MFADeviceType.Passkey:
|
|
128
|
-
pushView('passkey-confirm'
|
|
130
|
+
pushView('passkey-confirm', {
|
|
131
|
+
createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
|
|
132
|
+
});
|
|
129
133
|
break;
|
|
130
134
|
case MFADeviceType.Totp:
|
|
131
|
-
pushView('mfa-verification'
|
|
135
|
+
pushView('mfa-verification', {
|
|
136
|
+
createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
|
|
137
|
+
});
|
|
132
138
|
break;
|
|
133
139
|
default:
|
|
134
140
|
throw new Error('Error determining MFA method to use');
|
|
@@ -101,6 +101,7 @@ require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFu
|
|
|
101
101
|
require('../../../../index.cjs');
|
|
102
102
|
var useDynamicWaas = require('../useDynamicWaas/useDynamicWaas.cjs');
|
|
103
103
|
var apiUrl = require('../../constants/waas/apiUrl.cjs');
|
|
104
|
+
var useGetMfaToken = require('../useGetMfaToken/useGetMfaToken.cjs');
|
|
104
105
|
require('../../../store/state/tokenBalances.cjs');
|
|
105
106
|
require('../../../store/state/multichainBalances.cjs');
|
|
106
107
|
require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
|
|
@@ -111,6 +112,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
|
|
|
111
112
|
const authToken = getMinAuthToken.getMinAuthToken();
|
|
112
113
|
const { registerEmbeddedWalletSessionKey, removeSessionKey } = useEmbeddedWalletSessionKeys.useEmbeddedWalletSessionKeys({ environmentId, projectSettings });
|
|
113
114
|
const { getSignedSessionId } = useClientSessionKeys.useClientSessionKeys();
|
|
115
|
+
const getMfaToken = useGetMfaToken.useGetMfaToken();
|
|
114
116
|
if (!(walletOptions === null || walletOptions === void 0 ? void 0 : walletOptions.length))
|
|
115
117
|
return;
|
|
116
118
|
walletOptions.forEach((walletOption) => {
|
|
@@ -124,6 +126,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
|
|
|
124
126
|
apiBaseUrl: apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : apiUrl.DEFAULT_WAAS_API_URL,
|
|
125
127
|
authToken,
|
|
126
128
|
environmentId,
|
|
129
|
+
getMfaToken,
|
|
127
130
|
getSignedSessionId,
|
|
128
131
|
relayUrl: (_e = (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.waas) === null || _d === void 0 ? void 0 : _d.relayUrl) !== null && _e !== void 0 ? _e : '',
|
|
129
132
|
walletConnector: walletOption.walletConnector,
|
|
@@ -97,6 +97,7 @@ import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFun
|
|
|
97
97
|
import '../../../../index.js';
|
|
98
98
|
import { configWaasWalletConnector } from '../useDynamicWaas/useDynamicWaas.js';
|
|
99
99
|
import { DEFAULT_WAAS_API_URL } from '../../constants/waas/apiUrl.js';
|
|
100
|
+
import { useGetMfaToken } from '../useGetMfaToken/useGetMfaToken.js';
|
|
100
101
|
import '../../../store/state/tokenBalances.js';
|
|
101
102
|
import '../../../store/state/multichainBalances.js';
|
|
102
103
|
import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
@@ -107,6 +108,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
|
|
|
107
108
|
const authToken = getMinAuthToken();
|
|
108
109
|
const { registerEmbeddedWalletSessionKey, removeSessionKey } = useEmbeddedWalletSessionKeys({ environmentId, projectSettings });
|
|
109
110
|
const { getSignedSessionId } = useClientSessionKeys();
|
|
111
|
+
const getMfaToken = useGetMfaToken();
|
|
110
112
|
if (!(walletOptions === null || walletOptions === void 0 ? void 0 : walletOptions.length))
|
|
111
113
|
return;
|
|
112
114
|
walletOptions.forEach((walletOption) => {
|
|
@@ -120,6 +122,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
|
|
|
120
122
|
apiBaseUrl: apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : DEFAULT_WAAS_API_URL,
|
|
121
123
|
authToken,
|
|
122
124
|
environmentId,
|
|
125
|
+
getMfaToken,
|
|
123
126
|
getSignedSessionId,
|
|
124
127
|
relayUrl: (_e = (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.waas) === null || _d === void 0 ? void 0 : _d.relayUrl) !== null && _e !== void 0 ? _e : '',
|
|
125
128
|
walletConnector: walletOption.walletConnector,
|
|
@@ -146,7 +146,7 @@ const useVerifyWallet = ({ displaySiweStatement, environmentId, projectSettings,
|
|
|
146
146
|
verifyArgs.sessionPublicKey = keypair.publicKey;
|
|
147
147
|
}
|
|
148
148
|
let verifyResponse;
|
|
149
|
-
if (!user
|
|
149
|
+
if (!user) {
|
|
150
150
|
verifyResponse = wallets.verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken,
|
|
151
151
|
oauth }));
|
|
152
152
|
}
|
|
@@ -142,7 +142,7 @@ const useVerifyWallet = ({ displaySiweStatement, environmentId, projectSettings,
|
|
|
142
142
|
verifyArgs.sessionPublicKey = keypair.publicKey;
|
|
143
143
|
}
|
|
144
144
|
let verifyResponse;
|
|
145
|
-
if (!user
|
|
145
|
+
if (!user) {
|
|
146
146
|
verifyResponse = verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken,
|
|
147
147
|
oauth }));
|
|
148
148
|
}
|
|
@@ -108,7 +108,7 @@ require('../../components/IsBrowser/IsBrowser.cjs');
|
|
|
108
108
|
require('../../components/Popper/Popper/Popper.cjs');
|
|
109
109
|
require('../../components/Popper/PopperContext/PopperContext.cjs');
|
|
110
110
|
|
|
111
|
-
const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
|
|
111
|
+
const MfaChooseDeviceView = ({ isInitialSetup = true, createMfaToken = false, }) => {
|
|
112
112
|
const { handleLogOut } = useDynamicContext.useDynamicContext();
|
|
113
113
|
const { t } = reactI18next.useTranslation();
|
|
114
114
|
const { pushView } = ViewContext.useViewContext();
|
|
@@ -118,7 +118,9 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
|
|
|
118
118
|
pushView('passkey-setup');
|
|
119
119
|
return;
|
|
120
120
|
}
|
|
121
|
-
pushView('passkey-confirm'
|
|
121
|
+
pushView('passkey-confirm', {
|
|
122
|
+
createMfaToken,
|
|
123
|
+
});
|
|
122
124
|
};
|
|
123
125
|
const handleTotpClick = () => {
|
|
124
126
|
if (isInitialSetup) {
|
|
@@ -129,6 +131,7 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
|
|
|
129
131
|
return;
|
|
130
132
|
}
|
|
131
133
|
pushView('mfa-verification', {
|
|
134
|
+
createMfaToken,
|
|
132
135
|
isInitialSetup,
|
|
133
136
|
showBackButton: true,
|
|
134
137
|
type: sdkApiCore.MFADeviceType.Totp,
|
|
@@ -104,7 +104,7 @@ import '../../components/IsBrowser/IsBrowser.js';
|
|
|
104
104
|
import '../../components/Popper/Popper/Popper.js';
|
|
105
105
|
import '../../components/Popper/PopperContext/PopperContext.js';
|
|
106
106
|
|
|
107
|
-
const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
|
|
107
|
+
const MfaChooseDeviceView = ({ isInitialSetup = true, createMfaToken = false, }) => {
|
|
108
108
|
const { handleLogOut } = useDynamicContext();
|
|
109
109
|
const { t } = useTranslation();
|
|
110
110
|
const { pushView } = useViewContext();
|
|
@@ -114,7 +114,9 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
|
|
|
114
114
|
pushView('passkey-setup');
|
|
115
115
|
return;
|
|
116
116
|
}
|
|
117
|
-
pushView('passkey-confirm'
|
|
117
|
+
pushView('passkey-confirm', {
|
|
118
|
+
createMfaToken,
|
|
119
|
+
});
|
|
118
120
|
};
|
|
119
121
|
const handleTotpClick = () => {
|
|
120
122
|
if (isInitialSetup) {
|
|
@@ -125,6 +127,7 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
|
|
|
125
127
|
return;
|
|
126
128
|
}
|
|
127
129
|
pushView('mfa-verification', {
|
|
130
|
+
createMfaToken,
|
|
128
131
|
isInitialSetup,
|
|
129
132
|
showBackButton: true,
|
|
130
133
|
type: MFADeviceType.Totp,
|
|
@@ -107,14 +107,26 @@ require('../../components/IsBrowser/IsBrowser.cjs');
|
|
|
107
107
|
require('../../components/Popper/Popper/Popper.cjs');
|
|
108
108
|
require('../../components/Popper/PopperContext/PopperContext.cjs');
|
|
109
109
|
|
|
110
|
-
const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
|
|
110
|
+
const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, createMfaToken = false, deviceId, }) => {
|
|
111
111
|
const { t } = reactI18next.useTranslation();
|
|
112
112
|
const { clearStackAndPush, pushView, goBack, canGoBack } = ViewContext.useViewContext();
|
|
113
113
|
const { authenticateDevice } = useMfa.useMfa();
|
|
114
114
|
const [code, setCode] = React.useState('');
|
|
115
115
|
const [error, setError] = React.useState();
|
|
116
116
|
const [isRateLimited, setIsRateLimited] = React.useState(false);
|
|
117
|
-
const { data: mfaToken, isLoading } = usePromise.usePromise(() =>
|
|
117
|
+
const { data: mfaToken, isLoading } = usePromise.usePromise(() => {
|
|
118
|
+
const createMfaTokenOptions = createMfaToken
|
|
119
|
+
? {
|
|
120
|
+
singleUse: true,
|
|
121
|
+
}
|
|
122
|
+
: undefined;
|
|
123
|
+
return authenticateDevice({
|
|
124
|
+
code,
|
|
125
|
+
createMfaToken: createMfaTokenOptions,
|
|
126
|
+
deviceId,
|
|
127
|
+
type,
|
|
128
|
+
});
|
|
129
|
+
}, {
|
|
118
130
|
deps: [code],
|
|
119
131
|
enabled: (code === null || code === void 0 ? void 0 : code.length) === 6,
|
|
120
132
|
initialData: undefined,
|
|
@@ -143,7 +155,10 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
|
|
|
143
155
|
setCode(code);
|
|
144
156
|
};
|
|
145
157
|
const onClickBack = canGoBack && showBackButton ? goBack : undefined;
|
|
146
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
158
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
159
|
+
createMfaToken,
|
|
160
|
+
isInitialSetup,
|
|
161
|
+
}), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
|
|
147
162
|
};
|
|
148
163
|
|
|
149
164
|
exports.MfaVerificationView = MfaVerificationView;
|
|
@@ -5,5 +5,6 @@ export type MfaVerificationViewProps = {
|
|
|
5
5
|
type?: MFADeviceType;
|
|
6
6
|
isInitialSetup?: boolean;
|
|
7
7
|
showBackButton?: boolean;
|
|
8
|
+
createMfaToken?: boolean;
|
|
8
9
|
};
|
|
9
|
-
export declare const MfaVerificationView: ({ type, isInitialSetup, showBackButton, deviceId, }: MfaVerificationViewProps) => JSX.Element;
|
|
10
|
+
export declare const MfaVerificationView: ({ type, isInitialSetup, showBackButton, createMfaToken, deviceId, }: MfaVerificationViewProps) => JSX.Element;
|
|
@@ -103,14 +103,26 @@ import '../../components/IsBrowser/IsBrowser.js';
|
|
|
103
103
|
import '../../components/Popper/Popper/Popper.js';
|
|
104
104
|
import '../../components/Popper/PopperContext/PopperContext.js';
|
|
105
105
|
|
|
106
|
-
const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
|
|
106
|
+
const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, createMfaToken = false, deviceId, }) => {
|
|
107
107
|
const { t } = useTranslation();
|
|
108
108
|
const { clearStackAndPush, pushView, goBack, canGoBack } = useViewContext();
|
|
109
109
|
const { authenticateDevice } = useMfa();
|
|
110
110
|
const [code, setCode] = useState('');
|
|
111
111
|
const [error, setError] = useState();
|
|
112
112
|
const [isRateLimited, setIsRateLimited] = useState(false);
|
|
113
|
-
const { data: mfaToken, isLoading } = usePromise(() =>
|
|
113
|
+
const { data: mfaToken, isLoading } = usePromise(() => {
|
|
114
|
+
const createMfaTokenOptions = createMfaToken
|
|
115
|
+
? {
|
|
116
|
+
singleUse: true,
|
|
117
|
+
}
|
|
118
|
+
: undefined;
|
|
119
|
+
return authenticateDevice({
|
|
120
|
+
code,
|
|
121
|
+
createMfaToken: createMfaTokenOptions,
|
|
122
|
+
deviceId,
|
|
123
|
+
type,
|
|
124
|
+
});
|
|
125
|
+
}, {
|
|
114
126
|
deps: [code],
|
|
115
127
|
enabled: (code === null || code === void 0 ? void 0 : code.length) === 6,
|
|
116
128
|
initialData: undefined,
|
|
@@ -139,7 +151,10 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
|
|
|
139
151
|
setCode(code);
|
|
140
152
|
};
|
|
141
153
|
const onClickBack = canGoBack && showBackButton ? goBack : undefined;
|
|
142
|
-
return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
154
|
+
return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
155
|
+
createMfaToken,
|
|
156
|
+
isInitialSetup,
|
|
157
|
+
}), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
|
|
143
158
|
};
|
|
144
159
|
|
|
145
160
|
export { MfaVerificationView };
|
|
@@ -111,13 +111,25 @@ require('../../../components/IsBrowser/IsBrowser.cjs');
|
|
|
111
111
|
require('../../../components/Popper/Popper/Popper.cjs');
|
|
112
112
|
require('../../../components/Popper/PopperContext/PopperContext.cjs');
|
|
113
113
|
|
|
114
|
-
const ConfirmPasskeyView = () => {
|
|
114
|
+
const ConfirmPasskeyView = ({ createMfaToken = false, }) => {
|
|
115
115
|
const { t } = reactI18next.useTranslation();
|
|
116
116
|
const { pushView } = ViewContext.useViewContext();
|
|
117
117
|
const authenticatePasskeyMFA = useAuthenticatePasskeyMFA.useAuthenticatePasskeyMFA();
|
|
118
|
-
const { error, isLoading } = usePromise.usePromise(
|
|
118
|
+
const { error, isLoading } = usePromise.usePromise(() => {
|
|
119
|
+
const createMfaTokenOptions = createMfaToken
|
|
120
|
+
? {
|
|
121
|
+
singleUse: true,
|
|
122
|
+
}
|
|
123
|
+
: undefined;
|
|
124
|
+
return authenticatePasskeyMFA({
|
|
125
|
+
createMfaToken: createMfaTokenOptions,
|
|
126
|
+
});
|
|
127
|
+
});
|
|
119
128
|
const errorMessage = useGetPasskeyErrorMessage.useGetPasskeyErrorMessage(error);
|
|
120
|
-
return (jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view'), children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'confirm-passkey-view__header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view__content'), children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: fingerprint.ReactComponent, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames.classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsxRuntime.jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
129
|
+
return (jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view'), children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'confirm-passkey-view__header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view__content'), children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: fingerprint.ReactComponent, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames.classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsxRuntime.jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
130
|
+
createMfaToken,
|
|
131
|
+
isInitialSetup: false,
|
|
132
|
+
}), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));
|
|
121
133
|
};
|
|
122
134
|
|
|
123
135
|
exports.ConfirmPasskeyView = ConfirmPasskeyView;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
type ConfirmPasskeyViewProps = {
|
|
3
|
+
createMfaToken?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare const ConfirmPasskeyView: ({ createMfaToken, }: ConfirmPasskeyViewProps) => JSX.Element;
|
|
6
|
+
export {};
|
|
@@ -107,13 +107,25 @@ import '../../../components/IsBrowser/IsBrowser.js';
|
|
|
107
107
|
import '../../../components/Popper/Popper/Popper.js';
|
|
108
108
|
import '../../../components/Popper/PopperContext/PopperContext.js';
|
|
109
109
|
|
|
110
|
-
const ConfirmPasskeyView = () => {
|
|
110
|
+
const ConfirmPasskeyView = ({ createMfaToken = false, }) => {
|
|
111
111
|
const { t } = useTranslation();
|
|
112
112
|
const { pushView } = useViewContext();
|
|
113
113
|
const authenticatePasskeyMFA = useAuthenticatePasskeyMFA();
|
|
114
|
-
const { error, isLoading } = usePromise(
|
|
114
|
+
const { error, isLoading } = usePromise(() => {
|
|
115
|
+
const createMfaTokenOptions = createMfaToken
|
|
116
|
+
? {
|
|
117
|
+
singleUse: true,
|
|
118
|
+
}
|
|
119
|
+
: undefined;
|
|
120
|
+
return authenticatePasskeyMFA({
|
|
121
|
+
createMfaToken: createMfaTokenOptions,
|
|
122
|
+
});
|
|
123
|
+
});
|
|
115
124
|
const errorMessage = useGetPasskeyErrorMessage(error);
|
|
116
|
-
return (jsxs("div", { className: classNames('confirm-passkey-view'), children: [jsx(ModalHeader, { alignContent: 'bottom', children: jsx("div", { className: 'confirm-passkey-view__header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsx(ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxs("div", { className: classNames('confirm-passkey-view__content'), children: [jsx(IconWithSpinner, { Icon: SvgFingerprint, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsx(TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
125
|
+
return (jsxs("div", { className: classNames('confirm-passkey-view'), children: [jsx(ModalHeader, { alignContent: 'bottom', children: jsx("div", { className: 'confirm-passkey-view__header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsx(ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxs("div", { className: classNames('confirm-passkey-view__content'), children: [jsx(IconWithSpinner, { Icon: SvgFingerprint, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsx(TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
|
|
126
|
+
createMfaToken,
|
|
127
|
+
isInitialSetup: false,
|
|
128
|
+
}), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));
|
|
117
129
|
};
|
|
118
130
|
|
|
119
131
|
export { ConfirmPasskeyView };
|
|
@@ -56,7 +56,7 @@ export declare const viewToComponentMap: {
|
|
|
56
56
|
uri: string;
|
|
57
57
|
secret: string;
|
|
58
58
|
}) => JSX.Element;
|
|
59
|
-
'mfa-verification': ({ type, isInitialSetup, showBackButton, deviceId, }: import("./MfaVerificationView").MfaVerificationViewProps) => JSX.Element;
|
|
59
|
+
'mfa-verification': ({ type, isInitialSetup, showBackButton, createMfaToken, deviceId, }: import("./MfaVerificationView").MfaVerificationViewProps) => JSX.Element;
|
|
60
60
|
'mobile-wallet-redirect-view': import("react").FC<{
|
|
61
61
|
onRetry: VoidFunction;
|
|
62
62
|
connector?: import("dist/packages/wallet-connector-core/src").WalletConnector | undefined;
|
|
@@ -68,7 +68,9 @@ export declare const viewToComponentMap: {
|
|
|
68
68
|
'network-not-supported-manual': import("react").FC;
|
|
69
69
|
'no-access': () => JSX.Element;
|
|
70
70
|
'no-qr-not-installed': () => JSX.Element | null;
|
|
71
|
-
'passkey-confirm': (
|
|
71
|
+
'passkey-confirm': ({ createMfaToken, }: {
|
|
72
|
+
createMfaToken?: boolean | undefined;
|
|
73
|
+
}) => JSX.Element;
|
|
72
74
|
'passkey-intro': import("react").FC<{
|
|
73
75
|
chains?: import("@dynamic-labs/sdk-api-core").EmbeddedWalletChainEnum[] | undefined;
|
|
74
76
|
}>;
|