diff --git a/docs/sdk/pnp/web/adapters/auth.mdx b/docs/sdk/pnp/web/adapters/auth.mdx index ea890e4e0..a4330bfe5 100644 --- a/docs/sdk/pnp/web/adapters/auth.mdx +++ b/docs/sdk/pnp/web/adapters/auth.mdx @@ -19,6 +19,7 @@ import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options import CustomAuthenticationCoreExample from "@site/src/common/sdk/pnp/web/_custom-authentication-core-example.mdx"; import CustomAuthenticationWeb3AuthExample from "@site/src/common/sdk/pnp/web/_custom-authentication-web3auth-example.mdx"; import ConnectToExample from "@site/src/common/sdk/pnp/web/_connect-to-example.mdx"; +import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx"; ## [`@web3auth/auth-adapter`](https://npmjs.com/package/@web3auth/auth-adapter) @@ -144,10 +145,14 @@ their order. Currently, there are four values for `mfaLevel`: We offer the following backup factors under `mfaSettings`: + + - `deviceShareFactor`, - `backUpShareFactor`, -- `socialBackupFactor`, and -- `passwordFactor`. +- `socialBackupFactor`, +- `passwordFactor`, +- `authenticatorFactor`, and +- `passkeysFactor`. ### Example @@ -179,6 +184,16 @@ const authAdapter = new AuthAdapter({ priority: 4, mandatory: false, }, + authenticatorFactor: { + enable: true, + priority: 5, + mandatory: false, + }, + passkeysFactor: { + enable: true, + priority: 6, + mandatory: false, + }, }, }, }); diff --git a/docs/sdk/pnp/web/modal/mfa.mdx b/docs/sdk/pnp/web/modal/mfa.mdx index fa7915c14..bbdaba27a 100644 --- a/docs/sdk/pnp/web/modal/mfa.mdx +++ b/docs/sdk/pnp/web/modal/mfa.mdx @@ -34,7 +34,7 @@ enabled MFA on other dApps. This is because MFA cannot be turned off once it is ::: - +{/* */} ## Installing Auth Adapter diff --git a/docs/sdk/pnp/web/modal/usage.mdx b/docs/sdk/pnp/web/modal/usage.mdx index 300c75366..ced92e7df 100644 --- a/docs/sdk/pnp/web/modal/usage.mdx +++ b/docs/sdk/pnp/web/modal/usage.mdx @@ -46,6 +46,8 @@ Finally, with the Wallet Services Plugin, you can enable additional functionalit - `showCheckout()` - Initiate Topup for the user. - `showWalletConnectScanner()` - Show WalletConnect QR Code Scanner. - `showWalletUI()` - Show Embedded Wallet UI. +- `showSwap()` - Show Swap UI. +- `showTransactionConfirmation()` - Show Transaction Confirmation UI. ## Logging in the User @@ -148,7 +150,12 @@ local currency and specify the token to top up their wallet. You can use the `showWalletUI` function to show the templated wallet UI services. [Learn more about `showWalletUI`](/docs/sdk/pnp/web/wallet-services/usage#show-wallet-embedded-ui). -### Transaction Confirmatons Screen +### Swap Screen + +You can use the `showSwap` function to show the Swap UI. +[Learn more about `showSwap`](/docs/sdk/pnp/web/wallet-services/usage#swap). + +### Transaction Confirmation Screen You can use the wallet services provider to integrate prebuilt transaction confirmation screens into your application. Upon successful completion, you can retrieve the signature for the request. diff --git a/docs/sdk/pnp/web/no-modal/initialize.mdx b/docs/sdk/pnp/web/no-modal/initialize.mdx index 67b0106cc..36e3f531c 100644 --- a/docs/sdk/pnp/web/no-modal/initialize.mdx +++ b/docs/sdk/pnp/web/no-modal/initialize.mdx @@ -172,14 +172,14 @@ const web3auth = new Web3AuthNoModal({ ### Whitelabeling -Within the `uiConfig` parameter, you can configure the Web3Auth Modal according to your +Within the `uiConfig` parameter, you can configure the Web3Auth NoModal according to your application's requirements. It accepts a `WhiteLabelData` object. :::tip This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more in-depth about how you can Whitelabel your application with Web3Auth Plug and Play Modal SDK, have a -look at our [Whitelabeling SDK Reference](/sdk/pnp/web/modal/whitelabel). +look at our [Whitelabeling SDK Reference](/sdk/pnp/web/no-modal/whitelabel). ::: diff --git a/src/common/docs/_mfa_minimum_plan.mdx b/src/common/docs/_mfa_minimum_plan.mdx index 3d4f5d16f..e981b5807 100644 --- a/src/common/docs/_mfa_minimum_plan.mdx +++ b/src/common/docs/_mfa_minimum_plan.mdx @@ -1,7 +1,7 @@ :::note -This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this -SDK in a production environment is the **SCALE Plan**. You can use this feature in `sapphire_devnet` -for free. +`mfaSettings` is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to +use this SDK in a production environment is the **SCALE Plan**. You can use this feature in +`sapphire_devnet` for free. ::: diff --git a/src/common/sdk/pnp/web/_auth-adapter-intro.mdx b/src/common/sdk/pnp/web/_auth-adapter-intro.mdx index 25d7aad25..c181caf96 100644 --- a/src/common/sdk/pnp/web/_auth-adapter-intro.mdx +++ b/src/common/sdk/pnp/web/_auth-adapter-intro.mdx @@ -72,6 +72,8 @@ For customising the MFA settings, you need to pass on `mfaSettings` configuratio Read more about `mfaSettings` in the [Multi Factor Authentication Section](./mfa) SDK Reference. +**Note: `mfaSettings` is available for SCALE and above plan users.** + ::: ```tsx diff --git a/src/common/sdk/pnp/web/_auth-adapter-settings.mdx b/src/common/sdk/pnp/web/_auth-adapter-settings.mdx index 1f8de3a42..d6d2b505a 100644 --- a/src/common/sdk/pnp/web/_auth-adapter-settings.mdx +++ b/src/common/sdk/pnp/web/_auth-adapter-settings.mdx @@ -12,25 +12,20 @@ import Tabs from "@theme/Tabs"; | Variable | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `clientId` | You can get your clientId/projectId by registering your dapp on [developer dashboard](https://dashboard.web3auth.io) | -| `network` | network specifies the web3auth network to be used. | -| `buildEnv` | This parameter will be used to change the build environment of auth sdk. | -| `redirectUrl` | redirectUrl is the dapp's url where user will be redirected after login. Register this url at [developer dashboard](https://dashboard.web3auth.io) else initialization will give error. | -| `uxMode` | two uxModes are supported:- - `'POPUP'`: In this uxMode, a popup will be shown to user for login. - `'REDIRECT'`: In this uxMode, user will be redirected to a new window tab for login. Use of `'REDIRECT'` mode is recommended in browsers where popups might get blocked. | +| `clientId` | The unique identifier for your application. Obtain this by registering your dapp in the [Web3Auth Dashboard](https://dashboard.web3auth.io) | +| `network` | The Web3Auth network to be used. | +| `buildEnv` | This parameter will be used to change the build environment of auth sdk, mainly for testing purposes. default is `production`. | +| `redirectUrl` | The URL where users will be redirected after login. | +| `uxMode` | Two uxModes supported are:- `'popup'`: In this uxMode, a popup will be shown to user for login. Use `'redirect'`: In this uxMode, user will be redirected to a new window tab for login. Use of `'redirect'` mode is recommended in browsers where popups might get blocked. | | `replaceUrlOnRedirect` | replaceUrlOnRedirect removes the params from the redirected url after login | | `originData` | originData is used to verify the origin of dapp by iframe. You don't have to pass originData explicitly if you have registered your dapp at [developer dashboard](https://dashboard.web3auth.io). originData contains a signature of dapp's origin url which is generated using project's secret. | | `loginConfig` | loginConfig enables you to pass your own login verifiers configuration for various loginProviders. loginConfig is key value map where each key should be a valid loginProvider and value should be custom configuration for that loginProvider. You can deploy your own verifiers from [developer dashboard](https://dashboard.web3auth.io) to use here. | -| `webauthnTransports` | webauthnTransport enables you to configure the transport type user can use for saving their share. This is only available for v1 users. | -| `sdkUrl` | sdkUrl is for internal development use only and is used to override the `network` parameter. | -| `dashboardUrl` | dashboardUrl is for internal development use only and is used to override the `buildEnv` parameter. | -| `whiteLabel` | options for whitelabling default auth modal. | +| `whiteLabel` | options for whitelabling default auth modal screens. | | `storageServerUrl` | Specify a custom storage server url | -| `storageKey` | setting to "local" will persist social login session across browser tabs. How long should a login session last at a minimum in seconds | -| `sessionTime` | How long should a login session last at a minimum in seconds | -| `sessionNamespace` | This option is for internal use only in torus wallet and has no effect on user's login on other dapps. | +| `storageKey` | setting to "local" will persist social login session across browser tabs. | +| `sessionTime` | This is the sessionTime for the login session | | `mfaSettings` | This parameter will be used to enable mfa factors and set priority on UI listing. List of factors available `deviceShareFactor` \| `backUpShareFactor` \| `socialBackupFactor` \| `passwordFactor` \| `passkeysFactor` \| `authenticatorFactor` | -| `useMpc` | This parameter will be used to use auth mpc | -| `useCoreKitKey` | This parameter will be used to select core kit key. | +| `useCoreKitKey` | Setting this boolean value to true will get you the core kit key. | diff --git a/src/common/sdk/pnp/web/_auth-login-settings.mdx b/src/common/sdk/pnp/web/_auth-login-settings.mdx index c85c4b804..0ee3632e4 100644 --- a/src/common/sdk/pnp/web/_auth-login-settings.mdx +++ b/src/common/sdk/pnp/web/_auth-login-settings.mdx @@ -14,7 +14,7 @@ import Tabs from "@theme/Tabs"; | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `loginProvider` | Sets the OAuth login method to be used. You can use any of the valid loginProvider from the supported list.

The list of available options: `google`, `facebook`, `reddit`, `discord`, `twitch`, `apple`, `line`, `github`, `kakao`, `linkedin`, `twitter`, `weibo`, `wechat`, `email_passwordless`, `sms_passwordless`, `jwt` | | `mfaLevel?` | You can set the `mfaLevel` to customize when mfa screen should be shown to user. It currently accepts 4 values:
  • **`'default'`** Setting mfa level to `default` will present mfa screen to user on every third login.
  • **`'optional'`** Setting mfa level to `default` will present mfa screen to user on every login but user can skip it.
  • **`'mandatory'`** Setting mfa level to `mandatory` will make it mandatory for user to setup mfa after login.
  • **`'none'`** Setting mfa level to `none` will make the user skip the mfa setup screen
| -| `extraLoginOptions?` | This can be used to pass standard oauth login options to loginProvider. For ex: you will have to pass `login_hint` as user's email and `domain` as your app domain in `extraLoginOptions` while using `email_passwordless` loginProvider. It accepts `ExtraLoginOptions` as a value. | +| `extraLoginOptions?` | This can be used to pass standard oauth login options to loginProvider. For ex: you will have to pass `login_hint` as user's email or phone number and `domain` as your app domain in `extraLoginOptions` while using `email_passwordless` or `sms_passwordless` loginProvider. It accepts `ExtraLoginOptions` as a value. | | `dappShare?` | Custom logins can get a dApp share returned to them post successful login. This is useful if the dapps want to use this share to allow users to login seamlessly. `dappShare` is a 24 word seed phrase. It accepts `string` as a value. | | `curve?` | This curve will be used to determine the public key encoded in the jwt token which returned in `getUserInfo` function after user login. You can use that public key from jwt token as a unique user identifier in your backend.
  • `'secp256k1'`: secp256k1 based pub key is added as a wallet public key in jwt token to use.
  • `'ed25519'`: ed25519 based pub key is added as a wallet public key in jwt token to use.
Note: This parameter won't change format of private key returned by auth. Private key returned by auth is always `secp256k1`. It accepts `SUPPORTED_KEY_CURVES_TYPE` as a value. | | `appState?` | Any custom state you wish to pass along. This will be returned to you post redirect. Use this to store data that you want to be available to the dApp after login. It accepts `string` as a value. | diff --git a/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx b/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx index cbf07fb0e..b8d5780c1 100644 --- a/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx +++ b/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx @@ -4,5 +4,7 @@ import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; const walletServicesPlugin = new WalletServicesPlugin(); web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth -await walletServicesPlugin.showCheckout(); // Opens the TopUp modal +await walletServicesPlugin.showCheckout({ + show: true, +}); // Opens the TopUp modal ``` diff --git a/src/common/sdk/pnp/web/_plugin-show-swap.mdx b/src/common/sdk/pnp/web/_plugin-show-swap.mdx index 6c57f5618..a9ac2f278 100644 --- a/src/common/sdk/pnp/web/_plugin-show-swap.mdx +++ b/src/common/sdk/pnp/web/_plugin-show-swap.mdx @@ -4,5 +4,7 @@ import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; const walletServicesPlugin = new WalletServicesPlugin(); web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth -await walletServicesPlugin.showSwap(); // Opens the Swap Modal +await walletServicesPlugin.showSwap({ + show: true, +}); // Opens the Swap Modal ``` diff --git a/src/common/sdk/pnp/web/_plugin-show-wallet-ui.mdx b/src/common/sdk/pnp/web/_plugin-show-wallet-ui.mdx index e11f1bff2..fbb0810d7 100644 --- a/src/common/sdk/pnp/web/_plugin-show-wallet-ui.mdx +++ b/src/common/sdk/pnp/web/_plugin-show-wallet-ui.mdx @@ -4,5 +4,7 @@ import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; const walletServicesPlugin = new WalletServicesPlugin(); web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth -await walletServicesPlugin.showWalletUi(); // Opens the TopUp modal +await walletServicesPlugin.showWalletUi({ + show: true, +}); // Opens the TopUp modal ``` diff --git a/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx b/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx index 9b0834f13..c9c9c22cb 100644 --- a/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx +++ b/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx @@ -7,5 +7,7 @@ import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin"; const walletServicesPlugin = new WalletServicesPlugin(); web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth -await walletServicesPlugin.showWalletConnectScanner(); +await walletServicesPlugin.showWalletConnectScanner({ + show: true, +}); ```