diff --git a/.vscode/settings.json b/.vscode/settings.json
index a8c1c4582..401ab2df2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -61,5 +61,8 @@
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[html]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
diff --git a/docs/README.mdx b/docs/README.mdx
index 20f1fbb72..25870cddb 100644
--- a/docs/README.mdx
+++ b/docs/README.mdx
@@ -3,7 +3,7 @@ title: Introduction
slug: /
hide_table_of_contents: true
hide_title: true
-
+sidebar_label: Introduction
image: "images/docs-meta-cards/documentation-card.png"
description: "Introduction | Documentation - Web3Auth"
---
diff --git a/docs/auth-provider-setup/aggregate-verifier.mdx b/docs/auth-provider-setup/aggregate-verifier.mdx
deleted file mode 100644
index 57725992d..000000000
--- a/docs/auth-provider-setup/aggregate-verifier.mdx
+++ /dev/null
@@ -1,290 +0,0 @@
----
-title: Creating Aggregate Verifier on Web3Auth Dashboard
-sidebar_label: Aggregate Multiple Logins
-description:
- "Creating Aggregate Verifier on the Web3Auth Dashboard | Auth Provider Setup | Documentation -
- Web3Auth"
-image: "images/docs-meta-cards/documentation-card.png"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-Developers can create an `Aggregate Multiple Provider` verifier from the Web3Auth Dashboard by
-combining multiple login methods. This enables them to create a verifier that retrieves the same
-address for their user, regardless of the login providers used. For example, developers can combine
-a `Google` and `Email Passwordless` login, or a `Google` and `GitHub` login via Auth0, to access the
-same address for their user.
-
-:::note
-
-Access to creating a verifier is gated. Therefore, creating an aggregate verifier
-[**requires a minimum Growth Plan**](https://web3auth.io/pricing.html).
-
-You can utilize this feature for projects on `sapphire_devnet` network for free.
-
-:::
-
-## Understanding Login Combinations
-
-Before setting up an aggregate verifier, it's important to understand which login methods can be
-combined. The following table shows all possible combinations of login providers.
-
-:::tip Understanding the Table
-
-- **Rows**: First sub-verifier chosen during aggregate verifier creation
-- **Columns**: Available options for the second sub-verifier
-- ✅ = Supported combination
-- ❌ = Unsupported combination
-
-:::
-
-| First Sub-Verifier | Google | Twitch | Discord | Email Passwordless | Auth0\* |
-| :----------------- | :----: | :----: | :-----: | :----------------: | :-----: |
-| **Google** | ✅ | ❌ | ❌ | ✅ | ✅ |
-| **Twitch** | ❌ | ✅ | ❌ | ❌ | ❌ |
-| **Discord** | ❌ | ❌ | ✅ | ❌ | ❌ |
-| **Email P'less** | ✅ | ❌ | ❌ | ✅ | ✅ |
-| **Auth0\*** | ✅ | ❌ | ❌ | ✅ | ✅ |
-
-\*Auth0 column also includes Custom JWT, AWS Cognito, and Firebase providers when the JWT verifier
-identifier is email.
-
-:::info Important
-
-- **Twitch** and **Discord** can only be aggregated with themselves (self-aggregate).
-- **Google** and **Email Passwordless** can always be aggregated with each other.
-- **Google** and **Email Passwordless** can also be aggregated with Auth0, Custom JWT, AWS Cognito,
- and Firebase providers, but only when the JWT user identifier is set to email.
-
-:::
-
-Some login methods cannot be combined with others because they lack a **common identifier**, such as
-an email. This identifier is crucial for connecting user accounts across different authentication
-methods and ensuring reliable user recognition when switching between login methods.
-
-### Auth0 Special Capabilities
-
-When using Auth0 as a verifier, you have access to a wide range of authentication methods. After
-selecting Auth0, you can choose from the following **Authentication Types**:
-
-
-
-
-#### Social Logins
-
-- Google
-- Twitter
-- Reddit
-- Apple
-- GitHub
-- LinkedIn
-
-
-
-## Setting up an Aggregate Verifier
-
-
-
-1. Give a unique name to your verifier in the `Verifier Identifier` field. e.g.,
- `web3auth-aggregate-verifier`.
-
-1. Select `Aggregate Multiple Providers` as the Login provider.
- 
-
-1. Click on `Add Sub Verifiers` to add a new sub-verifier.
- 
-
-1. Select any social login provider from the list to start with. Here we're selecting `Google`.
-
- Paste the **Client ID** from the Google App to the `Client ID` field and click on
- `Add Sub Verifiers`.
- 
-
-1. Next, create the second sub-verifier by clicking on the `Add Sub Verifiers` button.
-
-1. This time, you can select Social Login Providers like `Auth0` or `Google`, or `Custom Providers`
- from the dropdown list. We're selecting `Auth0` in this example.
- 
-
- :::note You can combine two or more Google logins as needed for web and mobile apps. :::
-
-1. Select the `Authentication Type` based on your application need from the dropdown. We're
- selecting `GitHub` in this example.
- 
-
-1. Next, select `Email` as the **JWT Verifier ID** and enter the `Auth0 Client ID` and
- `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application
- [here](https://auth0.com/docs/quickstart/webapp/).
- 
- 
-
- :::info NOTE
-
- 1. Add the
- [GitHub Social Connection](https://marketplace.auth0.com/integrations/github-social-connection)
- to your Auth0 application.
- 2. One has to request an email from the user while setting up the GitHub Social Connection on the
- Auth0 Dashboard.
- 
-
- :::
-
-1. Similarly, create a third sub-verifier for `Email Passwordless`. Click on `Social Login Provider`
- and then select `Email Passwordless` as the Login provider from the dropdown list
- 
-
-1. Finally, click on `Create` to deploy the verifier.
-
- It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive
- an email and the dashboard will display the 'Live' status for the verifier.
-
-:::note
-
-You can aggregate two or more verifiers.
-
-:::
-
-## Implementation Example
-
-```tsx
-import { Web3AuthNoModal } from "@web3auth/no-modal";
-import { AuthAdapter } from "@web3auth/auth-adapter";
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-import { getEvmChainConfig } from "@web3auth/base";
-
-const clientId =
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get it from https://dashboard.web3auth.io by creating a Plug n Play project.
-
-// Get custom chain configs for your chain from https://web3auth.io/docs/connect-blockchain
-const chainConfig = getEvmChainConfig(0x1, clientId)!;
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
-
-const web3auth = new Web3AuthNoModal({
- clientId,
- web3AuthNetwork: "sapphire_mainnet",
- privateKeyProvider: privateKeyProvider,
-});
-
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // Google login
- google: {
- verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. aggregate-sapphire
- verifierSubIdentifier: "w3a-google", // Pass the Sub-Verifier here. eg w3a-google
- typeOfLogin: "google", // Pass the type of login provider.
- clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass the Google `Client ID` here.
- },
- // GitHub Login via Auth0
- github: {
- verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. aggregate-sapphire
- verifierSubIdentifier: "w3a-a0-github", // Pass the Sub-Verifier here. eg w3a-a0-github
- typeOfLogin: "jwt", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
- clientId: "hiLqaop0amgzCC0AXo4w0rrG9abuJTdu", // Pass the Auth0 `Client ID` here.
- },
- // Email Password Login via Auth0
- email_passwordless: {
- verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. aggregate-sapphire
- verifierSubIdentifier: "w3a-email-passwordless", // Pass the Sub-Verifier here. eg w3a-email-passwordless
- typeOfLogin: "email_passwordless", // Pass the type of login provider.
- clientId, // Pass the Web3Auth `Client ID` here.
- },
- },
- },
- privateKeyProvider,
-});
-
-web3auth.configureAdapter(authAdapter);
-
-// Initialize
-await web3auth.init();
-
-// When user clicks Google button, use this to Login with Google
-const web3authProvider = await web3auth.connectTo("auth", {
- loginProvider: "google",
-});
-
-// When user clicks Email Passwordless button, use this to Login with Email Passwordless via Auth0
-const web3authProvider = await web3auth.connectTo("auth", {
- loginProvider: "email_passwordless",
- extraLoginOptions: {
- login_hint: email.trim(),
- },
-});
-
-// When user clicks GitHub button, use this to Login with GitHub via Auth0
-const web3authProvider = await web3auth.connectTo("auth", {
- loginProvider: "github",
- extraLoginOptions: {
- domain: "https://web3auth.au.auth0.com", // Pass the Auth0 Domain here, eg. https://web3auth.au.auth0.com
- // This corresponds to the field inside jwt which must be used to uniquely identify the user.
- verifierIdField: "email", // This is mapped b/w google and github logins.
- isVerifierIdCaseSensitive: false,
- },
-});
-```
-
-:::info Example app
-
-Check out the
-[**full example on GitHub**](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/custom-authentication/aggregate-verifier-examples/auth0-google-aggregate-no-modal-example).
-
-:::
-
-
diff --git a/docs/auth-provider-setup/auth-provider-setup.mdx b/docs/auth-provider-setup/auth-provider-setup.mdx
deleted file mode 100644
index 3561eed5e..000000000
--- a/docs/auth-provider-setup/auth-provider-setup.mdx
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: Auth Provider Setup
-sidebar_label: Overview
-image: "images/docs-meta-cards/documentation-card.png"
-description: "Auth Provider Setup | Documentation - Web3Auth"
----
-
-import BYOCustomJWTTiles from "@site/src/common/docs/_byo-custom-jwt-providers.mdx";
-import FederatedTiles from "@site/src/common/docs/_federated-providers.mdx";
-import SocialTiles from "@site/src/common/docs/_social-login-providers.mdx";
-
-Setting up authentication providers within Web3Auth is a crucial step in configuring the
-authentication flow for your application. This process involves creating a verifier, a unique
-identifier that Web3Auth uses to interact with the OAuth provider and validate user authentication
-requests. Verifiers play a critical role in ensuring secure and seamless authentication by
-leveraging the Web3Auth Auth Network nodes.
-
-## Understanding Verifiers
-
-A verifier is essentially a configuration that contains information about the OAuth provider you've
-chosen for your application. It acts as a bridge between Web3Auth and the OAuth provider, enabling
-the Web3Auth Auth Network nodes to query and validate the JWT tokens effectively.
-
-:::tip Get Started
-
-Head over to the [**Create Verifier**](./verifiers.mdx) page to understand how to create a verifier
-with Web3Auth for your application.
-
-:::
-
-Web3Auth's design accommodates a variety of authentication scenarios through three primary verifier
-types, each catering to different integration needs and offering distinct advantages:
-
-### Default Verifiers
-
-Default Verifiers are included with the Web3Auth Plug and Play SDKs to simplify the process of
-creating and managing verifiers. We provide default verifiers for popular social login providers
-like Google, Facebook, Twitter, and more. These pre-configured default verifiers are ready to use,
-making it easy and quick to get started with Web3Auth.
-
-However, it is highly recommended to create your own verifiers for your application, as they offer
-more flexibility and control over the authentication flow. Some other caveats of using default
-verifiers are:
-
-- **Migration from Default Verifiers to Custom Verifiers is not possible**: Once the keys are
- assigned for a particular verifier, they cannot be changed.
-- **Aggregation of the default verifier is not possible**: If you want to aggregate two/more social
- providers, like Google and Email Passwordless, you will need to create an Aggregate Verifier,
- which is not possible if you start with:
- - a Default Verifier
- - Social Login Verifiers
- - Custom Providers
-
-### Social Login Verifiers
-
-These verifiers make it easier to integrate popular social login options such as Google, Facebook,
-Discord, Twitch, and a variety of additional social connections through Auth0. This simple approach
-is particularly useful for applications using our services to manage login processes, making setup
-hassle-free for both developers and users.
-
-It's important to note that the Social Login Verifiers can also be used with your own custom login
-flows. In this case, you would handle the authentication on your own server and then pass the JWT
-token to Web3Auth for verification.
-
-### Custom Verifiers
-
-If you require more flexibility or need to incorporate authentication services or social connections
-that are not directly supported within Web3Auth's dashboard, you can create a custom verifiers.
-Whether you have your own backend authentication system or you're connecting to social login
-providers that don't return an idToken, custom verifiers allow you to manually configure your
-authentication flow. This setup is particularly beneficial for applications that integrate federated
-identity providers such as Firebase, AWS Cognito, or Okta, and even your own custom JWT provider.
-When setting up the custom verifier, you will need the JWKS Endpoint.
-
-### Aggregate Verifiers
-
-In the digital landscape, users often need to verify their identity using multiple login providers.
-However, if you have to use multiple logins, you'll need to create multiple verifiers. The
-[wallet generated for each user is specific to a verifier](/troubleshooting/different-private-key#verifier).
-This means that different keys will be returned for different login methods.
-
-To address this issue, aggregate verifiers allow for a unified identity across different login
-mechanisms. For example, combining Google and Email Passwordless logins under a single verifier
-ensures that users receive the same private key regardless of the login method they choose. These
-login methods should share the same unique identifier, such as an email or username, that is
-specific to the user.
-
-This process involves creating an aggregate verifier, followed by sub-verifiers for each login
-method.
-
-:::info
-
-Learn how to create an [Aggregate Verifier](/auth-provider-setup/aggregate-verifier).
-
-:::
-
-:::tip
-
-- It is advisable to create an `Aggregate Multiple Providers` verifier even if you're using just one
- login method for now. This will help you in the future if you want to add more login methods to
- use the [**Aggregate Verifier**](/auth-provider-setup/aggregate-verifier) feature of Web3Auth in
- your application.
-- This is because we can't migrate from a single verifier(Social/Custom login methods) to an
- aggregate verifier without changing the wallet addresses.
-
-:::
-
-## Setting Up Auth with Web3Auth
-
-Integrating an OAuth provider with Web3Auth involves a few key steps, from selecting your provider
-to creating the verifier and integrating it into your application. Here's a broad overview of the
-process:
-
-1. **Select the OAuth Provider:** Choose an OAuth provider supported by Web3Auth, such as Google,
- Facebook, Twitter, or any other provider that fits your application's requirements that returns
- an id_token in JWT format.
-
-2. **Create a Verifier:** Using the Web3Auth Dashboard, create a new verifier for your selected
- OAuth provider. This involves specifying the provider details and any additional configuration
- required by the provider.
-
- Once your verifier is configured, it's deployed to Web3Auth Auth Network. This deployment process
- registers your verifier, making it accessible to the Auth Network nodes for JWT token
- verification. This process generally takes around 5-10 minutes to complete.
-
-3. **Integrate with Your Application:** Finally, integrate the verifier into your application's
- authentication flow. This typically involves utilizing Web3Auth SDKs and specifying the verifier
- details in your application's authentication setup.
-
-## Supported Auth Providers
-
-### Social Connections
-
-
-
-### Authentication Service Providers
-
-Authentication Service Providers allow you to utilize certain implicit and authorization code
-grants. You may also use social providers on top of Federated / Identity providers to pick other
-social providers (for example, Twitter, Apple, GitHub, LinkedIn, WeChat, and so on) that we do not
-natively support. It is important to note that you must register an app with the Authentication
-Service Providers before proceeding.
-
-The links below will help you set up the following authentication service providers:
-
-
-
-### Bring your own JWT Providers
-
-
-
-There are some nuances with certain login providers, so don't hesitate to get in touch with us on
-[Discord](https://discord.gg/web3auth) or simply post your query on the
-[Community Support Forum](https://web3auth.io/community/c/feature-request/14) and we will take care
-of things from there.
diff --git a/docs/auth-provider-setup/authentication-service-providers/auth0-service-provider.mdx b/docs/auth-provider-setup/authentication-service-providers/auth0-service-provider.mdx
deleted file mode 100644
index 86eab37b7..000000000
--- a/docs/auth-provider-setup/authentication-service-providers/auth0-service-provider.mdx
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Auth0 Service Provider with Web3Auth
-sidebar_label: Auth0
-description: "Auth0 Service Provider Set up | Documentation - Web3Auth"
----
-
-import Tiles from "@theme/Tiles";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-Auth0 allows you to easily add authentication to your application. Web3Auth supports Auth0 as a
-service provider. You can create a verifier for Auth0 and integrate it into your application. This
-page will help you set up Auth0 as a service provider with Web3Auth.
-
-[Take a look at the supported social logins on Auth0](https://marketplace.auth0.com/categories/social-login)
-
-## Create an Auth0 Application
-
-If you haven't already, create an Auth0 application for your project. It is the mandatory step
-before we proceed further. After the basic setup, we'll learn how to create an Auth0 verifier for
-the Web3Auth project. You can follow the link below to set up Auth0 for your project. If we are
-missing any platform/framework, you can always
-[check out Auth0 documentation](https://auth0.com/docs/quickstart/native#webapp).
-
-export const Auth0Setup = [
- {
- name: "",
- description: "",
- tiles: [
- {
- key: "web",
- title: "Web",
- icon: "logo-js.png",
- path: "https://auth0.com/docs/quickstart/spa/vanillajs/interactive",
- },
- {
- key: "android",
- title: "Android (Kotlin)",
- icon: "logo-android.png",
- path: "https://auth0.com/docs/quickstart/native/android/interactive",
- },
- {
- key: "ios",
- title: "iOS",
- icon: "logo-apple.png",
- path: "https://auth0.com/docs/quickstart/native/ios-swift/interactive",
- },
- {
- key: "flutter",
- title: "Flutter",
- icon: "logo-flutter.png",
- path: "https://auth0.com/docs/quickstart/native/flutter/interactive",
- },
- {
- key: "react-native",
- title: "React Native",
- icon: "logo-react.png",
- path: "https://auth0.com/docs/quickstart/native/react-native/interactive",
- },
- ],
- },
-];
-
-
-
-## Create an Auth0 Verifier
-
-
-
-1. Create an Auth0 verifier by choosing `Social Login Providers` and selecting `Auth0` from the
- **Login Provider** dropdown.
- 
-1. Select the `Authentication Type` from the dropdown based on your application needs.
- 
-
- > Note: For Email Password and Email Passwordless authentication, the `email_verified = true`
- > condition is added to the JWT verification. To avoid JWT params mismatch error, you can use any
- > other Authentication Type.
-
-1. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application.
-
- 
-
-1. Fill the `Auth0 Client ID` and `Auth0 Domain` details and select `Sub` or `Email` as the JWT
- Verifier ID.
- 
-
-1. Click on the `Create Verifier` button to create your Auth0 verifier.
-
- It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive
- an email and the dashboard will display the 'Live' status for the verifier.
-
-## Explore Guides
-
-Once you have set up an Auth0 application and the corresponding verifier in the Web3Auth dashboard,
-you can use the available guides to integrate it into your project. The ability to use a custom
-verifier is not restricted to specific SDKs and platforms. You can refer to our
-[SDK references](/docs/sdk/) to understand how to utilize a custom verifier.
-
-export const Auth0Guides = [
- {
- name: "",
- description: "",
- tiles: [
- {
- key: "web",
- title: "Web",
- icon: "logo-js.png",
- path: "/docs/guides/auth0",
- },
- // {
- // key: "android",
- // title: "Android (Kotlin)",
- // icon: "logo-android.png",
- // path: "/docs/guides/android-auth0",
- // },
- // {
- // key: "ios",
- // title: "iOS (Swift)",
- // icon: "logo-apple.png",
- // path: "/docs/guides/ios-auth0",
- // },
- {
- key: "flutter",
- title: "Flutter",
- icon: "logo-flutter.png",
- path: "/docs/guides/flutter-auth0",
- },
- {
- key: "react-native",
- title: "React Native",
- icon: "logo-react.png",
- path: "/docs/guides/react-native-auth0",
- },
- ],
- },
-];
-
-
diff --git a/docs/auth-provider-setup/authentication-service-providers/aws-cognito-service-provider.mdx b/docs/auth-provider-setup/authentication-service-providers/aws-cognito-service-provider.mdx
deleted file mode 100644
index 37bbe827c..000000000
--- a/docs/auth-provider-setup/authentication-service-providers/aws-cognito-service-provider.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: AWS Coginto Service Provider Set up
-sidebar_label: AWS Cognito
-description: "AWS Cognito Service Provider Set up | Documentation - Web3Auth"
----
-
-import SetupAWSCognitoVerifier from "@site/src/common/guides/_setup-aws-cognito-verifier.mdx";
-import Tiles from "@theme/Tiles";
-
-AWS Cognito allows you to easily add authentication to your application. Web3Auth supports AWS
-Cognito as a service provider. You can create a verifier for AWS Cognito and integrate it into your
-application. This page will help you set up AWS Cognito as a service provider with Web3Auth.
-
-[Take a look at the supported social logins on AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html)
-
-## Create an AWS Cognito Application
-
-If you haven't already, create an AWS Cognito application for your project. It is the mandatory step
-before we proceed further. After the basic setup, we'll learn how to create an AWS Cognito verifier
-for the Web3Auth project.
-
-[Learn how to set up AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-console).
-
-## Create an AWS Cognito Verifier
-
-
-
-## Explore Guides
-
-Once you have set up an AWS Cognito application and the corresponding verifier in the Web3Auth
-dashboard, you can use the available guides to integrate it into your project. The ability to use a
-custom verifier is not restricted to specific SDKs and platforms. You can refer to our
-[SDK references](/docs/sdk/) to understand how to utilize a custom verifier.
-
-export const CognitoGuides = [
- {
- name: "",
- description: "",
- tiles: [
- {
- key: "web",
- title: "Web",
- icon: "logo-js.png",
- path: "/docs/guides/cognito",
- },
- ],
- },
-];
-
-
diff --git a/docs/auth-provider-setup/authentication-service-providers/firebase-service-provider.mdx b/docs/auth-provider-setup/authentication-service-providers/firebase-service-provider.mdx
deleted file mode 100644
index c2e3e872a..000000000
--- a/docs/auth-provider-setup/authentication-service-providers/firebase-service-provider.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Firebase Service Provider Set up
-sidebar_label: Firebase
-description: "Firebase Service Provider Set up | Documentation - Web3Auth"
----
-
-import SetupFirebaseVerifier from "@site/src/common/guides/_setup-firebase-verifier.mdx";
-import Tiles from "@theme/Tiles";
-
-Firebase allows you to easily add authentication to your application. Web3Auth supports Firebase as
-a service provider. You can create a verifier for Firebase and integrate it into your application.
-This page will help you set up Firebase as a service provider with Web3Auth.
-
-[Take a look at the supported social logins on Firebase](https://firebase.google.com/docs/auth)
-
-## Create a Firebase Project
-
-If you haven't already, create a Firebase project. It is the mandatory step before we proceed
-further. After the basic setup, we'll learn how to create a Firebase verifier for the Web3Auth
-project. You can follow the link below to set up Firebase for your project. For React native, you
-can set up Firebase for Android and iOS separately. If we are missing any platform/framework, you
-can always [check out Firebase documentation](https://firebase.google.com/docs/libraries).
-
-export const FirebaseSetup = [
- {
- name: "",
- description: "",
- tiles: [
- {
- key: "web",
- title: "Web",
- icon: "logo-js.png",
- path: "https://firebase.google.com/docs/web/setup",
- },
- {
- key: "android",
- title: "Android (Kotlin)",
- icon: "logo-android.png",
- path: "https://firebase.google.com/docs/android/setup",
- },
- {
- key: "ios",
- title: "iOS",
- icon: "logo-apple.png",
- path: "https://firebase.google.com/docs/ios/setup",
- },
- {
- key: "flutter",
- title: "Flutter",
- icon: "logo-flutter.png",
- path: "https://firebase.google.com/docs/flutter/setup",
- },
- {
- key: "unity",
- title: "Unity",
- icon: "logo-unity.png",
- path: "https://firebase.google.com/docs/unity/setup",
- },
- ],
- },
-];
-
-
-
-## Create a Firebase Verifier
-
-
-
-## Explore Guides
-
-After you have set up Firebase and the corresponding verifier in the Web3Auth Dashboard, you can
-follow the guides to integrate it into your project. The support for using a custom verifier is not
-limited to the below SDKs and platforms. You can check out our [SDK references](/docs/sdk/) to learn
-how to use a custom verifier.
-
-export const FirebaseGuides = [
- {
- name: "",
- description: "",
- tiles: [
- {
- key: "web",
- title: "Web",
- icon: "logo-js.png",
- path: "/docs/guides/firebase",
- },
- // {
- // key: "android",
- // title: "Android (Kotlin)",
- // icon: "logo-android.png",
- // path: "/docs/guides/android-firebase",
- // },
- {
- key: "flutter",
- title: "Flutter",
- icon: "logo-flutter.png",
- path: "/docs/guides/sfa-flutter-firebase",
- },
- {
- key: "react-native",
- title: "React Native",
- icon: "logo-react.png",
- path: "/docs/guides/react-native-firebase",
- },
- ],
- },
-];
-
-
diff --git a/docs/auth-provider-setup/byo-jwt-provider/byo-jwt-provider.mdx b/docs/auth-provider-setup/byo-jwt-provider/byo-jwt-provider.mdx
deleted file mode 100644
index c07d47db8..000000000
--- a/docs/auth-provider-setup/byo-jwt-provider/byo-jwt-provider.mdx
+++ /dev/null
@@ -1,197 +0,0 @@
----
-title: Bring your own custom JWT Provider
-sidebar_label: Overview
-description: "Bring your own custom JWT Provider | Documentation - Web3Auth"
-image: "images/docs-meta-cards/documentation-card.png"
----
-
-You can incorporate your login providers by utilizing one of the custom login schemes, including RSA
-or ECDSA signatures. By doing so, your users can continue using your current login providers or your
-custom authentication scheme.
-
-:::note
-
-Access to Custom Authentication with your own custom JWT Provider is gated. The minimum
-[pricing plan](https://web3auth.io/pricing.html) to create custom
-[verifiers](/auth-provider-setup/verifiers) is the **Growth Plan**. However, you can use this
-feature for projects on `sapphire_devnet` for free.
-
-:::
-
-:::warning
-
-Custom JWT authentication is not supported with
-[`Web3Auth Plug and Play Modal SDK`](/sdk/pnp/web/modal/) since the Web3Auth PnP Modal SDK will only
-help you configure the social logins within the Modal UI.
-
-:::
-
-For signing the JWT, your application must follow the JWT specification and use the private key
-corresponding to the JWKS. And the public keys of the JWT should be exposed through an endpoint,
-which is used by Web3Auth to verify the JWT.
-
-:::warning Facing issue with JWT?
-
-Check out [**this troubleshooting page to fix those.**](/troubleshooting/jwt-errors)
-
-:::
-
-## Set up Custom JWT Verifier
-
-
-
-To create a custom verifier for your JWT Providers, you'll need
-
-1. **JWT Verifier ID**: JWT Verifier ID is the unique identifier to publicly represent a user on a
- verifier. e.g: `sub`, `email`, or even a custom field of your JWT payload that is unique in your
- system for each user.
-
-2. **JWK Endpoint**: An endpoint containing the JWKS used for signing the JWT.
-
- Check [What are JWKS and How to create one from PEM](#what-are-jwks) to learn how to create JWKS.
-
- ```json title="Your JWKS must have the following fields."
- {
- "keys": [
- {
- "kty": "RSA",
- "kid": "{your_kid}",
- "use": "sig",
- "alg": "RS256",
- "n": "{your_n}",
- "e": "{your_e}"
- }
- ]
- }
- ```
-
-3. **JWT Validations**
-
- :::warning
-
- Your JWT header must contain the `kid` field and the payload data must contain the `iat` field.
-
- :::
-
- You can add up to 3 validation fields, including any claims like `aud`, `sub`, `iss`,
- `email_verified` etc. These are the claims against which a JWT is validated.
-
- Here are a couple of examples to be used in validation:
-
- - Token Audience ( `aud` ): The "aud" (audience) claim identifies the recipients for which the
- JWT is intended. Each principal intended to process the JWT MUST identify itself with a value
- in the audience claim. If the principal processing the claim does not identify itself with a
- value in the "aud" claim when this claim is present, then the JWT will be rejected. The `aud`
- value is a case-sensitive string containing a StringOrURI value. The interpretation of audience
- values is generally application-specific.
-
- - Token Issuer ( `iss` ): The issuing authority of the token. The `iss` value is a case-sensitive
- string containing a StringOrURI value. Use of this claim is OPTIONAL.
-
- - Token Subject ( `sub` ): The subject of the token. The `sub` value is a case-sensitive string
- containing a StringOrURI value. Use of this claim is OPTIONAL.
-
- - Token Email Verified ( `email_verified` ): The email verified claim is a boolean value that
- indicates whether the email address has been verified.
-
-### Generate JWT
-
-To generate the JWT, you can choose package of your choice. We have documented few of the well known
-packages.
-
-- [Generate JWT using jsonwebtoken](/docs/auth-provider-setup/byo-jwt-provider/jsonwebtoken)
-- [Generate JWT using jose](/docs/auth-provider-setup/byo-jwt-provider/jose)
-- [Generate JWT using passport-jwt](/docs/auth-provider-setup/byo-jwt-provider/passport-jwt)
-
-### Login with JWT
-
-Once you have setup JWKS, and created Custom JWT verifier in Web3Auth dashboard, you can follow the
-below example to use it with No Modal SDK.
-
-```tsx title="No Modal Example"
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect", // redirect or popup
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "verifier-name", // Name of the verifier created on Web3Auth Dashboard
- typeOfLogin: "jwt",
- clientId: "YOUR_WEB3AUTH_CLIENT_ID", // Web3Auth Client ID
- },
- // focus-end
- },
- },
-});
-
-await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
- // focus-start
- loginProvider: "jwt",
- extraLoginOptions: {
- id_token: "YOUR_GENERATED_ID_TOKEN",
- verifierIdField: "sub", // sub, email, or custom
- },
- // focus-end
-});
-```
-
-## What are JWKS?
-
-JWKS stands for JSON Web Key Set. It is a set of keys containing the public keys that should be used
-to verify any JSON Web Token (JWT) issued by the authorization server and signed using the RS256
-signing algorithm.
-
-### How to create JWKS?
-
-- Most of the login providers that support JWT-based login will provide you this URL, such as
- Firebase, Google, Auth0, AWS Cognito etc.
-
- - Firebase: `https://www.googleapis.com/service_accounts/v1/jwk/{your-project-id}`
- - Auth0: `https://{your-domain}/.well-known/jwks.json`
- - Google: `https://www.googleapis.com/oauth2/v3/certs`
- - AWS Cognito: `https://cognito-idp.{region}.amazonaws.com/{userPoolId}/.well-known/jwks.json`
-
-- If you are using your own custom JWT, you will need to convert your PEM file to JWKS.
-
-### How to convert PEM to JWKS?
-
-If you're using `jose` or `jsonwebtoken` library, you can use the following steps to convert your
-PEM file to JWKS.
-
-1. Create a Private Key using openssl.
-
- ```bash
- openssl genrsa -out privateKey.pem 2048
- ```
-
- This privateKey will be used to sign the token.
-
-2. Using the above privateKey.pem file, create a Public Key.
-
- ```bash
- openssl rsa -in privateKey.pem -pubout -out publicKey.pem
- ```
-
- This publicKey.pem file will be converted to JWKS.
-
-3. Convert the publicKey.pem file to JWKS.
-
- Now, look for a tool that converts `.pem` to `jwk(s)` format.
-
- - One of the tools is https://pem2jwk.vercel.app/
- - Select Signing Algorithm: `RS256`
- - Select Public Key Use: `Signing`
- - Key ID: `paste-yours` or leave it blank to generate a random one.
- - PEM encoded key: `{paste-the-publicKey-pem-file-s-content-here}`
- - Click on the `Convert to JWK` button.
-
- 
-
-4. To complete the process, you need to save the output as a `.json` file, host it on your server,
- and make sure it's publicly accessible.
-
- This will give you the `JWKS Endpoint`, which is required when setting up a `Custom JWT Verifier`
- on the Web3Auth Dashboard.
diff --git a/docs/auth-provider-setup/byo-jwt-provider/jose.mdx b/docs/auth-provider-setup/byo-jwt-provider/jose.mdx
deleted file mode 100644
index e32694078..000000000
--- a/docs/auth-provider-setup/byo-jwt-provider/jose.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Create JWT using jose package
-sidebar_label: jose
-description: "Create JWT using jose pacakge | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import CreateJWKS from "@site/src/common/docs/_byo-jwt-create-jwks.mdx";
-
-For your custom JWT provider, you can create JWT token using package of your choice, one of which is
-`jose` package. Learn more about [jose](https://www.npmjs.com/package/jose).
-
-## Installation
-
-```bash npm2yarn
-$ npm i jose
-```
-
-## Generate Private key
-
-Paste the below command in terminal to generate a new file `privateKey.pem` with the key details.
-The generated key will be used to sign the token.
-
-```bash
-openssl genrsa -out privateKey.pem 2048
-```
-
-Once you have generated private key, you can get the public key which can be used to verify the JWT.
-
-```bash
-openssl rsa -in privateKey.pem -pubout -out publicKey.pem
-```
-
-## Generate JWT
-
-Create an index.js file and paste the below code to generate the JWT using RSA algorithm.
-
-```tsx
-import * as jose from "jose";
-import fs from "fs";
-var privateKey = fs.readFileSync("privateKey.pem");
-var publicKey = fs.readFileSync("publicKey.pem");
-
-const jwt = await new jose.SignJWT({ "urn:example:claim": true })
- .setProtectedHeader({ alg: "RS256", kid: "1bb9605c36e69386830202b2d" }) // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
- .setIssuedAt()
- .setIssuer("https://my-authz-server")
- .setAudience("urn:my-resource-server")
- .setExpirationTime("2h")
- .sign(privateKey);
-
-console.log(jwt);
-
-// Verifying the JWT using Remote JWK Set.
-// This is just to show how the Verify works, look above to set-up custom jwt verifier on the Web3Auth Dashboard.
-// Check the steps below to see how once can generate the JWKS
-const JWKS = jose.createRemoteJWKSet(new URL("https://my-authz-server/.well-known/jwks.json"));
-
-const { payload, protectedHeader } = await jose.jwtVerify(jwt, JWKS, {
- issuer: "https://my-authz-server",
- audience: "urn:my-resource-server",
-});
-
-console.log(protectedHeader);
-console.log(payload);
-```
-
-## Create JWKS
-
-
diff --git a/docs/auth-provider-setup/byo-jwt-provider/jsonwebtoken.mdx b/docs/auth-provider-setup/byo-jwt-provider/jsonwebtoken.mdx
deleted file mode 100644
index 0655941dd..000000000
--- a/docs/auth-provider-setup/byo-jwt-provider/jsonwebtoken.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Create JWT using jsonwebtoken package
-sidebar_label: jsonwebtoken
-description: "Create JWT using jsonwebtoken pacakge | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import CreateJWKS from "@site/src/common/docs/_byo-jwt-create-jwks.mdx";
-
-For your custom JWT provider, you can create JWT token using package of your choice, one of which is
-`jsonwebtoken` package. [Learn more about jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken).
-
-## Installation
-
-```bash npm2yarn
-$ npm i jsonwebtoken
-```
-
-## Generate Private key
-
-
-
-Paste the below command in terminal to generate a new file `privateKey.pem` with the key details.
-The generated key will be used to sign the token.
-
-```bash
-openssl genrsa -out privateKey.pem 2048
-```
-
-Once you have generated private key, you can get the public key which can be used to verify the JWT.
-
-```bash
-openssl rsa -in privateKey.pem -pubout -out publicKey.pem
-```
-
-
-
-
-Paste the below command in terminal to generate a new file `privateKey.pem` with the key details.
-The generated key will be used to sign the token.
-
-```bash
-openssl ecparam -name secp256k1 -genkey -noout -out ec-secp256k1-privateKey.pem
-```
-
-Once you have generated private key, you can get the public key which can be used to verify the JWT.
-
-```bash
-openssl ec -in ec-secp256k1-privateKey.pem -pubout -out ec-secp256k1-publicKey.pem
-```
-
-
-
-
-## Generate JWT
-
-For jsonwebtoken we have documented RSA256 and ECDSA, two of the most popular algorithms used to
-generate the JWT. For the list of supported algorithms by jsonwebtoken, you can
-[checkout their documentation](https://www.npmjs.com/package/jsonwebtoken#algorithms-supported).
-
-
-
-
-### Using RSA for JWT Signing
-
-Create an index.js file and paste the below code to generate the JWT using RSA algorithm.
-
-```tsx
-import jwt from "jsonwebtoken";
-import fs from "fs";
-
-var privateKey = fs.readFileSync("privateKey.pem");
-
-var token = jwt.sign(
- {
- sub: "faj2720i2fdG7NsqznOKrthDvq43", // must be unique to each user
- name: "Mohammad Shahbaz Alam",
- email: "shahbaz@web3auth.io",
- aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
- iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
- iat: Math.floor(Date.now() / 1000),
- exp: Math.floor(Date.now() / 1000) + 60 * 60,
- },
- privateKey,
- { algorithm: "RS256", keyid: "1bb9605c36e69386830202b2d" }, // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
-);
-
-console.log(token);
-```
-
-
-
-
-### Using ECDSA for JWT Signing
-
-Create an index.js file and paste the below code to generate the JWT using ECDSA algorithm.
-
-```tsx
-import jwt from "jsonwebtoken";
-import fs from "fs";
-
-var privateKey = fs.readFileSync("ec-secp256k1-privateKey.pem");
-
-var token = jwt.sign(
- {
- sub: "faj2720i2fdG7NsqzncndijwnKrthDvq43",
- name: "Mohammad Shahbaz Alam",
- email: "shahbaz@web3auth.io",
- aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
- iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
- iat: Math.floor(Date.now() / 1000),
- exp: Math.floor(Date.now() / 1000) + 60 * 60,
- },
- privateKey,
- { algorithm: "ECDSA", keyid: "1bb9605c36e69386830202b2d" }, // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
-);
-
-console.log(token);
-```
-
-
-
-
-## Create JWKS
-
-
diff --git a/docs/auth-provider-setup/byo-jwt-provider/passport-jwt.mdx b/docs/auth-provider-setup/byo-jwt-provider/passport-jwt.mdx
deleted file mode 100644
index 3db6a7d17..000000000
--- a/docs/auth-provider-setup/byo-jwt-provider/passport-jwt.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Create JWT using passport-jwt package
-sidebar_label: passport-jwt
-description: "Create JWT using passport-jwt pacakge | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-For your custom JWT provider, you can create JWT token using package of your choice, one of which is
-`passport-jwt` package. Learn more about
-[passport-jwt](https://www.passportjs.org/packages/passport-jwt/). To make the implementation
-easier, we'll also use [jwks-rsa](https://www.npmjs.com/package/jwks-rsa) package.
-
-## Installation
-
-```bash npm2yarn
-$ npm i passport-jwt
-$ npm i jwks-rsa
-```
-
-## Generate JWT
-
-Using `passportJwtSecret` you can generate a secret provider that will provide the right signing key
-to `passport-jwt` based on the kid in the JWT header.
-
-```tsx
-const Express = require('express');
-const passport = require('passport');
-const JwtStrategy = require('passport-jwt').Strategy;
-const ExtractJwt = require('passport-jwt').ExtractJwt;
-const jwksRsa = require('jwks-rsa');
-
-...
-// Initialize the app.
-const app = new Express();
-
-passport.use(
- new JwtStrategy({
- // Dynamically provide a signing key based on the kid in the header and the signing keys provided by the JWKS endpoint.
- secretOrKeyProvider: jwksRsa.passportJwtSecret({
- cache: true,
- rateLimit: true,
- jwksRequestsPerMinute: 5,
- jwksUri: `https://my-authz-server/.well-known/jwks.json`
- }),
- jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
-
- // Validate the audience and the issuer.
- audience: 'urn:my-resource-server',
- issuer: 'https://my-authz-server',
- algorithms: ['RS256']
- },
- verify)
-);
-
-app.use(passport.initialize());
-```
diff --git a/docs/auth-provider-setup/social-providers/apple.mdx b/docs/auth-provider-setup/social-providers/apple.mdx
deleted file mode 100644
index aa4689c62..000000000
--- a/docs/auth-provider-setup/social-providers/apple.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Apple Social Login with Web3Auth
-sidebar_label: Apple
-description: "Apple Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Apple login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Apple verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select `Apple` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [Apple Social Connection](https://marketplace.auth0.com/integrations/apple-social-connection) to
- your Auth0 application.
-5. Click on the `Create Verifier` button.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Apple
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- ddomain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "apple", // Use this to skip Auth0 Modal for Apple login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/baidu.mdx b/docs/auth-provider-setup/social-providers/baidu.mdx
deleted file mode 100644
index fcf3736a0..000000000
--- a/docs/auth-provider-setup/social-providers/baidu.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Baidu Login with Web3Auth
-sidebar_label: Baidu
-description: "Baidu Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Baidu login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Baidu verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [Baidu Social Connection](https://marketplace.auth0.com/integrations/baidu-social-connection) to
- your Auth0 application.
-5. Click on the `Create` button to create `Baidu` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Baidu
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "baidu", // Use this to skip Auth0 Modal for Baidu login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/bitbucket.mdx b/docs/auth-provider-setup/social-providers/bitbucket.mdx
deleted file mode 100644
index f8677de1b..000000000
--- a/docs/auth-provider-setup/social-providers/bitbucket.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Bitbucket Login with Web3Auth
-sidebar_label: Bitbucket
-
-description: "Bitbucket Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Bitbucket login can be performed in various ways, depending on the use case. We have demonstrated
-this with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Bitbucket verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [Bitbucket Social Connection](https://marketplace.auth0.com/integrations/bitbucket-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `Bitbucket` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Bitbucket
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "bitbucket", // Use this to skip Auth0 Modal for Bitbucket login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/discord.mdx b/docs/auth-provider-setup/social-providers/discord.mdx
deleted file mode 100644
index f02d9a059..000000000
--- a/docs/auth-provider-setup/social-providers/discord.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Discord Social Login with Web3Auth
-sidebar_label: Discord
-
-description: "Discord Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import DiscordSetup from "@site/src/common/guides/_discord-setup.mdx";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::info
-
-**[Using Discord with Web3Auth Guide](/guides/discord)**
-
-:::
-
-## Create a Discord app
-
-
-
-## Create a Discord verifier
-
-
-
-1. Create a verifier for your Discord application by selecting `Discord` as the Login provider from
- this modal.
- 
-2. Paste the **Client ID** from the Discord App(above) to the `Client ID` field and click on Create.
- 
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-import { CHAIN_NAMESPACES } from "@web3auth/base";
-
-// Create AuthAdapter instance once you have created Web3Auth instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // Discord login
- // focus-start
- discord: {
- verifier: "w3a-discord-demo", // Pass the Verifier name here
- typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
- clientId: "1151006428610433095", // Pass on the Discord `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthInstance.configureAdapter(authAdapter);
-
-// Initialize Modal
-await web3AuthInstance.initModal();
-
-// Login with Discord
-await web3AuthInstance.connect();
-```
-
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- discord: {
- verifier: "w3a-discord-demo", // Pass the Verifier name here
- typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
- clientId: "1151006428610433095", // Pass on the Discord `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Discord
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "discord",
-});
-// focus-end
-```
-
-
-
-
-
-## Troubleshoot
-
-### Duplicate token found
-
-:::warning
-
-Receiving `Could not get result from torus nodes Duplicate token found` error when using Custom
-verifier for Discord?
-
-- This is because Discord issues the same token for 30 mins.
-- We revoke it for you for default verifiers( such as when using Web3Auth Modal `@web3auth/modal`).
-- But when using Custom Verifier for Discord, the integrating dApps have to revoke the token
- themself before attempting the next login by using discord clientId and secret to revoke the
- token.
-
-:::
-
-Here's the sample code to revoke the token:
-
-```tsx
-const axios = require("axios").default;
-const FormData = require("form-data");
-
-const { DISCORD_CLIENT_SECRET, DISCORD_CLIENT_ID } = process.env;
-const { token } = req.body;
-const formData = new FormData();
-formData.append("token", token);
-await axios.post("https://discord.com/api/oauth2/token/revoke", formData, {
- headers: {
- ...formData.getHeaders(),
- Authorization: `Basic ${Buffer.from(`${DISCORD_CLIENT_ID}:${DISCORD_CLIENT_SECRET}`, "binary").toString("base64")}`,
- },
-});
-```
diff --git a/docs/auth-provider-setup/social-providers/email-passwordless.mdx b/docs/auth-provider-setup/social-providers/email-passwordless.mdx
deleted file mode 100644
index fae790526..000000000
--- a/docs/auth-provider-setup/social-providers/email-passwordless.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Email Passwordless Login with Web3Auth
-sidebar_label: Email Passwordless
-description: "Email Passwordless Login with Web3Auth | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-## Create a Email Passwordless verifier
-
-
-
-1. Give a unique name to your verifier in the `Verifier Identifier` field. e.g.,
- `email-passwordless-verifier`.
-
-2. From the list of Login Providers, select `Social Login Providers` and Select Email Passwordless
- from the dropdown list.
-
-
-
-3. Finally, click on the `Create` button to create the Email Passwordless verifier.
-
-
-
-It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive an
-email and the dashboard will display the 'Live' status for the verifier.
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3Auth instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // Email Passwordless login
- // focus-start
- email_passwordless: {
- verifier: "w3a-email-passwordless-demo", // Pass your verifier name here
- typeOfLogin: "email_passwordless",
- clientId, // Pass the Web3Auth `Client ID` here.
- },
- // focus-end
- },
- },
-});
-
-// Configure the adapter with Web3Auth
-web3authInstance.configureAdapter(authAdapter);
-
-// Initialize Modal
-await web3authInstance.initModal();
-
-// Login with Email Passwordless
-await web3authInstance.connect();
-```
-
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- email_passwordless: {
- verifier: "w3a-email-passwordless-demo", // Pass your verifier name
- typeOfLogin: "email_passwordless",
- clientId, // Pass the Web3Auth `Client ID` here.
- },
- // focus-end
- },
- },
-});
-
-// Configure the adapter with Web3AuthNoModal web3authNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize await web3authNoModalInstance.init();
-
-// Login with Email Passwordless // focus-start await
-web3authNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "email_passwordless",
- extraLoginOptions: { login_hint: email.trim() },
-}); // focus-end
-```
-
-
-
-```
diff --git a/docs/auth-provider-setup/social-providers/facebook.mdx b/docs/auth-provider-setup/social-providers/facebook.mdx
deleted file mode 100644
index 1de6afaf0..000000000
--- a/docs/auth-provider-setup/social-providers/facebook.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: Facebook Social Login with Web3Auth
-sidebar_label: Facebook
-
-description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::info
-
-**[Using Facebook with Web3Auth Guide](/guides/facebook)**
-
-:::
-
-## Create a Facebook app
-
-1. Follow Facebook's instructions to
- [create a new app](https://developers.facebook.com/docs/development/create-an-app).
-2. When creating an app, make sure to select `Consumer` from this screen to use Facebook Login.
- 
-
-3. On the next screen, you'll be presented with different products you can integrate into your
- Facebook app. Click **"Set Up"** in the card representing the **Facebook Login** capability.
-
- 
-
-4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.
-
- - https://auth.web3auth.io/auth
-
- 
-
-5. Obtain the "App ID" and "App Secret" from the **Settings > Basic** screen.
-
- 
-
-## Create a Facebook verifier
-
-
-
-1. Create a verifier for your Facebook application by selecting `Facebook` as the Login provider
- from this modal.
- 
-2. Paste the **App ID** and **App Secret** from the Facebook App(above) to the `Client ID` and
- `Client Secret` fields respectively and click on Create.
- 
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3Auth instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- facebook: {
- verifier: "w3a-facebook-demo", // Pass the Verifier name here
- typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
- clientId: "215892741216994", // Pass on the Facebook `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthInstance.configureAdapter(authAdapter);
-
-// Initialize Modal
-await web3AuthInstance.initModal();
-
-// Login with Facebook
-await web3AuthInstance.connect();
-```
-
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- facebook: {
- verifier: "w3a-facebook-demo", // Pass the Verifier name here
- typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
- clientId: "215892741216994", // Pass on the Facebook `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Facebook
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "facebook",
-});
-```
-
-
-
diff --git a/docs/auth-provider-setup/social-providers/github.mdx b/docs/auth-provider-setup/social-providers/github.mdx
deleted file mode 100644
index 8d8dd56ce..000000000
--- a/docs/auth-provider-setup/social-providers/github.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: GitHub Social Login with Web3Auth
-sidebar_label: GitHub
-
-description: "GitHub Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-GitHub login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a GitHub verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `GitHub` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [GitHub Social Connection](https://marketplace.auth0.com/integrations/github-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `GitHub` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with GitHub
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "github", // Use this to skip Auth0 Modal for GitHub login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/google.mdx b/docs/auth-provider-setup/social-providers/google.mdx
deleted file mode 100644
index 00a945d43..000000000
--- a/docs/auth-provider-setup/social-providers/google.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Google Social Login with Web3Auth
-sidebar_label: Google
-description: "Google Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::info Guide
-
-**[Using Google Login with Web3Auth](/guides/google)**
-
-:::
-
-## Create a Google app
-
-1. Follow Google’s instructions to
- [set up an OAuth 2.0 app.](https://support.google.com/cloud/answer/6158849?hl=en)
-2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.
-
- - https://auth.web3auth.io/auth
-
- 
-
-3. Obtain the OAuth `Client ID` from your
- [App on the Google Developer dashboard](https://console.developers.google.com/)
-
-## Create a Google verifier
-
-
-
-1. Create a verifier for your Google application by first clicking on `Social Login Provider` and
- then selecting `Google` as the Login provider from the dropdown list.
-
- 
-
-2. Paste the **Client ID** from the Google App(above) to the `Client ID` field and click on Create.
-
- 
-
- :::note
-
- Google Client ID is the OAuth Client ID obtained from the Google Developer dashboard and it's a
- required field.
-
- :::
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3Auth instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // Google login
- // focus-start
- google: {
- verifier: "w3a-google-demo", // Pass the Verifier name here
- typeOfLogin: "google", // Pass on the login provider of the verifier you've created
- clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-// Configure the adapter with Web3Auth
-web3authInstance.configureAdapter(authAdapter);
-
-// Initialize Modal
-await web3authInstance.initModal();
-
-// Login with Google
-await web3authInstance.connect();
-```
-
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- //focus-start
- google: {
- verifier: "w3a-google-demo",
- // Pass the Verifier name here
- typeOfLogin: "google", // Pass on the login provider of the verifier you've created
- clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here },
- },
- //focus-end
- },
- },
-});
-
-// Configure the adapter with Web3AuthNoModal
-web3authNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3authNoModalInstance.init();
-
-// Login with Google
-await web3authNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, { loginProvider: "google" });
-```
-
-
-
diff --git a/docs/auth-provider-setup/social-providers/kakao.mdx b/docs/auth-provider-setup/social-providers/kakao.mdx
deleted file mode 100644
index 46cca0dd9..000000000
--- a/docs/auth-provider-setup/social-providers/kakao.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: KaKao Social Login with Web3Auth
-sidebar_label: KaKao
-
-description: "KaKao Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Kakao login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a KaKao verifier
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
-modal.  2. Select the `KaKao` as the
-**Authentication Type** based on the dropdown.  3. Enter the `Auth0 Client ID` and `Auth0
-Domain` from your Auth0 application. See how to create a new Auth0 application
-[here](https://auth0.com/docs/quickstart/webapp/).
-
-
-
-
-4. Add the [KaKao Social Connection](https://marketplace.auth0.com/integrations/kakao-login) to your
- Auth0 application.
-5. Click on the `Create` button to create `KaKao` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Kakao
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "kakao", // Use this to skip Auth0 Modal for Kakao login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/line.mdx b/docs/auth-provider-setup/social-providers/line.mdx
deleted file mode 100644
index a38989280..000000000
--- a/docs/auth-provider-setup/social-providers/line.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Line Social Login with Web3Auth
-sidebar_label: Line
-
-description: "Line Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Line login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Line verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `LINE` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [LINE Social Connection](https://marketplace.auth0.com/integrations/line-social-connection) to
- your Auth0 application.
-5. Click on the `Create` button to create `LINE` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-jp-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "N9jnKM2Fo8PFRj8rYM9I7rWX1FW6X5xx", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Line
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.jp.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "line", // Use this to skip Auth0 Modal for Line login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/linkedin.mdx b/docs/auth-provider-setup/social-providers/linkedin.mdx
deleted file mode 100644
index 32c0a3644..000000000
--- a/docs/auth-provider-setup/social-providers/linkedin.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: LinkedIn Social Login with Web3Auth
-sidebar_label: LinkedIn
-
-description: "LinkedIn Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-LinkedIn login can be performed in various ways, depending on the use case. We have demonstrated
-this with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a LinkedIn verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select `LinkedIn` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [LinkedIn Social Connection](https://marketplace.auth0.com/integrations/linkedin-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `LinkedIn` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with LinkedIn
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "linkedin", // Use this to skip Auth0 Modal for LinkedIn login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/microsoft.mdx b/docs/auth-provider-setup/social-providers/microsoft.mdx
deleted file mode 100644
index 8e03647a5..000000000
--- a/docs/auth-provider-setup/social-providers/microsoft.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Microsoft Social Login with Web3Auth
-sidebar_label: Microsoft
-
-description: "Microsoft Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Microsoft login can be performed in various ways, depending on the use case. We have demonstrated
-this with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Microsoft verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [Microsoft Social Connection](https://marketplace.auth0.com/integrations/microsoft-account-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `Microsoft` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Microsoft
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "windowslive", // Use this to skip Auth0 Modal for Microsoft login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/renren.mdx b/docs/auth-provider-setup/social-providers/renren.mdx
deleted file mode 100644
index 088eb1860..000000000
--- a/docs/auth-provider-setup/social-providers/renren.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: RenRen Login with Web3Auth
-sidebar_label: RenRen
-
-description: "RenRen Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-RenRen login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a RenRen verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [RenRen Social Connection](https://marketplace.auth0.com/integrations/renren-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `RenRen` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with RenRen
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "renren", // Use this to skip Auth0 Modal for RenRen login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/slack.mdx b/docs/auth-provider-setup/social-providers/slack.mdx
deleted file mode 100644
index 23112c45b..000000000
--- a/docs/auth-provider-setup/social-providers/slack.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: Slack Login with Web3Auth
-sidebar_label: Slack
-
-description: "Slack Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Slack login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Slack verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the [Slack Social Connection](https://marketplace.auth0.com/integrations/sign-in-with-slack)
- to your Auth0 application.
-5. Click on the `Create` button to create `Slack` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Slack
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "sign-in-with-slack", // Use this to skip Auth0 Modal for Slack login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/sms-passwordless.mdx b/docs/auth-provider-setup/social-providers/sms-passwordless.mdx
deleted file mode 100644
index 22d3f0e80..000000000
--- a/docs/auth-provider-setup/social-providers/sms-passwordless.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: SMS Passwordless Login with Web3Auth
-sidebar_label: SMS Passwordless
-description: "SMS Passwordless Login with Web3Auth | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-## Create a SMS Passwordless verifier
-
-
-
-1. Give a unique name to your verifier in the `Verifier Identifier` field. e.g.,
- `sms-passwordless-verifier`.
-
-2. From the list of Login Providers, select `Social Login Providers` and Select SMS Passwordless
- from the dropdown list.
-
-
-
-3. Finally, click on the `Create` button to create the SMS Passwordless verifier.
-
-
-
-It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive an
-email and the dashboard will display the 'Live' status for the verifier.
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3Auth instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // SMS Passwordless login
- // focus-start
- sms_passwordless: {
- verifier: "w3a-sms-passwordless-demo", // Pass your verifier name here
- typeOfLogin: "sms_passwordless",
- },
- // focus-end
- },
- },
-});
-
-// Configure the adapter with Web3Auth
-web3authInstance.configureAdapter(authAdapter);
-
-// Initialize Modal
-await web3authInstance.initModal();
-
-// Login with SMS Passwordless
-await web3authInstance.connect();
-```
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance const authAdapter =
-new AuthAdapter({ adapterSettings: { uxMode: "redirect", loginConfig: { // focus-start
-sms_passwordless: { verifier: "w3a-sms-passwordless-demo", // Pass your verifier name here
-typeOfLogin: "sms_passwordless" } // focus-end } } });
-
-// Configure the adapter with Web3AuthNoModal web3authNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize await web3authNoModalInstance.init();
-
-// Login with SMS Passwordless // focus-start await
-web3authNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, { loginProvider: "sms_passwordless",
-extraLoginOptions: { login_hint: phone.trim() } }); // focus-end
-
-```
-
-
-```
diff --git a/docs/auth-provider-setup/social-providers/social-providers.mdx b/docs/auth-provider-setup/social-providers/social-providers.mdx
deleted file mode 100644
index 2b9ebc3b8..000000000
--- a/docs/auth-provider-setup/social-providers/social-providers.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Social Connections
-sidebar_label: Introduction
-description: "Social Login Providers | Documentation - Web3Auth"
----
-
-import SocialTiles from "@site/src/common/docs/_social-login-providers.mdx";
-
-This section goes deeper into setting up the social login providers and configuring their respective
-verifiers within Web3Auth Dashboard. There are parts that deep dive into both the OAuth standards,
-authentication flow, managing API keys, and securing user data—all while providing a frictionless
-login experience. You can also register your app directly with
-[implicit grant support ](https://oauth.net/2/grant-types/implicit/) and use it with the Web3Auth
-SDK.
-
-
diff --git a/docs/auth-provider-setup/social-providers/spotify.mdx b/docs/auth-provider-setup/social-providers/spotify.mdx
deleted file mode 100644
index 429fba1f7..000000000
--- a/docs/auth-provider-setup/social-providers/spotify.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Spotify Login with Web3Auth
-sidebar_label: Spotify
-
-description: "Spotify Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Spotify login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Spotify verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [Spotify Social Connection](https://marketplace.auth0.com/integrations/spotify-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `Spotify` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-jp-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "N9jnKM2Fo8PFRj8rYM9I7rWX1FW6X5xx", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Spotify
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.jp.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "spotify", // Use this to skip Auth0 Modal for Spotify login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/telegram.mdx b/docs/auth-provider-setup/social-providers/telegram.mdx
deleted file mode 100644
index 50a7acdc1..000000000
--- a/docs/auth-provider-setup/social-providers/telegram.mdx
+++ /dev/null
@@ -1,229 +0,0 @@
----
-title: Telegram Login with Web3Auth
-sidebar_label: Telegram
-description: "Create a Telegram verifier with Web3Auth | Documentation - Web3Auth"
-keywords:
- [
- telegram,
- oauth,
- telegram login widget,
- authentication,
- telegram login,
- telegram oauth,
- telegram verifier,
- ]
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::info Guide
-
-**[How to use Telegram OAuth with Web3Auth](/guides/telegram)**
-
-:::
-
-## Create a Telegram bot
-
-1. Follow Telegram's instructions to
- [create a new bot.](https://core.telegram.org/bots/features#creating-a-new-bot)
-
-2. Get the [`API Token`](https://core.telegram.org/bots/features#generating-an-authentication-token)
- from the bot you've created.
-
-## Creating a JWKS endpoint
-
-You need to create a JWKS endpoint to verify the JWT token that is generated by your backend server
-for the Telegram verifier. Each JWT will be signed with the private key. The private key will
-provide the public key, which will then be converted into a JWKS format.
-
-If you don't have a JWKS endpoint already, you can create one by following these steps:
-
-1. Generate a private key using openssl.
-
- Open your terminal and enter the following command:
-
- ```bash
- openssl genrsa -out privateKey.pem 2048
- ```
-
- This `privateKey.pem` file will be used to sign the JWT token.
-
-2. Create a public key from the private key.
-
- Run the following command in your terminal:
-
- ```bash
- openssl rsa -in privateKey.pem -pubout -out publicKey.pem
- ```
-
-3. Convert the public key to JWKS format
-
- Find a tool that can convert a `.pem` file to `jwk(s)` format.
-
- - One such tool is https://pem2jwk.vercel.app
- - Select the Signing Algorithm as `RS256`
- - Select Public Key Use as `Signing`
- - Key ID: `paste-yours` or leave it blank to generate a random one.
- - PEM encoded key: `{paste-the-publicKey-pem-file-s-content-here}`
- - Click on the `Convert to JWK` button.
-
- 
-
-4. Create a `jwks.json` file using the output and host it on your server to ensure it's publicly
- accessible. Alternatively, you can create a JWKS endpoint using the following code:
-
- ```javascript
- const express = require("express");
- const fs = require("fs");
- const { resolve } = require("path");
-
- const app = express();
-
- app.get("/.well-known/jwks.json", (req, res) => {
- res.sendFile(resolve(__dirname, "jwks.json"));
- });
-
- app.listen(3000, () => {
- console.log("Server running on port 3000");
- });
- ```
-
- The `jwks.json` file will look something like this:
-
- ```json
- {
- "kty": "RSA",
- "n": "uCCj0ZgH9nL....MbVZZ21Xp....TjSJr",
- "e": "AQAB",
- "ext": true,
- "kid": "e015e03692f2e1c79030b", // Key ID
- "alg": "RS256",
- "use": "sig"
- }
- ```
-
- **Your JWKS endpoint will look something like `https://your-domain/.well-known/jwks.json`.**
-
-## Create a Telegram verifier
-
-
-
-1. Give a unique name to your verifier in the `Verifier Identifier` field. e.g.,
- `web3auth-telegram-verifier`.
-
-1. From the list of Login Providers, select `Custom Providers` and enter your JWKS (JSON Web Key
- Set) endpoint URL in the `JWKS Endpoint` field.
-
- e.g., `https://your-domain/.well-known/jwks.json`
-
- 
-
-1. (Optional) If you have already created the backend server that generates the JWT token using
- Telegram's user data, you can paste a sample JWT token in the `Paste a JWT Token here` field.
- This is optional, but it helps you select the correct JWT validation rules.
-
-1. Select `Sub` from the dropdown list of `JWT Verifier ID`.
-
- 
-
-1. Next, click on `Add Custom Validation` in the `Select JWT validation` section. Then, input `iss`
- in the Field and `https://api.telegram.org` in the Value field. And click on the `Add Validation`
- button.
-
- 
-
-1. Finally, click on the `Create` button to create the Telegram Custom Authentication verifier.
-
- 
-
- It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive
- an email and the dashboard will display the 'Live' status for the verifier.
-
-## Example
-
-```tsx
-import { Web3AuthNoModal } from "@web3auth/no-modal";
-import {
- WALLET_ADAPTERS,
- CHAIN_NAMESPACES,
- UX_MODE,
- WEB3AUTH_NETWORK,
- getEvmChainConfig,
-} from "@web3auth/base";
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const clientId =
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
-// get it from https://dashboard.web3auth.io by creating a project.
-
-// Get custom chain configs for your chain from https://web3auth.io/docs/connect-blockchain
-const chainConfig = getEvmChainConfig(0x1, clientId)!;
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthNoModal({
- clientId,
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider: privateKeyProvider,
-});
-
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: UX_MODE.REDIRECT,
- loginConfig: {
- jwt: {
- // focus-next-line
- verifier: "web3auth-telegram-example", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId,
- },
- },
- },
-});
-
-web3auth.configureAdapter(authAdapter);
-setWeb3auth(web3auth);
-
-// Initialize
-await web3auth.init();
-
-// Initiate the login using Telegram Widget
-const login = async () => {
- const URL = "https://your-domain";
- // focus-next-line
- window.location.href = `${URL}/login`;
-};
-
-// Catch the JWT token from the backend server and pass it to the Web3Auth SDK
-// Preferably, in a useEffect hook or a callback function
-// focus-start
-const params = new URLSearchParams(window.location.search);
-const idToken = params.get("token");
-// focus-end
-// To know more about how to generate the JWT token, refer to the linked guide.
-
-// Login with Telegram with Web3Auth using received JWT token
-await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- // focus-next-line
- id_token: idToken, // Received from the backend server
- verifierIdField: "sub",
- },
-});
-```
-
-:::info Guide
-
-**[How to use Telegram OAuth with Web3Auth](/guides/telegram)**
-
-:::
-
-## Questions?
-
-If you have any questions or need assistance, please don't hesitate to contact us via posting in
-[this thread](https://web3auth.io/community/t/how-to-use-telegram-oauth-with-web3auth-web3auth/8690)
-on our Community Forum.
diff --git a/docs/auth-provider-setup/social-providers/twitch.mdx b/docs/auth-provider-setup/social-providers/twitch.mdx
deleted file mode 100644
index f8bee3ca0..000000000
--- a/docs/auth-provider-setup/social-providers/twitch.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Twitch Social Login with Web3Auth
-sidebar_label: Twitch
-
-description: "Twitch Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import SetupTwitch from "@site/src/common/guides/_setup-twitch.mdx";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::info
-
-**[Using Twitch with Web3Auth Guide](/guides/twitch)**
-
-:::
-
-## Create a Twitch app
-
-
-
-## Create a Twitch verifier
-
-
-
-1. Create a verifier for your Twitch application by selecting `Twitch` as the Login provider from
- this modal.
- 
-2. Paste the **Client ID** from the Twitch App(above) to the `Client ID` field and click on Create.
- 
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-import { CHAIN_NAMESPACES } from "@web3auth/base";
-
-// Create AuthAdapter instance once you have created Web3Auth instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- twitch: {
- verifier: "w3a-twitch-demo", // Pass the Verifier name here
- typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created
- clientId: "3k7e70gowvxjaxg71hjnc8h8ih3bpf", // Pass on the Twitch `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthInstance.configureAdapter(authAdapter);
-
-// Initialize Modal
-await web3AuthInstance.initModal();
-
-// Login with Twitch
-await web3AuthInstance.connect();
-```
-
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- twitch: {
- verifier: "w3a-twitch-demo", // Pass the Verifier name here
- typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created
- clientId: "3k7e70gowvxjaxg71hjnc8h8ih3bpf", // Pass on the Twitch `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Twitch
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "twitch",
-});
-// focus-end
-```
-
-
-
diff --git a/docs/auth-provider-setup/social-providers/twitter.mdx b/docs/auth-provider-setup/social-providers/twitter.mdx
deleted file mode 100644
index a62271a00..000000000
--- a/docs/auth-provider-setup/social-providers/twitter.mdx
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: X(Twitter) Social Login with Web3Auth
-sidebar_label: Twitter
-
-description: "Twitter Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import SetupFirebaseVerifier from "@site/src/common/guides/_setup-firebase-verifier.mdx";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Twitter login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0 & Firebase, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Set up [Twitter via Auth0](https://auth0.com/blog/how-to-add-a-twitter-social-connection-in-auth0/#Setup-Twitter-connection)
-
-
-1. Create an Auth0 verifier for your application by selecting `Auth0` as the Login provider from
-this modal.  2. Select `Twitter` as the **Authentication
-Type** based on the dropdown.  3. Enter the `Auth0 Client ID` and `Auth0
-Domain` from your Auth0 application. See how to create a new Auth0 application
-[here](https://auth0.com/docs/quickstart/webapp/).
-
-
-
-
-4. Add the
- [Twitter Social Connection](https://marketplace.auth0.com/integrations/twitter-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `Twitter` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Trigger login with Twitter / X
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "twitter", // Use this to skip Auth0 Modal for Twitter / X login
- },
-});
-// focus-end
-```
-
-## Set up [Twitter via Firebase](https://firebase.google.com/docs/auth/web/twitter-login)
-
-
-
-## Example
-
-
-
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-import { initializeApp } from "firebase/app";
-import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
-
-// Your web app's Firebase configuration
-const firebaseConfig = {
- apiKey: "AIzaSyB0nd9YsPLu-tpdCrsXn8wgsWVAiYEpQ_E", // Replace with your Firebase project's API key
- authDomain: "web3auth-oauth-logins.firebaseapp.com", // Replace with your Firebase project's auth domain
- projectId: "web3auth-oauth-logins", // Replace with your Firebase project's ID
- storageBucket: "web3auth-oauth-logins.appspot.com", // Replace with your Firebase project's storage bucket
- messagingSenderId: "461819774167", // Replace with your Firebase project's messaging sender ID
- appId: "1:461819774167:web:e74addfb6cc88f3b5b9c92", // Replace with your Firebase project's app ID
-};
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({ adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "web3auth-firebase-examples", // Pass your verifier name here
- typeOfLogin: "jwt",
- clientId,
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Create a function to handle Twitter/X login via Firebase.
-const signInWithTwitter = async (): Promise => {
- try {
- const app = initializeApp(firebaseConfig);
- const auth = getAuth(app);
-
- const twitterProvider = new TwitterAuthProvider();
- const res = await signInWithPopup(auth, twitterProvider);
- console.log(res);
- return res;
- } catch (err) {
- console.error(err);
- throw err;
- }
-};
-
-// Trigger Twitter/X login
-const loginRes = await signInWithTwitter();
-
-const idToken = await loginRes.user.getIdToken(true);
-
-// Login in No Modal SDK with Twitter / X idToken
-await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
- WALLET_ADAPTERS.AUTH,
- {
- loginProvider: "jwt",
- extraLoginOptions: {
- id_token: idToken,
- verifierIdField: "sub",
- },
- }
-});
-```
-
-
-
-
-```tsx
-import { ADAPTER_EVENTS, CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
-import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
-
-// Initialize
-await web3AuthSFAInstance.init();
-
-// Create a function to handle Twitter/X login via Firebase.
-const signInWithTwitter = async (): Promise => {
- try {
- const app = initializeApp(firebaseConfig);
- const auth = getAuth(app);
-
- // focus-start
- const twitterProvider = new TwitterAuthProvider();
- const res = await signInWithPopup(auth, twitterProvider);
- // focus-end
-
- console.log(res);
- return res;
- } catch (err) {
- console.error(err);
- throw err;
- }
-};
-
-// Trigger Twitter/x Login
-const loginRes = await signInWithTwitter();
-
-const idToken = await loginRes.user.getIdToken(true);
-
-// Parse the idToken to retrive the user information
-const userInfo = parseToken(idToken);
-
-// Login in SFA SDK with Twitter / X idToken
-// focus-start
-const web3authProvider = await web3auth.connect({
- verifier: "w3a-firebase-demo",
- verifierId: userInfo.sub,
- idToken,
-});
-// focus-end
-```
-
-
-
diff --git a/docs/auth-provider-setup/social-providers/vkontakte.mdx b/docs/auth-provider-setup/social-providers/vkontakte.mdx
deleted file mode 100644
index d8c1ab79d..000000000
--- a/docs/auth-provider-setup/social-providers/vkontakte.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: ВКонтакте (vKontakte) Login with Web3Auth
-sidebar_label: vKontakte
-
-description: "ВКонтакте (vKontakte) Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-vKontakte login can be performed in various ways, depending on the use case. We have demonstrated
-this with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a ВКонтакте (vKontakte) verifier
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
-modal.  2. Select the `Other` as the
-**Authentication Type** based on the dropdown.  3. Enter the `Auth0 Client
-ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application
-[here](https://auth0.com/docs/quickstart/webapp/).
-
-
-
-
-4. Add the
- [ВКонтакте (vKontakte) Social Connection](https://marketplace.auth0.com/integrations/vkontakte-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `ВКонтакте (vKontakte)` Custom Authentication via Auth0
- verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthInstance.init();
-
-// Login with ВКонтакте (vKontakte)
-// focus-start
-await web3AuthInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "vkontakte", // Use this to skip Auth0 Modal for ВКонтакте (vKontakte) login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/weibo.mdx b/docs/auth-provider-setup/social-providers/weibo.mdx
deleted file mode 100644
index 4eee2475f..000000000
--- a/docs/auth-provider-setup/social-providers/weibo.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Weibo Social Login with Web3Auth
-sidebar_label: Weibo
-
-description: "Weibo Social Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Weibo login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Weibo verifier
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
-modal.  2. Select the `Weibo` as the
-**Authentication Type** based on the dropdown.  3. Enter the `Auth0 Client ID` and `Auth0
-Domain` from your Auth0 application. See how to create a new Auth0 application
-[here](https://auth0.com/docs/quickstart/webapp/).
-
-
-
-
-4. Add the
- [Weibo Social Connection](https://marketplace.auth0.com/integrations/weibo-social-connection) to
- your Auth0 application.
-5. Click on the `Create` button to create `Weibo` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect",
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-jp-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "N9jnKM2Fo8PFRj8rYM9I7rWX1FW6X5xx", // Pass on the Auth0 `Client ID` here
- },
- },
- },
-});
-
-web3auth.configureAdapter(authAdapter);
-setWeb3auth(web3auth);
-
-// Initialize
-await web3auth.init();
-
-// Login with Weibo
-await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.jp.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "weibo", // Use this to skip Auth0 Modal for Weibo login
- },
-});
-```
diff --git a/docs/auth-provider-setup/social-providers/worldcoin.mdx b/docs/auth-provider-setup/social-providers/worldcoin.mdx
deleted file mode 100644
index 07272a91f..000000000
--- a/docs/auth-provider-setup/social-providers/worldcoin.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Sign in with World ID with Web3Auth
-sidebar_label: WorldCoin
-description: "Create a WorldCoin verifier with Web3Auth | Documentation - Web3Auth"
-keywords:
- [
- worldcoin,
- WorldID,
- OAuth,
- Sign in with WorldID,
- authentication,
- worldcoin login,
- worldcoin oauth,
- worldcoin verifier,
- ]
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Sign in with World ID can be performed in various ways, depending on the use case. We have
-demonstrated this with Auth0, but this can be done by hosting your own server with Auth.js or using
-NextAuth implementation. Check out the [Sign in with World ID](https://docs.worldcoin.org/sign-in)
-documentation.
-
-:::
-
-## Add WorldCoin to your Auth0 Application
-
-1. In your Auth0 Dashboard, Add the
- [WorldCoin Social Connection](https://marketplace.auth0.com/integrations/worldcoin) to your Auth0
- application.
-
-## Create a WorldCoin Verifier
-
-
-
-1. Give a unique name to your verifier in the `Verifier Identifier` field. e.g.,
- `web3auth-worldcoin-verifier`.
-
-1. From the list of Login Providers, select `Social Login Providers` and from the Select Login
- Provider dropdown, select `Auth0`.
- 
-1. Select `Other` as the **Authentication Type** based on the dropdown.
- 
-1. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
-
-1. Click on the `Create` button to create the `WorldCoin` Custom Authentication via Auth0 verifier.
-
- :::note
-
- It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive
- an email and the dashboard will display the 'Live' status for the verifier.
-
- :::
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-worldcoin-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "7u5jfJ3bakrfLBJYhyTquohpOth0Tmt7", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with WorldCoin
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.jp.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- // focus-next-line
- connection: "worldcoin", // Use this to skip Auth0 Modal for WorldCoin's World ID
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/social-providers/yandex.mdx b/docs/auth-provider-setup/social-providers/yandex.mdx
deleted file mode 100644
index d90981e93..000000000
--- a/docs/auth-provider-setup/social-providers/yandex.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: Yandex Login with Web3Auth
-sidebar_label: Yandex
-description: "Yandex Login with Web3Auth | Documentation - Web3Auth"
----
-
-import CreateVerifierFirstStep from "@site/src/common/docs/_create-verifier-first-step.mdx";
-
-:::note
-
-Yandex login can be performed in various ways, depending on the use case. We have demonstrated this
-with Auth0, but this can be done with any other Federated/JWT providers.
-
-:::
-
-## Create a Yandex verifier
-
-
-
-1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this
- modal.
- 
-2. Select the `Other` as the **Authentication Type** based on the dropdown.
- 
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
- new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
-
- 
- 
-
-4. Add the
- [Yandex Social Connection](https://marketplace.auth0.com/integrations/yandex-social-connection)
- to your Auth0 application.
-5. Click on the `Create` button to create `Yandex` Custom Authentication via Auth0 verifier.
-
-## Example
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-// Create AuthAdapter instance once you have created Web3AuthNoModal instance
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- loginConfig: {
- // focus-start
- jwt: {
- verifier: "w3a-auth0-uk-demo", // Pass the Verifier name here
- typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
- clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
- },
- // focus-end
- },
- },
-});
-
-web3AuthNoModalInstance.configureAdapter(authAdapter);
-
-// Initialize
-await web3AuthNoModalInstance.init();
-
-// Login with Yandex
-// focus-start
-await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "jwt",
- extraLoginOptions: {
- domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
- verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
- connection: "yandex", // Use this to skip Auth0 Modal for Yandex login
- },
-});
-// focus-end
-```
diff --git a/docs/auth-provider-setup/verifiers.mdx b/docs/auth-provider-setup/verifiers.mdx
deleted file mode 100644
index 7b4694ddc..000000000
--- a/docs/auth-provider-setup/verifiers.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Creating Verifier on Web3Auth Dashboard
-sidebar_label: Create Verifier
-description:
- Creating Verifier on the Web3Auth Dashboard | Auth Provider Setup | Documentation - Web3Auth"
-image: "images/docs-meta-cards/documentation-card.png"
----
-
-import BYOCustomJWTTiles from "@site/src/common/docs/_byo-custom-jwt-providers.mdx";
-import FederatedTiles from "@site/src/common/docs/_federated-providers.mdx";
-import SocialTiles from "@site/src/common/docs/_social-login-providers.mdx";
-
-A verifier is essentially a configuration that contains information about the OAuth provider you've
-chosen for your application. It acts as a bridge between Web3Auth and the OAuth provider, enabling
-the Auth Network nodes to query and validate JWT tokens effectively.
-
-## Create Verifier
-
-The `Custom Authentication` tab of a project looks something like this:
-
-
-
-Once you click on the `Create Verifier` button, you'll see a page similar to this:
-
-
-
-Here, you can create a new verifier for your application by specifying the necessary details as per
-your OAuth provider / login details.
-
-To create a verifier, you need to input the following details:
-
-### Verifier identifier
-
-The name of your verifier. This is a unique identifier that will be used to reference this verifier.
-
-### Supported Auth Provider
-
-Once you have named your verifier, the next step is to choose the authentication provider for the
-verifier. We have listed some of the providers we support. Please note, the support is not just
-limited to listed porviders. If you don't find the provider you want to integrate, please feel free
-to reach out to us on [Discord](https://discord.gg/web3auth), or post your query on the
-[Community Support Forum](https://web3auth.io/community/c/feature-request/14) and we will take care
-of things from there.
-
-#### Social Providers
-
-
-
-#### Authentication Service Providers
-
-Authentication Service Providers allow you to utilize certain implicit and authorization code
-grants. You may also use social providers on top of Federated / Identity providers to pick other
-social providers (for example, Twitter, Apple, GitHub, LinkedIn, WeChat, and so on) that we do not
-natively support. It is important to note that you must register an app with the Authentication
-Service Providers before proceeding.
-
-The links below will help you set up the following authentication service providers:
-
-
-
-#### Bring your own JWT Provider
-
-
-
-There are some nuances with certain login providers, so don't hesitate to get in touch with us on
-[Discord](https://discord.gg/web3auth) or simply post your query on the
-[Community Support Forum](https://web3auth.io/community/c/feature-request/14) and we will take care
-of things from there.
-
-## Edit Verifier
-
-Click on the verifier or the three dots next to the verifier you wish to edit and click on
-`Edit Verifier` in the dropdown.
-
-
-
-The `Edit Verifier` page will appear with previously filled information. Make the necessary changes
-and click on the `Update Verifier` button on the bottom.
-
-## Archive Verifier
-
-To archive a verifier from the existing list, click on the three dots next to the verifier you wish
-to archive, and then select "Archive Verifier" from the dropdown.
-
-When you archive a verifier, it will no longer be available for use in your application. However,
-you can always unarchive it later from the Archive page in the dashboard.
-
-
diff --git a/docs/authentication/authentication.mdx b/docs/authentication/authentication.mdx
new file mode 100644
index 000000000..9567327f6
--- /dev/null
+++ b/docs/authentication/authentication.mdx
@@ -0,0 +1,176 @@
+---
+title: Authentication
+sidebar_label: Overview
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Authentication | Documentation - Web3Auth"
+---
+
+import Tiles from "@theme/Tiles";
+
+**Web3Auth** offers a robust authentication system designed to bridge the gap between Web2 and Web3
+identity, providing developers with powerful tools to implement secure, flexible, and user-friendly
+onboarding flows. By offering fine-grained control over login experiences and wallet integrations,
+Web3Auth helps enhance user conversion while enabling seamless access to blockchain-based
+functionality.
+
+Using Web3Auth’s client-side SDKs, applications can authenticate users through a variety of
+mechanisms, supporting both traditional (Web2) and decentralized (Web3) identity paradigms.
+
+## Supported Authentication Methods
+
+Web3Auth supports a wide range of authentication options, enabling developers to meet the needs of
+diverse user bases and platform requirements.
+
+### Native Email & SMS Login
+
+Provides passwordless login via one-time passcodes (OTP)/ magic links sent to the user’s
+[email address](/authentication/basic-logins/email-passwordless) or
+[phone number](/authentication/basic-logins/sms-otp). This method is widely accessible and
+especially useful for onboarding users unfamiliar with Web3 or crypto wallets.
+
+### External Wallets
+
+Users can also authenticate using
+[third-party wallets](/authentication/basic-logins/external-wallets) such as MetaMask, Phantom, and
+other WalletConnect supported wallets. Developers can select which wallets to display via the
+Web3Auth Dashboard, providing tailored options based on user preference or regional relevance.
+
+### OAuth and Social Login
+
+Web3Auth supports a variety of social identity providers, allowing users to authenticate using
+accounts they already trust and use daily. Supported providers include:
+
+export const SocialLoginSetup = [
+ {
+ name: "",
+ description: "",
+ tiles: [
+ {
+ key: "google",
+ title: "Google",
+ icon: "logo-google.png",
+ path: "/authentication/social-logins/google",
+ },
+ {
+ key: "apple",
+ title: "Apple",
+ icon: "logo-apple.png",
+ path: "/authentication/social-logins/oauth/#login-with-apple",
+ },
+ {
+ key: "twitter",
+ title: "Twitter (X)",
+ icon: "logo-twitter.png",
+ path: "/authentication/social-logins/oauth/#login-with-x",
+ },
+ {
+ key: "facebook",
+ title: "Facebook",
+ icon: "logo-facebook.png",
+ path: "/authentication/social-logins/facebook",
+ },
+ {
+ key: "discord",
+ title: "Discord",
+ icon: "logo-discord.png",
+ path: "/authentication/social-logins/discord",
+ },
+ {
+ key: "twitch",
+ title: "Twitch",
+ icon: "logo-twitch.png",
+ path: "/authentication/social-logins/twitch",
+ },
+ {
+ key: "github",
+ title: "GitHub",
+ icon: "logo-github.png",
+ path: "/authentication/social-logins/oauth/#login-with-github",
+ },
+ {
+ key: "farcaster",
+ title: "Farcaster",
+ icon: "logo-farcaster.png",
+ path: "/authentication/social-logins/oauth/#login-with-farcaster",
+ },
+ {
+ key: "reddit",
+ title: "Reddit",
+ icon: "logo-reddit.png",
+ path: "/authentication/social-logins/oauth/#login-with-reddit",
+ },
+ {
+ key: "kakao",
+ title: "Kakao",
+ icon: "logo-kakao.png",
+ path: "/authentication/social-logins/oauth/#login-with-kakao",
+ },
+ {
+ key: "linkedin",
+ title: "LinkedIn",
+ icon: "logo-linkedin.png",
+ path: "/authentication/social-logins/oauth/#login-with-linkedin",
+ },
+ {
+ key: "line",
+ title: "Line",
+ icon: "logo-line.png",
+ path: "/authentication/social-logins/oauth/#login-with-line",
+ },
+ {
+ key: "wechat",
+ title: "WeChat",
+ icon: "logo-wechat.png",
+ path: "/authentication/social-logins/oauth/#login-with-wechat",
+ },
+ ],
+ },
+];
+
+
+
+Social login simplifies onboarding by reducing friction and improving usability—particularly in
+consumer-facing applications.
+
+### JWT-Based Authentication
+
+Web3Auth allows integration with any existing JWT-based authentication system. This includes OpenID
+Connect (OIDC) and OAuth 2.0 compliant identity providers such as:
+
+export const JWTLoginSetup = [
+ {
+ name: "",
+ description: "",
+ tiles: [
+ {
+ key: "auth0",
+ title: "Auth0",
+ icon: "logo-auth0.png",
+ path: "/authentication/custom-connections/auth0",
+ },
+ {
+ key: "firebase",
+ title: "Firebase",
+ icon: "logo-firebase.png",
+ path: "/authentication/custom-connections/firebase",
+ },
+ {
+ key: "aws-cognito",
+ title: "AWS Cognito",
+ icon: "logo-aws-cognito.png",
+ path: "/authentication/custom-connections/aws-cognito",
+ },
+ {
+ key: "custom-jwt",
+ title: "Custom JWT",
+ icon: "logo-jwt.png",
+ path: "/authentication/custom-connections/custom-jwt",
+ },
+ ],
+ },
+];
+
+
+
+This is ideal for applications that already have a secure identity layer and want to enhance it with
+non-custodial wallet generation and key management.
diff --git a/docs/authentication/basic-logins/email-passwordless.mdx b/docs/authentication/basic-logins/email-passwordless.mdx
new file mode 100644
index 000000000..9120c864f
--- /dev/null
+++ b/docs/authentication/basic-logins/email-passwordless.mdx
@@ -0,0 +1,104 @@
+---
+title: Email Passwordless Login with Web3Auth
+sidebar_label: Email Passwordless
+description: "Email Passwordless Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import EmailPasswordlessToggle from "@site/static/images/dashboard/email-passwordless-toggle.png";
+import EmailPasswordlessAddConnection from "@site/static/images/dashboard/email-passwordless-add-connection.png";
+import EmailPasswordlessOnboarding from "@site/static/images/dashboard/email-passwordless-onboarding.gif";
+
+Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in
+seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of
+passwordless authentication simplifies the onboarding process, removes friction for end users, and
+expands accessibility—especially in regions where social login options may be limited.
+
+
+
+
+
+## Set Up a Custom Email Connection
+
+:::success Enable on Dashboard
+
+To use this feature, developers must first enable `Email Passwordless` from the Social Connections
+section in the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for email login.
+
+:::
+
+
+
+
+
+For enhanced control and branding, developers are encouraged to configure a custom email connection.
+Follow these steps:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+2. Go to the `Social Connections` section.
+3. Click the `Settings` icon next to the toggle for `Email Passwordless`.
+4. Enter your custom `Auth Connection ID`.
+5. Click `Add Connection` to complete the setup.
+
+
+
+
+
+## Usage
+
+```tsx title="web3authContext.tsx"
+import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/react";
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions: {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ // focus-start
+ loginMethods: {
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ },
+ // focus-end
+ },
+ },
+ },
+ },
+};
+
+export default web3AuthContextConfig;
+```
+
+Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
diff --git a/docs/authentication/basic-logins/external-wallets.mdx b/docs/authentication/basic-logins/external-wallets.mdx
new file mode 100644
index 000000000..1da28f869
--- /dev/null
+++ b/docs/authentication/basic-logins/external-wallets.mdx
@@ -0,0 +1,54 @@
+---
+title: External Wallets Login with Web3Auth
+sidebar_label: External Wallets
+description: "External Wallets Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import ExternalWalletsToggle from "@site/static/images/dashboard/external-wallets-toggle.png";
+import ExternalWalletsSelectWallets from "@site/static/images/dashboard/external-wallets-select-wallets.png";
+
+Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in
+seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of
+passwordless authentication simplifies the onboarding process, removes friction for end users, and
+expands accessibility—especially in regions where social login options may be limited.
+
+## Enable External Wallets
+
+:::success Enable on Dashboard
+
+To enable this feature, developers must first activate `External Wallets` from the Social
+Connections section in the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+
+
+
+
+To choose which external wallets to enable, click the `Settings` icon next to the **External
+Wallets** toggle in the Social Connections section of the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::note
+
+Metamask Wallet is enabled by default and cannot be disabled.
+
+:::
+
+A wide range of wallets are available to choose from.
+
+
+
+
diff --git a/docs/authentication/basic-logins/sms-otp.mdx b/docs/authentication/basic-logins/sms-otp.mdx
new file mode 100644
index 000000000..33e36512f
--- /dev/null
+++ b/docs/authentication/basic-logins/sms-otp.mdx
@@ -0,0 +1,104 @@
+---
+title: SMS OTP Login with Web3Auth
+sidebar_label: SMS OTP
+description: "SMS OTP Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import SMSOTPToggle from "@site/static/images/dashboard/sms-otp-toggle.png";
+import SMSOTPAddConnection from "@site/static/images/dashboard/sms-otp-add-connection.png";
+import SMSOTPOnboarding from "@site/static/images/dashboard/email-passwordless-onboarding.gif";
+
+Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in
+seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of
+passwordless authentication simplifies the onboarding process, removes friction for end users, and
+expands accessibility—especially in regions where social login options may be limited.
+
+
+
+
+
+## Set Up a Custom SMS OTP Connection
+
+:::success Enable on Dashboard
+
+To use this feature, developers must first enable `SMS OTP` from the Social Connections section in
+the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for SMS OTP login.
+
+:::
+
+
+
+
+
+For enhanced control and branding, developers are encouraged to configure a custom SMS OTP
+connection. Follow these steps:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+2. Go to the `Social Connections` section.
+3. Click the `Settings` icon next to the toggle for `SMS OTP`.
+4. Enter your custom `Auth Connection ID`.
+5. Click `Add Connection` to complete the setup.
+
+
+
+
+
+## Usage
+
+```tsx title="web3authContext.tsx"
+import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/react";
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions: {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ // focus-start
+ loginMethods: {
+ sms_passwordless: {
+ name: "SMS Passwordless",
+ authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
+ authConnectionId: "sms-test-demo", // Replace with your custom SMS OTP Auth Connection ID
+ },
+ },
+ // focus-end
+ },
+ },
+ },
+ },
+};
+
+export default web3AuthContextConfig;
+```
+
+Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
diff --git a/docs/authentication/custom-connections/auth0.mdx b/docs/authentication/custom-connections/auth0.mdx
new file mode 100644
index 000000000..1eb086307
--- /dev/null
+++ b/docs/authentication/custom-connections/auth0.mdx
@@ -0,0 +1,288 @@
+---
+title: Auth0 Login with Web3Auth
+sidebar_label: Auth0
+description: "Auth0 Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import Tiles from "@theme/Tiles";
+
+import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
+import Auth0Connection from "@site/static/images/dashboard/auth0-connection.png";
+
+import JwtLoginAuth0 from "../../sdk/web/react/advanced/_custom-authentication-snippets/_jwt_login_auth0.mdx";
+import ImplicitLoginAuth0Google from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_auth0_google.mdx";
+import ImplicitLoginAuth0Spa from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_auth0_spa.mdx";
+
+Auth0 is a powerful authentication and authorization platform that enables developers to securely
+manage user identities. Web3Auth offers native support for integrating Auth0 as a service provider,
+allowing projects to leverage Auth0’s robust authentication mechanisms within the Web3Auth
+ecosystem.
+
+[Take a look at the supported social logins on Auth0](https://marketplace.auth0.com/categories/social-login)
+
+## Create an Auth0 Application
+
+To begin, developers must first create an Auth0 application specific to their project. This initial
+setup is essential before configuring the connection with Web3Auth. Once the Auth0 application is
+created, developers can proceed to establish an Auth0 connection within the Web3Auth Dashboard.
+
+This integration allows users to authenticate through Auth0, while still benefiting from Web3Auth’s
+key management and wallet abstraction features. For platform-specific implementation details or
+additional customization, developers are encouraged to refer to the
+[official Auth0 documentation](https://auth0.com/docs/quickstart/native#webapp).
+
+export const Auth0Setup = [
+ {
+ name: "",
+ description: "",
+ tiles: [
+ {
+ key: "web",
+ title: "Web",
+ icon: "logo-js.png",
+ path: "https://auth0.com/docs/quickstart/spa/vanillajs/interactive",
+ },
+ {
+ key: "android",
+ title: "Android (Kotlin)",
+ icon: "logo-android.png",
+ path: "https://auth0.com/docs/quickstart/native/android/interactive",
+ },
+ {
+ key: "ios",
+ title: "iOS",
+ icon: "logo-apple.png",
+ path: "https://auth0.com/docs/quickstart/native/ios-swift/interactive",
+ },
+ {
+ key: "flutter",
+ title: "Flutter",
+ icon: "logo-flutter.png",
+ path: "https://auth0.com/docs/quickstart/native/flutter/interactive",
+ },
+ {
+ key: "react-native",
+ title: "React Native",
+ icon: "logo-react.png",
+ path: "https://auth0.com/docs/quickstart/native/react-native/interactive",
+ },
+ ],
+ },
+];
+
+
+
+## Create an Auth0 Connection
+
+:::success Create Auth0 Connection on Dashboard
+
+To use this feature, developers must go to the `Custom Connections` tab in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+
+
+
+
+Follow these steps to create an Auth0 connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+2. Go to the `Custom Connections` section.
+3. Click on the `Settings` icon near the Auth0 connection.
+4. Enter the `Auth Connection ID`.
+5. Select the `JWT user identifier`: `email`, `sub` or `custom`.
+6. Toggle the Case Sensitivity of `User Identifier`. (Optional)
+7. Enter `Auth0 Client ID`.
+8. Enter `Auth0 Domain`.
+9. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Usage
+
+Since, the `Auth0 Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Web
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Android
+
+##### Create Web3Auth Instance
+
+In your activity, create a `Web3Auth` instance with your Web3Auth project's configurations.
+
+```kotlin
+web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = getString(R.string.web3auth_project_id), // pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.SAPPHIRE_MAINNET
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"), // your app's redirect URL
+ // focus-start
+ loginConfig = hashMapOf("jwt" to LoginConfigItem(
+ verifier = "web3auth-auth0-demo",
+ typeOfLogin = TypeOfLogin.JWT,
+ name = "Auth0 Login",
+ clientId = getString(R.string.web3auth_auth0_client_id)
+ )
+ )
+ // focus-end
+ )
+)
+
+// Handle user signing in when app is not alive
+web3Auth.setResultUrl(intent?.data)
+```
+
+##### Logging in
+
+Once initialized, you can use the `web3Auth.login(LoginParams("{selectedLoginProvider}"))` function
+to authenticate the user when they click the login button.
+
+```kotlin
+private fun signIn() {
+ val selectedLoginProvider = Provider.JWT // For Auth0, we use JWT
+ val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ // focus-start
+ LoginParams(
+ selectedLoginProvider,
+ extraLoginOptions = ExtraLoginOptions(
+ domain = "https://YOUR_AUTH0_DOMAIN",
+ verifierIdField = "sub"
+ )
+ )
+ // focus-end
+ )
+}
+```
+
+When connecting, the `login` function takes the LoginParams arguments for the login. See the
+[LoginParams](/sdk/mobile/pnp/android/usage#parameters) for more details.
+
+### Flutter
+
+##### Create Web3Auth Instance
+
+In your `main.dart` file, initialize the `Web3AuthFlutter` plugin at the very beginning such as in
+the overriden `initState` function
+
+```dart
+Future initPlatformState() async {
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+ // focus-start
+ final loginConfig = HashMap();
+ loginConfig['jwt'] = LoginConfigItem(
+ verifier: "VERIFIER-NAME", // get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ name: "Web3Auth Flutter Auth0 Example",
+ clientId: "AUTH0-CLIENT-ID" // auth0 client id
+ );
+ // focus-end
+
+ await Web3AuthFlutter.init(Web3AuthOptions(
+ clientId:'YOUR WEB3AUTH CLIENT ID FROM DASHBOARD',
+ network: Network.sapphire_mainnet,
+ redirectUri: redirectUrl,
+ loginConfig: loginConfig
+ ));
+
+ await Web3AuthFlutter.initialize();
+}
+```
+
+##### Logging in
+
+Once initialized, you can use the
+`Web3AuthFlutter.login(LoginParams( loginProvider: Provider.google ))` function to authenticate the
+user when they click the login button.
+
+```dart
+Future _withAuth0() {
+ // focus-start
+ return Web3AuthFlutter.login(LoginParams(
+ loginProvider: Provider.jwt,
+ mfaLevel: MFALevel.OPTIONAL,
+ extraLoginOptions: ExtraLoginOptions(
+ domain: 'YOUR_AUTH0_DOMAIN', // eg. https://torus.us.auth0.com
+ verifierIdField: 'sub')));
+ // focus-end
+}
+```
+
+Read more about initializing the Flutter SDK [here](/sdk/mobile/pnp/flutter/initialize).
+
+### React Native
+
+```tsx
+const web3auth = new Web3Auth(WebBrowser, SecureStore, {
+ clientId,
+ network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
+ loginConfig: {
+ // focus-start
+ jwt: {
+ verifier: "YOUR_AUTH0_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
+ typeOfLogin: "jwt",
+ clientId: "AUTH0_CLIENT_ID_123ABcdefg4HiJKlMno4P5QR6stUvWXY", // use your app client id you got from auth0
+ },
+ // focus-end
+ },
+});
+```
+
+```tsx
+const web3authResponse = await web3auth.login({
+ redirectUrl: resolvedRedirectUrl,
+ // focus-start
+ loginProvider: "jwt",
+ extraLoginOptions: {
+ domain: "https://YOUR-AUTH0-DOMAIN", // Please append "https://" before your domain
+ verifierIdField: "sub", // For SMS & Email Passwordless, use "name" as verifierIdField
+ },
+ // focus-end
+});
+```
diff --git a/docs/authentication/custom-connections/aws-cognito.mdx b/docs/authentication/custom-connections/aws-cognito.mdx
new file mode 100644
index 000000000..915c51ed8
--- /dev/null
+++ b/docs/authentication/custom-connections/aws-cognito.mdx
@@ -0,0 +1,90 @@
+---
+title: AWS Cognito Login with Web3Auth
+sidebar_label: AWS Cognito
+description: "AWS Cognito Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
+import AWSConnection from "@site/static/images/dashboard/aws-cognito-connection.png";
+import ImplicitLoginCognito from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_aws_cognito.mdx";
+
+AWS Cognito is a scalable authentication service provided by Amazon Web Services that enables
+developers to securely manage user sign-up, sign-in, and access control. Web3Auth supports AWS
+Cognito as a service provider, allowing seamless integration between AWS Cognito’s authentication
+capabilities and Web3Auth’s decentralized key management infrastructure.
+
+[Take a look at the supported social logins on AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html)
+
+## Create an AWS Cognito Application
+
+To begin the integration process, developers must first create a new AWS Cognito application using
+the [AWS Management Console](https://console.aws.amazon.com/). This initial setup is required before
+configuring the connection within Web3Auth.
+
+Once the AWS Cognito application is created, developers can proceed to add it as a custom connection
+in the Web3Auth Dashboard.
+
+[Learn how to set up AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-console).
+
+## Create an AWS Cognito Connection
+
+:::success Create AWS Cognito Connection on Dashboard
+
+To use this feature, developers must go to the `Custom Connections` tab in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+
+
+
+
+Follow these steps to create a AWS Cognito connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Custom Connections` section.
+1. Click on the `Settings` icon near the `AWS Cognito` connection.
+1. Enter the `Cognito Connection ID`.
+1. Paste `https://cognito-idp.{REGION}.amazonaws.com/{USER_POOL_ID}/.well-known/jwks.json` as
+ `JWKS Endpoint`.
+1. Paste a sample `JWT Token` to auto populate the best **JWT validations** possible.
+1. Select the `JWT user identifier`: `email`, `sub` or `custom`.
+1. Toggle the Case Sensitivity of `User Identifier`. (Optional)
+1. Click on `Add Custom Validations` to add validations manually.
+ 1. Type iss as a field and `https://cognito-idp.{REGION}.amazonaws.com/{USER_POOL_ID}` as a
+ value.
+ 1. Next, type aud as a field and `APP_CLIENT_ID` as a value.
+1. Finally, click on the `Add Connection` button.
+
+> Note: Replace the `REGION`, `USER_POOL_ID` and `APP_CLIENT_ID` with your Cognito specific details.
+
+
+
+
+
+## Usage
+
+Since, the `AWS Cognito Connection` details are available from Dashboard, developers don't need to
+pass any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Login with AWS Cognito
+
+
diff --git a/docs/authentication/custom-connections/custom-jwt.mdx b/docs/authentication/custom-connections/custom-jwt.mdx
new file mode 100644
index 000000000..7e89ced0e
--- /dev/null
+++ b/docs/authentication/custom-connections/custom-jwt.mdx
@@ -0,0 +1,336 @@
+---
+title: Custom JWT Login with Web3Auth
+sidebar_label: Custom JWT
+description: "Custom JWT Login with Web3Auth | Documentation - Web3Auth"
+image: "images/docs-meta-cards/documentation-card.png"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
+import CustomJWTConnection from "@site/static/images/dashboard/custom-connection.png";
+import JwtLoginCustom from "../../sdk/web/react/advanced/_custom-authentication-snippets/_jwt_login_custom.mdx";
+
+Web3Auth supports integration with custom login providers through JWT-based authentication schemes,
+allowing developers to maintain their existing authentication infrastructure while leveraging
+Web3Auth’s wallet and key management capabilities. Custom authentication can be implemented using
+industry-standard cryptographic algorithms such as RSA or ECDSA signatures.
+
+To use this feature, developers must ensure that their JWTs adhere to the
+[JWT specification](https://datatracker.ietf.org/doc/html/rfc7519). Each JWT must be signed using a
+private key, and its corresponding public key must be accessible via a
+[JWKS (JSON Web Key Set)](https://datatracker.ietf.org/doc/html/rfc7517) endpoint. Web3Auth will use
+this endpoint to verify the integrity and authenticity of incoming tokens during login.
+
+Once the Custom JWT login is working, developers can proceed to add it as a custom connection in the
+Web3Auth Dashboard.
+
+## Set up Custom JWT Connection
+
+:::success Create Custom Connection on Dashboard
+
+To use this feature, developers must go to the `Custom Connections` tab in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+
+
+
+
+Follow these steps to create a AWS Cognito connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Custom Connections` section.
+1. Click on the `Settings` icon near the `Custom Connection`.
+1. Enter the `Auth Connection ID`.
+1. Paste the `JWKS Endpoint`.
+1. Paste a sample `JWT Token` to auto populate the best **JWT validations** possible.
+1. Select the `JWT user identifier`: `email`, `sub` or `custom`.
+1. Toggle the Case Sensitivity of `User Identifier`. (Optional)
+1. Click on `Add Custom Validations` to add validations manually.
+ 1. Type iss as a field and `your-issuer` as a value.
+ 1. Next, type aud as a field and `your-audience` as a value.
+1. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Create JWT
+
+To generate the JWT, developers may use a package of their choice. Web3Auth provides documentation
+and examples using both the `jsonwebtoken` and `jose` libraries.
+
+### Generate Private Key
+
+Developers can generate a private key using the `openssl` command-line tool. This private key will
+be used to sign the ID token.
+
+
+
+
+Developers can run the following command in the terminal to generate a new `privateKey.pem` file
+containing the `RSA256` key details.
+
+```bash
+openssl genrsa -out privateKey.pem 2048
+```
+
+Once the private key is generated, developers can generate the public key which can be used to
+verify the JWT and [convert it to JWKS](#how-to-convert-pem-to-jwks).
+
+```bash
+openssl rsa -in privateKey.pem -pubout -out publicKey.pem
+```
+
+
+
+
+
+Developers can run the following command in the terminal to generate a new `privateKey.pem` file
+containing the `ECDSA` key details.
+
+```bash
+openssl ecparam -name secp256k1 -genkey -noout -out ec-secp256k1-privateKey.pem
+```
+
+Once the private key is generated, developers can generate the public key which can be used to
+verify the JWT and [convert it to JWKS](#how-to-convert-pem-to-jwks).
+
+```bash
+openssl ec -in ec-secp256k1-privateKey.pem -pubout -out ec-secp256k1-publicKey.pem
+```
+
+
+
+
+### Install JWT Library
+
+Developers can install a JWT library of their choice. Following are the documentation and examples
+using both the `jsonwebtoken` and `jose` libraries.
+
+```bash npm2yarn
+npm i jsonwebtoken
+
+npm i jose
+```
+
+### Generate JWT
+
+
+
+
+Web3Auth provides documentation for using RSA256 and ECDSA—two of the most commonly used
+algorithms—for generating JWTs with the `jsonwebtoken` package. For a complete list of supported
+algorithms, developers can refer to the
+[jsonwebtoken documentation](https://www.npmjs.com/package/jsonwebtoken#algorithms-supported).
+
+
+
+
+Developers can create an `index.js` file and insert the following code snippet to generate a JWT
+using the `RSA` algorithm.
+
+```tsx
+import jwt from "jsonwebtoken";
+import fs from "fs";
+
+var privateKey = fs.readFileSync("privateKey.pem");
+
+var token = jwt.sign(
+ {
+ sub: "faj2720i2fdG7NsqznOKrthDvq43", // must be unique to each user
+ name: "Mohammad Shahbaz Alam",
+ email: "shahbaz@web3auth.io",
+ aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
+ iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
+ iat: Math.floor(Date.now() / 1000),
+ exp: Math.floor(Date.now() / 1000) + 60 * 60,
+ },
+ privateKey,
+ { algorithm: "RS256", keyid: "1bb9605c36e69386830202b2d" }, // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
+);
+
+console.log(token);
+```
+
+
+
+
+Developers can create an `index.js` file and insert the following code snippet to generate a JWT
+using the `ECDSA` algorithm.
+
+```tsx
+import jwt from "jsonwebtoken";
+import fs from "fs";
+
+var privateKey = fs.readFileSync("ec-secp256k1-privateKey.pem");
+
+var token = jwt.sign(
+ {
+ sub: "faj2720i2fdG7NsqzncndijwnKrthDvq43",
+ name: "Mohammad Shahbaz Alam",
+ email: "shahbaz@web3auth.io",
+ aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
+ iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
+ iat: Math.floor(Date.now() / 1000),
+ exp: Math.floor(Date.now() / 1000) + 60 * 60,
+ },
+ privateKey,
+ { algorithm: "ECDSA", keyid: "1bb9605c36e69386830202b2d" }, // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
+);
+
+console.log(token);
+```
+
+
+
+
+
+
+
+Create an index.js file and paste the below code to generate the JWT using RSA algorithm.
+
+```tsx
+import * as jose from "jose";
+import fs from "fs";
+var privateKey = fs.readFileSync("privateKey.pem");
+var publicKey = fs.readFileSync("publicKey.pem");
+
+const jwt = await new jose.SignJWT({ "urn:example:claim": true })
+ .setProtectedHeader({ alg: "RS256", kid: "1bb9605c36e69386830202b2d" }) // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
+ .setIssuedAt()
+ .setIssuer("https://my-authz-server")
+ .setAudience("urn:my-resource-server")
+ .setExpirationTime("2h")
+ .sign(privateKey);
+
+console.log(jwt);
+
+// Verifying the JWT using Remote JWK Set.
+// This is just to show how the Verify works, look above to set-up custom jwt verifier on the Web3Auth Dashboard.
+// Check the steps below to see how once can generate the JWKS
+const JWKS = jose.createRemoteJWKSet(new URL("https://my-authz-server/.well-known/jwks.json"));
+
+const { payload, protectedHeader } = await jose.jwtVerify(jwt, JWKS, {
+ issuer: "https://my-authz-server",
+ audience: "urn:my-resource-server",
+});
+
+console.log(protectedHeader);
+console.log(payload);
+```
+
+
+
+
+:::warning Facing issue with JWT?
+
+Check out [**this troubleshooting page to fix those.**](/troubleshooting/jwt-errors)
+
+:::
+
+## Usage
+
+Since, the `Custom Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Login with JWT
+
+
+
+## What are JWKS?
+
+JWKS stands for JSON Web Key Set. It is a set of keys containing the public keys that should be used
+to verify any JSON Web Token (JWT) issued by the authorization server and signed using the RS256
+signing algorithm.
+
+### How to create JWKS?
+
+- Most of the login providers that support JWT-based login will provide you this URL, such as
+ Firebase, Google, Auth0, AWS Cognito etc.
+
+ - Firebase: `https://www.googleapis.com/service_accounts/v1/jwk/{your-project-id}`
+ - Auth0: `https://{your-domain}/.well-known/jwks.json`
+ - Google: `https://www.googleapis.com/oauth2/v3/certs`
+ - AWS Cognito: `https://cognito-idp.{region}.amazonaws.com/{userPoolId}/.well-known/jwks.json`
+
+- If you are using your own custom JWT, you will need to convert your PEM file to JWKS.
+
+### How to convert PEM to JWKS?
+
+If you're using `jose` or `jsonwebtoken` library, you can use the following steps to convert your
+PEM file to JWKS.
+
+1. Create a Private Key using openssl.
+
+ ```bash
+ openssl genrsa -out privateKey.pem 2048
+ ```
+
+ This privateKey will be used to sign the token.
+
+2. Using the above privateKey.pem file, create a Public Key.
+
+ ```bash
+ openssl rsa -in privateKey.pem -pubout -out publicKey.pem
+ ```
+
+ This publicKey.pem file will be converted to JWKS.
+
+3. Convert the publicKey.pem file to JWKS.
+
+ Now, look for a tool that converts `.pem` to `jwk(s)` format.
+
+ - One of the tools is https://pem2jwk.vercel.app/
+ - Select Signing Algorithm: `RS256`
+ - Select Public Key Use: `Signing`
+ - Key ID: `paste-yours` or leave it blank to generate a random one.
+ - PEM encoded key: `{paste-the-publicKey-pem-file-s-content-here}`
+ - Click on the `Convert to JWK` button.
+
+ 
+
+4. To complete the process, you need to save the output as a `.json` file, host it on your server,
+ and make sure it's publicly accessible.
+
+ This will give you the `JWKS Endpoint`, which is required when setting up a `Custom JWT Verifier`
+ on the Web3Auth Dashboard.
diff --git a/docs/authentication/custom-connections/firebase.mdx b/docs/authentication/custom-connections/firebase.mdx
new file mode 100644
index 000000000..51197500c
--- /dev/null
+++ b/docs/authentication/custom-connections/firebase.mdx
@@ -0,0 +1,360 @@
+---
+title: Firebase Login with Web3Auth
+sidebar_label: Firebase
+description: "Firebase Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import Tiles from "@theme/Tiles";
+
+import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
+import FirebaseConnection from "@site/static/images/dashboard/firebase-connection.png";
+import JwtLoginFirebase from "../../sdk/web/react/advanced/_custom-authentication-snippets/_jwt_login_firebase.mdx";
+
+Firebase is a popular backend platform that enables developers to seamlessly integrate
+authentication, databases, and other services into their applications. Web3Auth supports Firebase as
+an authentication provider, allowing developers to leverage Firebase Authentication within the
+Web3Auth framework for secure user login and key management.
+
+[Take a look at the supported social logins on Firebase](https://firebase.google.com/docs/auth)
+
+## Create a Firebase Project
+
+To get started, developers must first create a Firebase project in the Firebase Console. This is a
+required step before integrating Firebase with Web3Auth. Once the Firebase project is set up,
+developers can proceed to configure a Firebase connection in the Web3Auth Dashboard.
+
+Web3Auth’s Firebase integration enables the use of Firebase-issued ID tokens to authenticate users,
+combining Firebase’s authentication flexibility with Web3Auth’s decentralized key infrastructure.
+
+For detailed implementation steps and platform-specific instructions, developers can follow the
+[Firebase documentation](https://firebase.google.com/docs).
+
+export const FirebaseSetup = [
+ {
+ name: "",
+ description: "",
+ tiles: [
+ {
+ key: "web",
+ title: "Web",
+ icon: "logo-js.png",
+ path: "https://firebase.google.com/docs/web/setup",
+ },
+ {
+ key: "android",
+ title: "Android (Kotlin)",
+ icon: "logo-android.png",
+ path: "https://firebase.google.com/docs/android/setup",
+ },
+ {
+ key: "ios",
+ title: "iOS",
+ icon: "logo-apple.png",
+ path: "https://firebase.google.com/docs/ios/setup",
+ },
+ {
+ key: "flutter",
+ title: "Flutter",
+ icon: "logo-flutter.png",
+ path: "https://firebase.google.com/docs/flutter/setup",
+ },
+ {
+ key: "unity",
+ title: "Unity",
+ icon: "logo-unity.png",
+ path: "https://firebase.google.com/docs/unity/setup",
+ },
+ ],
+ },
+];
+
+
+
+## Create a Firebase Connection
+
+:::success Create Firebase Connection on Dashboard
+
+To use this feature, developers must go to the `Custom Connections` tab in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+
+
+
+
+Follow these steps to create a Firebase connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Custom Connections` section.
+1. Click on the `Settings` icon near the Firebase connection.
+1. Enter the `Firebase Connection ID`.
+1. Paste `https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com`
+ as `JWKS Endpoint`.
+1. Paste a sample `JWT Token` to auto populate the best **JWT validations** possible.
+1. Select the `JWT user identifier`: `email`, `sub` or `custom`.
+1. Toggle the Case Sensitivity of `User Identifier`. (Optional)
+1. Click on `Add Custom Validations` to add validations manually.
+ 1. Type iss as a field and `https://securetoken.google.com/FIREBASE-PROJECT-ID` as a value.
+ 1. Next, type aud as a field and `FIREBASE-PROJECT-ID` as a value.
+1. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Usage
+
+Since, the `Firebase Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Web
+
+
+
+### Android
+
+##### Create Web3Auth Instance
+
+In your activity, create a `Web3Auth` instance with your Web3Auth project's configurations.
+
+```kotlin
+web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = getString(R.string.web3auth_project_id), // pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.SAPPHIRE_MAINNET
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"), // your app's redirect URL
+ // focus-start
+ loginConfig = hashMapOf("jwt" to LoginConfigItem(
+ verifier = "web3auth-firebase-examples",
+ typeOfLogin = TypeOfLogin.JWT,
+ name = "Firebase Login",
+ clientId = getString(R.string.web3auth_project_id)
+ )
+ )
+ // focus-end
+ )
+)
+
+// Handle user signing in when app is not alive
+web3Auth.setResultUrl(intent?.data)
+```
+
+##### Logging in
+
+Once initialized, you can use the `web3Auth.login(LoginParams("{selectedLoginProvider}"))` function
+to authenticate the user when they click the login button.
+
+```kotlin
+private fun signIn() {
+ // focus-start
+ auth = Firebase.auth
+ auth.signInWithEmailAndPassword("android@firebase.com", "Android@Web3Auth")
+ // focus-end
+ .addOnCompleteListener(this) { task ->
+ if (task.isSuccessful) {
+ // Sign in success, update UI with the signed-in user's information
+ Log.d(TAG, "signInWithEmail:success")
+ val user = auth.currentUser
+ user!!.getIdToken(true).addOnSuccessListener { result ->
+ val idToken = result.token
+
+ Log.d(TAG, "GetTokenResult result = $idToken")
+ val selectedLoginProvider = Provider.JWT
+ // focus-start
+ val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(
+ selectedLoginProvider,
+ extraLoginOptions = ExtraLoginOptions(
+ domain = "firebase", id_token = idToken
+ )
+ )
+ )
+ // focus-end
+
+ loginCompletableFuture.whenComplete { loginResponse, error ->
+ if (error == null) {
+ println(loginResponse)
+ reRender(loginResponse)
+ } else {
+ Log.d("MainActivity_Web3Auth", error.message ?: "Something went wrong" )
+ }
+ }
+ }
+ } else {
+ // If sign in fails, display a message to the user.
+ Log.w(TAG, "signInWithEmail:failure", task.exception)
+ Toast.makeText(baseContext, "Authentication failed.",
+ Toast.LENGTH_SHORT).show()
+
+ }
+ }
+}
+```
+
+When connecting, the `login` function takes the LoginParams arguments for the login. See the
+[LoginParams](/sdk/mobile/pnp/android/usage#parameters) for more details.
+
+### Flutter
+
+##### Create Web3Auth Instance
+
+In your `main.dart` file, initialize the `Web3AuthFlutter` plugin at the very beginning such as in
+the overriden `initState` function
+
+```dart
+@override
+void initState() {
+ super.initState();
+ initPlatformState();
+}
+
+Future initPlatformState() async {
+ final Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ // focus-start
+ final loginConfig = HashMap();
+
+ loginConfig['jwt'] = LoginConfigItem(
+ verifier: "VERIFIER_NAME", // get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ name: "Firebase JWT Login",
+ clientId: "WEB3AUTH_CLIENT_ID", // web3auth's plug and play client id
+ );
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId:'YOUR WEB3AUTH CLIENT ID FROM DASHBOARD',
+ network: Network.cyan,
+ redirectUri: redirectUrl,
+ loginConfig: loginConfig,
+ )
+ );
+ // focus-end
+
+ await Web3AuthFlutter.initialize();
+}
+```
+
+##### Logging in
+
+Once initialized, you can use the
+`Web3AuthFlutter.login(LoginParams( loginProvider: Provider.google ))` function to authenticate the
+user when they click the login button.
+
+```dart
+Future _withJWT() async {
+ String idToken = "";
+ try {
+ // focus-start
+ final credential = await FirebaseAuth.instance.signInWithEmailAndPassword(
+ email: 'custom+id_token@firebase.login',
+ password: 'Welcome@W3A',
+ );
+
+ idToken = await credential.user?.getIdToken(true) ?? '';
+ // focus-end
+ } on FirebaseAuthException catch (e) {
+ if (e.code == 'user-not-found') {
+ log('No user found for that email.');
+ } else if (e.code == 'wrong-password') {
+ log('Wrong password provided for that user.');
+ }
+ }
+
+ // focus-start
+ return Web3AuthFlutter.login(
+ LoginParams(
+ loginProvider: Provider.jwt,
+ extraLoginOptions: ExtraLoginOptions(
+ id_token: idToken,
+ domain: 'firebase',
+ ),
+ ),
+ );
+ // focus-end
+}
+```
+
+Read more about initializing the Flutter SDK [here](/sdk/mobile/pnp/flutter/initialize).
+
+### React Native
+
+```tsx
+const web3auth = new Web3Auth(WebBrowser, SecureStore, {
+ clientId,
+ network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
+ loginConfig: {
+ // focus-start
+ jwt: {
+ verifier: "YOUR_JWT_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
+ typeOfLogin: "jwt",
+ },
+ // focus-end
+ },
+});
+```
+
+```tsx
+import auth from "@react-native-firebase/auth";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
+
+async function signInWithFirebase() {
+ try {
+ GoogleSignin.configure({
+ webClientId: "461819774167-5iv443bdf5a6pnr2drt4tubaph270obl.apps.googleusercontent.com",
+ });
+ // Check if your device supports Google Play
+ await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
+ // Get the user's ID token
+ const { idToken } = await GoogleSignin.signIn();
+ // Create a Google credential with the token
+ const googleCredential = auth.GoogleAuthProvider.credential(idToken);
+
+ // Sign-in the user with the credential
+ const res = await auth().signInWithCredential(googleCredential);
+
+ const idToken = await res.user.getIdToken(true);
+
+ // focus-start
+ await web3auth.login({
+ redirectUrl: resolvedRedirectUrl,
+ mfaLevel: "default", // Pass on the MFA level of your choice: default, optional, mandatory, none
+ loginProvider: "jwt",
+ extraLoginOptions: {
+ id_token: idToken,
+ verifierIdField: "sub", // same as your JWT Verifier ID on the dashboard
+ },
+ });
+ // focus-end
+ } catch (error) {
+ console.error(error);
+ }
+}
+```
diff --git a/docs/authentication/group-connections.mdx b/docs/authentication/group-connections.mdx
new file mode 100644
index 000000000..b637b7887
--- /dev/null
+++ b/docs/authentication/group-connections.mdx
@@ -0,0 +1,101 @@
+---
+title: Group Connections
+sidebar_label: Group Connections
+description: "Group Connections | Documentation - Web3Auth"
+image: "images/docs-meta-cards/documentation-card.png"
+---
+
+import AuthenticationGroupConnectionsSelect from "@site/static/images/dashboard/authentication-group-connections-select.png";
+import AuthenticationGroupConnectionsCreate from "@site/static/images/dashboard/authentication-group-connections-create.png";
+import AuthenticationGroupConnectionsConfirm from "@site/static/images/dashboard/authentication-group-connections-confirm.png";
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+import GroupConnectionFirebase from "../sdk/web/react/advanced/_custom-authentication-snippets/_grouped_auth_firebase.mdx";
+import GroupConnectionAuth0Implicit from "../sdk/web/react/advanced/_custom-authentication-snippets/_grouped_auth_implicit_auth0.mdx";
+import GroupConnectionAuth0JWT from "../sdk/web/react/advanced/_custom-authentication-snippets/_grouped_auth_jwt_auth0.mdx";
+import GroupModal from "../sdk/web/react/advanced/_custom-authentication-snippets/_grouped_modal_connections.mdx";
+
+Group Connections enable multiple login methods to be linked to the same on-chain user identity.
+This means that users logging in with different authentication providers (e.g., **_Google and Email
+Passwordless_**) can still access the **same wallet address**—ensuring a unified user experience.
+
+> _Before setting up a group connection, developers must first configure individual login
+> connections that are eligible._
+
+## Set Up a Group Connection
+
+:::success Create Group Connection on Dashboard
+
+To use this feature, developers must go to the `Group Connections` tab in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+
+
+
+
+Follow these steps:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+2. Go to the `Group Connections` section.
+3. Click on the `Create Group` button.
+4. Enter your custom `Group Name`.
+5. Select `1st social connection` and `2nd social connection`.
+6. Click `Create Group`.
+
+
+
+
+
+
+
+
+
+## Usage
+
+Since, the `Group Connections` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/authentication/id-token.mdx b/docs/authentication/id-token.mdx
new file mode 100644
index 000000000..966b5eb53
--- /dev/null
+++ b/docs/authentication/id-token.mdx
@@ -0,0 +1,255 @@
+---
+title: Web3Auth Identity Token
+sidebar_label: Web3Auth Identity Token
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Identity Token | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+The **Identity Token** (ID Token) issued by Web3Auth is a JSON Web Token (JWT) that contains
+verified identity claims about the authenticated user. This token is signed using Web3Auth’s private
+key and cannot be spoofed, allowing developers to trust the identity information presented by the
+client.
+
+Once a user successfully authenticates via Web3Auth, the platform issues an ID token which can then
+be used to authorize client-to-server requests or verify ownership of associated wallet addresses.
+
+#### Purpose of the ID Token
+
+- **User Identity Verification**: Ensures that the client user is indeed who they claim to be.
+- **Secure Backend Requests**: The token should be passed in API requests to validate sessions
+ server-side.
+- **Wallet Ownership Proof**: Includes public wallet keys to prove a user owns a particular wallet.
+
+When making a backend request from the frontend, the client must include this ID token to ensure the
+backend can verify the authenticated user.
+
+## ID Token Format
+
+Web3Auth tokens are ES256-signed JWTs containing various identity claims about the user.
+
+A sample decoded token is shown below:
+
+
+ Sample ID Token
+
+```js
+{
+ "iat": 1747727490,
+ "aud": "BJp5VGbuhg_mUA.....7B0SseDPBWabmYmEFXpfu8CGWSw",
+ "nonce": "030cb3f1ab9593d987b17cb....38afe331561105213",
+ "iss": "https://api-auth.web3auth.io",
+ "wallets": [
+ {
+ "public_key": "5771379329ae0f3b76........82f17373a13d8683561",
+ "type": "web3auth_app_key",
+ "curve": "ed25519"
+ },
+ {
+ "public_key": "020fda199e933b24a74...........6c9cc67a13c23d",
+ "type": "web3auth_app_key",
+ "curve": "secp256k1"
+ }
+ ],
+ "email": "shahbaz@web3auth.io",
+ "name": "Mohammad Shahbaz Alam",
+ "profileImage": "https://lh3.googleusercontent.com/a/AcJD_Fs0...._xzcWYzT=s96-c",
+ "authConnection": "web3auth",
+ "userId": "shahbaz@web3auth.io",
+ "groupedAuthConnectionId": "web3auth-google-sapphire-mainnet",
+ "exp": 1747813890
+}
+```
+
+:::warning NOTE
+
+If the `Return user data in identity token` setting is disabled on the Web3Auth Dashboard,
+personally identifiable information (PII) such as **email**, **name**, and **profileImage** will be
+omitted from the token.
+
+:::
+
+
+
+## Getting the ID Token
+
+To retrieve the ID token on the client-side, use the `getIdentityToken()` method. This is typically
+called after the user logs in.
+
+
+
+
+```tsx
+import { useIdentityToken } from "@web3auth/modal/react";
+
+function IdentityTokenButton() {
+ const { getIdentityToken, loading, error, token } = useIdentityToken();
+
+ return (
+
+
+ {token &&
Token: {token}
}
+ {error &&
Error: {error.message}
}
+
+ );
+}
+```
+
+
+
+
+```html
+
+
+
+
+
+
Token: {{ token }}
+
Error: {{ error.message }}
+
+
+```
+
+
+
+
+```tsx
+try {
+ const idToken = await web3auth.getIdentityToken();
+ console.log(idToken);
+} catch (error) {
+ console.error("Error authenticating user:", error);
+}
+```
+
+
+
+
+## Verifying the ID Token
+
+To validate an ID token server-side, use Web3Auth’s JWKS endpoint or project-specific verification
+key. This process ensures the JWT was issued by Web3Auth and its contents have not been tampered
+with.
+
+### Using JWKS Endpoint
+
+JWKS Endpoint: `https://api-auth.web3auth.io/.well-known/jwks.json`
+
+```js title="Example (Node.js with jose)"
+import * as jose from "jose";
+
+const idToken = req.headers.authorization?.split(" ")[1];
+const app_pub_key = req.body.appPubKey;
+
+const jwks = jose.createRemoteJWKSet(new URL("https://api-auth.web3auth.io/.well-known/jwks.json"));
+const jwtDecoded = await jose.jwtVerify(idToken, jwks, { algorithms: ["ES256"] });
+
+// Verify wallet key match
+if (
+ jwtDecoded.payload.wallets.find((w) => w.type === "web3auth_app_key").public_key.toLowerCase() ===
+ app_pub_key.toLowerCase()
+) {
+ res.status(200).json({ name: "Verification Successful" });
+} else {
+ res.status(400).json({ name: "Verification Failed" });
+}
+```
+
+#### For External Wallets:
+
+```js
+if (
+ jwtDecoded.payload.wallets.find((w) => w.type === "ethereum").address.toLowerCase() ===
+ publicAddress.toLowerCase()
+) {
+ res.status(200).json({ name: "Verification Successful" });
+} else {
+ res.status(400).json({ name: "Verification Failed" });
+}
+```
+
+### Using Verification Key
+
+To manually verify the token, use your **Verification Key** available on the **Project Settings**
+page in the Web3Auth Dashboard.
+
+
+
+
+```bash
+npm install jose
+```
+
+```js title="Example (JWT Verification using jose)"
+const verificationKey = await jose.importSPKI("insert-your-web3auth-verification-key", "ES256");
+
+const idToken = "insert-the-users-id-token";
+
+try {
+ const payload = await jose.jwtVerify(idToken, verificationKey, {
+ issuer: "https://api-auth.web3auth.io",
+ audience: "your-project-client-id",
+ });
+ console.log(payload);
+} catch (error) {
+ console.error(error);
+}
+```
+
+
+
+```bash
+npm install jsonwebtoken
+```
+
+```js title="Example (JWT Verification using jsonwebtoken)"
+const verificationKey = "insert-your-privy-verification-key".replace(/\\n/g, "\n");
+
+const idToken = "insert-the-users-id-token";
+
+try {
+ const decoded = jwt.verify(idToken, verificationKey, {
+ issuer: "https://api-auth.web3auth.io",
+ audience: "your-project-client-id",
+ });
+ console.log(decoded);
+} catch (error) {
+ console.error(error);
+}
+```
+
+> The replace operation above ensures that any instances of '\n' in the stringified public key are
+> replaced with actual newlines, per the PEM-encoded format.
+
+
+
+
+:::info
+
+If the token is valid, the payload will contain identity claims (e.g., userId). If invalid, an error
+is thrown.
+
+:::
+
+## Things to Remember
+
+- The `iss` field in the token must be `https://api-auth.web3auth.io`.
+- The `aud` field must match your **Project Client ID**.
+- The `exp` field must be in the future.
+- The `iat` field must be in the past.
diff --git a/docs/authentication/social-logins/discord.mdx b/docs/authentication/social-logins/discord.mdx
new file mode 100644
index 000000000..7d3731b92
--- /dev/null
+++ b/docs/authentication/social-logins/discord.mdx
@@ -0,0 +1,92 @@
+---
+title: Discord Social Login with Web3Auth
+sidebar_label: Discord
+description: "Discord Social Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import DiscordToggle from "@site/static/images/dashboard/authentication-social-connections.png";
+import DiscordConnection from "@site/static/images/dashboard/discord-connection.png";
+
+Discord Login is a social login provider that allows users to sign in using their Discord
+credentials. Web3Auth supports Discord as a social login provider, allowing developers to offer a
+familiar and quick authentication method for users with Discord accounts.
+
+To integrate Discord with Web3Auth, developers must first create a Discord App via the
+[Discord Developer Portal](https://discord.com/developers/applications).
+
+## Create a Discord app
+
+1. Create a Discord [API application](https://discord.com/developers/applications).
+
+2. Navigate to **OAuth2** from the sidebar, and paste the following as Redirect URI into the
+ "Redirect URI" field.
+
+ - https://auth.web3auth.io/auth
+
+ 
+
+3. Don't forget to save your changes!
+
+4. Next, obtain the **"Client ID"** from here. We will use this in our Web3Auth Dashboard.
+
+ 
+
+## Create a Discord Connection
+
+:::success Enable on Dashboard
+
+To use this feature, please enable `Discord` from the Social Connections section in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for Discord login.
+
+:::
+
+
+
+
+
+Follow these steps to create a Discord connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Social Connections` section.
+1. Click on the `Settings` icon near the Discord connection.
+1. Enter the `Auth Connection ID`.
+1. Enter the `Discord Client ID`.
+1. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Usage
+
+Since, the `Discord Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Login with Discord
+
+```jsx
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.DISCORD,
+ authConnectionId: "w3a-discord-demo",
+});
+```
diff --git a/docs/authentication/social-logins/facebook.mdx b/docs/authentication/social-logins/facebook.mdx
new file mode 100644
index 000000000..7645f4d22
--- /dev/null
+++ b/docs/authentication/social-logins/facebook.mdx
@@ -0,0 +1,94 @@
+---
+title: Facebook Social Login with Web3Auth
+sidebar_label: Facebook
+description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import FacebookToggle from "@site/static/images/dashboard/authentication-social-connections.png";
+import FacebookConnection from "@site/static/images/dashboard/facebook-connection.png";
+import ImplicitLoginFacebook from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_facebook.mdx";
+
+Facebook Login enables users to sign in using their Facebook credentials. Web3Auth supports Facebook
+as a social login provider, allowing developers to offer a familiar and quick authentication method
+for users with Facebook accounts.
+
+To integrate Facebook with Web3Auth, developers must first create a Facebook App via the
+[Meta for Developers Console](https://developers.facebook.com/).
+
+## Create a Facebook app
+
+1. Follow Facebook's instructions to
+ [create a new app](https://developers.facebook.com/docs/development/create-an-app).
+2. When creating an app, make sure to select `Consumer` from this screen to use Facebook Login.
+ 
+
+3. On the next screen, you'll be presented with different products you can integrate into your
+ Facebook app. Click **"Set Up"** in the card representing the **Facebook Login** capability.
+
+ 
+
+4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.
+
+ - https://auth.web3auth.io/auth
+
+ 
+
+5. Obtain the "App ID" and "App Secret" from the **Settings > Basic** screen.
+
+ 
+
+## Create a Facebook Connection
+
+:::success Enable on Dashboard
+
+To use this feature, please enable `Facebook` from the Social Connections section in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for Facebook login.
+
+:::
+
+
+
+
+
+Follow these steps to create a Facebook connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Social Connections` section.
+1. Click on the `Settings` icon near the Facebook connection.
+1. Enter the `Auth Connection ID`.
+1. Enter the `Facebook App ID`.
+1. Enter the `Facebook App Secret`.
+1. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Usage
+
+Since, the `Facebook Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Implicit Login with Facebook
+
+
diff --git a/docs/authentication/social-logins/google.mdx b/docs/authentication/social-logins/google.mdx
new file mode 100644
index 000000000..efa1998ff
--- /dev/null
+++ b/docs/authentication/social-logins/google.mdx
@@ -0,0 +1,93 @@
+---
+title: Google Login with Web3Auth
+sidebar_label: Google
+description: "Google Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GoogleToggle from "@site/static/images/dashboard/authentication-social-connections.png";
+import GoogleConnection from "@site/static/images/dashboard/google-connection.png";
+
+import JwtLoginGoogle from "../../sdk/web/react/advanced/_custom-authentication-snippets/_jwt_login_google_one_tap.mdx";
+import ImplicitLoginGoogle from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_google.mdx";
+
+Google Sign-In is a widely adopted authentication method that allows users to log in using their
+existing Google accounts. Web3Auth supports Google as a social login provider, enabling seamless
+onboarding and authentication experiences for users with Google credentials.
+
+To integrate Google Sign-In with Web3Auth, developers must first configure a Google OAuth 2.0 Client
+ID in the Google Cloud Console.
+
+## Create a Google app
+
+1. Follow Google’s instructions to
+ [set up an OAuth 2.0 app.](https://support.google.com/cloud/answer/6158849?hl=en)
+2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.
+
+ - `https://auth.web3auth.io/auth`
+
+ 
+
+3. Obtain the OAuth `Client ID` from the
+ [App on the Google Developer dashboard](https://console.developers.google.com/)
+
+## Create a Google Connection
+
+:::success Enable on Dashboard
+
+To use this feature, please enable `Google` from the Social Connections section in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for Google login.
+
+:::
+
+
+
+
+
+Follow these steps to create a Google connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Social Connections` section.
+1. Click on the `Settings` icon near the Google connection.
+1. Enter the `Auth Connection ID`.
+1. Enter the `Google Client ID`.
+1. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Usage
+
+Since, the `Google Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+
+
+
+
+
+
+
+
diff --git a/docs/authentication/social-logins/oauth.mdx b/docs/authentication/social-logins/oauth.mdx
new file mode 100644
index 000000000..a3c7e4c74
--- /dev/null
+++ b/docs/authentication/social-logins/oauth.mdx
@@ -0,0 +1,299 @@
+---
+title: OAuth 2.0 Login with Web3Auth
+sidebar_label: OAuth 2.0
+description: "OAuth 2.0 Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import OAuthToggle from "@site/static/images/dashboard/authentication-social-connections.png";
+
+OAuth 2.0 is a widely adopted standard that enables users to authenticate with third-party identity
+providers in a secure and user-friendly manner. Web3Auth offers native support for multiple OAuth
+2.0 login options, allowing developers to integrate familiar authentication experiences directly
+into their applications.
+
+:::success Enable on Dashboard
+
+To use this feature, please enable `X(Twitter)`, `Farcaster`, `Apple`, `GitHub`, `Reddit`, `Line`,
+`Kakao`, `LinkedIn` or `Wechat` from the Social Connections section in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for different social login providers.
+
+:::
+
+
+
+
+
+## Usage
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Login with X
+
+> Don't forget to enable X(Twitter) on the Dashboard.
+
+```tsx title="App.tsx"
+import { useWeb3AuthConnect } from "@web3auth/modal/react";
+import { WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal";
+
+function CustomConnectors() {
+ const { connectTo, loading, isConnected, error } = useWeb3AuthConnect();
+
+ const loginWithX = async () => {
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ // focus-next-line
+ authConnection: AUTH_CONNECTION.TWITTER,
+ });
+ };
+
+ return (
+
+ );
+}
+```
diff --git a/docs/authentication/social-logins/twitch.mdx b/docs/authentication/social-logins/twitch.mdx
new file mode 100644
index 000000000..6116f15e6
--- /dev/null
+++ b/docs/authentication/social-logins/twitch.mdx
@@ -0,0 +1,94 @@
+---
+title: Twitch Social Login with Web3Auth
+sidebar_label: Twitch
+description: "Twitch Social Login with Web3Auth | Documentation - Web3Auth"
+---
+
+import TwitchToggle from "@site/static/images/dashboard/authentication-social-connections.png";
+import TwitchConnection from "@site/static/images/dashboard/twitch-connection.png";
+
+Twitch Login is a social login provider that allows users to sign in using their Twitch credentials.
+Web3Auth supports Twitch as a social login provider, allowing developers to offer a familiar and
+quick authentication method for users with Twitch accounts.
+
+To integrate Twitch with Web3Auth, developers must first create a Twitch App via the
+[Twitch Developer Portal](https://dev.twitch.tv/console/apps).
+
+## Create a Twitch app
+
+1. Follow Twitch's
+ [registration instructions](https://dev.twitch.tv/docs/authentication/#registration) to (register
+ your app)[https://dev.twitch.tv/console/apps/create].
+2. Paste the following as a Redirect URI into the "OAuth Redirect URLs" field.
+
+ - [https://auth.web3auth.io/auth](https://auth.web3auth.io/auth)
+
+ 
+
+3. After creation of your Twitch app, click **Manage**
+
+ 
+
+4. Obtain the **Client ID**
+
+ 
+
+## Create a Twitch Connection
+
+:::success Enable on Dashboard
+
+To use this feature, please enable `Twitch` from the Social Connections section in the
+[Web3Auth Dashboard](https://dashboard.web3auth.io).
+
+> By default, Web3Auth uses its own pre-configured credentials for Twitch login.
+
+:::
+
+
+
+
+
+Follow these steps to create a Twitch connection:
+
+1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
+1. Go to the `Social Connections` section.
+1. Click on the `Settings` icon near the Twitch connection.
+1. Enter the `Auth Connection ID`.
+1. Enter the `Twitch Client ID`.
+1. Finally, click on the `Add Connection` button.
+
+
+
+
+
+## Usage
+
+Since, the `Twitch Connection` details are available from Dashboard, developers don't need to pass
+any additional parameters to the `Web3AuthProvider`.
+
+> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
+
+### Login with Twitch
+
+```jsx
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.TWITCH,
+ authConnectionId: "w3a-twitch-demo",
+});
+```
diff --git a/docs/connect-blockchain/connect-blockchain.mdx b/docs/connect-blockchain/connect-blockchain.mdx
index 86a03623a..62ff15fe3 100644
--- a/docs/connect-blockchain/connect-blockchain.mdx
+++ b/docs/connect-blockchain/connect-blockchain.mdx
@@ -39,22 +39,13 @@ transactions, smart contract wallets, different elliptic curve pairs and even RS
:::
-## Private Key Providers (PnP & SFA)
-
-The Private Key Providers work with the majority of Web3Auth products, including Plug and Play SDKs
-and Single Factor Auth SDKs. As the name suggests these providers are a wrapper around the user's
-private key, which is dynamically reconstructed with Shamir's Secret Sharing and is present in the
-user's frontend.
-
-Once the authentication happens, the returned result from the Web3Auth network is taken up by the
-provider to give a common interface to interact with the blockchain of your choice. Currently,
-Web3Auth supports the following private key providers for Web SDKs:
-
-- [EIP1193 Private Key Provider](/sdk/pnp/web/providers/evm): For connecting to EVM based chains
-- [Solana Private Key Provider](/sdk/pnp/web/providers/solana): For connecting with Solana
- Blockchain
-- [XRPL Private Key Provider](/sdk/pnp/web/providers/xrpl): For connecting with XRPL Blockchain
-- [Common Private Key Provider](/sdk/pnp/web/providers/common): For connecting with any blockchain.
+## For Web3Auth PnP Web SDK
+
+The Web3Auth PnP Web SDK(`@web3auth/modal`) from v10 onwards does not need any additional setup on
+the code side for blockchain connections. All of it is handled on the Dashboard. We can use any
+chain from the extensive list of predefined chains and add more if we need.
+
+
## MPC Core Kit Providers
diff --git a/docs/connect-blockchain/custom-chains.mdx b/docs/connect-blockchain/custom-chains.mdx
new file mode 100644
index 000000000..d39834d64
--- /dev/null
+++ b/docs/connect-blockchain/custom-chains.mdx
@@ -0,0 +1,75 @@
+---
+title: Add Custom Chains to the Dashboard
+sidebar_label: Add Custom Chains to the Dashboard
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Add Custom Chains | Documentation - Web3Auth"
+---
+
+Web3Auth PnP V10 onwards does not need any additional setup on the code side for blockchain
+connections. All of it is handled on our updated Dashboard. We can use any chain from the extensive
+list of predefined chains and add more if we need by toggling them on.
+
+
+
+## Adding Custom Chains
+
+To add a custom chain, we need to follow these steps:
+
+1. Go to the [Dashboard](https://dashboard.web3auth.io).
+2. Click on the `Projects` section and select the project you want to add the custom chain to.
+3. Click on the `Chains & Networks` tab.
+4. Fill in the details of the chain you want to add.(Like LogoURL, Network Name etc.)
+5. Then press Save Network blue button at the bottom.
+
+
+
+## Adding Chains on Code-side for PnP Web SDK
+
+While chains can be configured through the dashboard, you can also override these settings in your
+code by specifying custom chains during SDK initialization.
+
+### Example
+
+```typescript title="App.tsx"
+import { Web3Auth, WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/modal";
+
+// Define custom chain configurations
+const evmChainConfig = {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ chainId: "0xaa36a7", // Sepolia chainId in hex
+ rpcTarget: "https://1rpc.io/sepolia",
+ displayName: "Ethereum Sepolia Testnet",
+ blockExplorerUrl: "https://sepolia.etherscan.io",
+ ticker: "ETH",
+ tickerName: "Ethereum",
+ decimals: 18,
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+const arbitrumChainConfig = {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ chainId: "0x66eee", // Arbitrum Sepolia (421614 in hex)
+ rpcTarget: "https://sepolia-rollup.arbitrum.io/rpc",
+ displayName: "Arbitrum Sepolia Testnet",
+ blockExplorerUrl: "https://sepolia.arbiscan.io/",
+ ticker: "AETH",
+ tickerName: "AETH",
+ decimals: 18,
+ logo: "https://arbitrum.foundation/images/logo.png",
+};
+
+// Initialize Web3Auth with custom chains
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ chains: [evmChainConfig, arbitrumChainConfig], // Pass array of custom chains
+ defaultChainId: "0x66eee", // Set default chain by chainId
+});
+```
+
+By using the `chains` parameter, you can specify multiple chain configurations for your application,
+only provided chains will be used. The `defaultChainId` parameter allows you to set which chain
+should be used by default.
+
+This approach gives you flexibility to dynamically configure chains in your code while maintaining
+the ease of dashboard configuration for your project.
diff --git a/docs/connect-blockchain/evm/5ire/5ire.mdx b/docs/connect-blockchain/evm/5ire/5ire.mdx
index e3afb4054..b37c68ed3 100644
--- a/docs/connect-blockchain/evm/5ire/5ire.mdx
+++ b/docs/connect-blockchain/evm/5ire/5ire.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the 5ire Blockchain
+sidebar_label: 5ire
hide_table_of_contents: true
image: "banners/5ire.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the 5ire Blockchain | Documentation - Web3
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetails5ire from "@site/src/common/docs/general-connect-blockchain/_5ire.mdx";
+
export const fire = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/5ire/unity.mdx b/docs/connect-blockchain/evm/5ire/unity.mdx
index 8ba82435a..dd5236af9 100644
--- a/docs/connect-blockchain/evm/5ire/unity.mdx
+++ b/docs/connect-blockchain/evm/5ire/unity.mdx
@@ -14,6 +14,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetails5ire from "@site/src/common/docs/general-connect-blockchain/_5ire.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -37,41 +38,7 @@ you started.
## Chain Details for 5ire
-
-
-
-- Chain ID: 0x3E3
-- Public RPC URL: https://rpc.5ire.network (Avoid using public rpcTarget in production, use services
- like Infura)
-- Display Name: 5ireChain Mainnet
-- Block Explorer Link: https://5irescan.io
-- Ticker: 5ire
-- Ticker Name: 5ire
-
-
-
-
-
-- Chain ID: 0x3E5
-- Public RPC URL: https://rpc.testnet.5ire.network (Avoid using public rpcTarget in production, use
- services like Infura)
-- Display Name: 5ireChain Testnet
-- Block Explorer Link: https://testnet.5irescan.io
-- Ticker: 5ire
-- Ticker Name: 5ire
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/5ire/web.mdx b/docs/connect-blockchain/evm/5ire/web.mdx
index c0d3cdfc0..12a7125d4 100644
--- a/docs/connect-blockchain/evm/5ire/web.mdx
+++ b/docs/connect-blockchain/evm/5ire/web.mdx
@@ -8,19 +8,10 @@ keywords:
description: "Integrate Web3Auth with the 5ire Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import ChainDetails5ire from "@site/src/common/docs/general-connect-blockchain/_5ire.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -32,125 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/5ire/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[5ire Blockchain](https://5irescan.io) calls like getting the user's `account`, fetching `balance`,
-`sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have
-highlighted a few examples to get you started.
+## Chain Details for 5ire
-## Installation
+
-To interact with the 5ire blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x3E3", // hex of 995, 5ireChain Mainnet
- rpcTarget: "https://rpc.5ire.network",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "5ireChain Mainnet",
- blockExplorerUrl: "https://5irescan.io",
- ticker: "5ire",
- tickerName: "5ire",
- logo: "https://i.ibb.co/TYkdN1g/logo-5ire.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x3E5", // hex of 997, 5ireChain Testnet
- rpcTarget: "https://rpc.testnet.5ire.network",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "5ireChain Testnet",
- blockExplorerUrl: "https://testnet.5irescan.io",
- ticker: "5ire",
- tickerName: "5ire",
- logo: "https://i.ibb.co/TYkdN1g/logo-5ire.png",
-};
-```
-
-
-
-
-### Initializing and Instantiating the Web3Auth SDK
-
-
-
-## Get User Info
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx b/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx
index 965b8f326..08f5e076f 100644
--- a/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx
+++ b/docs/connect-blockchain/evm/aleph-zero/aleph-zero.mdx
@@ -1,31 +1,32 @@
---
title: Integrate Web3Auth with the Aleph Zero Blockchain
+sidebar_label: Aleph Zero
hide_table_of_contents: true
image: "banners/aleph-zero.png"
-description: "Integrate Web3Auth with the Aleph zero Blockchain | Documentation - Web3Auth"
+description: "Integrate Web3Auth with the Aleph Zero Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAlephZero from "@site/src/common/docs/general-connect-blockchain/_aleph-zero.mdx";
-Integrate Web3Auth seamlessly with EVM-based Aleph zero Blockchain. For Web SDKs, Web3Auth returns a
-provider that can be directly used to initialize the libraries like ethers.js, web3.js etc. and make
-blockchain calls, while for Mobile & Gaming SDKs, the private key is available in the user scope
-which can be used in a similar way to initialize the respective blockchain interaction libraries and
-make calls to the network.
+The Aleph Zero blockchain's integration with Web3Auth, helps you get started with the integration in
+a matter of minutes. The integration is available for the following platforms: Web, Android, iOS,
+Flutter, React Native, and Unity.
-This documentation provides a straightforward guide for developers looking to implement blockchain
-connections quickly and effortlessly across various platforms.
+## Chain Details for Aleph Zero
-export const Alephzero = [
+
+
+export const AlephZero = [
{
name: "",
description: "",
@@ -70,4 +71,4 @@ export const Alephzero = [
},
];
-
+
diff --git a/docs/connect-blockchain/evm/aleph-zero/unity.mdx b/docs/connect-blockchain/evm/aleph-zero/unity.mdx
index e0c756680..a5ce75d33 100644
--- a/docs/connect-blockchain/evm/aleph-zero/unity.mdx
+++ b/docs/connect-blockchain/evm/aleph-zero/unity.mdx
@@ -14,6 +14,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsAlephZero from "@site/src/common/docs/general-connect-blockchain/_aleph-zero.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -37,41 +38,7 @@ examples to get you started.
## Chain Details for Aleph Zero
-
-
-
-- Chain ID: 0xA1EF
-- Public RPC URL: https://rpc.alephzero.raas.gelato.cloud (Avoid using public rpcTarget in
- production, use services like Infura)
-- Display Name: Aleph Zero Mainnet
-- Block Explorer Link: https://evm-explorer.alephzero.org
-- Ticker: AZERO
-- Ticker Name: Aleph Zero
-
-
-
-
-
-- Chain ID: 0x7F7
-- Public RPC URL: https://rpc.alephzero-testnet.gelato.digital (Avoid using public rpcTarget in
- production, use services like Infura)
-- Display Name: Aleph Zero Testnet
-- Block Explorer Link: https://evm-explorer-testnet.alephzero.org
-- Ticker: tAZERO
-- Ticker Name: Aleph Zero
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/aleph-zero/web.mdx b/docs/connect-blockchain/evm/aleph-zero/web.mdx
index b9ef247d9..7e58de3f1 100644
--- a/docs/connect-blockchain/evm/aleph-zero/web.mdx
+++ b/docs/connect-blockchain/evm/aleph-zero/web.mdx
@@ -1,114 +1,40 @@
---
-title: Integrate Web3Auth with the Aleph Zero Blockchain in Web Applications
+title: Integrate Web3Auth with the Aleph Zero Blockchain in JavaScript
sidebar_label: Web
image: "banners/aleph-zero.png"
-keywords: [web, aleph-zero, web3auth, authentication, blockchain]
+keywords: [aleph-zero, web3auth, authentication, blockchain]
description:
- "Integrate Web3Auth with the Aleph Zero Blockchain in Web Applications | Documentation - Web3Auth"
+ "Integrate Web3Auth with the Aleph Zero Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import ChainDetailsAlephZero from "@site/src/common/docs/general-connect-blockchain/_aleph-zero.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Aleph Zero Blockchain](https://alephzero.org) calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few examples to get you started.
-
-## Installation
-
-
-
## Chain Details for Aleph Zero
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xA1EF", // hex of 41455, Aleph Zero Mainnet
- rpcTarget: "https://rpc.alephzero.raas.gelato.cloud",
- displayName: "Aleph Zero Mainnet",
- blockExplorerUrl: "https://evm-explorer.alephzero.org",
- ticker: "AZERO",
- tickerName: "Aleph Zero",
- logo: "https://i.ibb.co/cYcFtr4/A0-mark-graphite.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x7F7", // hex of 2039, Aleph Zero Testnet
- rpcTarget: "https://rpc.alephzero-testnet.gelato.digital",
- displayName: "Aleph Zero Testnet",
- blockExplorerUrl: "https://evm-explorer-testnet.alephzero.org",
- ticker: "tAZERO",
- tickerName: "Aleph Zero Testnet",
- logo: "https://i.ibb.co/cYcFtr4/A0-mark-graphite.png",
-};
-```
-
-
-
-
-## Initializing Web3Auth
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
+
-
+## React Wagmi Integration
-## Sign Message
+
-### Personal Sign
+## Vue Wagmi Integration
-
+
-### Sign Typed Data V4
+## For VanillaJS, Angular and other frameworks
-
+
diff --git a/docs/connect-blockchain/evm/ancient8/ancient8.mdx b/docs/connect-blockchain/evm/ancient8/ancient8.mdx
index 4b465fbc8..b3792fea2 100644
--- a/docs/connect-blockchain/evm/ancient8/ancient8.mdx
+++ b/docs/connect-blockchain/evm/ancient8/ancient8.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Ancient8 Blockchain
+sidebar_label: Ancient8
hide_table_of_contents: true
image: "banners/ancient8.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Ancient8 Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAncient8 from "@site/src/common/docs/general-connect-blockchain/_ancient8.mdx";
-Integrate Web3Auth seamlessly with EVM-based Ancient8 Blockchain. For Web SDKs, Web3Auth returns a
-provider that can be directly used to initialize the libraries like ethers.js, web3.js etc. and make
-blockchain calls, while for Mobile & Gaming SDKs, the private key is available in the user scope
-which can be used in a similar way to initialize the respective blockchain interaction libraries and
-make calls to the network.
+The Ancient8 blockchain's integration with Web3Auth, helps you get started with the integration in a
+matter of minutes. The integration is available for the following platforms: Web, Android, iOS,
+Flutter, React Native, and Unity.
-This documentation provides a straightforward guide for developers looking to implement blockchain
-connections quickly and effortlessly across various platforms.
+## Chain Details for Ancient8
+
+
export const Ancient8 = [
{
diff --git a/docs/connect-blockchain/evm/ancient8/unity.mdx b/docs/connect-blockchain/evm/ancient8/unity.mdx
index 6aa9ca378..4af09f63b 100644
--- a/docs/connect-blockchain/evm/ancient8/unity.mdx
+++ b/docs/connect-blockchain/evm/ancient8/unity.mdx
@@ -14,6 +14,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsAncient8 from "@site/src/common/docs/general-connect-blockchain/_ancient8.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -37,41 +38,7 @@ started quickly on that.
## Chain Details for Ancient8
-
-
-
-- Chain ID: 0x34BC6B8
-- Public RPC URL: https://rpc.ancient8.gg (Avoid using public rpcTarget in production, use services
- like Infura)
-- Display Name: Ancient8 Mainnet
-- Block Explorer Link: https://scan.ancient8.gg
-- Ticker: ETH
-- Ticker Name: ETH
-
-
-
-
-
-- Chain ID: 0x1AD4150
-- Public RPC URL: https://rpcv2-testnet.ancient8.gg (Avoid using public rpcTarget in production, use
- services like Infura)
-- Display Name: Ancient8 Testnet V2
-- Block Explorer Link: https://scanv2-testnet.ancient8.gg
-- Ticker: ETH
-- Ticker Name: ETH
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/ancient8/web.mdx b/docs/connect-blockchain/evm/ancient8/web.mdx
index e5a6e5085..67023a42c 100644
--- a/docs/connect-blockchain/evm/ancient8/web.mdx
+++ b/docs/connect-blockchain/evm/ancient8/web.mdx
@@ -19,20 +19,10 @@ description:
"Integrate Web3Auth with the Ancient8 Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import ChainDetailsAncient8 from "@site/src/common/docs/general-connect-blockchain/_ancient8.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -44,125 +34,22 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/ancient8/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Ancient8 Blockchain](https://ancient8.gg) calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few examples to get you started.
+## Chain Details for Ancient8
+
+
## Installation
To interact with the Ancient8 blockchain, you can use either library with Web3Auth.
-
-
-## Initializing Provider
-
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
-
-### Getting the `chainConfig`
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x34BC6B8", // hex of 888888888, Ancient8 Mainnet
- rpcTarget: "https://rpc.ancient8.gg",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Ancient8 Mainnet",
- blockExplorerUrl: "https://scan.ancient8.gg",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://blog.ancient8.gg/content/images/2023/09/A8_PFP.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1AD4150", // hex of 28122024, Ancient8 Testnet V2
- rpcTarget: "https://rpcv2-testnet.ancient8.gg",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Ancient8 Testnet V2",
- blockExplorerUrl: "https://scanv2-testnet.ancient8.gg",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://blog.ancient8.gg/content/images/2023/09/A8_PFP.png",
-};
-```
-
-
-
-
-### Initializing and Instantiating the Web3Auth SDK
-
-
-
-## Get User Info
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
+## React Wagmi Integration
-
+
-### Write to Contract
+## Vue Wagmi Integration
-
+
-## Fetch User's Private Key
+## For VanillaJS, Angular and other frameworks
-
+
diff --git a/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx b/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx
index 65639622a..596e4bdfd 100644
--- a/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx
+++ b/docs/connect-blockchain/evm/arbitrum/arbitrum.mdx
@@ -1,13 +1,27 @@
---
title: Integrate Web3Auth with the Arbitrum Blockchain
+sidebar_label: Arbitrum
hide_table_of_contents: true
-
+keywords:
+ [
+ arbitrum,
+ wallet,
+ integration,
+ web3auth,
+ API,
+ SDK,
+ authentication,
+ blockchain,
+ solution,
+ development,
+ ]
image: "banners/arbitrum.png"
description: "Integrate Web3Auth with the Arbitrum Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsArbitrum from "@site/src/common/docs/general-connect-blockchain/_arbitrum.mdx";
+
export const Arbitrum = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/arbitrum/unity.mdx b/docs/connect-blockchain/evm/arbitrum/unity.mdx
index f97a240e8..f4b79d186 100644
--- a/docs/connect-blockchain/evm/arbitrum/unity.mdx
+++ b/docs/connect-blockchain/evm/arbitrum/unity.mdx
@@ -14,6 +14,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsArbitrum from "@site/src/common/docs/general-connect-blockchain/_arbitrum.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -37,41 +38,7 @@ started quickly on that.
## Chain Details for Arbitrum
-
-
-
-- Chain ID: 0xA4B1
-- Public RPC URL: https://arb1.arbitrum.io/rpc (Avoid using public rpcTarget in production, use
- services like Infura)
-- Display Name: Arbitrum Mainnet
-- Block Explorer Link: https://arbiscan.io
-- Ticker: AETH
-- Ticker Name: AETH
-
-
-
-
-
-- Chain ID: 0x66EEE
-- Public RPC URL: https://sepolia-rollup.arbitrum.io/rpc (Avoid using public rpcTarget in
- production, use services like Infura)
-- Display Name: Arbitrum Sepolia Testnet
-- Block Explorer Link: https://sepolia.arbiscan.io/
-- Ticker: AETH
-- Ticker Name: AETH
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/arbitrum/web.mdx b/docs/connect-blockchain/evm/arbitrum/web.mdx
index 660d9f0ea..8cee22d60 100644
--- a/docs/connect-blockchain/evm/arbitrum/web.mdx
+++ b/docs/connect-blockchain/evm/arbitrum/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Arbitrum Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsArbitrum from "@site/src/common/docs/general-connect-blockchain/_arbitrum.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,118 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/arbitrum/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Arbitrum](https://arbitrum.io/) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Arbitrum
-## Installation
+
-To interact with the Arbitrum blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(42161, "your_web3auth_client_id"); // gets the arbitrum mainnet chain config
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x66eee", // Hex of 421614
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- rpcTarget: "https://sepolia-rollup.arbitrum.io/rpc",
- displayName: "Arbitrum Sepolia Testnet",
- blockExplorerUrl: "https://sepolia.arbiscan.io/",
- ticker: "AETH",
- tickerName: "AETH",
- logo: "https://cryptologos.cc/logos/arbitrum-arb-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx b/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx
index fa7f8dacb..88f7b55a8 100644
--- a/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx
+++ b/docs/connect-blockchain/evm/astar-zkevm/astar-zkevm.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Astar zkEVM Blockchain
+sidebar_label: Astar zkEVM
hide_table_of_contents: true
image: "banners/zkevm.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Astar zkEVM Blockchain | Documentation
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAstarZkevm from "@site/src/common/docs/general-connect-blockchain/_astar-zkevm.mdx";
+
export const zkEVM = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/astar-zkevm/unity.mdx b/docs/connect-blockchain/evm/astar-zkevm/unity.mdx
index 1b2059066..58de23a91 100644
--- a/docs/connect-blockchain/evm/astar-zkevm/unity.mdx
+++ b/docs/connect-blockchain/evm/astar-zkevm/unity.mdx
@@ -18,6 +18,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAstarZkevm from "@site/src/common/docs/general-connect-blockchain/_astar-zkevm.mdx";
-## Chain Details for zkEVM
-
-
-
-
-- Chain ID: 0xEC0
-- Public RPC URL: https://rpc.startale.com/astar-zkevm (Avoid using public rpcTarget in production,
- use services like Infura)
-- Display Name: Astar zkEVM
-- Block Explorer Link: https://astar-zkevm.explorer.startale.com/
-- Ticker: ETH
-- Ticker Name: ETH
-
-
-
+## Chain Details for Astar zkEVM
+
+
## Initialize
diff --git a/docs/connect-blockchain/evm/astar-zkevm/web.mdx b/docs/connect-blockchain/evm/astar-zkevm/web.mdx
index 0cadb6629..8708b98aa 100644
--- a/docs/connect-blockchain/evm/astar-zkevm/web.mdx
+++ b/docs/connect-blockchain/evm/astar-zkevm/web.mdx
@@ -8,23 +8,11 @@ description:
"Integrate Web3Auth with the Astar zkEVM Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAstarZkevm from "@site/src/common/docs/general-connect-blockchain/_astar-zkevm.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Astar zkEVM](https://docs.astar.network/docs/build/zkEVM/) blockchain calls like getting the user's
-`account`, fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to
-the smart contract, etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Astar zkEVM
-## Installation
+
-To interact with the zkEVM blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xEC0", // hex of 3776
- rpcTarget: "https://rpc.startale.com/astar-zkevm",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Astar zkEVM",
- blockExplorerUrl: "https://astar-zkevm.explorer.startale.com/",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://raw.githubusercontent.com/AstarNetwork/brand-assets/main/ASTARzkEVM_PortalIcons/100023_ASTARzkEVM_128x128_PortalIcon_ETH_v1aWEB.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx b/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx
index 10ee94120..3a0db0b6e 100644
--- a/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx
+++ b/docs/connect-blockchain/evm/astar-zkyoto/astar-zkyoto.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Astar zKyoto Testnet
+sidebar_label: Astar zKyoto
hide_table_of_contents: true
image: "banners/zkevm.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Astar zKyoto Testnet | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAstarZkyoto from "@site/src/common/docs/general-connect-blockchain/_astar-zkyoto.mdx";
+
export const zKyoto = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/astar-zkyoto/unity.mdx b/docs/connect-blockchain/evm/astar-zkyoto/unity.mdx
index 5d6cd6eaf..3668f7f03 100644
--- a/docs/connect-blockchain/evm/astar-zkyoto/unity.mdx
+++ b/docs/connect-blockchain/evm/astar-zkyoto/unity.mdx
@@ -17,6 +17,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAstarZkyoto from "@site/src/common/docs/general-connect-blockchain/_astar-zkyoto.mdx";
-## Chain Details for zKyoto
-
-
-
-
-- Chain ID: 0x5C2359
-- Public RPC URL: https://rpc.startale.com/astar-zkyoto (Avoid using public rpcTarget in production,
- use services like Infura)
-- Display Name: Astar zKyoto
-- Block Explorer Link: https://zkyoto.explorer.startale.com/
-- Ticker: ETH
-- Ticker Name: ETH
-
-
-
+## Chain Details for Astar zkYoto
+
+
## Initialize
diff --git a/docs/connect-blockchain/evm/astar-zkyoto/web.mdx b/docs/connect-blockchain/evm/astar-zkyoto/web.mdx
index c0667d03b..00bf6e09c 100644
--- a/docs/connect-blockchain/evm/astar-zkyoto/web.mdx
+++ b/docs/connect-blockchain/evm/astar-zkyoto/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Astar zKyoto Testnet in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAstarZkyoto from "@site/src/common/docs/general-connect-blockchain/_astar-zkyoto.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Astar zKyoto](https://docs.astar.network/docs/build/zkEVM/quickstart) blockchain calls like getting
-the user's `account`, fetching `balance`, `sign transaction`, `send transaction`, `read` from and
-`write` to the smart contract, etc. We have highlighted a few here to get you started quickly on
-that.
+## Chain Details for Astar zkYoto
-## Installation
+
-To interact with the zKyoto blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x5C2359", // hex of 6038361
- rpcTarget: "https://rpc.startale.com/astar-zkyoto",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Astar zKyoto",
- blockExplorerUrl: "https://zkyoto.explorer.startale.com/",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://raw.githubusercontent.com/AstarNetwork/brand-assets/main/ASTARzkEVM_PortalIcons/100023_ASTARzkEVM_128x128_PortalIcon_ETH_v1aWEB.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/astar/astar.mdx b/docs/connect-blockchain/evm/astar/astar.mdx
new file mode 100644
index 000000000..dfa9fed65
--- /dev/null
+++ b/docs/connect-blockchain/evm/astar/astar.mdx
@@ -0,0 +1,73 @@
+---
+title: Integrate Web3Auth with the Astar Blockchain
+hide_table_of_contents: true
+
+image: "banners/astar.png"
+description: "Integrate Web3Auth with the Astar Blockchain | Documentation - Web3Auth"
+---
+
+import Tiles from "@theme/Tiles";
+import SEO from "@site/src/components/SEO";
+import ChainDetailsAstar from "@site/src/common/docs/general-connect-blockchain/_astar.mdx";
+
+
+
+The Astar blockchain's integration with Web3Auth, helps you get started with the integration in a
+matter of minutes. The integration is available for the following platforms: Web, Android, iOS,
+Flutter, React Native, and Unity.
+
+## Chain Details for Astar
+
+
+
+export const Astar = [
+ {
+ name: "",
+ description: "",
+ tiles: [
+ {
+ key: "web",
+ title: "Web",
+ icon: "logo-js.png",
+ path: "/connect-blockchain/evm/astar/web",
+ },
+ {
+ key: "android",
+ title: "Android (Kotlin)",
+ icon: "logo-android.png",
+ path: "/connect-blockchain/evm/astar/android",
+ },
+ {
+ key: "apple",
+ title: "iOS (Swift)",
+ icon: "logo-apple.png",
+ path: "/connect-blockchain/evm/astar/ios",
+ },
+ {
+ key: "flutter",
+ title: "Flutter",
+ icon: "logo-flutter.png",
+ path: "/connect-blockchain/evm/astar/flutter",
+ },
+ {
+ key: "react-native",
+ title: "React Native",
+ icon: "logo-react.png",
+ path: "/connect-blockchain/evm/astar/react-native",
+ },
+ {
+ key: "unity",
+ title: "Unity",
+ icon: "logo-unity.png",
+ path: "/connect-blockchain/evm/astar/unity",
+ },
+ ],
+ },
+];
+
+
diff --git a/docs/connect-blockchain/evm/astar/unity.mdx b/docs/connect-blockchain/evm/astar/unity.mdx
new file mode 100644
index 000000000..662bd1bd8
--- /dev/null
+++ b/docs/connect-blockchain/evm/astar/unity.mdx
@@ -0,0 +1,47 @@
+---
+title: Integrate Web3Auth with the Astar Blockchain in Unity
+sidebar_label: Unity
+image: "banners/astar.png"
+
+keywords: [unity, astar, web3auth, authentication, blockchain]
+description: "Integrate Web3Auth with the Astar Blockchain in Unity | Documentation - Web3Auth"
+---
+
+import InstallationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-installation.mdx";
+import GetAccountSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-get-account.mdx";
+import UserInfoSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-user-info.mdx";
+import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-get-balance.mdx";
+import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
+import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
+import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsAstar from "@site/src/common/docs/general-connect-blockchain/_astar.mdx";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import SEO from "@site/src/components/SEO";
+
+
+
+While using the Web3Auth Unity SDK, you get the private key within the user scope. This private key
+can interact with the [Nethereum Library](https://nethereum.com/) to make EVM-based blockchain
+calls, like getting the user's `account`, fetching `balance`, `signing transaction`,
+`sending transactions`, `reading` from and `writing` to smart contracts. We have highlighted a few
+examples to get you started.
+
+## Installation
+
+
+
+## Chain Details for Astar
+
+
+
+## Initialize
+
+
+
+// ... rest of existing code ...
diff --git a/docs/connect-blockchain/evm/astar/web.mdx b/docs/connect-blockchain/evm/astar/web.mdx
new file mode 100644
index 000000000..01efd65da
--- /dev/null
+++ b/docs/connect-blockchain/evm/astar/web.mdx
@@ -0,0 +1,37 @@
+---
+title: Integrate Web3Auth with the Astar Blockchain in JavaScript
+sidebar_label: Web
+image: "banners/astar.png"
+
+keywords: [astar, web3auth, authentication, blockchain]
+description: "Integrate Web3Auth with the Astar Blockchain in JavaScript | Documentation - Web3Auth"
+---
+
+import ChainDetailsAstar from "@site/src/common/docs/general-connect-blockchain/_astar.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
+import SEO from "@site/src/components/SEO";
+
+
+
+## Chain Details for Astar
+
+
+
+## React Wagmi Integration
+
+
+
+## Vue Wagmi Integration
+
+
+
+## For VanillaJS, Angular and other frameworks
+
+
diff --git a/docs/connect-blockchain/evm/avalanche/avalanche.mdx b/docs/connect-blockchain/evm/avalanche/avalanche.mdx
index fac613ac7..2685bfcb5 100644
--- a/docs/connect-blockchain/evm/avalanche/avalanche.mdx
+++ b/docs/connect-blockchain/evm/avalanche/avalanche.mdx
@@ -1,13 +1,14 @@
---
title: Integrate Web3Auth with the Avalanche (C-Chain) Blockchain
+sidebar_label: Avalanche
hide_table_of_contents: true
-
image: "banners/avalanche.png"
description: "Integrate Web3Auth with the Avalanche (C-Chain) Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsAvalanche from "@site/src/common/docs/general-connect-blockchain/_avalanche.mdx";
+
export const Avalanche = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/avalanche/unity.mdx b/docs/connect-blockchain/evm/avalanche/unity.mdx
index 328f99096..98df47c0f 100644
--- a/docs/connect-blockchain/evm/avalanche/unity.mdx
+++ b/docs/connect-blockchain/evm/avalanche/unity.mdx
@@ -1,11 +1,10 @@
---
-title: Integrate Web3Auth with the Avalanche (C-Chain) Blockchain in Unity
+title: Integrate Web3Auth with the Avalanche Blockchain in Unity
sidebar_label: Unity
image: "banners/unity.png"
keywords: [unity, avalanche, web3auth, authentication, blockchain]
-description:
- "Integrate Web3Auth with the Avalanche (C-Chain) Blockchain in Unity | Documentation - Web3Auth"
+description: "Integrate Web3Auth with the Avalanche Blockchain in Unity | Documentation - Web3Auth"
---
import InstallationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-installation.mdx";
@@ -15,13 +14,14 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsAvalanche from "@site/src/common/docs/general-connect-blockchain/_avalanche.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -32,48 +32,14 @@ calls, like getting the user's `account`, fetch `balance`, `sign transaction`, `
`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you
started quickly on that.
+## Chain Details for Avalanche
+
+
+
## Installation
-## Chain Details for Avalanche (C-Chain)
-
-
-
-
-- Chain ID: 0xA86A
-- Public RPC URL: https://api.avax.network/ext/bc/C/rpc (Avoid using public rpcTarget in production,
- use services like Infura)
-- Display Name: Avalanche C-Chain Mainnet
-- Block Explorer Link: https://subnets.avax.network/c-chain
-- Ticker: AVAX
-- Ticker Name: AVAX
-
-
-
-
-
-- Chain ID: 0xA869
-- Public RPC URL: https://api.avax-test.network/ext/bc/C/rpc (Avoid using public rpcTarget in
- production, use services like Infura)
-- Display Name: Avalanche C-Chain Testnet
-- Block Explorer Link: https://subnets-test.avax.network/c-chain
-- Ticker: AVAX
-- Ticker Name: AVAX
-
-
-
-
## Initialize
diff --git a/docs/connect-blockchain/evm/avalanche/web.mdx b/docs/connect-blockchain/evm/avalanche/web.mdx
index 0531e147a..12fa43f61 100644
--- a/docs/connect-blockchain/evm/avalanche/web.mdx
+++ b/docs/connect-blockchain/evm/avalanche/web.mdx
@@ -20,22 +20,10 @@ description:
Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
+import ChainDetailsAvalanche from "@site/src/common/docs/general-connect-blockchain/_avalanche.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import SEO from "@site/src/components/SEO";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Avalanche (C-Chain)](https://www.avax.network/) blockchain calls like getting the user's `account`,
-fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart
-contract, etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Avalanche
-## Installation
+
-To interact with the Avalanche (C-Chain) blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xA86A", // hex of 43114
- rpcTarget: "https://api.avax.network/ext/bc/C/rpc",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Avalanche C-Chain Mainnet",
- blockExplorerUrl: "https://subnets.avax.network/c-chain",
- ticker: "AVAX",
- tickerName: "AVAX",
- logo: "https://cryptologos.cc/logos/avalanche-avax-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xA869", // hex of 43113
- rpcTarget: "https://api.avax-test.network/ext/bc/C/rpc",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Avalanche C-Chain Testnet",
- blockExplorerUrl: "https://subnets-test.avax.network/c-chain",
- ticker: "AVAX",
- tickerName: "AVAX",
- logo: "https://cryptologos.cc/logos/avalanche-avax-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/base/base.mdx b/docs/connect-blockchain/evm/base/base.mdx
index f0ca36777..d6de2c876 100644
--- a/docs/connect-blockchain/evm/base/base.mdx
+++ b/docs/connect-blockchain/evm/base/base.mdx
@@ -1,7 +1,7 @@
---
title: Integrate Web3Auth with the Base Chain (Coinbase) Blockchain
+sidebar_label: Base
hide_table_of_contents: true
-
image: "banners/base.png"
description:
"Integrate Web3Auth with the Base Chain (Coinbase) Blockchain | Documentation - Web3Auth"
@@ -9,6 +9,7 @@ description:
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBase from "@site/src/common/docs/general-connect-blockchain/_base.mdx";
+
export const Base = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/base/unity.mdx b/docs/connect-blockchain/evm/base/unity.mdx
index 96d186c98..c4c7b8c41 100644
--- a/docs/connect-blockchain/evm/base/unity.mdx
+++ b/docs/connect-blockchain/evm/base/unity.mdx
@@ -15,6 +15,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsBase from "@site/src/common/docs/general-connect-blockchain/_base.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -32,48 +33,14 @@ like getting the user's `account`, fetch `balance`, `sign transaction`, `send tr
from and `write` to the smart contract, etc. We have highlighted a few here to get you started
quickly on that.
+## Chain Details for Base
+
+
+
## Installation
-## Chain Details for Base Chain (Coinbase)
-
-
-
-
-- Chain ID: 0x2105
-- Public RPC URL: `https://mainnet.base.org` (Avoid using public rpcTarget in production, use
- services like Infura)
-- Display Name: Base Mainnet
-- Block Explorer Link: https://basescan.org/
-- Ticker: ETH
-- Ticker Name: ETH
-
-
-
-
-
-- Chain ID: 0x14A34
-- Public RPC URL: `https://sepolia.base.org` (Avoid using public rpcTarget in production, use
- services like Infura)
-- Display Name: Base Sepolia
-- Block Explorer Link: https://sepolia-explorer.base.org
-- Ticker: ETH
-- Ticker Name: ETH
-
-
-
-
## Initialize
diff --git a/docs/connect-blockchain/evm/base/web.mdx b/docs/connect-blockchain/evm/base/web.mdx
index 07c08b827..6fff2bda8 100644
--- a/docs/connect-blockchain/evm/base/web.mdx
+++ b/docs/connect-blockchain/evm/base/web.mdx
@@ -2,29 +2,16 @@
title: Integrate Web3Auth with the Base Chain (Coinbase) Blockchain in JavaScript
sidebar_label: Web
image: "banners/base.png"
-
-keywords: [base, coinbase, web3auth, authentication, blockchain]
+keywords: [base, coinbase, web3auth, authentication, blockchain, solution, API, SDK, development]
description:
"Integrate Web3Auth with the Base Chain (Coinbase) Blockchain in JavaScript | Documentation -
Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
+import ChainDetailsBase from "@site/src/common/docs/general-connect-blockchain/_base.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import SEO from "@site/src/components/SEO";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Base Chain (Coinbase)](https://base.org/) blockchain calls like getting the user's `account`,
-fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart
-contract, etc. We have highlighted a few here to get you started quickly on that.
-
-## Installation
-
-To interact with the Base Chain (Coinbase) blockchain, you can use either library with Web3Auth.
-
-
-
-## Initializing Provider
-
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
-
-### Getting the `chainConfig`
-
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(8453, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x14A34", // hex of 84532
- rpcTarget: "https://sepolia.base.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Base Sepolia",
- blockExplorerUrl: "https://sepolia-explorer.base.org",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://github.com/base-org/brand-kit/blob/main/logo/symbol/Base_Symbol_Blue.svg",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
+## Chain Details for Base
-
+
-### Read From Contract
+## React Wagmi Integration
-
+
-### Write to Contract
+## Vue Wagmi Integration
-
+
-## Fetch User's Private Key
+## For VanillaJS, Angular and other frameworks
-
+
diff --git a/docs/connect-blockchain/evm/bitkub/bitkub.mdx b/docs/connect-blockchain/evm/bitkub/bitkub.mdx
index 31855cfb9..85fdbe8ab 100644
--- a/docs/connect-blockchain/evm/bitkub/bitkub.mdx
+++ b/docs/connect-blockchain/evm/bitkub/bitkub.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the BitKub Blockchain
+sidebar_label: BitKub
hide_table_of_contents: true
image: "banners/bitkub.png"
description: "Integrate Web3Auth with the BitKub Blockchain | Documentation - Web3Auth"
@@ -7,6 +8,7 @@ description: "Integrate Web3Auth with the BitKub Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBitkub from "@site/src/common/docs/general-connect-blockchain/_bitkub.mdx";
+
export const BitKub = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/bitkub/unity.mdx b/docs/connect-blockchain/evm/bitkub/unity.mdx
index 7d5172da7..7b3d12f08 100644
--- a/docs/connect-blockchain/evm/bitkub/unity.mdx
+++ b/docs/connect-blockchain/evm/bitkub/unity.mdx
@@ -16,6 +16,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBitkub from "@site/src/common/docs/general-connect-blockchain/_bitkub.mdx";
-## Chain Details for BitKub
-
-
-
-
-- Chain ID: `0x60`
-- Public RPC URL: `https://rpc.bitkubchain.io`
-- Display Name: BitKub Mainnet
-- Block Explorer Link: `https://www.bkcscan.com`
-- Ticker: KUB
-- Ticker Name: KUB
-
-
-
-
-
-- Chain ID: `0x6545`
-- Public RPC URL: `https://rpc-testnet.bitkubchain.io/`
-- Display Name: BitKub Testnet
-- Block Explorer Link: `https://testnet.bkcscan.com`
-- Ticker: tKUB
-- Ticker Name: tKUB
-
-
-
+## Chain Details for Bitkub
+
+
## Initialize
diff --git a/docs/connect-blockchain/evm/bitkub/web.mdx b/docs/connect-blockchain/evm/bitkub/web.mdx
index 9cd35f0c8..4e2dee3c8 100644
--- a/docs/connect-blockchain/evm/bitkub/web.mdx
+++ b/docs/connect-blockchain/evm/bitkub/web.mdx
@@ -7,23 +7,13 @@ description:
"Integrate Web3Auth with the BitKub Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBitkub from "@site/src/common/docs/general-connect-blockchain/_bitkub.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[BitKub](https://docs.bitkubchain.org) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Bitkub
-## Installation
+
-To interact with the BitKub blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0x60", // hex of 96
- rpcTarget: "https://rpc.bitkubchain.io",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "BitKub",
- blockExplorer: "https://www.bkcscan.com",
- ticker: "KUB",
- tickerName: "KUB",
- logo: "https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/151011411910/original/BLLsZXQuCMERrt1iuNKKz3-ebSbLflZ1qQ.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0x6545", // hex of 25925
- rpcTarget: "https://rpc-testnet.bitkubchain.io",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "BitKub Testnet",
- blockExplorer: "https://testnet.bkcscan.com",
- ticker: "tKUB",
- tickerName: "tKUB",
- logo: "https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/151011411910/original/BLLsZXQuCMERrt1iuNKKz3-ebSbLflZ1qQ.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/bnb/bnb.mdx b/docs/connect-blockchain/evm/bnb/bnb.mdx
index 015fccec4..4cc9916ae 100644
--- a/docs/connect-blockchain/evm/bnb/bnb.mdx
+++ b/docs/connect-blockchain/evm/bnb/bnb.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the BNB Blockchain
+sidebar_label: BNB
hide_table_of_contents: true
image: "banners/bnb.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the BNB Blockchain | Documentation - Web3A
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBNB from "@site/src/common/docs/general-connect-blockchain/_bnb.mdx";
+
export const Bnb = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/bnb/unity.mdx b/docs/connect-blockchain/evm/bnb/unity.mdx
index 17f17e219..bc892959a 100644
--- a/docs/connect-blockchain/evm/bnb/unity.mdx
+++ b/docs/connect-blockchain/evm/bnb/unity.mdx
@@ -18,6 +18,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBNB from "@site/src/common/docs/general-connect-blockchain/_bnb.mdx";
+
## Installation
diff --git a/docs/connect-blockchain/evm/bnb/web.mdx b/docs/connect-blockchain/evm/bnb/web.mdx
index 51e9b55d9..83f40fd96 100644
--- a/docs/connect-blockchain/evm/bnb/web.mdx
+++ b/docs/connect-blockchain/evm/bnb/web.mdx
@@ -19,23 +19,13 @@ description:
"Integrate Web3Auth with the BNB (Binance) Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsBNB from "@site/src/common/docs/general-connect-blockchain/_bnb.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[BNB (Binance) Chain](https://www.bnbchain.org/) blockchain calls like getting the user's `account`,
-fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart
-contract, etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for BNB
-## Installation
+
-To interact with the BNB (Binance) Blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(56, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-const chainConfig = getEvmChainConfig(97, "your_web3auth_client_id");
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/celo/celo.mdx b/docs/connect-blockchain/evm/celo/celo.mdx
index e26d7dd1d..647f3b424 100644
--- a/docs/connect-blockchain/evm/celo/celo.mdx
+++ b/docs/connect-blockchain/evm/celo/celo.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Celo Blockchain
+sidebar_label: Celo
hide_table_of_contents: true
image: "banners/celo.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Celo Blockchain | Documentation - Web3
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsCelo from "@site/src/common/docs/general-connect-blockchain/_celo.mdx";
+
export const Celo = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/celo/unity.mdx b/docs/connect-blockchain/evm/celo/unity.mdx
index f538ddf90..f824182a6 100644
--- a/docs/connect-blockchain/evm/celo/unity.mdx
+++ b/docs/connect-blockchain/evm/celo/unity.mdx
@@ -17,6 +17,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsCelo from "@site/src/common/docs/general-connect-blockchain/_celo.mdx";
+
## Installation
diff --git a/docs/connect-blockchain/evm/celo/web.mdx b/docs/connect-blockchain/evm/celo/web.mdx
index 7d012547f..f70facfc9 100644
--- a/docs/connect-blockchain/evm/celo/web.mdx
+++ b/docs/connect-blockchain/evm/celo/web.mdx
@@ -7,23 +7,13 @@ keywords: [celo, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Celo Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsCelo from "@site/src/common/docs/general-connect-blockchain/_celo.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make [Celo](https://celo.org/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for Celo
-## Installation
+
-To interact with the Celo blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xa4ec", // hex of 42220, Celo mainnet
- rpcTarget: "https://forno.celo.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Celo Mainnet",
- blockExplorerUrl: "https://explorer.celo.org",
- ticker: "CELO",
- tickerName: "CELO",
- logo: "https://cryptologos.cc/logos/celo-celo-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xaef3", // hex of 44787, celo testnet
- rpcTarget: "https://alfajores-forno.celo-testnet.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Celo Testnet",
- blockExplorerUrl: "https://alfajores-blockscout.celo-testnet.org",
- ticker: "CELO",
- tickerName: "CELO",
- logo: "https://cryptologos.cc/logos/celo-celo-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/chiliz/chiliz.mdx b/docs/connect-blockchain/evm/chiliz/chiliz.mdx
index dbcd53982..bbc5a0ff9 100644
--- a/docs/connect-blockchain/evm/chiliz/chiliz.mdx
+++ b/docs/connect-blockchain/evm/chiliz/chiliz.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Chiliz Blockchain
+sidebar_label: Chiliz
hide_table_of_contents: true
image: "banners/chiliz.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Chiliz Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsChiliz from "@site/src/common/docs/general-connect-blockchain/_chiliz.mdx";
+
export const Chiliz = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/chiliz/unity.mdx b/docs/connect-blockchain/evm/chiliz/unity.mdx
index b367951d4..f9fcb71d0 100644
--- a/docs/connect-blockchain/evm/chiliz/unity.mdx
+++ b/docs/connect-blockchain/evm/chiliz/unity.mdx
@@ -17,6 +17,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsChiliz from "@site/src/common/docs/general-connect-blockchain/_chiliz.mdx";
+
-## Chain Details for Chiliz
+## Installation
-
-
-
-- Chain ID: 0x15B38
-- Public RPC URL: https://rpc.chiliz.com (Avoid using public rpcTarget in production, use services
- like Infura, Quicknode, etc.)
-- Alternate RPC URL: https://chiliz.publicnode.com
-- Display Name: Chiliz Mainnet
-- Block Explorer Link: https://chiliscan.com
-- Alternate Block Explorer: https://scan.chiliz.com
-- Ticker: CHZ
-- Ticker Name: Chiliz
-
-
-
-
-
-- Chain ID: 0x15B42
-- Public RPC URL: https://spicy-rpc.chiliz.com/ (Avoid using public rpcTarget in production, use
- services like Infura, Quicknode, etc.)
-- Alternate RPC URL: https://chiliz-spicy.publicnode.com
-- RPC Websocket URL: wss://spicy-rpc-ws.chiliz.com/
-- Alternate Websocket URL: wss://chiliz-spicy.publicnode.com
-- Display Name: Chiliz Spicy Testnet
-- Block Explorer Link: https://testnet.chiliscan.com/
-- Alternate Block Explorer: http://spicy-explorer.chiliz.com/
-- Ticker: CHZ
-- Ticker Name: Chiliz (Testnet)
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/chiliz/web.mdx b/docs/connect-blockchain/evm/chiliz/web.mdx
index 2ff0e1b86..906b6772f 100644
--- a/docs/connect-blockchain/evm/chiliz/web.mdx
+++ b/docs/connect-blockchain/evm/chiliz/web.mdx
@@ -19,22 +19,13 @@ description:
"Integrate Web3Auth with the Chiliz Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsChiliz from "@site/src/common/docs/general-connect-blockchain/_chiliz.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Chiliz Blockchain](https://www.chiliz.com) calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few examples to get you started.
+## Chain Details for Chiliz
-## Installation
+
-To interact with the Chiliz blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x15B38", // hex of 88888, Chiliz Mainnet
- rpcTarget: "https://rpc.chiliz.com",
- // Avoid using public rpcTarget in production.
- // Use services like Infura, Quicknode, etc.
- displayName: "Chiliz Mainnet",
- blockExplorerUrl: "https://chiliscan.com",
- ticker: "CHZ",
- tickerName: "Chiliz",
- logo: "https://cdn.chiliz.com/logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x15B42", // hex of 88882, Chiliz Spicy Testnet
- rpcTarget: "https://spicy-rpc.chiliz.com/",
- // Avoid using public rpcTarget in production.
- // Use services like Infura, Quicknode, etc.
- displayName: "Chiliz Spicy Testnet",
- blockExplorerUrl: "https://testnet.chiliscan.com/",
- ticker: "CHZ",
- tickerName: "Chiliz (Testnet)",
- logo: "https://cdn.chiliz.com/logo-testnet.png",
-};
-```
-
-
-
-
-### Initializing and Instantiating the Web3Auth SDK
-
-
-
-## Get User Info
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/cronos/cronos.mdx b/docs/connect-blockchain/evm/cronos/cronos.mdx
index f7609bf41..3296f2a20 100644
--- a/docs/connect-blockchain/evm/cronos/cronos.mdx
+++ b/docs/connect-blockchain/evm/cronos/cronos.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Cronos Blockchain
+sidebar_label: Cronos
hide_table_of_contents: true
image: "banners/cronos.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Cronos Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsCronos from "@site/src/common/docs/general-connect-blockchain/_cronos.mdx";
+
export const Cronos = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/cronos/unity.mdx b/docs/connect-blockchain/evm/cronos/unity.mdx
index 12e0d7de6..f91be113c 100644
--- a/docs/connect-blockchain/evm/cronos/unity.mdx
+++ b/docs/connect-blockchain/evm/cronos/unity.mdx
@@ -17,6 +17,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsCronos from "@site/src/common/docs/general-connect-blockchain/_cronos.mdx";
+
-## Chain Details for Cronos
+## Installation
-
-
-
-- Chain ID: 0x19
-- Public RPC URL: https://rpc.cronos.org (Avoid using public rpcTarget in production, use services
- like Infura)
-- Display Name: Cronos Mainnet
-- Block Explorer Link: https://cronoscan.com
-- Ticker: CRO
-- Ticker Name: CRO
-
-
-
-
-
-- Chain ID: 0x152
-- Public RPC URL: https://rpc-t3.cronos.org (Avoid using public rpcTarget in production, use
- services like Infura)
-- Display Name: Cronos Testnet
-- Block Explorer Link: https://cronoscan.com
-- Ticker: CRO
-- Ticker Name: CRO
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/cronos/web.mdx b/docs/connect-blockchain/evm/cronos/web.mdx
index 23a10333e..50bec25b3 100644
--- a/docs/connect-blockchain/evm/cronos/web.mdx
+++ b/docs/connect-blockchain/evm/cronos/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Cronos Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsCronos from "@site/src/common/docs/general-connect-blockchain/_cronos.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make [Cronos](https://cronos.org/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for Cronos
-## Installation
+
-To interact with the Cronos blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(25, "your_web3auth_client_id");
-};
-```
-
-
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(338, "your_web3auth_client_id");
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/ethereum/ethereum.mdx b/docs/connect-blockchain/evm/ethereum/ethereum.mdx
index d58e927af..fd966e571 100644
--- a/docs/connect-blockchain/evm/ethereum/ethereum.mdx
+++ b/docs/connect-blockchain/evm/ethereum/ethereum.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Ethereum Blockchain
+sidebar_label: Ethereum
hide_table_of_contents: true
keywords:
[
@@ -20,6 +21,7 @@ description: "Integrate Web3Auth with the Ethereum Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsEthereum from "@site/src/common/docs/general-connect-blockchain/_ethereum.mdx";
+
export const Ethereum = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/ethereum/unity.mdx b/docs/connect-blockchain/evm/ethereum/unity.mdx
index d30561367..1e4d502a6 100644
--- a/docs/connect-blockchain/evm/ethereum/unity.mdx
+++ b/docs/connect-blockchain/evm/ethereum/unity.mdx
@@ -14,6 +14,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsEthereum from "@site/src/common/docs/general-connect-blockchain/_ethereum.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -37,41 +38,7 @@ started quickly on that.
## Chain Details for Ethereum
-
-
-
-- Chain ID: 0x1
-- Public RPC URL: https://rpc.ethereum.org (Avoid using public rpcTarget in production, use services
- like Infura)
-- Display Name: Ethereum Mainnet
-- Block Explorer Link: https://etherscan.io
-- Ticker: ETH
-- Ticker Name: Ethereum
-
-
-
-
-
-- Chain ID: 0xaa36a7
-- Public RPC URL: https://rpc.sepolia.org (Avoid using public rpcTarget in production, use services
- like Infura)
-- Display Name: Ethereum Sepolia Testnet
-- Block Explorer Link: https://sepolia.etherscan.io
-- Ticker: ETH
-- Ticker Name: Sepolia
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/ethereum/web.mdx b/docs/connect-blockchain/evm/ethereum/web.mdx
index 4c36ea12a..647c1989e 100644
--- a/docs/connect-blockchain/evm/ethereum/web.mdx
+++ b/docs/connect-blockchain/evm/ethereum/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Ethereum Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsEthereum from "@site/src/common/docs/general-connect-blockchain/_ethereum.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,109 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/ethereum/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/), [`viem`](https://viem.sh/) etc. to make
-[Ethereum](https://ethereum.org/) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Ethereum
-## Installation
+
-To interact with the Ethereum blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(1, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(11155111, "your_web3auth_client_id");
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/evm.mdx b/docs/connect-blockchain/evm/evm.mdx
index e463a1813..92b8dde80 100644
--- a/docs/connect-blockchain/evm/evm.mdx
+++ b/docs/connect-blockchain/evm/evm.mdx
@@ -1,7 +1,7 @@
---
title: Integrate Web3Auth with EVM Compatible Chains
hide_table_of_contents: true
-
+sidebar_label: EVM Integration
image: "banners/ethereum.png"
description: "Integrate Web3Auth with EVM Compatible Chains | Documentation - Web3Auth"
---
@@ -23,8 +23,15 @@ enhancing security measures for authenticating users across various platforms. E
other hand, outlines the standard EVM API, enabling developers to interact with EVM blockchains
efficiently.
-Hence for all compatible chains, the standard interface allows you to seamlessly integrate any
-supported blockchain by just passing in the correct parameters like Chain ID, RPC Target URL etc.
+:::note
+
+With Web3Auth PnP V10 onwards, the chains are already added to the Dashboard. We can use any chain
+from the extensive list of predefined chains and add more if we need by toggling them on. See our
+guide to [add custom chains](/connect-blockchain/custom-chains) for more details.
+
+
+
+:::
We have documented some of the famous EVM Compatible Chains here.
diff --git a/docs/connect-blockchain/evm/fhenix/fhenix.mdx b/docs/connect-blockchain/evm/fhenix/fhenix.mdx
index ed4bc2254..e11228c4b 100644
--- a/docs/connect-blockchain/evm/fhenix/fhenix.mdx
+++ b/docs/connect-blockchain/evm/fhenix/fhenix.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Fhenix Blockchain
+sidebar_label: Fhenix
hide_table_of_contents: true
image: "banners/fhenix.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Fhenix Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFhenix from "@site/src/common/docs/general-connect-blockchain/_fhenix.mdx";
+
export const Fhenix = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/fhenix/unity.mdx b/docs/connect-blockchain/evm/fhenix/unity.mdx
index 6bcb4d3cc..18e626e93 100644
--- a/docs/connect-blockchain/evm/fhenix/unity.mdx
+++ b/docs/connect-blockchain/evm/fhenix/unity.mdx
@@ -17,6 +17,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFhenix from "@site/src/common/docs/general-connect-blockchain/_fhenix.mdx";
-
-
-
-- Chain ID: 0x7a31c7
-- Public RPC URL: https://api.helium.fhenix.zone
-- Display Name: Fhenix Helium
-- Block Explorer Link: https://explorer.helium.fhenix.zone
-- Ticker: tFHE
-- Ticker Name: tFHE
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/fhenix/web.mdx b/docs/connect-blockchain/evm/fhenix/web.mdx
index d74141372..bb074e39f 100644
--- a/docs/connect-blockchain/evm/fhenix/web.mdx
+++ b/docs/connect-blockchain/evm/fhenix/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Fhenix Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFhenix from "@site/src/common/docs/general-connect-blockchain/_fhenix.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Fhenix](https://fhenix.com/) blockchain
-calls like getting the user's `account`, fetching `balance`, `sign transaction`, `send transaction`,
-`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you
-started quickly on that.
+## Chain Details for Fhenix
-## Installation
+
-To interact with the Fhenix blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x7a31c7",
- rpcTarget: "https://api.helium.fhenix.zone",
- displayName: "Fhenix Helium",
- blockExplorerUrl: "https://explorer.helium.fhenix.zone",
- ticker: "tFHE",
- tickerName: "tFHE",
- logo: "https://img.cryptorank.io/coins/fhenix1695737384486.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/flare/flare.mdx b/docs/connect-blockchain/evm/flare/flare.mdx
index 7233d41d4..8cd93f31b 100644
--- a/docs/connect-blockchain/evm/flare/flare.mdx
+++ b/docs/connect-blockchain/evm/flare/flare.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Flare Blockchain
+sidebar_label: Flare
hide_table_of_contents: true
image: "banners/flare.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Flare Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFlare from "@site/src/common/docs/general-connect-blockchain/_flare.mdx";
+
export const Flare = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/flare/unity.mdx b/docs/connect-blockchain/evm/flare/unity.mdx
index 01a8154d8..c62ece3d5 100644
--- a/docs/connect-blockchain/evm/flare/unity.mdx
+++ b/docs/connect-blockchain/evm/flare/unity.mdx
@@ -17,6 +17,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFlare from "@site/src/common/docs/general-connect-blockchain/_flare.mdx";
-
-
-- Chain ID: 0xE
-- Public RPC URL: https://flare-api.flare.network/ext/C/rpc (Avoid using public rpcTarget in
- production, use services like Infura)
-- Display Name: Flare Mainnet
-- Block Explorer Link: https://flare-explorer.flare.network
-- Ticker: FLR
-- Ticker Name: FLR
-
-
-
-
-
-- Chain ID: 0x72
-- Public RPC URL: https://coston2-api.flare.network/ext/C/rpc (Avoid using public rpcTarget in
- production, use services like Infura)
-- Display Name: Coston2 testnet
-- Block Explorer Link: https://coston2-explorer.flare.network
-- Ticker: C2FLR
-- Ticker Name: C2FLR
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/flare/web.mdx b/docs/connect-blockchain/evm/flare/web.mdx
index 080b4db38..4e9931dd6 100644
--- a/docs/connect-blockchain/evm/flare/web.mdx
+++ b/docs/connect-blockchain/evm/flare/web.mdx
@@ -7,23 +7,13 @@ keywords: [flare, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Flare Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFlare from "@site/src/common/docs/general-connect-blockchain/_flare.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Flare](https://www.flare.network) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Flare
-## Installation
+
-To interact with the Flare blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xE", // hex of 14
- rpcTarget: "https://flare-api.flare.network/ext/C/rpc",
- // Avoid using public rpcTarget in production.
- // Use services provided by Flare or other node providers
- displayName: "Flare Mainnet",
- blockExplorerUrl: "https://flare-explorer.flare.network/",
- ticker: "FLR",
- tickerName: "FLR",
- logo: "https://cryptologos.cc/logos/flare-flr-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-// faucet link- "https://coston2-faucet.towolabs.com"
-import { CHAIN_NAMESPACES } from "@web3auth/base";
-
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x72", // hex of 114
- rpcTarget: "https://coston2-api.flare.network/ext/C/rpc",
- // Avoid using public rpcTarget in production.
- // Use services provided by Flare or other node providers
- displayName: "Coston2 testnet",
- blockExplorerUrl: "https://coston2-explorer.flare.network/",
- ticker: "C2FLR",
- tickerName: "C2FLR",
- logo: "https://cryptologos.cc/logos/flare-flr-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
## Read the current Bitcoin price from the FTSO system
diff --git a/docs/connect-blockchain/evm/flow/flow.mdx b/docs/connect-blockchain/evm/flow/flow.mdx
index 81fef8e14..fceb088b2 100644
--- a/docs/connect-blockchain/evm/flow/flow.mdx
+++ b/docs/connect-blockchain/evm/flow/flow.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Flow Blockchain
+sidebar_label: Flow
hide_table_of_contents: true
image: "banners/flow.png"
description: "Integrate Web3Auth with the Flow Blockchain | Documentation - Web3Auth"
@@ -7,6 +8,7 @@ description: "Integrate Web3Auth with the Flow Blockchain | Documentation - Web3
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFlow from "@site/src/common/docs/general-connect-blockchain/_flow.mdx";
+
export const Flow = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/flow/unity.mdx b/docs/connect-blockchain/evm/flow/unity.mdx
index 2a747ff1e..bded7edbc 100644
--- a/docs/connect-blockchain/evm/flow/unity.mdx
+++ b/docs/connect-blockchain/evm/flow/unity.mdx
@@ -16,6 +16,7 @@ import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockcha
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFlow from "@site/src/common/docs/general-connect-blockchain/_flow.mdx";
-
-
-- Chain ID: `0x2eb`
-- Public RPC URL: `https://mainnet.evm.nodes.onflow.org`
-- Display Name: Flow Mainnet
-- Block Explorer Link: `https://evm.flowscan.io/`
-- Ticker: FLOW
-- Ticker Name: FLOW
-
-
-
-
-
-- Chain ID: `0x221`
-- Public RPC URL: `https://testnet.evm.nodes.onflow.org`
-- Display Name: Flow Testnet
-- Block Explorer Link: `https://evm-testnet.flowscan.io`
-- Ticker: FLOW
-- Ticker Name: FLOW
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/flow/web.mdx b/docs/connect-blockchain/evm/flow/web.mdx
index 37ca5f97c..363af00e5 100644
--- a/docs/connect-blockchain/evm/flow/web.mdx
+++ b/docs/connect-blockchain/evm/flow/web.mdx
@@ -6,23 +6,13 @@ keywords: [flow, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Flow Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsFlow from "@site/src/common/docs/general-connect-blockchain/_flow.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Flow](https://www.flow.network) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Flow
-## Installation
+
-To interact with the Flow blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0x2eb", // hex of 747
- rpcTarget: "https://mainnet.evm.nodes.onflow.org",
- // Avoid using public rpcTarget in production.
- // Use services provided by Flow or other node providers
- displayName: "EVM on Flow",
- blockExplorer: "https://evm.flowscan.io/",
- ticker: "FLOW",
- tickerName: "FLOW",
- logo: "https://cryptologos.cc/logos/flow-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-// faucet link- "https://coston2-faucet.towolabs.com"
-import { CHAIN_NAMESPACES } from "@web3auth/base";
-
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0x221", // hex of 545
- rpcTarget: "https://testnet.evm.nodes.onflow.org",
- // Avoid using public rpcTarget in production.
- // Use services provided by Flow or other node providers
- displayName: "EVM on Flow Testnet",
- blockExplorer: "https://evm-testnet.flowscan.io",
- ticker: "FLOW",
- tickerName: "FLOW",
- logo: "https://cryptologos.cc/logos/flow-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
## Read the current Bitcoin price from the FTSO system
diff --git a/docs/connect-blockchain/evm/harmony/harmony.mdx b/docs/connect-blockchain/evm/harmony/harmony.mdx
index 1b5725864..0c33c06c9 100644
--- a/docs/connect-blockchain/evm/harmony/harmony.mdx
+++ b/docs/connect-blockchain/evm/harmony/harmony.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Harmony Blockchain
+sidebar_label: Harmony
hide_table_of_contents: true
image: "banners/harmony.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Harmony Blockchain | Documentation - W
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsHarmony from "@site/src/common/docs/general-connect-blockchain/_harmony.mdx";
+
export const Harmony = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/harmony/web.mdx b/docs/connect-blockchain/evm/harmony/web.mdx
index 745a59df0..0322ea3d3 100644
--- a/docs/connect-blockchain/evm/harmony/web.mdx
+++ b/docs/connect-blockchain/evm/harmony/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Harmony Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsHarmony from "@site/src/common/docs/general-connect-blockchain/_harmony.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Harmony](https://www.harmony.one/) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Harmony
-## Installation
+
-To interact with the Harmony blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x63564c40", // hex of 1666600000, Harmony mainnet
- rpcTarget: "https://api.harmony.one",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Harmony Mainnet",
- blockExplorerUrl: "https://explorer.harmony.one",
- ticker: "ONE",
- tickerName: "ONE",
- logo: "https://cryptologos.cc/logos/harmony-one-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x6357d2e0", // hex of 1666700000
- rpcTarget: "https://api.s0.b.hmny.io",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Harmony Testnet",
- blockExplorerUrl: "https://explorer.testnet.harmony.one",
- ticker: "ONE",
- tickerName: "ONE",
- logo: "https://cryptologos.cc/logos/harmony-one-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/hedera/hedera.mdx b/docs/connect-blockchain/evm/hedera/hedera.mdx
index a535a0220..2ac0d420d 100644
--- a/docs/connect-blockchain/evm/hedera/hedera.mdx
+++ b/docs/connect-blockchain/evm/hedera/hedera.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Hedera Blockchain
+sidebar_label: Hedera
hide_table_of_contents: true
image: "banners/hedera.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Hedera Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsHedera from "@site/src/common/docs/general-connect-blockchain/_hedera.mdx";
+
export const Hedera = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/hedera/web.mdx b/docs/connect-blockchain/evm/hedera/web.mdx
index e7ae8355a..d6fba7d44 100644
--- a/docs/connect-blockchain/evm/hedera/web.mdx
+++ b/docs/connect-blockchain/evm/hedera/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Hedera Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsHedera from "@site/src/common/docs/general-connect-blockchain/_hedera.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Hedera](https://hedera.com/) blockchain
-calls like getting the user's `account`, fetching `balance`, `sign transaction`, `send transaction`,
-`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you
-started quickly on that.
+## Chain Details for Hedera
-## Installation
+
-To interact with the Hedera blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x127",
- rpcTarget: "https://mainnet.hashio.io/api",
- displayName: "Hedera Mainnet",
- blockExplorerUrl: "https://hashscan.io/mainnet/",
- ticker: "HBAR",
- tickerName: "HBAR",
- logo: "https://cryptologos.cc/logos/hedera-hbar-logo.png?v=033",
-};
-```
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x128",
- rpcTarget: "https://testnet.hashio.io/api",
- displayName: "Hedera Testnet",
- blockExplorerUrl: "https://hashscan.io/testnet/",
- ticker: "HBAR",
- tickerName: "HBAR",
- logo: "https://cryptologos.cc/logos/hedera-hbar-logo.png?v=033",
-};
-```
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x129",
- rpcTarget: "https://previewnet.hashio.io/api",
- displayName: "Hedera Previewnet",
- blockExplorerUrl: "https://hashscan.io/previewnet/",
- ticker: "HBAR",
- tickerName: "HBAR",
- logo: "https://cryptologos.cc/logos/hedera-hbar-logo.png?v=033",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/kinto/kinto.mdx b/docs/connect-blockchain/evm/kinto/kinto.mdx
index 7cf7e8e63..f13c86434 100644
--- a/docs/connect-blockchain/evm/kinto/kinto.mdx
+++ b/docs/connect-blockchain/evm/kinto/kinto.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Kinto Blockchain
+sidebar_label: Kinto
hide_table_of_contents: true
image: "banners/kinto.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Kinto Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsKinto from "@site/src/common/docs/general-connect-blockchain/_kinto.mdx";
+
export const Kinto = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/kinto/web.mdx b/docs/connect-blockchain/evm/kinto/web.mdx
index 5c4123f20..0e29ab3c1 100644
--- a/docs/connect-blockchain/evm/kinto/web.mdx
+++ b/docs/connect-blockchain/evm/kinto/web.mdx
@@ -7,23 +7,13 @@ keywords: [kinto, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Kinto Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsKinto from "@site/src/common/docs/general-connect-blockchain/_kinto.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Kinto](https://kinto.com/) blockchain
-calls like getting the user's `account`, fetching `balance`, `sign transaction`, `send transaction`,
-`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you
-started quickly on that.
+## Chain Details for Kinto
-## Installation
+
-To interact with the Kinto blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1ecf",
- rpcTarget: "https://rpc.kinto.xyz/http",
- displayName: "Kinto Mainnet",
- blockExplorerUrl: "https://explorer.kinto.xyz",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://pbs.twimg.com/profile_images/1658109577081044992/ZBpLvGSb_400x400.jpg",
-};
-```
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xa788",
- rpcTarget: "http://35.215.120.180:8545",
- displayName: "Kinto Testnet",
- blockExplorerUrl: "https://explorer.kinto.xyz",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://pbs.twimg.com/profile_images/1658109577081044992/ZBpLvGSb_400x400.jpg",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/klaytn/klaytn.mdx b/docs/connect-blockchain/evm/klaytn/klaytn.mdx
index 693c57690..a98ebde92 100644
--- a/docs/connect-blockchain/evm/klaytn/klaytn.mdx
+++ b/docs/connect-blockchain/evm/klaytn/klaytn.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Klaytn Blockchain
+sidebar_label: Klaytn
hide_table_of_contents: true
image: "banners/klaytn.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Klaytn Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsKlaytn from "@site/src/common/docs/general-connect-blockchain/_klaytn.mdx";
+
export const Klaytn = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/klaytn/web.mdx b/docs/connect-blockchain/evm/klaytn/web.mdx
index 1861104ff..d81f02f89 100644
--- a/docs/connect-blockchain/evm/klaytn/web.mdx
+++ b/docs/connect-blockchain/evm/klaytn/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Klaytn Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsKlaytn from "@site/src/common/docs/general-connect-blockchain/_klaytn.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Klaytn](https://klaytn.foundation) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Klaytn
-## Installation
+
-To interact with the Klaytn blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(8217, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x3e9", // hex of 1001, Klaytn Boabab testnet
- rpcTarget: "https://api.baobab.klaytn.net:8651",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Klaytn Testnet",
- blockExplorerUrl: "https://baobab.scope.klaytn.com/",
- ticker: "KLAY",
- tickerName: "KLAY",
- logo: "https://cryptologos.cc/logos/klaytn-klay-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/linea/linea.mdx b/docs/connect-blockchain/evm/linea/linea.mdx
index 1563ff582..f8b9c3cd1 100644
--- a/docs/connect-blockchain/evm/linea/linea.mdx
+++ b/docs/connect-blockchain/evm/linea/linea.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Linea Blockchain
+sidebar_label: Linea
hide_table_of_contents: true
image: "banners/linea.png"
description: "Integrate Web3Auth with the Linea Blockchain | Documentation - Web3Auth"
@@ -7,6 +8,7 @@ description: "Integrate Web3Auth with the Linea Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsLinea from "@site/src/common/docs/general-connect-blockchain/_linea.mdx";
+
export const Linea = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/linea/web.mdx b/docs/connect-blockchain/evm/linea/web.mdx
index 771acf1ed..133768ea8 100644
--- a/docs/connect-blockchain/evm/linea/web.mdx
+++ b/docs/connect-blockchain/evm/linea/web.mdx
@@ -7,23 +7,13 @@ keywords: [linea, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Linea Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsLinea from "@site/src/common/docs/general-connect-blockchain/_linea.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make [Linea](https://linea.build/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for Linea
-## Installation
+
-To interact with the Linea blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(59144, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xe705", // hex of 421611
- rpcTarget: "https://rpc.sepolia.linea.build",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Linea Sepolia Testnet",
- blockExplorer: "https://sepolia.lineascan.build/",
- ticker: "ETH",
- tickerName: "ETH",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
+
diff --git a/docs/connect-blockchain/evm/manta/manta.mdx b/docs/connect-blockchain/evm/manta/manta.mdx
index 56f32ff79..a0ea285f2 100644
--- a/docs/connect-blockchain/evm/manta/manta.mdx
+++ b/docs/connect-blockchain/evm/manta/manta.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Manta Blockchain
+sidebar_label: Manta
hide_table_of_contents: true
image: "banners/manta.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Manta Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsManta from "@site/src/common/docs/general-connect-blockchain/_manta.mdx";
+
export const Manta = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/manta/web.mdx b/docs/connect-blockchain/evm/manta/web.mdx
index a478fd344..9babb1002 100644
--- a/docs/connect-blockchain/evm/manta/web.mdx
+++ b/docs/connect-blockchain/evm/manta/web.mdx
@@ -18,23 +18,13 @@ keywords:
description: "Integrate Web3Auth with the Manta Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsManta from "@site/src/common/docs/general-connect-blockchain/_manta.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Manta Blockchain](https://manta.network/) calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few examples to get you started.
+## Chain Details for Manta
-## Installation
+
-To interact with the Manta blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xA9", // hex of 169, Manta Pacific Mainnet
- rpcTarget: "https://pacific-rpc.manta.network/http",
- displayName: "Manta Pacific Mainnet",
- blockExplorerUrl: "https://pacific-explorer.manta.network",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x34816E", // hex of 3441006, Manta Pacific Sepolia Testnet
- rpcTarget: "https://pacific-rpc.sepolia-testnet.manta.network/http",
- displayName: "Manta Pacific Sepolia Testnet",
- blockExplorerUrl: "https://pacific-explorer.sepolia-testnet.manta.network",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/metis/metis.mdx b/docs/connect-blockchain/evm/metis/metis.mdx
index 9ffa19c2b..c85609611 100644
--- a/docs/connect-blockchain/evm/metis/metis.mdx
+++ b/docs/connect-blockchain/evm/metis/metis.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Metis Blockchain
+sidebar_label: Metis
hide_table_of_contents: true
image: "banners/metis.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Metis Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMetis from "@site/src/common/docs/general-connect-blockchain/_metis.mdx";
+
export const Metis = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/metis/web.mdx b/docs/connect-blockchain/evm/metis/web.mdx
index ebd3f3b35..ef1b40db8 100644
--- a/docs/connect-blockchain/evm/metis/web.mdx
+++ b/docs/connect-blockchain/evm/metis/web.mdx
@@ -18,22 +18,13 @@ keywords:
description: "Integrate Web3Auth with the Metis Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMetis from "@site/src/common/docs/general-connect-blockchain/_metis.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Metis Blockchain](https://metis.io) calls like getting the user's `account`, fetching `balance`,
-`sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have
-highlighted a few examples to get you started.
+## Chain Details for Metis
-## Installation
+
-To interact with the Metis blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x440", // hex of 1088, Metis Andromeda Mainnet
- rpcTarget: "https://andromeda.metis.io/?owner=1088",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Andromeda Mainnet",
- blockExplorerUrl: "https://andromeda-explorer.metis.io",
- ticker: "METIS",
- tickerName: "Metis",
- logo: "https://cdn.prod.website-files.com/6507242ad3e4e6ff563301e4/65456ca18876498fe5fd2a49_Symbol.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xE9FE", // hex of 59902, Metis Sepolia Testnet
- rpcTarget: "https://sepolia.metisdevops.link/",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Sepolia Testnet",
- blockExplorerUrl: "https://sepolia-explorer.metisdevops.link/",
- ticker: "tMetis",
- tickerName: "tMetis",
- logo: "https://cdn.prod.website-files.com/6507242ad3e4e6ff563301e4/65456ca18876498fe5fd2a49_Symbol.png",
-};
-```
-
-
-
-
-### Initializing and Instantiating the Web3Auth SDK
-
-
-
-## Get User Info
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/mint/mint.mdx b/docs/connect-blockchain/evm/mint/mint.mdx
index 9f06fd3e7..92c9be6a5 100644
--- a/docs/connect-blockchain/evm/mint/mint.mdx
+++ b/docs/connect-blockchain/evm/mint/mint.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Mint Blockchain
+sidebar_label: Mint
hide_table_of_contents: true
image: "banners/mint.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Mint Blockchain | Documentation - Web3
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMint from "@site/src/common/docs/general-connect-blockchain/_mint.mdx";
+
export const Mint = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/mint/web.mdx b/docs/connect-blockchain/evm/mint/web.mdx
index aa3db55bd..df4aeee90 100644
--- a/docs/connect-blockchain/evm/mint/web.mdx
+++ b/docs/connect-blockchain/evm/mint/web.mdx
@@ -7,22 +7,13 @@ keywords:
description: "Integrate Web3Auth with the Mint Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMint from "@site/src/common/docs/general-connect-blockchain/_mint.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Mint Blockchain](https://mintchain.io) calls like getting the user's `account`, fetching `balance`,
-signing transactions, sending transactions, reading from and writing to the smart contract, etc. We
-have highlighted a few examples to get you started.
+## Chain Details for Mint
-## Installation
+
-To interact with the Mint blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xB9", // hex of 185, Mint Mainnet
- rpcTarget: "https://rpc.mintchain.io",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Mint Mainnet",
- blockExplorerUrl: "https://explorer.mintchain.io",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://i.ibb.co/yp6y4jy/logo-mint.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x697", // hex of 1687, Mint Sepolia Testnet
- rpcTarget: "https://sepolia-testnet-rpc.mintchain.io",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Mint Sepolia Testnet",
- blockExplorerUrl: "https://sepolia-testnet-explorer.mintchain.io",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://i.ibb.co/yp6y4jy/logo-mint.png",
-};
-```
-
-
-
-
-### Initializing and Instantiating the Web3Auth SDK
-
-
-
-## Get User Info
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx b/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx
index 7e4c043e2..29cd31b8c 100644
--- a/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx
+++ b/docs/connect-blockchain/evm/moonbeam/moonbeam.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Moonbeam Blockchain
+sidebar_label: Moonbeam
hide_table_of_contents: true
image: "banners/moonbeam.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Moonbeam Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMoonbeam from "@site/src/common/docs/general-connect-blockchain/_moonbeam.mdx";
+
export const Moonbeam = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/moonbeam/web.mdx b/docs/connect-blockchain/evm/moonbeam/web.mdx
index 7176e80ac..39bdddcd9 100644
--- a/docs/connect-blockchain/evm/moonbeam/web.mdx
+++ b/docs/connect-blockchain/evm/moonbeam/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Moonbeam Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMoonbeam from "@site/src/common/docs/general-connect-blockchain/_moonbeam.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Moonbeam](https://moonbeam.network/networks/moonbeam/) blockchain calls like getting the user's
-`account`, fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to
-the smart contract, etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Moonbeam
-## Installation
+
-To interact with the Moonbeam blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x504", // hex of 1284, moonbeam mainnet
- rpcTarget: "https://rpc.api.moonbeam.network",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Moonbeam Mainnet",
- blockExplorerUrl: "https://moonbeam.moonscan.io",
- ticker: "GLMR",
- tickerName: "GLMR",
- logo: "https://cryptologos.cc/logos/moonbeam-glmr-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x507", // hex of 1287, moonbeam testnet
- rpcTarget: "https://rpc.api.moonbase.moonbeam.network",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Moonbeam Testnet",
- blockExplorerUrl: "https://moonbase.moonscan.io",
- ticker: "GLMR",
- tickerName: "GLMR",
- logo: "https://cryptologos.cc/logos/moonbeam-glmr-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/moonriver/moonriver.mdx b/docs/connect-blockchain/evm/moonriver/moonriver.mdx
index 680da60f5..012a33220 100644
--- a/docs/connect-blockchain/evm/moonriver/moonriver.mdx
+++ b/docs/connect-blockchain/evm/moonriver/moonriver.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Moonriver Blockchain
+sidebar_label: Moonriver
hide_table_of_contents: true
image: "banners/moonriver.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Moonriver Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMoonriver from "@site/src/common/docs/general-connect-blockchain/_moonriver.mdx";
+
export const Moonriver = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/moonriver/web.mdx b/docs/connect-blockchain/evm/moonriver/web.mdx
index a48aeb502..c99bb08c1 100644
--- a/docs/connect-blockchain/evm/moonriver/web.mdx
+++ b/docs/connect-blockchain/evm/moonriver/web.mdx
@@ -8,23 +8,13 @@ description:
"Integrate Web3Auth with the Moonriver Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMoonriver from "@site/src/common/docs/general-connect-blockchain/_moonriver.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Moonriver](https://moonbeam.network/networks/moonriver/) blockchain calls like getting the user's
-`account`, fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to
-the smart contract, etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Moonriver
-## Installation
+
-To interact with the Moonriver blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x505", // hex of 1285, moonriver mainnet
- rpcTarget: "`https://rpc.api.moonriver.moonbeam.network`",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Moonriver Mainnet",
- blockExplorerUrl: "https://moonriver.moonscan.io",
- ticker: "MOVR",
- tickerName: "MOVR",
- logo: "https://seeklogo.com/images/M/moonriver-logo-1EECA82DD2-seeklogo.com.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x507", // hex of 1287, moonriver testnet
- rpcTarget: "`https://rpc.api.moonriver.moonbeam.network`",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Moonriver Testnet",
- blockExplorerUrl: "https://moonbase.moonscan.io",
- ticker: "MOVR",
- tickerName: "MOVR",
- logo: "https://seeklogo.com/images/M/moonriver-logo-1EECA82DD2-seeklogo.com.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/morph/morph.mdx b/docs/connect-blockchain/evm/morph/morph.mdx
index 5367cbdfc..09ba7b2a7 100644
--- a/docs/connect-blockchain/evm/morph/morph.mdx
+++ b/docs/connect-blockchain/evm/morph/morph.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Morph Blockchain
+sidebar_label: Morph
hide_table_of_contents: true
image: "banners/morph.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Morph Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMorph from "@site/src/common/docs/general-connect-blockchain/_morph.mdx";
+
export const Morph = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/morph/web.mdx b/docs/connect-blockchain/evm/morph/web.mdx
index 22b257b79..ae25fd380 100644
--- a/docs/connect-blockchain/evm/morph/web.mdx
+++ b/docs/connect-blockchain/evm/morph/web.mdx
@@ -7,23 +7,13 @@ keywords: [morph, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Morph Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsMorph from "@site/src/common/docs/general-connect-blockchain/_morph.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Morph](https://morph.com/) blockchain
-calls like getting the user's `account`, fetching `balance`, `sign transaction`, `send transaction`,
-`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you
-started quickly on that.
+## Chain Details for Morph
-## Installation
+
-To interact with the Morph blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xa96",
- rpcTarget: "https://rpc-testnet.morphl2.io",
- displayName: "Morph Testnet",
- blockExplorerUrl: "https://explorer-testnet.morphl2.io/",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://morphl2brand.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Ffcab2c10-8da9-4414-aa63-4998ddf62e78%2F64fbcffc-0e7c-45e1-8900-1bb36dc90924%2FFrame_1597882262.png?table=block&id=0e6a22c3-ed4e-4c25-9575-11b95b1eade9&spaceId=fcab2c10-8da9-4414-aa63-4998ddf62e78&width=2000&userId=&cache=v2",
-};
-```
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xafa",
- rpcTarget: "https://rpc-holesky.morphl2.io",
- displayName: "Morph Holesky",
- blockExplorerUrl: "https://explorer-holesky.morphl2.io/",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://morphl2brand.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Ffcab2c10-8da9-4414-aa63-4998ddf62e78%2F64fbcffc-0e7c-45e1-8900-1bb36dc90924%2FFrame_1597882262.png?table=block&id=0e6a22c3-ed4e-4c25-9575-11b95b1eade9&spaceId=fcab2c10-8da9-4414-aa63-4998ddf62e78&width=2000&userId=&cache=v2",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/neon/neon.mdx b/docs/connect-blockchain/evm/neon/neon.mdx
index d07b0cbb4..5c7758eca 100644
--- a/docs/connect-blockchain/evm/neon/neon.mdx
+++ b/docs/connect-blockchain/evm/neon/neon.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Neon Blockchain
+sidebar_label: Neon
hide_table_of_contents: true
image: "banners/neon.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Neon Blockchain | Documentation - Web3
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsNeon from "@site/src/common/docs/general-connect-blockchain/_neon.mdx";
+
export const Neon = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/neon/web.mdx b/docs/connect-blockchain/evm/neon/web.mdx
index 4f548c90d..d325fbd95 100644
--- a/docs/connect-blockchain/evm/neon/web.mdx
+++ b/docs/connect-blockchain/evm/neon/web.mdx
@@ -7,23 +7,13 @@ keywords: [neon, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Neon Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
+import ChainDetailsNeon from "@site/src/common/docs/general-connect-blockchain/_neon.mdx";
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Neon](https://neonevm.org/) blockchain
-calls like getting the user's `account`, fetching `balance`, `sign transaction`, `send transaction`,
-`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you
-started quickly on that.
+## Chain Details for Neon
-## Installation
+
-To interact with the Neon blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xe9ac0d6", // hex of 245022934, Neon mainnet
- rpcTarget: "https://neon-proxy-mainnet.solana.p2p.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Neon Mainnet",
- blockExplorerUrl: "https://neonscan.org/",
- ticker: "NEON",
- tickerName: "NEON",
- logo: "https://docs.neonevm.org/icons/token.svg",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xe9ac0ce", // hex of 245022926, neon testnet
- rpcTarget: "https://devnet.neonevm.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Neon Mainnet",
- blockExplorerUrl: "https://devnet.neonscan.org/",
- ticker: "NEON",
- tickerName: "NEON",
- logo: "https://docs.neonevm.org/icons/token.svg",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/nibiru/nibiru.mdx b/docs/connect-blockchain/evm/nibiru/nibiru.mdx
index 7e549a2a6..d188cc224 100644
--- a/docs/connect-blockchain/evm/nibiru/nibiru.mdx
+++ b/docs/connect-blockchain/evm/nibiru/nibiru.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Nibiru Blockchain
+sidebar_label: Nibiru
hide_table_of_contents: true
image: "banners/nibiru.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Nibiru Blockchain | Documentation - We
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsNibiru from "@site/src/common/docs/general-connect-blockchain/_nibiru.mdx";
+
export const Nibiru = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/nibiru/web.mdx b/docs/connect-blockchain/evm/nibiru/web.mdx
index f48605140..eadbbf45d 100644
--- a/docs/connect-blockchain/evm/nibiru/web.mdx
+++ b/docs/connect-blockchain/evm/nibiru/web.mdx
@@ -7,20 +7,10 @@ description:
"Integrate Web3Auth with the Nibiru Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsNibiru from "@site/src/common/docs/general-connect-blockchain/_nibiru.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -32,119 +22,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/nibiru/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/), [`viem`](https://viem.sh/) etc. to make
-[Nibiru](https://nibiru.fi/) blockchain calls like getting the user's `account`, fetching `balance`,
-`sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have
-highlighted a few here to get you started quickly on that.
+## Chain Details for Nibiru
-## Installation
+
-To interact with the Nibiru blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-:::note
-
-Nibiru is EVM compatible only for localnet for now. Kindly refer to the
-[Nibiru documentation](https://nibiru.fi/docs/dev/evm/) and
-[Nibiru Networks](https://nibiru.fi/docs/dev/networks/#evm-network-configs) for the latest updates
-and EVM-related configs.
-
-:::
-
-:::info
-
-For Nibiru, the steps for creating a local block explorer are mentioned
-[here](https://nibiru.fi/docs/dev/evm/quickstart.html#_4-local-explorer-optional).
-
-:::
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x100", // 420 for Mainnet, 256 for Localnet
- rpcTarget: "http://127.0.0.1:8545",
- displayName: "Nibiru Localnet",
- blockExplorerUrl: "http://localhost:8080", // See the info placard above
- ticker: "NIBI",
- tickerName: "Nibiru Chain",
- logo: "https://nibiru.fi/_astro/nibi-logomark-profile-pic.DoOUhpoa.svg",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/opbnb/opbnb.mdx b/docs/connect-blockchain/evm/opbnb/opbnb.mdx
index c278b1404..66bf360dd 100644
--- a/docs/connect-blockchain/evm/opbnb/opbnb.mdx
+++ b/docs/connect-blockchain/evm/opbnb/opbnb.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the BNB Optimistic Rolllup
+sidebar_label: opBNB
hide_table_of_contents: true
image: "banners/opbnb.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the BNB Optimistic Rolllup | Documentation
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsOpBNB from "@site/src/common/docs/general-connect-blockchain/_opbnb.mdx";
+
export const opBNB = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/opbnb/web.mdx b/docs/connect-blockchain/evm/opbnb/web.mdx
index 92d28f682..49578f14d 100644
--- a/docs/connect-blockchain/evm/opbnb/web.mdx
+++ b/docs/connect-blockchain/evm/opbnb/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the BNB Optimistic Rolllup in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsOpBNB from "@site/src/common/docs/general-connect-blockchain/_opbnb.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,129 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/opbnb/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[opBNB](https://astar.network/) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for opBNB
-## Installation
+
-To interact with the opBNB blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xCC", // hex of 1261120
- rpcTarget: "`https://opbnb-mainnet-rpc.bnbchain.org`",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "opBNB Mainnet",
- blockExplorerUrl: "https://opbnbscan.com",
- ticker: "BNB",
- tickerName: "opBNB",
- logo: "https://cryptologos.cc/logos/bnb-bnb-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x15EB", // hex of 1261120
- rpcTarget: "https://opbnb-testnet-rpc.bnbchain.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "opBNB Testnet",
- blockExplorerUrl: "https://testnet.opbnbscan.com",
- ticker: "tBNB",
- tickerName: "opBNB",
- logo: "https://cryptologos.cc/logos/bnb-bnb-logo.png",
-};
-```
-
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/optimism/optimism.mdx b/docs/connect-blockchain/evm/optimism/optimism.mdx
index 02529ddab..6f0350d70 100644
--- a/docs/connect-blockchain/evm/optimism/optimism.mdx
+++ b/docs/connect-blockchain/evm/optimism/optimism.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Optimism Blockchain
+sidebar_label: Optimism
hide_table_of_contents: true
image: "banners/optimism.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Optimism Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsOptimism from "@site/src/common/docs/general-connect-blockchain/_optimism.mdx";
+
export const Optimism = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/optimism/web.mdx b/docs/connect-blockchain/evm/optimism/web.mdx
index 0f12516ca..d91378d7c 100644
--- a/docs/connect-blockchain/evm/optimism/web.mdx
+++ b/docs/connect-blockchain/evm/optimism/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Optimism Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsOptimism from "@site/src/common/docs/general-connect-blockchain/_optimism.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,118 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/optimism/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Optimism](https://optimism.io/) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Optimism
-## Installation
+
-To interact with the Optimism blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(10, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xAA37DC", // hex of 11155420
- rpcTarget: "https://sepolia.optimism.io",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "OP Sepolia",
- blockExplorerUrl: "`https://sepolia-optimistic.etherscan.io`",
- ticker: "ETH",
- tickerName: "ETH",
- logo: "https://cryptologos.cc/logos/optimism-ethereum-op-logo.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/polygon/polygon.mdx b/docs/connect-blockchain/evm/polygon/polygon.mdx
index 96db72cbf..f3da0ce62 100644
--- a/docs/connect-blockchain/evm/polygon/polygon.mdx
+++ b/docs/connect-blockchain/evm/polygon/polygon.mdx
@@ -1,13 +1,27 @@
---
title: Integrate Web3Auth with the Polygon Blockchain
+sidebar_label: Polygon
hide_table_of_contents: true
-
+keywords:
+ [
+ polygon,
+ wallet,
+ integration,
+ web3auth,
+ API,
+ SDK,
+ authentication,
+ blockchain,
+ solution,
+ development,
+ ]
image: "banners/polygon.png"
description: "Integrate Web3Auth with the Polygon Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsPolygon from "@site/src/common/docs/general-connect-blockchain/_polygon.mdx";
-Integrate Web3Auth seamlessly with EVM-based Polygon Blockchain. For Web SDKs, Web3Auth returns a
+Integrate Web3Auth seamlessly with EVM-based Polygon blockchain. For Web SDKs, Web3Auth returns a
provider that can be directly used to initialize the libraries like ethers.js, web3.js etc. and make
blockchain calls, while for Mobile & Gaming SDKs, the private key is available in the user scope
which can be used in a similar way to initialize the respective blockchain interaction libraries and
@@ -25,6 +39,10 @@ make calls to the network.
This documentation provides a straightforward guide for developers looking to implement blockchain
connections quickly and effortlessly across various platforms.
+## Chain Details for Polygon
+
+
+
export const Polygon = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/polygon/unity.mdx b/docs/connect-blockchain/evm/polygon/unity.mdx
index effdf33d0..d3a2e7c31 100644
--- a/docs/connect-blockchain/evm/polygon/unity.mdx
+++ b/docs/connect-blockchain/evm/polygon/unity.mdx
@@ -14,6 +14,7 @@ import GetBalanceSnippet from "@site/src/common/docs/unity-connect-blockchain/_e
import InitialisationSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-initialisation.mdx";
import SignMessageSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-sign-message.mdx";
import SendTransactionSnippet from "@site/src/common/docs/unity-connect-blockchain/_evm-send-transaction.mdx";
+import ChainDetailsPolygon from "@site/src/common/docs/general-connect-blockchain/_polygon.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import SEO from "@site/src/components/SEO";
@@ -37,41 +38,7 @@ started quickly on that.
## Chain Details for Polygon
-
-
-
-- Chain ID: 0x89
-- Public RPC URL: https://polygon-rpc.com (Avoid using public rpcTarget in production, use services
- like Infura)
-- Display Name: Polygon Mainnet
-- Block Explorer Link: https://polygonscan.com
-- Ticker: POL
-- Ticker Name: Polygon Ecosystem Token
-
-
-
-
-
-- Chain ID: 0x13882
-- Public RPC URL: https://rpc-amoy.polygon.technology/ (Avoid using public rpcTarget in production,
- use services like Infura)
-- Display Name: Polygon Amoy Testnet
-- Block Explorer Link: https://amoy.polygonscan.com
-- Ticker: POL
-- Ticker Name: Polygon Ecosystem Token
-
-
-
+
## Initialize
diff --git a/docs/connect-blockchain/evm/polygon/web.mdx b/docs/connect-blockchain/evm/polygon/web.mdx
index 4bda9f4af..790901df2 100644
--- a/docs/connect-blockchain/evm/polygon/web.mdx
+++ b/docs/connect-blockchain/evm/polygon/web.mdx
@@ -19,20 +19,10 @@ description:
"Integrate Web3Auth with the Polygon Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsPolygon from "@site/src/common/docs/general-connect-blockchain/_polygon.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -44,109 +34,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/polygon/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Polygon (formerly Matic)](https://polygon.technology/) blockchain calls like getting the user's
-`account`, fetching `balance`, `sign transaction`, `send transaction`, `read` from and `write` to
-the smart contract, etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Polygon
-## Installation
+
-To interact with the Polygon blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(137, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(80002, "your_web3auth_client_id");
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/rootstock/rootstock.mdx b/docs/connect-blockchain/evm/rootstock/rootstock.mdx
index a237b6400..0cffb2da7 100644
--- a/docs/connect-blockchain/evm/rootstock/rootstock.mdx
+++ b/docs/connect-blockchain/evm/rootstock/rootstock.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Rootstock Blockchain
+sidebar_label: Rootstock
hide_table_of_contents: true
image: "banners/rootstock.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Rootstock Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsRootstock from "@site/src/common/docs/general-connect-blockchain/_rootstock.mdx";
+
export const Rootstock = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/rootstock/web.mdx b/docs/connect-blockchain/evm/rootstock/web.mdx
index 8c63e4d6a..c0be5d3d3 100644
--- a/docs/connect-blockchain/evm/rootstock/web.mdx
+++ b/docs/connect-blockchain/evm/rootstock/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Rootstock Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsRootstock from "@site/src/common/docs/general-connect-blockchain/_rootstock.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,124 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/rootstock/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Rootstock](https://rootstock.com/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for Rootstock
-## Installation
+
-To interact with the Rootstock blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1e",
- rpcTarget: "https://public-node.rsk.co",
- displayName: "Rootstock Mainnet",
- blockExplorerUrl: "https://explorer.rootstock.io/",
- ticker: "RBTC",
- tickerName: "RBTC",
- logo: "https://pbs.twimg.com/profile_images/1592915327343624195/HPPSuVx3_400x400.jpg",
-};
-```
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1f",
- rpcTarget: "https://public-node.testnet.rsk.co",
- displayName: "Rootstock Testnet",
- blockExplorerUrl: "https://explorer.testnet.rootstock.io/",
- ticker: "tRBTC",
- tickerName: "tRBTC",
- logo: "https://pbs.twimg.com/profile_images/1592915327343624195/HPPSuVx3_400x400.jpg",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/saakuru/saakuru.mdx b/docs/connect-blockchain/evm/saakuru/saakuru.mdx
index 25e1ea413..557bc0098 100644
--- a/docs/connect-blockchain/evm/saakuru/saakuru.mdx
+++ b/docs/connect-blockchain/evm/saakuru/saakuru.mdx
@@ -1,13 +1,14 @@
---
title: Integrate Web3Auth with the Saakuru Blockchain
hide_table_of_contents: true
-
+sidebar_label: Saakuru
image: "banners/saakuru.png"
description: "Integrate Web3Auth with the Saakuru Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsSaakuru from "@site/src/common/docs/general-connect-blockchain/_saakuru.mdx";
+
export const Saakuru = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/saakuru/web.mdx b/docs/connect-blockchain/evm/saakuru/web.mdx
index ad92a6572..2c2570182 100644
--- a/docs/connect-blockchain/evm/saakuru/web.mdx
+++ b/docs/connect-blockchain/evm/saakuru/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Saakuru Blockchain in Web Applications | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsSaakuru from "@site/src/common/docs/general-connect-blockchain/_saakuru.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,91 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/saakuru/web"
/>
-## Installation
+## Chain Details for Saakuru
-
+
-## Initializing Provider
+## React Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## Vue Wagmi Integration
-
-
+
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x6E23D6", // Hexadecimal for 7225878
- rpcTarget: "https://rpc.saakuru.network",
- displayName: "Saakuru Mainnet",
- blockExplorerUrl: "https://explorer.saakuru.network/",
- ticker: "OAS",
- tickerName: "Saakuru",
-};
-```
+## For VanillaJS, Angular and other frameworks
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/shardeum/shardeum.mdx b/docs/connect-blockchain/evm/shardeum/shardeum.mdx
index ff6ee1490..40496404b 100644
--- a/docs/connect-blockchain/evm/shardeum/shardeum.mdx
+++ b/docs/connect-blockchain/evm/shardeum/shardeum.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Shardeum Blockchain
+sidebar_label: Shardeum
hide_table_of_contents: true
image: "banners/shardeum.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Shardeum Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsShardeum from "@site/src/common/docs/general-connect-blockchain/_shardeum.mdx";
+
export const Shardeum = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/shardeum/web.mdx b/docs/connect-blockchain/evm/shardeum/web.mdx
index 7a9205534..531615734 100644
--- a/docs/connect-blockchain/evm/shardeum/web.mdx
+++ b/docs/connect-blockchain/evm/shardeum/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Shardeum Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsShardeum from "@site/src/common/docs/general-connect-blockchain/_shardeum.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,106 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/shardeum/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [Shardeum](https://shardeum.org/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for Shardeum
-## Installation
+
-To interact with the Shardeum blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1F92", // hex of 8082, Shardeum Atomium testnet
- rpcTarget: "https://atomium.shardeum.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Shardeum Atomium",
- blockExplorerUrl: "https://explorer-atomium.shardeum.org/",
- ticker: "SHM",
- tickerName: "SHM",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/skale/skale.mdx b/docs/connect-blockchain/evm/skale/skale.mdx
index 76a08d2be..f7179cf35 100644
--- a/docs/connect-blockchain/evm/skale/skale.mdx
+++ b/docs/connect-blockchain/evm/skale/skale.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Skale Blockchain
+sidebar_label: Skale
hide_table_of_contents: true
image: "banners/skale.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Skale Blockchain | Documentation - Web
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsSkale from "@site/src/common/docs/general-connect-blockchain/_skale.mdx";
+
export const Skale = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/skale/web.mdx b/docs/connect-blockchain/evm/skale/web.mdx
index d61c6e5ef..6b38739ea 100644
--- a/docs/connect-blockchain/evm/skale/web.mdx
+++ b/docs/connect-blockchain/evm/skale/web.mdx
@@ -7,20 +7,10 @@ keywords: [skale, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Skale Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsSkale from "@site/src/common/docs/general-connect-blockchain/_skale.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -32,282 +22,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/skale/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make [SKALE](https://skale.space/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for Skale
-## Installation
+
-To interact with the Skale blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig` for Europa Hub
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x79f99296",
- rpcTarget: "https://mainnet.skalenodes.com/v1/elated-tan-skat",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Europa Hub Mainnet",
- blockExplorerUrl: "https://elated-tan-skat.explorer.mainnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x561bf78b",
- rpcTarget: "https://testnet.skalenodes.com/v1/juicy-low-small-testnet",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Europa Hub Testnet",
- blockExplorerUrl: "https://juicy-low-small-testnet.explorer.testnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-### Getting the `chainConfig` for Calypso Hub
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x5d456c62",
- rpcTarget: "https://mainnet.skalenodes.com/v1/honorable-steel-rasalhague",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Calypso Hub Mainnet",
- blockExplorerUrl: "https://honorable-steel-rasalhague.explorer.mainnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x3a14269b",
- rpcTarget: "https://testnet.skalenodes.com/v1/giant-half-dual-testnet",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Calypso Hub Testnet",
- blockExplorerUrl: "https://giant-half-dual-testnet.explorer.testnet.skalenodes.com",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-### Getting the `chainConfig` for Nebula Gaming Hub
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x585eb4b1",
- rpcTarget: "https://mainnet.skalenodes.com/v1/green-giddy-denebola",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Nebula Gaming Hub Mainnet",
- blockExplorerUrl: "https://green-giddy-denebola.explorer.mainnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x0235ddd0",
- rpcTarget: "https://testnet.skalenodes.com/v1/lanky-ill-funny-testnet/",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Nebula Gaming Hub Testnet",
- blockExplorerUrl: "https://lanky-ill-funny-testnet.explorer.testnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-### Getting the `chainConfig` for Titan Hub
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x507aaa2a",
- rpcTarget: "https://mainnet.skalenodes.com/v1/parallel-stormy-spica",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Titan Hub Mainnet",
- blockExplorerUrl: "https://parallel-stormy-spica.explorer.mainnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
- logo: "https://res.coinpaper.com/coinpaper/SKL_q1dnei.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x3cd156dc",
- rpcTarget: "https://testnet.skalenodes.com/v1/aware-fake-trim-testnet",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "SKALE Titan Hub Testnet",
- blockExplorerUrl: "https://aware-fake-trim-testnet.explorer.testnet.skalenodes.com/",
- ticker: "sFUEL",
- tickerName: "sFUEL",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/soneium/soneium.mdx b/docs/connect-blockchain/evm/soneium/soneium.mdx
index 69ea8a4f2..82a83f7b5 100644
--- a/docs/connect-blockchain/evm/soneium/soneium.mdx
+++ b/docs/connect-blockchain/evm/soneium/soneium.mdx
@@ -1,13 +1,14 @@
---
title: Integrate Web3Auth with the Soneium Blockchain
hide_table_of_contents: true
-
+sidebar_label: Soneium
image: "banners/soneium.png"
description: "Integrate Web3Auth with the Soneium Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsSoneium from "@site/src/common/docs/general-connect-blockchain/_soneium.mdx";
+
export const Soneium = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/soneium/web.mdx b/docs/connect-blockchain/evm/soneium/web.mdx
index 86e19505e..455d8d4f7 100644
--- a/docs/connect-blockchain/evm/soneium/web.mdx
+++ b/docs/connect-blockchain/evm/soneium/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Soneium Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsSoneium from "@site/src/common/docs/general-connect-blockchain/_soneium.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,111 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/Soneium/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Soneium](https://soneium.org) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Soneium
-## Installation
+
-To interact with the Soneium blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(1868, "your_web3auth_client_id");
-```
-
-
-
-
-
-```typescript
-import { getEvmChainConfig } from "@web3auth/base";
-
-const chainConfig = getEvmChainConfig(1946, "your_web3auth_client_id");
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/songbird/songbird.mdx b/docs/connect-blockchain/evm/songbird/songbird.mdx
index 047de5052..e349bf60c 100644
--- a/docs/connect-blockchain/evm/songbird/songbird.mdx
+++ b/docs/connect-blockchain/evm/songbird/songbird.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Songbird Blockchain
+sidebar_label: Songbird
hide_table_of_contents: true
image: "banners/songbird.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Songbird Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsSongbird from "@site/src/common/docs/general-connect-blockchain/_songbird.mdx";
+
export const Songbird = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/songbird/web.mdx b/docs/connect-blockchain/evm/songbird/web.mdx
index 34d73b45c..c57883222 100644
--- a/docs/connect-blockchain/evm/songbird/web.mdx
+++ b/docs/connect-blockchain/evm/songbird/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the Songbird Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsSongbird from "@site/src/common/docs/general-connect-blockchain/_songbird.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,128 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/songbird/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Songbird](https://www.flare.network) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Songbird
-## Installation
+
-To interact with the Songbird blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x13", // hex of 19
- rpcTarget: "https://songbird-api.flare.network/ext/C/rpc",
- // Avoid using public rpcTarget in production.
- // Use services provided by Flare or other node providers
- displayName: "Songbird canary network",
- blockExplorerUrl: "https://songbird-explorer.flare.network",
- ticker: "SGB",
- tickerName: "SGB",
- logo: "https://cryptologos.cc/logos/flare-flr-logo.png",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x10", // hex of 16
- rpcTarget: "https://coston-api.flare.network/ext/C/rpc",
- // Avoid using public rpcTarget in production.
- // Use services provided by Flare or other node providers
- displayName: "Coston testnet",
- blockExplorerUrl: "https://coston-explorer.flare.network/",
- ticker: "CFLR",
- tickerName: "CFLR",
- logo: "https://cryptologos.cc/logos/flare-flr-logo.png",
- // faucet- "https://coston-faucet.towolabs.com"
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/tron/tron.mdx b/docs/connect-blockchain/evm/tron/tron.mdx
index f63cd7e2e..d0cff00cb 100644
--- a/docs/connect-blockchain/evm/tron/tron.mdx
+++ b/docs/connect-blockchain/evm/tron/tron.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Tron Blockchain
+sidebar_label: Tron
hide_table_of_contents: true
image: "banners/tron.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Tron Blockchain | Documentation - Web3
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsTron from "@site/src/common/docs/general-connect-blockchain/_tron.mdx";
+
export const Tron = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/unichain/unichain.mdx b/docs/connect-blockchain/evm/unichain/unichain.mdx
index abba2e7b0..9f330e48c 100644
--- a/docs/connect-blockchain/evm/unichain/unichain.mdx
+++ b/docs/connect-blockchain/evm/unichain/unichain.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Unichain Blockchain
+sidebar_label: Unichain
hide_table_of_contents: true
image: "banners/unichain.png"
description: "Integrate Web3Auth with the Unichain Blockchain | Documentation - Web3Auth"
@@ -7,6 +8,7 @@ description: "Integrate Web3Auth with the Unichain Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsUnichain from "@site/src/common/docs/general-connect-blockchain/_unichain.mdx";
+
export const Unichain = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/unichain/web.mdx b/docs/connect-blockchain/evm/unichain/web.mdx
index 3e72a120b..eae0c1b47 100644
--- a/docs/connect-blockchain/evm/unichain/web.mdx
+++ b/docs/connect-blockchain/evm/unichain/web.mdx
@@ -7,20 +7,10 @@ description:
"Integrate Web3Auth with the Unichain Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsUnichain from "@site/src/common/docs/general-connect-blockchain/_unichain.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -32,105 +22,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/unichain/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Unichain](https://www.unichain.org/) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for Unichain
-## Installation
+
-To interact with the Unichain blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0x82", // hex of 130
- rpcTarget: "https://mainnet.unichain.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Unichain Mainnet",
- blockExplorer: "https://uniscan.xyz",
- ticker: "ETH",
- tickerName: "ETH",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0x515", // hex of 1301
- rpcTarget: "https://sepolia.unichain.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Unichain Sepolia Testnet",
- blockExplorer: "https://sepolia.uniscan.xyz/",
- ticker: "ETH",
- tickerName: "ETH",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
+
diff --git a/docs/connect-blockchain/evm/xdc/web.mdx b/docs/connect-blockchain/evm/xdc/web.mdx
index e45350b68..15046137b 100644
--- a/docs/connect-blockchain/evm/xdc/web.mdx
+++ b/docs/connect-blockchain/evm/xdc/web.mdx
@@ -6,20 +6,10 @@ keywords: [xdc, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the XDC Network in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsXDC from "@site/src/common/docs/general-connect-blockchain/_xdc.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -31,141 +21,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/xdc/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[XDC Network](https://xinfin.org) blockchain calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few here to get you started quickly on that.
+## Chain Details for XDC Network
-## Installation
+
-To interact with the XDC Network, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: "eip155",
- chainId: "0x32", // XDC Network Mainnet Chain ID, hex of 50
- rpcTarget: "https://erpc.xinfin.network",
- displayName: "XDC Network Mainnet",
- blockExplorerUrl: "https://xdcscan.io/",
- ticker: "XDC",
- tickerName: "XDC",
- logo: "https://docs.xdc.network/assets/logo.svg",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: "eip155",
- chainId: "0x33", // XDC Network Apothem Network Chain ID
- rpcTarget: "https://rpc.apothem.network",
- displayName: "XDC Network Apothem Network",
- blockExplorerUrl: "https://apothem.xdcscan.io",
- ticker: "XDC",
- tickerName: "XDC",
- logo: "https://docs.xdc.network/assets/logo.svg",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: "eip155",
- chainId: "0x227", // XDC Network Devnet Chain ID
- rpcTarget: "https://devnetstats.apothem.network/devnet",
- displayName: "XDC Network Devnet",
- blockExplorerUrl: "https://devnet.xdcscan.io",
- ticker: "XDC",
- tickerName: "XDC",
- logo: "https://docs.xdc.network/assets/logo.svg",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/xdc/xdc.mdx b/docs/connect-blockchain/evm/xdc/xdc.mdx
index c260474fc..197e10160 100644
--- a/docs/connect-blockchain/evm/xdc/xdc.mdx
+++ b/docs/connect-blockchain/evm/xdc/xdc.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the XDC Network
+sidebar_label: XDC
hide_table_of_contents: true
image: "banners/xdc.png"
description: "Integrate Web3Auth with the XDC Network | Documentation - Web3Auth"
@@ -7,6 +8,7 @@ description: "Integrate Web3Auth with the XDC Network | Documentation - Web3Auth
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsXDC from "@site/src/common/docs/general-connect-blockchain/_xdc.mdx";
+
export const XDC = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/xpla/unity.mdx b/docs/connect-blockchain/evm/xpla/unity.mdx
index a31981cae..3cd24c55d 100644
--- a/docs/connect-blockchain/evm/xpla/unity.mdx
+++ b/docs/connect-blockchain/evm/xpla/unity.mdx
@@ -36,16 +36,6 @@ started quickly on that.
## Chain Details for XPLA
-
-
-
- Chain ID: 0x25
- Public RPC URL: https://dimension-evm-rpc.xpla.dev
- Display Name: XPLA Mainnet
@@ -53,9 +43,6 @@ started quickly on that.
- Ticker: XPLA
- Ticker Name: XPLA
-
-
-
## Initialize
diff --git a/docs/connect-blockchain/evm/xpla/web.mdx b/docs/connect-blockchain/evm/xpla/web.mdx
index e1fbad58d..0f24b9141 100644
--- a/docs/connect-blockchain/evm/xpla/web.mdx
+++ b/docs/connect-blockchain/evm/xpla/web.mdx
@@ -6,20 +6,9 @@ keywords: [xpla, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the XPLA Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -31,103 +20,23 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/xpla/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/), [`viem`](https://viem.sh/) etc. to make
-[XPLA](https://xpla.io/) blockchain calls like getting the user's `account`, fetching `balance`,
-`sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have
-highlighted a few here to get you started quickly on that.
+## Chain Details for XPLA
-## Installation
+- Chain ID: 0x25
+- Public RPC URL: https://dimension-evm-rpc.xpla.dev
+- Display Name: XPLA Mainnet
+- Block Explorer Link: https://explorer.xpla.io
+- Ticker: XPLA
+- Ticker Name: XPLA
-To interact with the XPLA blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x25", // XPLA Mainnet Chain ID
- rpcTarget: "https://dimension-evm-rpc.xpla.dev",
- displayName: "XPLA Mainnet",
- blockExplorerUrl: "https://explorer.xpla.io",
- ticker: "XPLA",
- tickerName: "XPLA",
- logo: "https://assets.xpla.io/icon/XPLA.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/xpla/xpla.mdx b/docs/connect-blockchain/evm/xpla/xpla.mdx
index 1c5983c26..7faecb856 100644
--- a/docs/connect-blockchain/evm/xpla/xpla.mdx
+++ b/docs/connect-blockchain/evm/xpla/xpla.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the XPLA Blockchain
+sidebar_label: XPLA
hide_table_of_contents: true
image: "banners/xpla.png"
diff --git a/docs/connect-blockchain/evm/zetachain/web.mdx b/docs/connect-blockchain/evm/zetachain/web.mdx
index 4b2329286..e23fad0e4 100644
--- a/docs/connect-blockchain/evm/zetachain/web.mdx
+++ b/docs/connect-blockchain/evm/zetachain/web.mdx
@@ -8,20 +8,10 @@ description:
"Integrate Web3Auth with the ZetaChain Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsZetaChain from "@site/src/common/docs/general-connect-blockchain/_zetachain.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -33,105 +23,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/zetachain/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/),
-[`viem`](https://viem.sh/docs/getting-started) etc. to make [ZetaChain](https://zetachain.com/)
-blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`,
-`send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few
-here to get you started quickly on that.
+## Chain Details for ZetaChain
-## Installation
+
-To interact with the ZetaChain blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1B58",
- rpcTarget: "https://zetachain-mainnet.g.allthatnode.com/archive/evm",
- displayName: "ZetaChain Mainnet",
- blockExplorerUrl: "https://zetachain.blockscout.com/",
- ticker: "ZETA",
- tickerName: "ZETA",
- logo: "https://www.zetachain.com/docs/img/icons/zetachain/square/white-on-green@4x.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/zetachain/zetachain.mdx b/docs/connect-blockchain/evm/zetachain/zetachain.mdx
index 4962c9aa3..846ac25ca 100644
--- a/docs/connect-blockchain/evm/zetachain/zetachain.mdx
+++ b/docs/connect-blockchain/evm/zetachain/zetachain.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the ZetaChain Blockchain
+sidebar_label: ZetaChain
hide_table_of_contents: true
image: "banners/zetachain.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the ZetaChain Blockchain | Documentation -
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsZetaChain from "@site/src/common/docs/general-connect-blockchain/_zetachain.mdx";
+
export const ZetaChain = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/zilliqa/web.mdx b/docs/connect-blockchain/evm/zilliqa/web.mdx
index 22f11019c..d02ceb70f 100644
--- a/docs/connect-blockchain/evm/zilliqa/web.mdx
+++ b/docs/connect-blockchain/evm/zilliqa/web.mdx
@@ -19,20 +19,10 @@ description:
"Integrate Web3Auth with the Zilliqa Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import ChainDetailsZilliqa from "@site/src/common/docs/general-connect-blockchain/_zilliqa.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -44,103 +34,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/zilliqa/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Zilliqa Blockchain](https://www.zilliqa.com/) calls like getting the user's `account`, fetching
-`balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract,
-etc. We have highlighted a few examples to get you started.
+## Chain Details for Zilliqa
-## Installation
+
-To interact with the Zilliqa blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x814f", // hex of 33103, Zilliqa 2 EVM Testnet
- rpcTarget: "https://api.zq2-prototestnet.zilliqa.com",
- displayName: "Zilliqa 2 EVM Testnet",
- blockExplorerUrl: "https://explorer.zq2-prototestnet.zilliqa.com/",
- ticker: "ZIL",
- tickerName: "Zilliqa",
- logo: "https://iili.io/dSYPeSa.png",
-};
-```
-
-
-
-
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx b/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx
index 394bea0a6..d0ef26d02 100644
--- a/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx
+++ b/docs/connect-blockchain/evm/zilliqa/zilliqa.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Zilliqa Blockchain
+sidebar_label: Zilliqa
hide_table_of_contents: true
image: "banners/zilliqa.png"
@@ -8,6 +9,7 @@ description: "Integrate Web3Auth with the Zilliqa Blockchain | Documentation - W
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsZilliqa from "@site/src/common/docs/general-connect-blockchain/_zilliqa.mdx";
+
export const Zilliqa = [
{
name: "",
diff --git a/docs/connect-blockchain/evm/zircuit/web.mdx b/docs/connect-blockchain/evm/zircuit/web.mdx
index 367ba8ec2..0267f624a 100644
--- a/docs/connect-blockchain/evm/zircuit/web.mdx
+++ b/docs/connect-blockchain/evm/zircuit/web.mdx
@@ -19,19 +19,10 @@ description:
"Integrate Web3Auth with the Zircuit Blockchain in JavaScript | Documentation - Web3Auth"
---
-import InstallationSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-installation.mdx";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetAccountAndBalanceSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-get-account-n-balance.mdx";
-import SendTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-send-transaction.mdx";
-import SignTransactionSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-transaction.mdx";
-import SignPersonalMessageSnippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-personal-sign.mdx";
-import SignTypedDataV4Snippet from "@site/src/common/docs/web-connect-blockchain/_evm-sign-message-v4.mdx";
-import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
-import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
-import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
-import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
-import FetchUserPrivateKeySnippet from "@site/src/common/docs/web-connect-blockchain/_evm-fetch-user-private-key.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-evm-pnp-sfa.mdx";
+import ChainDetailsZircuit from "@site/src/common/docs/general-connect-blockchain/_zircuit.mdx";
+import JsBlockchainMethods from "../../../sdk/web/js/_ethereum-integration-snippets.mdx";
+import ReactWagmiIntegration from "../../../sdk/web/react/_ethereum-hooks-snippets.mdx";
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
import SEO from "@site/src/components/SEO";
@@ -43,123 +34,18 @@ import SEO from "@site/src/components/SEO";
slug="/connect-blockchain/evm/zircuit/web"
/>
-While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
-provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
-This provider can be used with libraries like
-[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html),
-[`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
-[Zircuit Blockchain](https://zircuit.com) calls like getting the user's `account`, fetching
-`balance`, `signing transactions`, `sending transactions`, reading from and writing to the smart
-contract, etc. We have highlighted a few examples to get you started.
+## Chain Details for Zircuit
-## Installation
+
-To interact with the Zircuit blockchain, you can use either library with Web3Auth.
+## React Wagmi Integration
-
+
-## Initializing Provider
+## Vue Wagmi Integration
-Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
-[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
-after successful authentication.
+
-### Getting the `chainConfig`
+## For VanillaJS, Angular and other frameworks
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xBF04", // hex of 48900, Zircuit Mainnet
- rpcTarget: "https://zircuit1-mainnet.p2pify.com/",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Zircuit Mainnet",
- blockExplorerUrl: "https://explorer.zircuit.com",
- ticker: "ETH",
- tickerName: "ETH",
-};
-```
-
-
-
-
-
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xBF03", // hex of 48899, Zircuit Testnet
- rpcTarget: "https://zircuit1.p2pify.com/",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Zircuit Testnet",
- blockExplorerUrl: "https://explorer.testnet.zircuit.com",
- ticker: "ETH",
- tickerName: "ETH",
-};
-```
-
-
-
-
-### Initializing and Instantiating the Web3Auth SDK
-
-
-
-## Get User Info
-
-
-
-## Get Account and Balance
-
-
-
-## Send Transaction
-
-
-
-## Sign Transaction
-
-
-
-## Sign Message
-
-### Personal Sign
-
-
-
-### Sign Typed Data v4
-
-
-
-## Smart Contract
-
-
-
-### Deploy Contract
-
-
-
-### Read From Contract
-
-
-
-### Write to Contract
-
-
-
-## Fetch User's Private Key
-
-
+
diff --git a/docs/connect-blockchain/evm/zircuit/zircuit.mdx b/docs/connect-blockchain/evm/zircuit/zircuit.mdx
index f8894f9f6..77b2c2c08 100644
--- a/docs/connect-blockchain/evm/zircuit/zircuit.mdx
+++ b/docs/connect-blockchain/evm/zircuit/zircuit.mdx
@@ -1,13 +1,14 @@
---
title: Integrate Web3Auth with the Zircuit Blockchain
hide_table_of_contents: true
-
+sidebar_label: Zircuit
image: "banners/zircuit.png"
description: "Integrate Web3Auth with the Zircuit Blockchain | Documentation - Web3Auth"
---
import Tiles from "@theme/Tiles";
import SEO from "@site/src/components/SEO";
+import ChainDetailsZircuit from "@site/src/common/docs/general-connect-blockchain/_zircuit.mdx";
+
export const Zircuit = [
{
name: "",
diff --git a/docs/connect-blockchain/near/near.mdx b/docs/connect-blockchain/near/near.mdx
index fb7d32f35..f4d0c5eb0 100644
--- a/docs/connect-blockchain/near/near.mdx
+++ b/docs/connect-blockchain/near/near.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Near Blockchain
+sidebar_label: Near
image: "banners/near.png"
hide_table_of_contents: true
description: "Integrate Web3Auth with the Near Blockchain | Documentation - Web3Auth"
diff --git a/docs/connect-blockchain/near/web.mdx b/docs/connect-blockchain/near/web.mdx
index 18a0f46d9..bb0ad5874 100644
--- a/docs/connect-blockchain/near/web.mdx
+++ b/docs/connect-blockchain/near/web.mdx
@@ -6,9 +6,7 @@ keywords: [near, near protocol, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Near Protocol | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -39,18 +37,13 @@ npm install --save near-api-js@4.0.4
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x4e454152",
- rpcTarget: "https://mainnet.aurora.dev",
- // Avoid using public rpcTarget in production.
- displayName: "Near",
- blockExplorerUrl: "https://aurorascan.dev",
- ticker: "NEAR",
- tickerName: "NEAR",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x4e454152
+- Public RPC URL: https://mainnet.aurora.dev (Avoid using public rpcTarget in production)
+- Display Name: Near
+- Block Explorer Link: https://aurorascan.dev
+- Ticker: NEAR
+- Ticker Name: NEAR
@@ -58,32 +51,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x4e454153",
- rpcTarget: "https://testnet.aurora.dev",
- // Avoid using public rpcTarget in production.
- displayName: "Near",
- blockExplorerUrl: "https://explorer.testnet.aurora.dev",
- ticker: "NEAR",
- tickerName: "NEAR",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x4e454153
+- Public RPC URL: https://testnet.aurora.dev (Avoid using public rpcTarget in production)
+- Display Name: Near
+- Block Explorer Link: https://explorer.testnet.aurora.dev
+- Ticker: NEAR
+- Ticker Name: NEAR
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Key Pair and Account
After a user logs in, they receive a provider from the Web3Auth SDK. However, there is no native
diff --git a/docs/connect-blockchain/other/algorand.mdx b/docs/connect-blockchain/other/algorand.mdx
index f6fbb6ee9..40e1c8fd8 100644
--- a/docs/connect-blockchain/other/algorand.mdx
+++ b/docs/connect-blockchain/other/algorand.mdx
@@ -7,9 +7,7 @@ keywords: [algorand, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Algorand Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
@@ -50,19 +48,14 @@ npm install --save algosdk
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "Algorand", //
- rpcTarget: "https://api.algoexplorer.io",
- // Avoid using public rpcTarget in production.
- // Use services like PureStake, AlgoExplorer API, etc.
- displayName: "Algorand Mainnet",
- blockExplorerUrl: "https://algoexplorer.io",
- ticker: "ALGO",
- tickerName: "Algorand",
-};
-```
+- Chain Namespace: other
+- Chain ID: Algorand
+- Public RPC URL: https://api.algoexplorer.io (Avoid using public rpcTarget in production, use
+ services like PureStake, AlgoExplorer API, etc.)
+- Display Name: Algorand Mainnet
+- Block Explorer Link: https://algoexplorer.io
+- Ticker: ALGO
+- Ticker Name: Algorand
@@ -70,33 +63,18 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x3E9", //
- rpcTarget: "https://api.algoexplorer.io",
- // Avoid using public rpcTarget in production.
- // Use services like PureStake, AlgoExplorer API, etc.
- displayName: "Algorand Testnet",
- blockExplorerUrl: "https://testnet.algoexplorer.io",
- ticker: "tALGO",
- tickerName: "Algorand",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x3E9
+- Public RPC URL: https://api.algoexplorer.io (Avoid using public rpcTarget in production, use
+ services like PureStake, AlgoExplorer API, etc.)
+- Display Name: Algorand Testnet
+- Block Explorer Link: https://testnet.algoexplorer.io
+- Ticker: tALGO
+- Ticker Name: Algorand
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/aptos.mdx b/docs/connect-blockchain/other/aptos.mdx
index 29e4253a8..5384360d2 100644
--- a/docs/connect-blockchain/other/aptos.mdx
+++ b/docs/connect-blockchain/other/aptos.mdx
@@ -7,9 +7,7 @@ keywords: [aptos, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Aptos Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -70,17 +68,13 @@ npm install --save @aptos-labs/ts-sdk
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x1",
- rpcTarget: "https://fullnode.mainnet.aptoslabs.com/v1",
- displayName: "Aptos Mainnet",
- blockExplorerUrl: "https://explorer.aptoslabs.com/",
- ticker: "APT",
- tickerName: "Aptos",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x1
+- Public RPC URL: https://fullnode.mainnet.aptoslabs.com/v1
+- Display Name: Aptos Mainnet
+- Block Explorer Link: https://explorer.aptoslabs.com/
+- Ticker: APT
+- Ticker Name: Aptos
@@ -88,29 +82,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x7E6",
- rpcTarget: "https://fullnode.testnet.aptoslabs.com/v1",
- displayName: "Aptos Testnet",
- blockExplorerUrl: "https://explorer.aptoslabs.com/testnet",
- ticker: "APT",
- tickerName: "Aptos",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x7E6
+- Public RPC URL: https://fullnode.testnet.aptoslabs.com/v1
+- Display Name: Aptos Testnet
+- Block Explorer Link: https://explorer.aptoslabs.com/testnet
+- Ticker: APT
+- Ticker Name: Aptos
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
## Get Account and Key
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/bitcoin.mdx b/docs/connect-blockchain/other/bitcoin.mdx
index 1e2d09aa4..dfa30aca9 100644
--- a/docs/connect-blockchain/other/bitcoin.mdx
+++ b/docs/connect-blockchain/other/bitcoin.mdx
@@ -21,9 +21,7 @@ description: "Integrate Web3Auth with the Bitcoin Blockchain | Documentation - W
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
When using the Web3Auth Web SDK for non-EVM chains like [Bitcoin](https://developer.bitcoin.org/),
you get a standard provider that allows you to access the user's private key. With this private key,
@@ -58,17 +56,14 @@ npm install --save bitcoinjs-lib ecpair axios
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.OTHER,
- chainId: "Bitcoin", //
- rpcTarget: "https://api.blockcypher.com/v1/btc/main", // Avoid using public rpcTarget in production.
- displayName: "Bitcoin Mainnet",
- blockExplorerUrl: "https://blockstream.info/",
- ticker: "BTC",
- tickerName: "Bitcoin",
-};
-```
+- Chain Namespace: OTHER
+- Chain ID: Bitcoin
+- Public RPC URL: https://api.blockcypher.com/v1/btc/main (Avoid using public rpcTarget in
+ production)
+- Display Name: Bitcoin Mainnet
+- Block Explorer Link: https://blockstream.info/
+- Ticker: BTC
+- Ticker Name: Bitcoin
@@ -76,31 +71,18 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.OTHER,
- chainId: "Bitcoin", //
- rpcTarget: "https://api.blockcypher.com/v1/btc/test3", // Avoid using public rpcTarget in production.
- displayName: "Bitcoin Testnet",
- blockExplorerUrl: "https://blockstream.info/testnet/",
- ticker: "tBTC",
- tickerName: "Bitcoin Testnet",
-};
-```
+- Chain Namespace: OTHER
+- Chain ID: Bitcoin
+- Public RPC URL: https://api.blockcypher.com/v1/btc/test3 (Avoid using public rpcTarget in
+ production)
+- Display Name: Bitcoin Testnet
+- Block Explorer Link: https://blockstream.info/testnet/
+- Ticker: tBTC
+- Ticker Name: Bitcoin Testnet
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Bitcoin Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/cosmos.mdx b/docs/connect-blockchain/other/cosmos.mdx
index f27018747..3be1bcfd9 100644
--- a/docs/connect-blockchain/other/cosmos.mdx
+++ b/docs/connect-blockchain/other/cosmos.mdx
@@ -7,9 +7,7 @@ keywords: [cosmos, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Cosmos Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -49,18 +47,13 @@ npm install --save @web3auth/no-modal @web3auth/auth-adapter @web3auth/base @cos
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "cosmoshub-4", //
- rpcTarget: "https://cosmos-rpc.quickapi.com", // Please add in your custom URL
- // Avoid using public rpcTarget in production.
- displayName: "Cosmos Mainnet",
- blockExplorerUrl: "https://www.mintscan.io/cosmos", // Please add in your custom URL
- ticker: "ATOM",
- tickerName: "Cosmos",
-};
-```
+- Chain Namespace: other
+- Chain ID: cosmoshub-4
+- Public RPC URL: https://cosmos-rpc.quickapi.com (Avoid using public rpcTarget in production)
+- Display Name: Cosmos Mainnet
+- Block Explorer Link: https://www.mintscan.io/cosmos
+- Ticker: ATOM
+- Ticker Name: Cosmos
@@ -68,32 +61,18 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "theta-testnet-001", //
- rpcTarget: "https://rpc.sentry-02.theta-testnet.polypore.xyz",
- // Avoid using public rpcTarget in production.
- displayName: "Cosmos Testnet",
- blockExplorerUrl: "https://explorer.theta-testnet.polypore.xyz",
- ticker: "ATOM",
- tickerName: "Cosmos",
-};
-```
+- Chain Namespace: other
+- Chain ID: theta-testnet-001
+- Public RPC URL: https://rpc.sentry-02.theta-testnet.polypore.xyz (Avoid using public rpcTarget in
+ production)
+- Display Name: Cosmos Testnet
+- Block Explorer Link: https://explorer.theta-testnet.polypore.xyz
+- Ticker: ATOM
+- Ticker Name: Cosmos
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get ChainID
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/immutablex.mdx b/docs/connect-blockchain/other/immutablex.mdx
index b0276ff7b..ac2c671bf 100644
--- a/docs/connect-blockchain/other/immutablex.mdx
+++ b/docs/connect-blockchain/other/immutablex.mdx
@@ -7,9 +7,7 @@ keywords: [immutablex, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the ImmutableX Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -52,18 +50,13 @@ npm install --save @imtbl/core-sdk
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1", //
- rpcTarget: "https://rpc.ethereum.org",
- // Avoid using public rpcTarget in production.
- displayName: "ImmutableX Mainnet",
- blockExplorerUrl: "https://explorer.immutable.com",
- ticker: "IMX",
- tickerName: "ImmutableX",
-};
-```
+- Chain Namespace: EIP155
+- Chain ID: 0x1
+- Public RPC URL: https://rpc.ethereum.org (Avoid using public rpcTarget in production)
+- Display Name: ImmutableX Mainnet
+- Block Explorer Link: https://explorer.immutable.com
+- Ticker: IMX
+- Ticker Name: ImmutableX
@@ -71,32 +64,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0xaa36a7", //
- rpcTarget: "https://rpc.sepolia.org",
- // Avoid using public rpcTarget in production.
- displayName: "ImmutableX Testnet",
- blockExplorerUrl: "https://explorer.testnet.immutable.com",
- ticker: "IMX",
- tickerName: "ImmutableX",
-};
-```
+- Chain Namespace: EIP155
+- Chain ID: 0xaa36a7
+- Public RPC URL: https://rpc.sepolia.org (Avoid using public rpcTarget in production)
+- Display Name: ImmutableX Testnet
+- Block Explorer Link: https://explorer.testnet.immutable.com
+- Ticker: IMX
+- Ticker Name: ImmutableX
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Creating Layer 1 and Layer 2 Signers
Once a user logs in, the Web3Auth SDK returns a provider. ImmutableX is a layer 2 solution for
diff --git a/docs/connect-blockchain/other/other.mdx b/docs/connect-blockchain/other/other.mdx
index a785d3483..ac8e50148 100644
--- a/docs/connect-blockchain/other/other.mdx
+++ b/docs/connect-blockchain/other/other.mdx
@@ -9,11 +9,11 @@ description: "Connect Web3Auth with any Blockchain - Chain Agnostic | Documentat
import Tiles from "@theme/Tiles";
-While using the Web3Auth PnP & SFA SDKs for non-EVM chains, other than Solana and XRPL, we use the
-Common Private Key Provider. This provider is a basic wrapper around the private key, helping us
-export it on demand. The private key returned by this provider is of the curve `secp256k1` &
-`ed25519` based on the particular requests. While these key curves serve the majority of blockchains
-out there, certain blockchains have different curve implementations of their own.
+While using the Web3Auth PnP & SFA Mobile SDKs for non-EVM chains, other than Solana and XRPL, we
+use the Common Private Key Provider. This provider is a basic wrapper around the private key,
+helping us export it on demand. The private key returned by this provider is of the curve
+`secp256k1` & `ed25519` based on the particular requests. While these key curves serve the majority
+of blockchains out there, certain blockchains have different curve implementations of their own.
## Standard Approach for connecting with Non EVM Chains
diff --git a/docs/connect-blockchain/other/polkadot.mdx b/docs/connect-blockchain/other/polkadot.mdx
index 3dea5c072..f00d13f9b 100644
--- a/docs/connect-blockchain/other/polkadot.mdx
+++ b/docs/connect-blockchain/other/polkadot.mdx
@@ -7,9 +7,7 @@ keywords: [polkadot, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Polkadot Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -43,18 +41,13 @@ npm install --save @polkadot/keyring @polkadot/util-crypto
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "Polkadot", //
- rpcTarget: "https://rpc.polkadot.io",
- // Avoid using public rpcTarget in production.
- displayName: "Polkadot Mainnet",
- blockExplorerUrl: "https://explorer.polkascan.io/polkadot",
- ticker: "DOT",
- tickerName: "Polkadot",
-};
-```
+- Chain Namespace: other
+- Chain ID: Polkadot
+- Public RPC URL: https://rpc.polkadot.io (Avoid using public rpcTarget in production)
+- Display Name: Polkadot Mainnet
+- Block Explorer Link: https://explorer.polkascan.io/polkadot
+- Ticker: DOT
+- Ticker Name: Polkadot
@@ -62,32 +55,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x5", //
- rpcTarget: "https://westend-rpc.polkadot.io",
- // Avoid using public rpcTarget in production.
- displayName: "Polkadot Testnet",
- blockExplorerUrl: "https://westend.subscan.io",
- ticker: "DOT",
- tickerName: "Polkadot",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x5
+- Public RPC URL: https://westend-rpc.polkadot.io (Avoid using public rpcTarget in production)
+- Display Name: Polkadot Testnet
+- Block Explorer Link: https://westend.subscan.io
+- Ticker: DOT
+- Ticker Name: Polkadot
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/polymesh.mdx b/docs/connect-blockchain/other/polymesh.mdx
index 395b16a4c..b5b68764a 100644
--- a/docs/connect-blockchain/other/polymesh.mdx
+++ b/docs/connect-blockchain/other/polymesh.mdx
@@ -7,9 +7,7 @@ keywords: [polymesh, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Polymesh Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -45,18 +43,13 @@ npm install --save @polymeshassociation/polymesh-sdk @polymeshassociation/local-
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x1",
- rpcTarget: "https://mainnet-rpc.polymesh.network",
- // Avoid using public rpcTarget in production.
- displayName: "Polymesh Mainnet",
- blockExplorerUrl: "https://polymesh.subscan.io",
- ticker: "POLYX",
- tickerName: "Polymesh",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x1
+- Public RPC URL: https://mainnet-rpc.polymesh.network (Avoid using public rpcTarget in production)
+- Display Name: Polymesh Mainnet
+- Block Explorer Link: https://polymesh.subscan.io
+- Ticker: POLYX
+- Ticker Name: Polymesh
@@ -64,32 +57,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x5", //
- rpcTarget: "https://testnet-rpc.polymesh.live",
- // Avoid using public rpcTarget in production.
- displayName: "Polymesh Testnet",
- blockExplorerUrl: "https://polymesh-testnet.subscan.io",
- ticker: "POLYX",
- tickerName: "Polymesh",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x5
+- Public RPC URL: https://testnet-rpc.polymesh.live (Avoid using public rpcTarget in production)
+- Display Name: Polymesh Testnet
+- Block Explorer Link: https://polymesh-testnet.subscan.io
+- Ticker: POLYX
+- Ticker Name: Polymesh
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/starkex.mdx b/docs/connect-blockchain/other/starkex.mdx
index 9a4699394..bef80dffd 100644
--- a/docs/connect-blockchain/other/starkex.mdx
+++ b/docs/connect-blockchain/other/starkex.mdx
@@ -7,9 +7,7 @@ keywords: [starkex, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the StarkEx Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -50,18 +48,13 @@ npm install --save web3 bn.js elliptic @starkware-industries/starkex-js @starkwa
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x1", //
- rpcTarget: "https://rpc.ethereum.org",
- // Avoid using public rpcTarget in production.
- displayName: "StarkEx Mainnet",
- blockExplorerUrl: "https://etherscan.io",
- ticker: "STARK",
- tickerName: "StarkEx",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x1
+- Public RPC URL: https://rpc.ethereum.org (Avoid using public rpcTarget in production)
+- Display Name: StarkEx Mainnet
+- Block Explorer Link: https://etherscan.io
+- Ticker: STARK
+- Ticker Name: StarkEx
@@ -69,32 +62,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0xaa36a7", //
- rpcTarget: "https://rpc.sepolia.org",
- // Avoid using public rpcTarget in production.
- displayName: "StarkEx Testnet",
- blockExplorerUrl: "https://sepolia.etherscan.io",
- ticker: "STARK",
- tickerName: "StarkEx",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0xaa36a7
+- Public RPC URL: https://rpc.sepolia.org (Avoid using public rpcTarget in production)
+- Display Name: StarkEx Testnet
+- Block Explorer Link: https://sepolia.etherscan.io
+- Ticker: STARK
+- Ticker Name: StarkEx
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Account and Key
Once a user logs in, the Web3Auth SDK returns a provider. Even though StarkEx is a layer 2 on
diff --git a/docs/connect-blockchain/other/starknet.mdx b/docs/connect-blockchain/other/starknet.mdx
index cdd920f35..4346405e4 100644
--- a/docs/connect-blockchain/other/starknet.mdx
+++ b/docs/connect-blockchain/other/starknet.mdx
@@ -7,9 +7,7 @@ keywords: [starknet, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the StarkNet Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -50,18 +48,13 @@ npm install --save web3 starknet elliptic bn.js @starkware-industries/starkware-
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x1", //
- rpcTarget: "https://rpc.ethereum.org",
- // Avoid using public rpcTarget in production.
- displayName: "StarkNet Mainnet",
- blockExplorerUrl: "https://explorer.immutable.com",
- ticker: "STRK",
- tickerName: "StarkNet",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x1
+- Public RPC URL: https://rpc.ethereum.org (Avoid using public rpcTarget in production)
+- Display Name: StarkNet Mainnet
+- Block Explorer Link: https://explorer.immutable.com
+- Ticker: STRK
+- Ticker Name: StarkNet
@@ -69,32 +62,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0xaa36a7", //
- rpcTarget: "https://rpc.sepolia.org",
- // Avoid using public rpcTarget in production.
- displayName: "StarkNet Testnet",
- blockExplorerUrl: "https://sepolia.etherscan.io",
- ticker: "STRK",
- tickerName: "StarkNet",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0xaa36a7
+- Public RPC URL: https://rpc.sepolia.org (Avoid using public rpcTarget in production)
+- Display Name: StarkNet Testnet
+- Block Explorer Link: https://sepolia.etherscan.io
+- Ticker: STRK
+- Ticker Name: StarkNet
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Account and Key
Once a user logs in, the Web3Auth SDK returns a provider. Even though StarkNet is a layer 2 on
diff --git a/docs/connect-blockchain/other/sui.mdx b/docs/connect-blockchain/other/sui.mdx
index 0c74801ae..cc353da8e 100644
--- a/docs/connect-blockchain/other/sui.mdx
+++ b/docs/connect-blockchain/other/sui.mdx
@@ -7,9 +7,7 @@ keywords: [sui, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Sui Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -44,49 +42,31 @@ npm install --save @mysten/sui.js
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.OTHER,
- chainId: "35834a8a",
- rpcTarget: "https://fullnode.mainnet.sui.io:443",
- displayName: "Sui Mainnet",
- blockExplorerUrl: "https://suiexplorer.com/",
- ticker: "SUI",
- tickerName: "Sui",
- logo: "https://cryptologos.cc/logos/sui-sui-logo.png?v=029",
-};
-```
+- Chain Namespace: OTHER
+- Chain ID: 35834a8a
+- Public RPC URL: https://fullnode.mainnet.sui.io:443
+- Display Name: Sui Mainnet
+- Block Explorer Link: https://suiexplorer.com/
+- Ticker: SUI
+- Ticker Name: Sui
+- Logo: https://cryptologos.cc/logos/sui-sui-logo.png?v=029
-```typescript
-const chainConfig = {
- chainNamespace: CHAIN_NAMESPACES.OTHER,
- chainId: "fd2adfa8",
- rpcTarget: "https://fullnode.devnet.sui.io:443",
- displayName: "Sui Devnet",
- blockExplorerUrl: "https://suiexplorer.com/?network=devnet",
- ticker: "SUI",
- tickerName: "Sui",
- logo: "https://cryptologos.cc/logos/sui-sui-logo.png?v=029",
-};
-```
+- Chain Namespace: OTHER
+- Chain ID: fd2adfa8
+- Public RPC URL: https://fullnode.devnet.sui.io:443
+- Display Name: Sui Devnet
+- Block Explorer Link: https://suiexplorer.com/?network=devnet
+- Ticker: SUI
+- Ticker Name: Sui
+- Logo: https://cryptologos.cc/logos/sui-sui-logo.png?v=029
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## Get Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/tezos.mdx b/docs/connect-blockchain/other/tezos.mdx
index 568801d78..097ec21b8 100644
--- a/docs/connect-blockchain/other/tezos.mdx
+++ b/docs/connect-blockchain/other/tezos.mdx
@@ -7,8 +7,7 @@ keywords: [tezos, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the Tezos Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
@@ -48,17 +47,13 @@ npm install --save @taquito/signer @taquito/taquito @taquito/utils @tezos-core-t
value="mainnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x1", //
- rpcTarget: "https://rpc.tzbeta.net/",
- displayName: "Tezos Mainnet",
- blockExplorerUrl: "https://tzstats.com",
- ticker: "XTZ",
- tickerName: "Tezos",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x1
+- Public RPC URL: https://rpc.tzbeta.net/ (Avoid using public rpcTarget in production)
+- Display Name: Tezos Mainnet
+- Block Explorer Link: https://tzstats.com
+- Ticker: XTZ
+- Ticker Name: Tezos
@@ -66,60 +61,17 @@ const chainConfig = {
value="testnet"
>
-```typescript
-const chainConfig = {
- chainNamespace: "other",
- chainId: "0x5", //
- rpcTarget: "https://rpc.tzbeta.net/",
- displayName: "Tezos Testnet",
- blockExplorerUrl: "https://tzstats.com",
- ticker: "XTZ",
- tickerName: "Tezos",
-};
-```
+- Chain Namespace: other
+- Chain ID: 0x5
+- Public RPC URL: https://rpc.tzbeta.net/ (Avoid using public rpcTarget in production)
+- Display Name: Tezos Testnet
+- Block Explorer Link: https://tzstats.com
+- Ticker: XTZ
+- Ticker Name: Tezos
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-```tsx
-import { Web3Auth } from "@web3auth/modal";
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const web3auth = new Web3Auth({
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
- web3AuthNetwork: "sapphire_mainnet",
- chainConfig: {
- chainNamespace: "other", // for all non EVM and SOLANA chains, use "other"
- rpcTarget: "https://rpc.tzbeta.net/",
- displayName: "Tezos",
- blockExplorerUrl: "https://tzstats.com",
- ticker: "XTZ",
- tickerName: "Tezos",
- },
-});
-
-// "other" is supported through @web3auth/auth-adapter package.
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "popup",
- },
-});
-web3auth.configureAdapter(authAdapter);
-
-await web3auth.initModal();
-
-const web3authProvider = await web3auth.connect(); // web3auth.provider
-```
-
-## Get User Info
-
-
-
## Get Account, Balance and Key
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native
diff --git a/docs/connect-blockchain/other/ton.mdx b/docs/connect-blockchain/other/ton.mdx
index 5697a8a9b..95e366478 100644
--- a/docs/connect-blockchain/other/ton.mdx
+++ b/docs/connect-blockchain/other/ton.mdx
@@ -6,9 +6,7 @@ keywords: [ton, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the TON Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
-import GetWeb3AuthProvider from "@site/src/common/docs/_get-web3auth-provider.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
While using the Web3Auth Web SDK for a non-EVM chain like [TON](https://ton.org/), you get a
standard provider from which you can obtain the private key of the user. Using this private key, you
@@ -40,16 +38,6 @@ import { getHttpEndpoint } from "@orbs-network/ton-access";
const rpc = await getHttpEndpoint();
```
-### Initializing and instantiating the Web3Auth SDK
-
-
-
-## Getting the Web3Auth provider
-
-
-
-
-
## TON Libraries
`TonWeb` is a JavaScript/TypeScript library that provides a high-level interface for interacting
diff --git a/docs/connect-blockchain/rpc-headers.mdx b/docs/connect-blockchain/rpc-headers.mdx
new file mode 100644
index 000000000..bf992f041
--- /dev/null
+++ b/docs/connect-blockchain/rpc-headers.mdx
@@ -0,0 +1,111 @@
+---
+title: Adding API Keys to RPC Requests via HTTP Headers
+sidebar_label: API Keys in RPC Headers
+image: "images/docs-meta-cards/documentation-card.png"
+
+description: "How to securely attach API keys to blockchain RPC requests | Documentation - Web3Auth"
+---
+
+### Adding API Keys in RPC Headers
+
+Web3Auth allows you to specify the RPC endpoint URL, but it doesn't directly provide an option to
+set custom HTTP headers such as API keys required by certain blockchain providers. To accommodate
+blockchain APIs that require authentication headers, you need to manually intercept and attach these
+headers to your application's outgoing RPC requests.
+
+We'll use **TRON** as an example in this guide. You can obtain your TRON API key
+[here](https://developers.tron.network/reference/select-network).
+
+:::tip
+
+If you're using TRON's mainnet RPC endpoint (`https://api.trongrid.io`), you may face rate limits or
+rejected requests unless you attach the required `TRON-PRO-API-KEY` header. This guide helps you
+configure that. However, if you're working on the Shasta testnet (`https://api.shasta.trongrid.io`),
+this step is not required.
+
+:::
+
+### Identifying RPC Host URL
+
+First, identify the hostname for your RPC provider by checking the network logs in your browser:
+
+1. Open your browser's Developer Tools (`Network` tab).
+2. Execute a blockchain-related action (e.g., fetching balance).
+3. Locate the RPC request URL (e.g., `https://api.trongrid.io/jsonrpc`).
+4. Note the hostname (e.g., `api.trongrid.io`).
+
+### Adding Headers via Global `fetch` Patch
+
+Create a file named `globals.js` and include the following code snippet:
+
+```jsx title="globals.js"
+(function () {
+ if (typeof globalThis === "undefined") {
+ if (typeof global !== "undefined") global.globalThis = global;
+ else if (typeof self !== "undefined") self.globalThis = self;
+ else if (typeof window !== "undefined") window.globalThis = window;
+ else throw new Error("Unable to locate global object");
+ }
+})();
+
+const { fetch: originalFetch } = globalThis;
+
+const RPC_HEADER_MAP = {
+ "api.trongrid.io": {
+ "TRON-PRO-API-KEY": "YOUR_TRON_API_KEY",
+ },
+ // Add other RPC hosts and headers if needed
+};
+
+globalThis.fetch = (...args) => {
+ const [resource, config = {}] = args;
+ const url = new URL(resource instanceof Request ? resource.url : resource);
+ const headers = new Headers(config.headers || {});
+
+ const customHeaders = RPC_HEADER_MAP[url.hostname];
+
+ if (customHeaders) {
+ Object.entries(customHeaders).forEach(([key, value]) => {
+ headers.set(key, value);
+ });
+ }
+
+ return originalFetch(resource, { ...config, headers });
+};
+```
+
+Replace `"YOUR_TRON_API_KEY"` with the actual API key provided by your blockchain RPC provider.
+
+### Importing the Patch into Your Application
+
+Make sure to import this file at the very beginning of your application's entry point (`index.tsx`
+or `main.ts`):
+
+```tsx
+import "./globals"; // Ensure this is the first import
+```
+
+:::warning Note
+
+Perform this operation with caution. Avoid exposing sensitive API keys within client-side
+applications. Ensure the API keys used here are restricted and suitable for public-facing
+environments.
+
+:::
+
+### Why This Approach Works
+
+- Web3Auth SDK uses the provided RPC URL configured via the developer dashboard.
+- Blockchain SDKs like `TronWeb` internally use the global `fetch` API.
+- Our patch intercepts these fetch calls and injects necessary headers, ensuring compatibility with
+ authenticated blockchain RPCs.
+
+:::tip
+
+**Security Recommendations:**
+
+- Always use restricted or public-safe API keys in frontend environments.
+- Enable key restrictions or usage limits wherever possible.
+- For sensitive transactions, consider routing through a secure backend server.
+
+:::
diff --git a/docs/connect-blockchain/solana/solana.mdx b/docs/connect-blockchain/solana/solana.mdx
index a0ded513f..843f0dd74 100644
--- a/docs/connect-blockchain/solana/solana.mdx
+++ b/docs/connect-blockchain/solana/solana.mdx
@@ -1,5 +1,6 @@
---
title: Integrate Web3Auth with the Solana Blockchain
+sidebar_label: Solana
hide_table_of_contents: true
image: "banners/solana.png"
description: "Integrate Web3Auth with the Solana Blockchain | Documentation - Web3Auth"
diff --git a/docs/connect-blockchain/solana/web.mdx b/docs/connect-blockchain/solana/web.mdx
index 09c5cbcd6..812abb79a 100644
--- a/docs/connect-blockchain/solana/web.mdx
+++ b/docs/connect-blockchain/solana/web.mdx
@@ -1,6 +1,6 @@
---
title: Integrate Web3Auth with the Solana Blockchain in Javascript
-sidebar_label: Web - PnP & SFA
+sidebar_label: PnP Web
image: "banners/solana.png"
keywords:
[
@@ -19,9 +19,8 @@ description:
"Integrate Web3Auth with the Solana Blockchain in Javascript | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
import SolanaProviderSetup from "@site/src/common/docs/_solana-provider-setup.mdx";
-import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp.mdx";
While using the Web3Auth Web SDK for [Solana](https://solana.com/) you get a standard provider for
Solana containing functions to help you make blockchain calls via the
@@ -45,10 +44,6 @@ To interact with the Solana blockchain, you can use
-## Get User Info
-
-
-
## Get Account and Balance
```tsx
diff --git a/docs/connect-blockchain/xrpl.mdx b/docs/connect-blockchain/xrpl.mdx
index 3d113e609..6856fed50 100644
--- a/docs/connect-blockchain/xrpl.mdx
+++ b/docs/connect-blockchain/xrpl.mdx
@@ -7,7 +7,6 @@ keywords: [xrpl, web3auth, authentication, blockchain]
description: "Integrate Web3Auth with the XRPL Blockchain | Documentation - Web3Auth"
---
-import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
import XRPLProviderSetup from "@site/src/common/docs/_xrpl-provider-setup.mdx";
The Web3Auth Web SDK offers a standard provider for accessing the user's private key on non-EVM
@@ -27,10 +26,6 @@ npm install --save @web3auth/xrpl-provider
-## Get User Info
-
-
-
## Get Account and Balance
```tsx
diff --git a/docs/contribute/bug-bounty.mdx b/docs/contribute/bug-bounty.mdx
index 9d6bd4e20..20f36ffc9 100644
--- a/docs/contribute/bug-bounty.mdx
+++ b/docs/contribute/bug-bounty.mdx
@@ -1,7 +1,7 @@
---
title: Bug Bounty
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: Bug Bounty
description: "Bug Bounty | Documentation - Web3Auth"
---
diff --git a/docs/contribute/contribute.mdx b/docs/contribute/contribute.mdx
index 70da244e1..8c46c531e 100644
--- a/docs/contribute/contribute.mdx
+++ b/docs/contribute/contribute.mdx
@@ -1,6 +1,6 @@
---
title: Contribute
-
+sidebar_label: Contribute
description: "Contribute to Web3Auth | Documentation - Web3Auth"
image: "images/docs-meta-cards/documentation-card.png"
---
diff --git a/docs/dashboard-setup/billing-and-usage.mdx b/docs/dashboard-setup/billing-and-usage.mdx
deleted file mode 100644
index e8fcd91f8..000000000
--- a/docs/dashboard-setup/billing-and-usage.mdx
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: Billing and Usage
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Billing and Usage | Documentation - Web3Auth"
----
-
-import DashboardBillingEditCard from "@site/static/images/dashboard/dashboard-billings-edit-card.png";
-import DashboardBilling from "@site/static/images/dashboard/dashboard-billings-home.png";
-import DashboardBillingPayment from "@site/static/images/dashboard/dashboard-billings-payment.png";
-import DashboardBillingPlans from "@site/static/images/dashboard/dashboard-billings-plans.png";
-
-The Billing section of the Web3Auth dashboard is where you can manage your billing details. Here,
-you can review your billing history, add a payment card to your account, and view your invoices.
-This section provides a comprehensive overview of the financial aspect of your Web3Auth integration,
-allowing you to stay informed and in control of your project's expenditures.
-
-
-
-
-
-### Payment Details & Invoice History
-
-
-
-
-
-#### Edit Card Details
-
-
-
-
-
-### How do we calculate Monthly Active Wallets(MAW)?
-
-MAW refers to the total number of unique logins made into your user account, as part of your wallet.
-MAWs identify the total number of unique wallets that have logged into a new session or have
-performed a new transaction from your dApp at least once. The terms being - a maximum of 5 logins or
-transactions within one month (30 days).
-
-$$
-
-Total \ MAWs = \underline{Total \ logins / \ \overbrace{transaction \ signs}^{\text{(only for MPC Integrations)}}\ \ per \ unique \ wallet }\\ \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space \space 5
-
-
-$$
-
-- For example, under Growth Plan, $0.03 is charged per additional MAW.
-- If a unique wallet does 17 logins/transactions, this is counted as 4 MAWs (17/5=4 ~ round up to
- whole number).
-
-## Pricing Plans
-
-We offer personalized options to suit your unique needs. We understand that every individual or
-organization has different requirements when it comes to authentication and security for their web
-applications, and that's why we have designed a range of plans that can be customized to fit your
-specific needs. Whether you're a small business just starting out, a growing enterprise, or an
-established corporation, we have the right plan for you.
-
-
-
-
-
-### Base Plan
-
-The base plan is free for **individuals on personal workspaces.** Additinally, one can use all the
-features on `sapphire_devnet` while being on the base plan.
-
-### Growth Plan
-
-The Growth plan is designed and **available for organizations** that require a more customizable and
-advanced authentication solution. With this plan, you can enjoy the following features:
-
-- No-cost up to 3,000 Monthly Active Wallets (MAWs), with an additional charge of $0.03 per
- additional MAW
-- Custom Social Login Providers & Your Own Auth (JWT)
-- Customizable Multi-Factor Authentication (MFA) for added security
-- Customizable Modal, Redirect & Auth Screens for a fully personalized user experience
-- 4 Team Seats
-- Community Support
-
-The Growth plan offers custom social login providers and your own authentication solution for added
-flexibility and control. Additionally, you can enjoy a fully customizable login experience with a
-customizable mfa, customizable modal, redirect, auth screens, and basic white labeling to match your
-branding. These features aim to meet the needs of growing organizations requiring a more advanced
-and customizable authentication solution while providing added security and support.
-
-To upgrade to the Growth plan, simply navigate to the billing page and click on the "Choose Plan"
-button located under the Growth plan section. This will prompt a modal to appear where you can enter
-your card details and confirm the SLA to purchase the plan.
-
-### Scale Plan
-
-The Scale plan is designed and **available for organizations** requiring higher customization,
-support, and security for their authentication needs. With this plan, you can enjoy the following
-features:
-
-- No-cost up to 10,000 Monthly Active Wallets (MAWs), with an additional charge of $0.025 per
- additional MAW
-- Advanced Customized Auth (Custom Domain, SMTP) for a fully personalized and secure authentication
- experience
-- Customizable Multi-Factor Authentication (MFA) for added security
-- Customizable Modal, Redirect & Auth Screens for a fully customized user experience
-- 8 Team Seats
-- Enhanced Community Support + Technical Advisory Call
-
-These features are aimed at meeting the needs of organizations that require a high level of
-customization, support, and security for their authentication solution. The Scale plan offers
-advanced customized auth with a custom domain and SMTP capabilities for added security and
-flexibility. Additionally, you can enjoy a fully customizable login experience with customizable
-modal, redirect, and auth screens. The plan also includes technical advisory and pre-launch review
-for a successful launch, 8 team seats, prioritized community support with ticketing within two
-business days.
-
-To upgrade to the Scale plan, simply navigate to the billing page and click on the "Choose Plan"
-button located under the Scale plan section. This will prompt a modal to appear where you can enter
-your card details and confirm the SLA to purchase the plan.
-
-### Enterprise Plan
-
-The Enterprise plan is designed to cater to the complex requirements and high-level support needs of
-large organizations and organizations. If your team or organization requires a tailored
-authentication solution, please reach out to us by clicking on the "Contact Us" button located on
-the billing page. Our team will be happy to work with you to understand your requirements and
-provide a custom solution that meets your needs.
diff --git a/docs/dashboard-setup/dashboard-setup.mdx b/docs/dashboard-setup/dashboard-setup.mdx
deleted file mode 100644
index 749998d82..000000000
--- a/docs/dashboard-setup/dashboard-setup.mdx
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: Dashboard Setup
-sidebar_label: Overview
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Dashboard Setup | Documentation - Web3Auth"
----
-
-import DashboardLoginPage from "@site/static/images/dashboard/dashboard.png";
-import DashboardArchive from "@site/static/images/dashboard/dashboard-archive.png";
-import DashboardBilling from "@site/static/images/dashboard/dashboard-billings-home.png";
-import DashboardBillingPayment from "@site/static/images/dashboard/dashboard-billings-payment.png";
-import DashboardBillingPlans from "@site/static/images/dashboard/dashboard-billings-plans.png";
-import DashboardCreateOrganization from "@site/static/images/dashboard/dashboard-create-organization.png";
-import DashboardCreateProfile from "@site/static/images/dashboard/dashboard-create-profile.png";
-import DashboardHome from "@site/static/images/dashboard/dashboard-home.png";
-import DashboardHomeInfo from "@site/static/images/dashboard/dashboard-home-info.png";
-import DashboardHomeProfileInfo from "@site/static/images/dashboard/dashboard-home-profile-info.png";
-import DashboardOrganizationSettings from "@site/static/images/dashboard/dashboard-organization-settings.png";
-import DashboardProfileSettings from "@site/static/images/dashboard/dashboard-profile-settings.png";
-import DashboardProjectList from "@site/static/images/dashboard/dashboard-project-list.png";
-import DashboardSettingsMembers from "@site/static/images/dashboard/dashboard-settings-members.png";
-import MigrateVerifiers from "@site/static/images/dashboard/migrate-verifiers.png";
-import VerifierAfterMigration from "@site/static/images/dashboard/verifier-after-migration.png";
-import VerifierToMigrate from "@site/static/images/dashboard/verifier-to-migrate.png";
-import VerifierProjectList from "@site/static/images/dashboard/verifiers-projects-lists.png";
-import VerifierWithNoProjects from "@site/static/images/dashboard/verifiers-with-no-projects.png";
-
-The Web3Auth dashboard summarizes various aspects of Web3Auth, including information about projects,
-verifiers, billings, and profile setup. Using this dashboard lets users get an overview of their
-Web3Auth-related activities and can easily collaborate with others to build better applications.
-Since collaboration is essential for creating successful apps, the Web3Auth dashboard helps users
-work together more effectively.
-
-## Getting Started
-
-To begin using the [Web3Auth dashboard](https://dashboard.web3auth.io), log in using one of your
-social accounts or use your email address. Please be aware that the login process utilizes the
-Web3Auth infrastructure with a customized user interface to generate a wallet for you.
-
-
-
-
-
-If you are a new user, you will be asked to create a new organization and profile. You can create
-multiple organizations after initial login to manage your projects and billing.
-
-
-
-
-
-
-
-
-
-## Home
-
-Once you've successfully logged in, you will see a screen that looks like the below image:
-
-
-
-
-
-At a glance you can find the following on the home page:
-
-### Overview
-
-- Creating a new Web3Auth project.
-- Take a Quiz to find out which Web3Auth project is best for you.
-- Relevant links to Plug & Play SDKs and Core Kit SDKs.
-- Link to Community Support and Troubleshooting.
-
-### Left navbar
-
-- Workspace ( Default Organization ) with plan name.
- - Choose your Organization on the dropdown.
-- Home (Overview)
-- Projects - List of all the projects you have created.
-- Archive - List of all the archived projects.
-- Settings - Settings related to your profile.
-- Billing - Billing related information.
-- List of all the projects you have created.
-- Documentation link
-- Status page link
-
-### Top-right navbar
-
-- A button to upgrade your plan if you are on the base plan.
-- A notification icon to view all the notifications.
-- A question mark icon to view the help center.
-
-
-
-
-
- - Community Forum link
- - Getting Started link
- - Give Feedback using the feedback form link
- - Schedule a demo call link
-
-- A user icon to view your profile settings, open wallet and log out button.
-
-
-
-
-
-
-
-
-
-## Projects
-
-Welcome to the Project section of your dashboard. Here, you can easily create new projects and view
-all of the projects that you have previously created.
-
-
-
-
-
-## Archive
-
-Welcome to the Archive section of your dashboard. Here, you can easily access all of your archived
-projects.
-
-
-
-
-
-## Settings
-
-Welcome to the Settings section of your dashboard. Here, you can update your organizational
-information, invite members with varying levels of access, and even delete your organization if
-needed.
-
-
-
-
-
-
-
-
-## Billing
-
-Welcome to the Billing section of your dashboard. Here, you can easily access and view all your
-billing details, attach a card to your account, and view your invoices.
-
-
-
-
-
-
-
-
-
-
-
-## Migration of Verifiers
-
-Users can now attach old verifiers to projects with a one-time process from the verifier tab in our
-new dashboard.
-
-
-
-
-
-**To move the verifiers to a project, follow the steps below:**
-
-1. Click on the three dots located on the verifier that you want to move.
-2. Select "Move to project".
-3. Choose the project(s) where you want to move the verifier.
-
-
-
-
-
-
-
-
-In case the **"Move to project"** button is disabled, it means the verifier needs to be moved to a
-new project with the same environment as the verifier and you may not have it. So please try
-creating a project with the same environment as the verifier and then try moving the verifier to
-that project.
-
-
-
-
-
-Once the verifier is moved, you will see the projects it has been moved into under the "Projects"
-column. As far as you see a project logo/name under the "Projects" column, it means the verifier has
-been moved to that project and no further action is required. But if a verifer does not have any
-project under the "Projects" column, it means the verifier has not been moved to any project and you
-need to move it to a project. Else it will be deleted from the dashboard after **October 31st,
-2023**.
-
-
-
-
-
-**Finally, remember that you can attach the same verifier to multiple projects if needed.**
diff --git a/docs/dashboard-setup/enable-interoperability.mdx b/docs/dashboard-setup/enable-interoperability.mdx
deleted file mode 100644
index 8967de68a..000000000
--- a/docs/dashboard-setup/enable-interoperability.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Enable Interoperability
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Enable Interoperability | Documentation - Web3Auth"
----
-
-import CreateProjectChains from "@site/static/images/dashboard/create-project-chains.png";
-import InteroperablChainsWallets from "@site/static/images/dashboard/interoperable-chains-wallets.png";
-import SelectChains from "@site/static/images/dashboard/select-chains.png";
-
-One of the most remarkable capabilities of Web3Auth is its compatibility with Torus Wallet. This
-signifies that the wallet created within your application using Web3Auth can authorize transactions
-within Torus Wallet, even across other applications. Furthermore, to enhance interoperability, a
-user can connect to other wallets and decentralized applications (dApps) using the WalletConnect
-flow within Torus Wallet. This empowers a dApp to decide whether they want to allow users to move
-funds around using Torus Wallet without designing the necessary flows themselves.
-
-### Using the Web3Auth Dashboard
-
-Within the Web3Auth Dashboard, while setting up a new Project or editing an existing one, you have
-the option to configure interoperability with Torus Wallet. To enable it, you need to do the
-following steps:
-
-- Create a new / edit your existing Project
-
-
-
-
-
-
-
- Select the chain you want your dApp to interact with. For interoperability, you have the
- option between EVM based chains, Solana, Casper &
- Ripple.
-
-
-
-
-
-
-
-
-- Once you have selected one of the chains supported by Torus Wallet, you can now select the option
- `Allow user's private key usage in given wallets:` to enable interoperable flow with the Torus
- Wallets. These wallets can be accessed on the following domains:
-
-
-
-
-
-
- EVM Wallet - https://app.tor.us
-
-
- Solana Wallet - https://solana.tor.us
-
-
- Casper Wallet - https://casper.tor.us
-
-
- Ripple Wallet - https://xrpl.tor.us
-
-
-
-
-
-
-
-
-
-
-And you're done! Now, your user can use their Web3Auth wallet from your application to sign
-transactions within Torus Wallet.
diff --git a/docs/dashboard-setup/projects-and-analytics.mdx b/docs/dashboard-setup/projects-and-analytics.mdx
deleted file mode 100644
index 5fa4e792c..000000000
--- a/docs/dashboard-setup/projects-and-analytics.mdx
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Projects and Analytics
-sidebar_label: Projects and Analytics
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Projects and Analytics | Documentation - Web3Auth"
----
-
-import Analytics from "@site/static/images/dashboard/analytics.png";
-import CreateProjectChains from "@site/static/images/dashboard/create-project-chains.png";
-import CreateProjectEnvironment from "@site/static/images/dashboard/create-project-environment.png";
-import CreateProjectName from "@site/static/images/dashboard/create-project-name.png";
-import CreateProjectPlatformType from "@site/static/images/dashboard/create-project-platform-type.png";
-import CreateProjectPlatformTypeFilled from "@site/static/images/dashboard/create-project-platform-type-filled.png";
-import CreateProjectProduct from "@site/static/images/dashboard/create-project-product.png";
-import DashboardProjectList from "@site/static/images/dashboard/dashboard-project-list.png";
-import DashboardWhiteListURL from "@site/static/images/dashboard/project-whitelist.png";
-
-Create a new project in the Web3Auth dashboard to obtain a Client ID. During this process, you will
-be prompted to select the Web3Auth product you intend to use and the Platform, environment, and
-Chains that suit your needs.
-
-Web3Auth offers a "Plug and Play" feature that provides a pre-built user interface and user
-experience for integrating with your project. This feature makes it easy and efficient to integrate
-Web3Auth, eliminating the need to design the entire process from scratch.
-
-The "Core Kit" refers to the underlying SDKs of the Plug and Play. This option offers the maximum
-level of customization.
-
-The project page on the dashboard will appear similar to this:
-
-
-
-
-
-## Create a new project
-
-### Name your project
-
-
-
-
-
-### Select a web3auth product
-
-
-
-
-
-### Select a platform type
-
-
-
-
-
-
-
-
-
-### Select an environment
-
-
-
-
-
-### Select chains
-
-
-
-
-
-## Diving into a Web3Auth project
-
-A project contains the following details:
-
-### Client ID
-
-The Project ID is a distinctive identifier for your project and is used to identify your project
-within the Web3Auth dashboard. You will need this ID when initializing the Web3Auth SDK within your
-application. Once you create a project, the Project ID is automatically generated for you. It is
-important to copy and include this value in your initialization code to ensure seamless integration
-with Web3Auth.
-
-### Client Secret
-
-The Project Secret Key is a confidential code utilized to verify your project's authenticity. Like
-the Project ID, the Secret Key is also generated automatically upon project creation.
-
-### Add a new whitelist URL
-
-The Whitelist URL is the address you wish to authorize for your project. When implementing Web3Auth,
-it is important to whitelist the specific URLs from which you intend to make calls for user
-authentication. By doing so, you can ensure that these activities are conducted securely and
-efficiently. Remember to whitelist all relevant URLs to guarantee seamless integration with
-Web3Auth.
-
-
-
-
-
-### Archive a project
-
-You can archive a project by clicking the "Archive" button on the project page. This action will
-remove the project from the dashboard and prevent you from using the Client ID to authenticate
-users. You can unarchive a project by clicking the "Unarchive" button from the archive page.
-
-## Project Analytics
-
-
-
-
-
-Project analytics is a system that collects and examines data related to user engagement and usage.
-The system includes several key components, such as the number of logins, the count of monthly
-active wallets, a monthly active wallets overview in the form of a pie chart, verifier details, and
-the ability to view data for different time periods. These tools offer valuable insights into
-document management and user engagement strategies.
diff --git a/docs/dashboard-setup/roles-and-permissions.mdx b/docs/dashboard-setup/roles-and-permissions.mdx
deleted file mode 100644
index a01f3b82c..000000000
--- a/docs/dashboard-setup/roles-and-permissions.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Roles and Permissions
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Organization Roles and Permissions | Documentation - Web3Auth"
----
-
-import DeleteInvitation from "@site/static/images/dashboard/dashboard-settings-delete-invitation-link.png";
-// import InviteMemberList from "@site/static/images/dashboard/dashboard-settings-invite-member-list.png";
-import InviteMemberOptions from "@site/static/images/dashboard/dashboard-settings-invite-member-options.png";
-import MemberRoles from "@site/static/images/dashboard/dashboard-settings-invite-member-roles.png";
-import InviteModal from "@site/static/images/dashboard/dashboard-settings-invite-members.png";
-import InviteSent from "@site/static/images/dashboard/dashboard-settings-invite-sent.png";
-import InviteButton from "@site/static/images/dashboard/dashboard-settings-members.png";
-// import ViewInvite from "@site/static/images/dashboard/dashboard-settings-view-invite.png";
-
-You must have the required access permissions to perform any actions on the Web3Auth dashboard, such
-as collaborating on a project or adjusting your organization's billing settings. These permissions
-determine what you can and cannot do on the platform, such as editing project settings or accessing
-billing information. To manage these permissions, you can assign roles to organization members. A
-role is a predefined set of permissions assigned to one or more users. By assigning the appropriate
-roles to organization members, you can ensure they have the necessary access to perform their tasks
-effectively while maintaining security and control over your Web3Auth projects.
-
-## Organization Roles
-
-In your organization, there are four different roles: Owner, Admin, Member, and Billing.
-
-- **Owner**: The owner can manage project settings, manage organization, manage billing, and delete
- the organization. If you create an account, you automatically become the owner, and ownership can
- be transferable. There can only be one owner at a time.
-
-- **Admin**: Admins can manage project settings, organization, and billing in the organization but
- cannot delete the organization.
-
-- **Member**: Members can only view projects and do not have permission to manage projects, members,
- or billing.
-
-- **Billing**: The Billing role is responsible for managing the billing settings of your
- organization, and there can only be one billing role at a time.
-
-
-
-
-
-
-## Organization Permissions
-
-| Permission | Owner | Admin | Member | Billing |
-| -------------------------------------------------- | -------------------------------------------- | ----- | ------ | ------- |
-| View organization projects | Yes | Yes | Yes | Yes |
-| Edit organization projects/verifiers and settings | Yes | Yes | No | No |
-| Edit organization verifiers | Only the creator of the verifier can edit it |
-| Invite or remove members | Yes | Yes | No | No |
-| Move personal projects/verifiers into organization | Yes | Yes | No | No |
-| Delete Organization | Yes | No | No | No |
-| Manage Organization’s Billing | Yes | Yes | No | Yes |
-| Transfer Organization ownership | Yes | No | No | No |
-
-## Invite members to your organization
-
-To invite someone to your organization, you must be the owner of the organization. To do so, click
-on `Settings` on the sidebar menu and then select the `Members` tab. From this screen, you'll be
-able to see the list of members in your organization. To invite someone, click on the `Add Member`
-button and enter their email address along with the role you want to assign them.
-
-If the person you're inviting is already a user of Web3Auth, they'll receive an email with a link to
-join your organization. If they're not a user, they'll receive an email with a link to create an
-account and join your organization.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### Invitation options
-
-To view the options for an invitation, click on the three dots (…) next to the invitation. From
-here, you can resend the invitation, delete the invitation, or copy the invitation link.
-
-
-
-
-
-
-
-
-
-
-## Seats and billing
-
-Web3Auth's base plan is available only for individuals. If you are a team of 2 or more, you will
-need to upgrade to growth plan and above.
-
-- The Web3Auth dashboard allows you to easily add new members to your organization. To add members,
- follow the steps outlined in
- [#invite-members-to-your-organization](#invite-members-to-your-organization)
-
-- Once you have added a member to your organization, they will receive an email inviting them to
- join. They will need to log in to the Web3Auth dashboard using their existing account or create a
- new account to accept the invitation.
-
-- It's important to note that there is a five-minute link expiry for the invitation email. If the
- link expires, the member will need to request a new invitation. See
- [#invitation-options](#invitation-options) to manage invitations.
-
-- After accepting the invitation, the new member will have access to the Web3Auth dashboard with the
- permissions assigned to their role. It's important to review and manage these permissions to
- ensure that team members have the appropriate level of access.
-
-- If a member's role requires approval from another member, they will receive an email asking for
- approval before they can access the dashboard. It's important to keep track of pending invitations
- and approvals to ensure that team members can access the dashboard as needed.
-
-- Lastly, it's important to keep track of your team's seats and billing. Each team member requires a
- seat, and you may need to adjust your billing settings if you exceed your plan's limits. You can
- view and manage your team's billing information in the `Billing` section of the dashboard.
diff --git a/docs/dashboard-setup/setup-custom-authentication.mdx b/docs/dashboard-setup/setup-custom-authentication.mdx
deleted file mode 100644
index 7f396e024..000000000
--- a/docs/dashboard-setup/setup-custom-authentication.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Setup Custom Authentication
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Setup Custom Authentication | Documentation - Web3Auth"
----
-
-The Custom Authentication section of the Web3Auth dashboard is where you can create a new verifier.
-This verifier allows you to implement custom authentication within your application, providing
-additional security and flexibility for your users. By creating a Custom Authentication Verifier,
-you can tailor your authentication process to the unique needs of your project and its users.
-
-:::note
-
-Access to Custom Authentication is gated. The minimum
-[pricing plan](https://web3auth.io/pricing.html) to create custom
-[verifiers](/auth-provider-setup/verifiers) is the **Growth Plan**. However, you can use this
-feature for projects on `sapphire_devnet` for free.
-
-:::
-
-But before understanding about custom authentication, let us see **What is a Verifier?**
-
-#### What is a Verifier?
-
-A verifier is a piece of information about the OAuth provider being used by the application, which
-is queried by web3auth auth network nodes from a smart contract deployed on the Ethereum blockchain
-to verify the JWT token.
-
-There are two types of `Verifiers` at Web3Auth:
-
-1. `Default Verifiers`: These are the verifiers associated with OAuth providers(Google, Facebook,
- Apple etc.) which are owned and managed by Web3Auth's account.
-2. `Custom Verifiers`: If you want to manage your OAuth providers(Google, Facebook, Apple etc.)
- yourself or to use some Federated Identity Providers like Auth0, Firebase, AWS Cognito, Okta
- etc., or even your Custom JWT Authentication, you'll need to create a verifier under a project on
- the Web3Auth's dashboard.
-
-For users to be able to log in using your custom authentication flow, you will need to use a Custom
-Verifier. The Wallet that is generated for each user is specific to a verifier. Verifier scripts
-determine the access structure to your users' wallets, and the set of Verifier scripts you choose
-will determine which logins your application will ultimately use.
-
-You can read more about verifiers
-[in this GitHub discussion](https://github.com/orgs/Web3Auth/discussions/427#discussioncomment-3442052).
-
-The `Custom Authentication` tab of a project looks something like this:
-
-
-
-
-
-## Create Verifier
-
-Once you click on the `Create Verifier` button, you'll see a toggle similar to this:
-
-
-
-To create a verifier, you need to input the following details:
-
-### Verifier identifier
-
-The identifier for your verifier. You'll need this while initializing the
-`Web3Auth`/`Web3AuthNoModal` SDK for setting up the custom authentication.
-
-### Choose a Login Provider
-
-Select the Login Provider from the provided options.
-
-The following is the list we have on our Dashboard:
-
-1. Social Login Providers
- - [Google](/auth-provider-setup/social-providers/google)
- - [Facebook](/auth-provider-setup/social-providers/facebook)
- - [Twitch](/auth-provider-setup/social-providers/twitch)
- - [Discord](/auth-provider-setup/social-providers/discord)
-2. Custom Providers
- - [Auth0](/auth-provider-setup/authentication-service-providers/auth0-service-provider)
- - [Custom JWT](/auth-provider-setup/byo-jwt-provider/)
-3. Aggregate Multiple Providers
- - [Aggregate Verifier](/auth-provider-setup/aggregate-verifier)
-
-If something you're looking for is not available in the list, choose `Custom Provider` and provide
-the JWT details.
diff --git a/docs/dashboard-setup/whitelisting.mdx b/docs/dashboard-setup/whitelisting.mdx
deleted file mode 100644
index 6211a2b1f..000000000
--- a/docs/dashboard-setup/whitelisting.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: Whitelisting your App Domain or Deep Links
-sidebar_label: Whitelisting URLs
-image: "images/docs-meta-cards/documentation-card.png"
-
-description: "Client ID and Whitelisting references | Documentation - Web3Auth"
----
-
-import DashboardWhiteListURL from "@site/static/images/dashboard/project-whitelist.png";
-
-### Whitelisting URLs using the Developer Dashboard
-
-The Whitelist URL is the address you wish to authorize for your project. When implementing Web3Auth,
-it is important to whitelist the specific URLs from which you intend to make calls for user
-authentication. By doing so, you can ensure that these activities are conducted securely and
-efficiently. Remember to whitelist all relevant URLs to guarantee seamless integration with
-Web3Auth.
-
-Type in the URL you wish to whitelist in the text box and click on the `Add URL` button. The URL
-will be added to the list of whitelisted URLs. You can add as many URLs as you want.
-
-
-
-
-
-### Whitelisting for Mobile apps
-
-You can use the Developer Dashboard to whitelist URLs for mobile apps as well. For Android, you can
-whitelist the URL by adding the `intent-filter` making the links universal. For iOS, you can
-whitelist the URL by adding the `Associated Domains` in the `Capabilities` section of the project.
-For an extensive guide on deep linking and app linking for Android apps, please refer to the
-following
-[blog](https://blog.web3auth.io/a-comprehensive-guide-to-deep-links-and-app-links-in-android/).
-
-### Manual Whitelisting for Advanced Cases
-
-You can use the manual origin whitelisting method to whitelist URLs without using the Developer
-Dashboard. `AuthAdapter` accepts a parameter called `originData` inside the `adapterSettings`.
-`originData` is a key-value pair where the key is the origin URL and the value is a `signature`. The
-signature is generated using the `whitelistUrl` function.
-
-:::warning Note
-
-Please perform this in a highly secure environment. The `clientSecret` should not be exposed to the
-public, making this a risky process.
-
-:::
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
-import { getPublic, sign } from "@toruslabs/eccrypto";
-import { keccak256 } from "@toruslabs/metadata-helpers";
-import base64urlLib from "base64url";
-
-const base64url = base64urlLib;
-
-const whitelistUrl = async (clientId: string, clientSecret: string, origin: string) => {
- const appKeyBuf = Buffer.from(clientSecret.padStart(64, "0"), "hex");
-
- if (base64url.encode(getPublic(appKeyBuf)) !== clientId) {
- throw new Error("clientSecret mismatch");
- }
-
- const sig = await sign(appKeyBuf, keccak256(Buffer.from(origin, "utf8")));
- return base64url.encode(sig);
-};
-
-const clientId = "YOUR_CLIENT_ID"; // get from https://dashboard.web3auth.io
-const clientSecret = "CORRESPONDING_CLIENT_SECRET"; // get from https://dashboard.web3auth.io
-const origin = "https://example.com";
-
-const privateKeyProvider = new CommonPrivateKeyProvider({ config: { chainConfig } });
-
-(async () => {
- const sig = await whitelistUrl(clientId, clientSecret, origin);
-
- const authAdapter = new AuthAdapter({
- privateKeyProvider,
- adapterSettings: {
- originData: { [origin]: sig },
- },
- });
-
- console.log("AuthAdapter initialized:", authAdapter);
-})();
-```
-
-### How to secure deep linking via whitelisting strategies to avoid phishing attacks?
-
-Deep links are a type of link that can direct users deeper into a native mobile application. These
-are useful for connecting users to specific content within apps, but they don't have built-in
-mechanisms for verifying the authenticity of the destination app. This can potentially expose users
-to phishing attacks if they are directed to a malicious app instead.
-
-On the other hand, Android's App Links and iOS's Universal Links (similar in purpose to App Links)
-are more secure versions of deep links. They include a verification process that Android and iOS use
-to confirm the link's destination. In the case of App Links, Android checks the app's digital asset
-links file hosted on the website's server, which contains information that links the website's URL
-to the app. This information must also be included in the app's manifest file. This process ensures
-that the app associated with the website is the legitimate destination, thereby mitigating the risk
-of phishing by not allowing malicious apps to intercept these links.
-
-All OAuth applications work on whitelisting strategies. One may use App links or Universal links to
-secure the backlinking via whitelisting instead of deep links.
-
-For more information, please refer to the following StackOverflow thread
-[here](https://stackoverflow.com/questions/46169025/android-deep-links-and-app-links-confused).
-
-#### Some security concerns should be addressed when it comes to deep linking:
-
-- Deep links sometimes carry sensitive information, hence it's vital to avoid passing crucial
- information directly via the URLs.
-- Opaque tokens with limited validity should be utilized to minimize the risk of unauthorized
- access.
-- Secure channels, such as `HTTPS` should be used to transmit deep links to prevent eavesdropping.
-
-:::tip
-
-For detailed information on securing deep links, please refer to this
-[blog](https://blog.web3auth.io/a-comprehensive-guide-to-deep-links-and-app-links-in-android/).
-
-:::
diff --git a/docs/dashboard/configure-connections.mdx b/docs/dashboard/configure-connections.mdx
new file mode 100644
index 000000000..873406ea7
--- /dev/null
+++ b/docs/dashboard/configure-connections.mdx
@@ -0,0 +1,119 @@
+---
+title: Configure login connections
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Configure login connections | Documentation - Web3Auth"
+---
+
+import AuthenticationSocialConnections from "@site/static/images/dashboard/authentication-social-connections.png";
+import AuthenticationCustomConnections from "@site/static/images/dashboard/authentication-custom-connections.png";
+import AuthenticationGroupConnectionsSelect from "@site/static/images/dashboard/authentication-group-connections-select.png";
+
+import BasicConnections from "@site/src/common/docs/_basic-connections.mdx";
+import SocialConnections from "@site/src/common/docs/_social-connections.mdx";
+import CustomConnections from "@site/src/common/docs/_custom-connections.mdx";
+import GroupConnections from "@site/src/common/docs/_group-connections.mdx";
+
+To use Web3Auth for user onboarding, developers must first configure the login methods that their
+application will support. All Web3Auth client SDKs require at least one login method to be enabled
+for authentication to function. This configuration ensures that users can authenticate securely and
+reliably across various platforms and environments.
+
+:::note
+
+A thoughtfully configured set of login options improves accessibility, enhances security, and
+provides flexibility for future scalability.
+
+:::
+
+## Social Connections
+
+
+
+
+
+### Basic Logins
+
+Basic Logins refer to standard authentication methods such as passwordless email or phone number
+login. These options are particularly useful for users who may not wish to use social accounts or
+external wallets.
+
+For most applications, it is recommended to either pair Basic Logins with alternative methods (such
+as social or external logins) or enable **Multi-Factor Authentication (MFA)**. This ensures users
+can retain access to their accounts even if they lose access to a primary login method. Supporting
+multiple login types also improves reach across various regions where certain providers may be
+limited.
+
+
+
+### Social Logins
+
+Social Logins allow users to authenticate using their existing accounts from widely adopted
+platforms, offering a seamless and familiar experience. Web3Auth supports a wide range of social
+identity providers, including:
+
+Each social login method can be configured individually through the Web3Auth Dashboard. Developers
+can follow platform-specific guides to obtain necessary credentials (e.g., client IDs, secrets) and
+enable the desired providers.
+
+
+
+## Custom Connections
+
+
+
+
+
+Custom Connections allow developers to integrate Web3Auth with third-party or self-hosted identity
+providers. Supported platforms include:
+
+
+
+These integrations offer advanced flexibility, enabling projects to maintain existing identity
+infrastructure while benefiting from Web3Auth’s non-custodial key management. Developers can
+authenticate users using their preferred systems while still supporting seamless blockchain wallet
+access.
+
+:::note TIP
+
+Custom connections are ideal for enterprises or apps with an existing authentication backend who
+want to integrate Web3 capabilities without compromising on their current identity solutions.
+
+:::
+
+## Group Connections
+
+Group Connections enable multiple login methods to be linked to the same on-chain user identity.
+This means that users logging in with different authentication providers (e.g., **_Google and Email
+Passwordless_**) can still access the same wallet address—ensuring a unified user experience.
+
+Before setting up a group connection, developers must first configure individual login connections
+that are eligible to be grouped. Once eligible connections are established, they can be grouped
+together under a single Group Connection.
+
+
+
+
+
+
+
+:::note
+
+Group Keys differ from standard individual connection keys. Ensure that each login method intended
+for grouping is properly configured beforehand.
+
+:::
+
+> Group Connections are especially useful in scenarios where users may switch or alternate between
+> login methods, allowing for continuous access to the same digital identity without fragmentation.
diff --git a/docs/dashboard/create-new-project.mdx b/docs/dashboard/create-new-project.mdx
new file mode 100644
index 000000000..d246dea0c
--- /dev/null
+++ b/docs/dashboard/create-new-project.mdx
@@ -0,0 +1,502 @@
+---
+title: Create new project
+sidebar_label: Create new project
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Create a new project | Documentation - Web3Auth"
+---
+
+import ProjectSettingsGeneral from "@site/static/images/dashboard/project-settings-general.png";
+import ProjectSettingsDomain from "@site/static/images/dashboard/project-settings-domain.png";
+import ProjectSettingsAdvanced from "@site/static/images/dashboard/project-settings-advanced.png";
+import AuthenticationSocialConnections from "@site/static/images/dashboard/authentication-social-connections.png";
+import WalletConfiguration from "@site/static/images/dashboard/wallet-configuration.png";
+import CustomizationBranding from "@site/static/images/dashboard/customization-branding.png";
+import CustomizationLoginModal from "@site/static/images/dashboard/customization-login-modal.png";
+import DashboardAnalytics from "@site/static/images/dashboard/dashboard-analytics.png";
+
+Before implementing any Web3Auth SDK, developers must create a new project in the Web3Auth
+Dashboard. This process generates a Client ID required for Web3Auth SDK integration.
+
+:::success Note
+
+It is recommended to maintain separate projects for different environments (e.g., development,
+staging, production) to ensure optimal security of credentials.
+
+:::
+
+## Create a new project
+
+Login to the [Web3Auth Dashboard](https://dashboard.web3auth.io) and create a new project if you
+haven't already.
+
+## Get the Client ID
+
+After creating a project, navigate to **Project Settings** and select the **General** tab to obtain
+the `Client ID`.
+
+The project comes pre-configured with default connections, chains and networks to facilitate faster
+integration with Web3Auth SDK.
+
+For detailed implementation steps, developers can refer to the [Quickstart Guide](/quick-start) to
+integrate Web3Auth SDK into their applications.
+
+For a comprehensive understanding of the dashboard functionality, the following sections provide
+detailed coverage of all available features.
+
+---
+
+## Understanding the Dashboard
+
+Web3Auth Dashboard allows developers to manage their projects, configure chains and networks,
+authentication connections, and customize the user experience.
+
+### Project Settings
+
+The **Project Settings** section of the Web3Auth Dashboard allows developers to manage core
+configuration options for each project. These settings determine how the project integrates with the
+Web3Auth SDK and how it behaves across different environments.
+
+#### General
+
+
+
+
+
+The **General tab** provides an overview of key project-specific parameters:
+
+- **Project Name**: This is the name of the project that will be displayed to users during the
+ Web3Auth login flow and in any related email communication. The name can be updated post-creation
+ at any time.
+- **Environment**: This indicates the Web3Auth environment (devnet or mainnet) selected during
+ project creation. These environments are globally distributed and highly scalable. Once set, the
+ environment cannot be modified.
+- **Client ID**: A unique identifier automatically generated for each project. This value is
+ required for SDK integration and is safe to expose publicly.
+- **Client Secret**: A confidential key used for authenticating server-side API requests. It should
+ never be exposed to the frontend or any client-side environment to maintain security.
+- **JWKS Endpoint**: A public endpoint that exposes the JSON Web Key Set (JWKS) used by Web3Auth to
+ sign JWTs. Developers can use this endpoint to verify identity tokens. [Learn more](#).
+- **Project Verification Key**: An alternative to using the JWKS endpoint. This static key allows
+ for token verification without depending on the JWKS URL. [Learn more](#).
+- **Project Platform**: Developers can select from a wide range of platform options such as Web,
+ Mobile, or Gaming, depending on the nature of the application.
+
+##### Archive Project
+
+The Archive Project button allows developers to archive a project. Once archived, the project
+becomes read-only and cannot be modified unless explicitly restored.
+
+#### Whitelist Domains
+
+To enhance security, Web3Auth enables domain whitelisting for both web and mobile applications.
+
+- Domain Authorization Developers must add and verify URLs that are authorized to use the Web3Auth
+ SDK.
+
+ > For mainnet projects, at least one domain or URL must be whitelisted before the SDK can be used
+ > in production.
+
+ {" "}
+
+
+
+
+
+#### Advanced
+
+The Advanced tab provides developers with additional configuration options to fine-tune
+authentication behavior, session control, and data privacy.
+
+
+
+
+
+##### Session Duration
+
+Web3Auth allows customization of session lifetime:
+
+- Developers can configure how long a user session remains active before requiring
+ re-authentication.
+- The default session duration is 1 day.
+- Minimum configurable duration is 1 second, while the maximum is 30 days.
+
+This setting is particularly useful for balancing security and user experience. Shorter durations
+increase security by reducing exposure, while longer durations improve usability for trusted
+applications.
+
+##### Return User Data in Identity Token
+
+This option determines whether Personally Identifiable Information (PII)—such as the user’s email,
+profile picture, and name—is returned in the JWT identity token issued by Web3Auth.
+
+- Enabling this setting allows applications to access additional user metadata directly from the
+ identity token.
+- If userIdentifier is set to email, only the user’s email will be returned in the token. This
+ provides a privacy-centric approach to user identity management.
+
+> Why this matters: Including user PII in the JWT can streamline user onboarding, personalization,
+> and session management in your application. However, developers must consider user consent, data
+> minimization, and jurisdictional privacy regulations (such as GDPR or CCPA) before enabling this
+> option. Only request what is essential for your application’s functionality.
+
+##### Enable Key Export
+
+This setting allows developers to control whether users can programmatically export their private
+keys using the Web3Auth SDK.
+
+- When enabled, the application can allow users to retrieve their private key. For this, the dApp
+ must use the `eth_private_key` JSON-RPC method.
+- When disabled, users will only be able to export their keys manually via Web3Auth’s built-in
+ wallet interface.
+
+This functionality is crucial for advanced use cases such as migration, backup, or interoperability
+with non-EVM-compatible blockchains.
+
+> Example: Programmatically retrieving the private key after login:
+
+```javascript
+// Assuming user is already logged in
+async function getPrivateKey() {
+ const privateKey = await web3auth.provider.request({
+ method: "eth_private_key",
+ });
+}
+```
+
+### Authentication
+
+If you plan on using Web3Auth for user onboarding, you'll need to configure the login methods you
+want to use in your app. All client SDKs require at least one login method to be enabled, by
+default, all login methods are enabled.
+
+Follow the steps [here](/dashboard/configure-connections) to set up different options for your
+users!
+
+
+
+
+
+### Wallet Services
+
+The Wallet Configuration tab within the Web3Auth Dashboard enables developers to customize the
+wallet experience provided to users within their decentralized applications (dApps). These settings
+define the appearance, capabilities, and interactivity of the Web3Auth wallet interface.
+
+
+
+
+
+##### Customize Wallet UI
+
+The Wallet UI can be tailored to align with the application’s user experience and branding
+preferences. The following customization options are available:
+
+- **Portfolio Widget**
+
+ Enable or disable the portfolio widget that displays token balances, transaction history, and
+ wallet analytics. This provides users with a clear overview of their holdings directly within the
+ dApp.
+
+- **Widget Placement**
+
+ Choose the position of the wallet widget on the application interface. Available positions
+ include:
+
+ - **Bottom Right**
+ - **Bottom Left**
+ - **Top Left**
+ - **Top Right**
+
+ This flexibility ensures seamless integration with your existing UI/UX design.
+
+- **Token and NFT Display**
+
+ Configure whether users can view their token balances and NFTs within the wallet interface.
+ Enabling these options enhances the wallet’s functionality, offering users visibility into their
+ digital assets without leaving the dApp.
+
+- **Wallet Features**:
+
+ Toggle individual wallet actions such as:
+
+ - **Buy**: Allow users to purchase crypto assets via integrated on-ramps.
+ - **Swap**: Enable in-wallet token swaps through supported liquidity protocols.
+ - **Send / Receive**: Facilitate peer-to-peer asset transfers.
+ - **WalletConnect**: Add interoperability by allowing users to connect with external dApps that
+ support WalletConnect protocol.
+
+- **Transaction Confirmation Modal**
+
+ When enabled, users will be prompted to approve each transaction via a confirmation modal. This
+ mirrors the behavior of traditional external wallets (e.g., MetaMask), offering an additional
+ layer of transparency and user control over on-chain interactions.
+
+ > Note: These wallet services are fully integrated and require no additional SDK
+ > logic—configuration through the dashboard is sufficient to apply changes across your
+ > application.
+
+These customization options ensure that developers can build a wallet experience that meets both
+usability and security expectations while maintaining consistency with their application’s design.
+
+### Customization
+
+#### Branding
+
+The Branding tab under the Customization section of the Web3Auth Dashboard allows developers to
+personalize the visual identity of their application across multiple user interfaces. This includes
+the Login Screens, Multi-Factor Authentication (MFA) screens, Wallet UI, and Login Modals.
+
+Effective branding ensures a seamless and recognizable user experience, helping users feel confident
+that they are interacting with your application—even when interacting with Web3Auth-hosted
+interfaces.
+
+> Note: All changes made within the Branding tab can be previewed in real-time. However, to reflect
+> updates in production, developers must click the Save & Publish button after making changes.
+
+
+
+
+
+##### Branding Options
+
+- **Add Brand Logo**
+
+ Upload a logo to personalize the user interface and email templates. For optimal performance and
+ compatibility, it is recommended to use a .png file. The logo appears across login flows, wallet
+ views, and email communications.
+
+- **Use Logo as Loader**
+
+ Developers have the option to display the uploaded logo as the loading spinner across the Web3Auth
+ login flow. This small detail enhances brand consistency and gives users a familiar visual cue
+ during authentication.
+
+- **Custom Terms & Conditions and Privacy Policy**
+
+ Link to your application’s Terms of Service and Privacy Policy. These links will be displayed
+ during user onboarding and consent flows, ensuring legal compliance and improving transparency.
+
+- **Application Name**
+
+ The name defined here will be used across system-generated communication, including the subject
+ lines of email templates. Ensure that the application name clearly represents your project or
+ organization.
+
+- **Default Language**
+
+ Select the default localization for all user-facing Web3Auth components. Supported languages
+ include:
+
+ - English
+ - Japanese
+ - Korean
+ - German
+ - Mandarin
+ - Spanish
+ - French
+ - Portuguese
+ - Dutch
+ - Turkish
+
+ This setting ensures that your application’s authentication flow is accessible and intuitive for
+ users across different regions.
+
+##### Theme and Colors
+
+The Theme and Colors section allows developers to synchronize the aesthetic of the Web3Auth
+interfaces with the branding and design system of their application.
+
+- **Select Mode**
+
+ Choose between Light, Dark, or Auto mode. When Auto is selected, the interface adapts to the
+ user’s
+
+ system theme preference automatically. This ensures a consistent and user-friendly visual
+ experience, regardless of the device or OS settings.
+
+- **Primary Color**
+
+ Defines the primary brand color used across interactive elements such as:
+
+ - Buttons
+ - Hyperlinks
+ - Tab indicators
+ - Focus outlines
+ - Loaders and spinners
+ - Navigation tabs
+
+- **On Primary Color**
+
+ Specifies the color applied to text and icons that appear on top of primary color backgrounds
+ (e.g., button labels or iconography). This ensures sufficient contrast for readability and
+ accessibility.
+
+ > Tip: Choose color combinations that meet accessibility guidelines (e.g.,
+ > [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) to provide an inclusive experience
+ > for all users.
+
+#### Login Modal
+
+The Login Modal tab within the Customization section of the Web3Auth Dashboard provides developers
+with granular control over the appearance and behavior of the Web3Auth login flow.
+
+
+
+
+
+##### Design
+
+The Design section offers layout and styling options to customize how the login modal is presented
+to users.
+
+- **Login Modal Appearance**
+
+ Developers can choose between two display modes for the login interface:
+
+ - **Embedded Widget**: The login UI is embedded directly within the application’s layout. This
+ option is ideal for single-page applications or flows that require a fully integrated
+ experience.
+
+ - **Modal Widget**: The login interface opens as a pop-up modal overlay. This provides a more
+ traditional Web3 wallet experience, where authentication occurs in a floating layer over the
+ existing content.
+
+* **Logo Alignment**
+
+ Configure how the application logo is aligned within the login modal:
+
+ - **Center-Aligned**: Displays the logo at the top center, suitable for balanced layouts.
+ - **Left-Aligned**: Positions the logo to the top-left, often preferred for enterprise or
+ dashboard-style applications.
+
+* **Border Radius**
+
+ Adjust the corner curvature of the modal interface:
+
+ - **Small**, **Medium**, or **Large** radius options allow for stylistic variations that better
+ match your app’s design system.
+
+* **Border Radius Type**
+
+ Refine the shape of buttons and input fields within the modal by selecting:
+
+ - **Pill**: Fully rounded ends for a modern, soft appearance.
+ - **Rounded**: Gently curved corners for a subtle aesthetic.
+ - **Square**: Sharp 90° corners for a more technical or minimalist look.
+
+These design customizations allow developers to ensure the login experience feels native to the
+application, enhancing user trust and engagement.
+
+##### Authentication re-order
+
+The Authentication section provides flexibility in how login options are presented within the modal.
+
+- **Arrange Login Order**
+
+ When multiple login methods (e.g., social, email/phone, external wallets) are available,
+ developers can define the order in which these options appear.
+
+ - Simply drag and drop the login methods to rearrange their position.
+ - This order determines the priority and placement of login options shown to users during
+ authentication.
+
+ > Note: This customization improves user experience by surfacing the most relevant login methods
+ > first—e.g., placing a company-preferred SSO or social login provider at the top.
+
+##### External Wallets
+
+The **External Wallets** settings provide additional configuration for displaying third-party wallet
+options such as MetaMask, WalletConnect, and others.
+
+- **Show Installed External Wallets**
+
+ Enable this to automatically detect and display any compatible wallets already installed in the
+ user’s browser or device (e.g., MetaMask or Phantom). This improves onboarding by surfacing
+ options users are already familiar with.
+
+- **Show Number of External Wallets**
+
+ Choose how many external wallet options are displayed at once. Developers can limit or expand this
+ list based on the target user base and the types of wallets they are likely to use.
+
+These settings ensure wallet integrations are both comprehensive and context-aware, adapting to the
+environment and user preferences for seamless onboarding.
+
+### Analytics
+
+The Project Analytics section in the Web3Auth Dashboard provides developers with a comprehensive
+overview of user activity and project engagement. This analytics system gathers and visualizes key
+data points to help developers monitor authentication trends, evaluate project performance, and make
+informed decisions to enhance user experience.
+
+By offering visibility into user behavior and system usage, analytics empowers teams to optimize
+authentication flows, track growth, and ensure the platform’s reliability at scale.
+
+
+
+
+
+**Key Metrics and Insights**
+
+- **Total Logins**
+
+ Displays the cumulative number of login events across the project. This metric helps developers
+ gauge overall user activity and identify spikes or patterns in login frequency.
+
+- **Monthly Active Wallets (MAWs)**
+
+ Reflects the number of unique wallets that have interacted with the application within a given
+ month. This is a critical metric for tracking user retention and engagement over time.
+
+- **Monthly Active Wallets Overview**
+
+ A visual breakdown of MAWs is presented in the form of a pie chart. This chart provides a quick
+ snapshot of wallet activity distribution, highlighting the proportion of users by wallet type or
+ authentication method.
+
+- **Connections Used**
+
+ Lists the types of authentication connections utilized across the project—such as social logins,
+ passwordless methods, and external wallets—giving insight into the preferred login flows.
+
+> Note: Project Analytics offers high-level visibility as well as drill-down insights, making it a
+> powerful tool for both technical teams and product managers looking to refine onboarding and user
+> authentication strategies.
diff --git a/docs/dashboard/dashboard.mdx b/docs/dashboard/dashboard.mdx
new file mode 100644
index 000000000..caf42aaf2
--- /dev/null
+++ b/docs/dashboard/dashboard.mdx
@@ -0,0 +1,33 @@
+---
+title: Configure Web3Auth Dashboard
+sidebar_label: Overview
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Configure Web3Auth Dashboard | Documentation - Web3Auth"
+---
+
+import DashboardSignUpPage from "@site/static/images/dashboard/dashboard-signup.gif";
+
+To get started, visit the [Web3Auth Dashboard](https://dashboard.web3auth.io), log in using one of
+your social accounts or use your email address. You can use the Dashboard to manage your projects,
+configurations, wallet UI, and more.
+
+While setting up your account, Web3Auth will prompt you to share some basic information about your
+organization.
+
+
+
+
+
+Once you’ve set up your account, you can use the Dashboard to manage your **projects** and **team**.
+
+Use the [Projects](https://dashboard.web3auth.io/organization) page of the Dashboard to create and
+manage new projects for your account. Resources within Web3Auth, including wallets, authentication
+methods, and more are scoped to individual projects.
+
+Use the **Settings** page of the Dashboard to invite other administrators for your account. All
+administrators for your account can log in to the Dashboard, access credentials, and manage projects
+and configurations.
diff --git a/docs/examples.mdx b/docs/examples.mdx
index c92162a4e..b81b95906 100644
--- a/docs/examples.mdx
+++ b/docs/examples.mdx
@@ -1,6 +1,6 @@
---
title: Examples
-
+sidebar_label: Examples
description: "Examples | Documentation - Web3Auth"
image: "images/docs-meta-cards/documentation-card.png"
hide_table_of_contents: true
diff --git a/docs/features/account-abstraction.mdx b/docs/features/account-abstraction.mdx
deleted file mode 100644
index 9beeacde2..000000000
--- a/docs/features/account-abstraction.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Web3Auth's Native Account Abstraction
-sidebar_label: Account Abstraction
-description: "Native Account Abstraction | Documentation - Web3Auth"
----
-
-Create and manage smart accounts for your users with just a few lines of code, using Web3Auth’s
-native account abstraction. With smart accounts, you can offer enhanced control and programmability,
-such as these listed below:
-
-- **Gas Sponsorship:** Cover transaction fees, or allow users to pay for their own transactions
- using ERC-20 tokens.
-
-- **Batch Transactions:** Perform multiple transactions in a single call.
-
-- **Automated Transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH
- hits $4,000.
-
-- **Set Spending Limits:** Allow users to set tailored spending limits.
-
-:::note
-
-Find out more about
-[Account Abstraction (ERC 4337)](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337)
-and how it works.
-
-:::
-
-## Getting Started
-
-Our native Account Abstraction (AA) integration simplifies setup, enabling you to create and manage
-smart accounts effortlessly with popular libraries like Viem, Ethers, and Web3.js—no need for
-third-party packages to achieve ERC-4337 compatibility. We are working closely with different
-partners in the account abstraction ecosystem and will provide support for evolving standards like
-EIP-7702, ERC-7579 (Modular Accounts), and ERC-7555 (account discovery) as they get finalized.
-
-:::note
-
-Getting started is easy; you just have to select your preferred smart account provider, configure
-your bundler client, and integrate your paymaster.
-[See this link for the steps.](/sdk/pnp/web/providers/aa-provider)
-
-:::
-
-:::tip
-
-For a quick configuration tailored to your needs, explore our detailed guides:
-
-- [Guide to Sending Gasless Transactions](/guides/sending-gasless-transaction)
-- [Guide to Sending Transactions with an ERC-20 Paymaster](/guides/erc20-paymaster)
-
-:::
diff --git a/docs/features/account-dashboard.mdx b/docs/features/account-dashboard.mdx
index b9eddbfb4..10a9226d3 100644
--- a/docs/features/account-dashboard.mdx
+++ b/docs/features/account-dashboard.mdx
@@ -1,5 +1,6 @@
---
title: Account Dashboard
+sidebar_label: Account Dashboard
description: "Account Dashboard | Documentation - Web3Auth"
---
@@ -14,8 +15,8 @@ Try now: [https://account.web3auth.io](https://account.web3auth.io)
:::tip
To implement the Account Dashboard in your custom verifier-based dApp, please refer to the
-[Manage MFA for No Modal SDK](/sdk/pnp/web/no-modal/usage#manage-multi-factor-authentication-mfa)
-and [Manage MFA for Modal SDK](/sdk/pnp/web/modal/usage#manage-multi-factor-authentication-mfa)
+[Manage MFA for No Modal SDK](/sdk/web/react/#advanced-configuration) and
+[Manage MFA for Modal SDK](/sdk/pnp/web/modal/usage#manage-multi-factor-authentication-mfa)
sections.
:::
diff --git a/docs/features/custom-authentication.mdx b/docs/features/custom-authentication.mdx
index b3d0bdebf..94f846960 100644
--- a/docs/features/custom-authentication.mdx
+++ b/docs/features/custom-authentication.mdx
@@ -5,9 +5,10 @@ sidebar_label: Custom Authentication
description: "Use your own Authentication | Documentation - Web3Auth"
---
-import BYOCustomJWTTiles from "@site/src/common/docs/_byo-custom-jwt-providers.mdx";
-import FederatedTiles from "@site/src/common/docs/_federated-providers.mdx";
-import SocialTiles from "@site/src/common/docs/_social-login-providers.mdx";
+import BasicConnections from "@site/src/common/docs/_basic-connections.mdx";
+import SocialConnections from "@site/src/common/docs/_social-connections.mdx";
+import CustomConnections from "@site/src/common/docs/_custom-connections.mdx";
+import GroupConnections from "@site/src/common/docs/_group-connections.mdx";
Custom Authentication enables you to create tailored auth flows designed specifically for your app.
Whether you’re migrating from an existing system or starting fresh, we’ve got you covered.
@@ -25,13 +26,6 @@ internal credentials and require minimal setup:
- Limited customization options
- Best for rapid prototyping and simple applications
-:::warning
-
-If you opt for prebuilt social login providers, migration to custom authentication will not be
-possible in the future.
-
-:::
-
### 2. Custom Authentication (Recommended)
Custom Authentication offers more flexibility by allowing you to:
@@ -43,19 +37,10 @@ Custom Authentication offers more flexibility by allowing you to:
- Create custom user experiences
- Handle complex authentication requirements
-:::note
-
-Access to Custom Authentication is gated. The minimum
-[pricing plan](https://web3auth.io/pricing.html) to create custom
-[verifiers](/auth-provider-setup/verifiers) is the **Growth Plan**. However, you can use this
-feature for projects on `sapphire_devnet` for free.
-
-:::
-
### 3. Grouped Custom Authentication
This method combines multiple authentication providers under a single
-[aggregate verifier](/auth-provider-setup/aggregate-verifier), enabling:
+[group connection](/authentication/group-connections), enabling:
- Same private key generation across different login methods
- User account linking across multiple providers
@@ -65,8 +50,8 @@ This method combines multiple authentication providers under a single
:::tip
-Check out our reference on [Auth Provider Setup](/auth-provider-setup) for a detailed guide on how
-to set up your custom authentication.
+Check out our reference on [Authentication](/authentication) for a detailed guide on how to set up
+your custom authentication.
:::
@@ -81,41 +66,23 @@ to set up your custom authentication.
- **Greater Control:** Own the authentication process, giving you flexibility to switch between SDKs
and providers as needed.
-## Supported Login Providers
-
-### Social
+## Supported Authentication Connections
-
+### Basic Login
-### Authentication Service Providers
+
-
+### Social Login
-### Bring your own Custom Login Providers
+
-
+### Custom Connections
-There are some nuances with certain login providers, so don't hesitate to get in touch with us on
-our [Community Portal](https://web3auth.io/community) and we will take care of things from there.
-
-## FAQs
-
-### Which logins should my application support?
-
-You can select from [this list](/auth-provider-setup/#supported-auth-providers) or use your own
-custom authentication. There are some nuances with certain login providers, so don't hesitate to get
-in touch with us.
+
-### Should different logins lead to the same key?
+### Group Connections
-You can choose to connect logins with the same `Verifier ID`. For example, if a user uses generic
-email logins and a Gmail login to log in on different occasions he/she can still retrieve the same
-key. This can only be done on logins that share a common unique identifier for a user.
+
-Read more about aggregating logins [here](/auth-provider-setup/aggregate-verifier).
-
-### Can XXXX authenticator/login be supported?
-
-Yes, If you'd like support for a particular login system do send your query over to
-hello@web3auth.io If you have any questions, please get in touch with us on
-[Community Portal](https://web3auth.io/community). We'll be happy to help you out!
+There are some nuances with certain login providers, so don't hesitate to get in touch with us on
+our [Community Portal](https://web3auth.io/community) and we will take care of things from there.
diff --git a/docs/features/ecosystem-wallets.mdx b/docs/features/ecosystem-wallets.mdx
deleted file mode 100644
index 43b2c8c3d..000000000
--- a/docs/features/ecosystem-wallets.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Ecosystem Wallets
-image: "images/docs-meta-cards/documentation-card.png"
-description: "Ecosystem Wallets | Documentation - Web3Auth"
----
-
-Web3Auth Ecosystem Wallets take our embedded wallet SDKs to the next level. You can now enable a
-single user identity across multiple apps, providing one wallet for your entire ecosystem.
-
-### What Ecosystem Wallets Offer
-
-- **Unified Login Experience**: Provide users with a single login across all your applications.
- Users retain the same wallet across your ecosystem, unlike the app scoped wallets.
-- **Ready to launch UI and Branding**: Deploy a fully white-labeled, production-ready UI that can be
- hosted on your domain, reducing developer effort and speeding up your go-to-market.
-- **Developer Ownership**: Take full control of the developer experience by offering a white-labeled
- SDK that developers integrate directly as your npm package
-- **In-App Transaction Approvals**: Allow users to sign transactions and manage approvals directly
- within your app, eliminating the need to switch to external wallets or extensions.
-- **Gasless**: Upgrade to a smart contract wallet spun from an EOA, combining the benefits of MPC
- (Multi-Party Computation) and smart wallets for a frictionless user experience.
-
-:::info Get Started
-
-Try the Wallet Ecosystem on devnet today. For pricing details and setup support, schedule a call
-with our sales team [here](https://calendly.com/web3auth/meeting-with-web3auth).
-
-:::
-
-
diff --git a/docs/features/external-wallets.mdx b/docs/features/external-wallets.mdx
index ac1e35ad8..9c9500ad1 100644
--- a/docs/features/external-wallets.mdx
+++ b/docs/features/external-wallets.mdx
@@ -1,7 +1,7 @@
---
title: External Wallets
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: External Wallets
description: "External Wallets | Documentation - Web3Auth"
---
diff --git a/docs/features/interoperability.mdx b/docs/features/interoperability.mdx
index 7ce67de31..30575558f 100644
--- a/docs/features/interoperability.mdx
+++ b/docs/features/interoperability.mdx
@@ -1,7 +1,7 @@
---
title: Interoperability
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: Interoperability
description: "Interoperability | Documentation - Web3Auth"
---
@@ -29,7 +29,7 @@ To integrate in your dapp, visit the Top up Wallet page and setup the configurat
application.
- [PnP Modal SDK](/sdk/pnp/web/modal/show-wallet-connect)
-- [PnP No Modal SDK](/sdk/pnp/web/no-modal/show-wallet-connect)
+- [PnP No Modal SDK](/sdk/web/react/#advanced-configuration)
:::
diff --git a/docs/features/mfa.mdx b/docs/features/mfa.mdx
index b46f9bb0f..6cdb9a750 100644
--- a/docs/features/mfa.mdx
+++ b/docs/features/mfa.mdx
@@ -1,86 +1,72 @@
---
-title: Multi Factor Authentication
-
-description: "Multi Factor Authentication | Documentation - Web3Auth"
+title: Multi-Factor Authentication
+sidebar_label: Multi-Factor Authentication
+image: "images/docs-meta-cards/documentation-card.png"
+description: "Multi-Factor Authentication | Documentation - Web3Auth"
---
-With Web3auth, you can enable you users to set users multi-factor authentication (MFA) for embedded
-wallets. This feature enhances wallet security by tying access to additional authentication factors
-such as social logins, devices, or recovery phrases. By requiring additional verification, MFA
-ensures users can securely control and recover their wallets while maintaining a self-custodial
-setup. The key recovery methods that we support out of the box are:
-
-## One-Click Login (Single Factor Auth)
-
-This is the simplest flow for a user to onboard with Web3Auth. The user just needs to click on the
-login button, connect to their favorite social account (OAuth) or any passwordless flow, like
-email-passwordless, biometric authentication etc., and a wallet is generated for them. This flow has
-a 1/1 Key Share setup and the whole key via Web3Auth Auth Network key shares. This flow is still
-non-custodial since the nodes in the Web3Auth network have a 5/9 consensus mechanism to generate the
-key shares.
-
-:::warning
-
-While analyzing, one can claim that this flow is custodial to the OAuth Login provider, since this
-is directly generated using credentials provided by them. Also, since the Web3Auth Network handles
-this flow independently, even while being decentralized, **we can call this flow a semi-custodial
-flow.**
-
-:::
+Web3Auth offers robust Multi-Factor Authentication (MFA) to enhance the security and recoverability
+of user accounts. MFA acts as an additional layer of protection, requiring users to authenticate
+using two or more verification methods before gaining access to their accounts. This system is
+designed to ensure key ownership remains self-custodial while maintaining ease of access and
+recovery.
-:::info technical insight
+To activate MFA, users must configure at least one backup factor. Upon setup, Web3Auth splits the
+user’s private key into three shares using an off-chain threshold signature scheme. This
+cryptographic approach guarantees that even if one share is lost or compromised, access to the
+wallet can still be securely recovered using the remaining factors.
-In our One Click Flow, we add a `nonce` value, stored in our encrypted metadata server, to the
-social login share to keep the threshold 2/2, while it feels like 1/1. This is done to ensure that
-the application has the flexibility to move to a 2/n MFA flow in the future if they want to. As the
-application triggers the creation of MFA Factors the nonce is automatically deleted.
+Users can choose from various authentication methods including device-based shares, social logins,
+backup seed phrases, password factors, passkeys, and authenticator apps. These options offer
+flexibility for both account security and cross-device accessibility.
-:::
+
-:::tip
+## MFA Levels
-- The [**Single Factor SDKs**](/sdk/sfa/sfa-js) help you directly achieve this flow.
+The `mfaLevel` parameter allows developers to configure the behavior and frequency of MFA prompts
+within their applications. This setting determines how and when users are prompted to configure or
+verify their backup factors.
-- For Plug and Play SDKs, this flow can be achieved by setting the
- [`MFALevel` to `'none'`](/sdk/pnp/web/modal/initialize#multi-factor-authentication) within the
- Web3Auth Login while logging a user in.
+Supported values for `mfaLevel` include:
-:::
+- `default`: Displays the MFA setup screen every third login. Ideal for balanced security and user
+ convenience.
+- `optional`: Shows the MFA screen on every login, but users can skip the setup if desired.
+- `mandatory`: Forces MFA setup immediately after login. This is recommended for applications
+ prioritizing strong user authentication.
+- `none`: Completely bypasses the MFA setup screen. Suitable for use cases where MFA is managed
+ externally or intentionally disabled.
-## Adding Multi-Factor Authentication
+## MFA Settings
-The Multi-Factor Authentication (MFA) feature refers to the ability of the user to create a backup
-share (recovery factor). This feature plays a key role in the Wallet Infrastructure of Web3Auth and
-a developer needs to properly understand it to be able to onboard users safely and effectively.
-
-The most interesting feature of adding a multi-factor authentication is that it makes the keys
-**self-custodial** to the user. This is achieved by associating a key share alongside the factor
-that the user chooses to create, hence making sure the key is further distributed and not just
-associated with the user's social account or the Web3Auth Network.
-
-:::tip
-
-Know the [best practices to implement MFA effectively](/resources/mfa-best-practices) to enhance
-security and user experience.
-
-:::
+The `mfaSettings` parameter provides granular control over which backup factors are available to
+users and the order in which they appear in the UI. This enables developers to tailor the MFA
+experience to match their application’s security requirements and user preferences.
-### Types of MFA Flows
-
-With Core Kit MFA and Plug and Play SDKs, you have the choice to use multiple types of multi-factor
-flows according to your needs. With Plug and Play, we expose various logins out of the box. For Core
-Kit SDKs, the developers can determine which flow suits them the most, with total freedom of
-managing key storage and access.
-
-| MFA Type | Custodiality of MFA | Ease of Access | Setup Custodiality | Availability in Plug and Play SDKs |
-| ---------------------------- | ----------------------------------------------- | -------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| **Recovery Mnemonic Phrase** | Self Custodial to User | Difficult | Fully Non-Custodial | Yes |
-| **Email Backup Share** | Potentially Custodial to Email Provider | Medium | Non-Custodial / Semi-Custodial _(if same email as first factor social login)_ | Yes, SMTP server for email can be customized for Enterprise Customers. |
-| **Backup Password** | Semi Custodial to the Encrypted Metadata Server | Medium | Non-Custodial | Yes |
-| **Secondary Social Login** | Semi Custodial to Social Provider | Easy | Non-Custodial / Semi-Custodial _(if same social login provider for first factor)_ | Yes, with Default Social Providers |
-| **SMS Passwordless** | Semi Custodial to SMS Service | Easy | Non-Custodial | Yes, with Web3Auth SMS Server |
-| **Email Passwordless** | Semi Custodial to Email Provider | Easy | Non-Custodial / Semi-Custodial _(if same email as first factor social login)_ | Yes, with Web3Auth Email Passwordless Server |
-| **Passkeys** | Non Custodial | Easy | Non-Custodial | Yes, with Web3Auth Passkeys Server |
-| **Authenticator App** | Non Custodial | Easy | Non-Custodial | Yes, with Web3Auth Authenticator Server |
+| MFA Type | Ease of Access | Setup Custodiality |
+| -------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
+| **Recovery Mnemonic Phrase** | Difficult | Fully Non-Custodial |
+| **Email Backup Share** | Medium | Non-Custodial / Semi-Custodial _(if same email as first factor social login)_ |
+| **Backup Password** | Medium | Non-Custodial |
+| **Secondary Social Login** | Easy | Non-Custodial / Semi-Custodial _(if same social login provider for first factor)_ |
+| **Secondary SMS Passwordless** | Easy | Non-Custodial |
+| **Secondary Email Passwordless** | Easy | Non-Custodial / Semi-Custodial _(if same email as first factor social login)_ |
+| **Passkeys** | Easy | Non-Custodial |
+| **Authenticator App** | Easy | Non-Custodial |
+
+## Benefits of MFA
+
+- **Self-Custodial Security**: Key shares remain under user control without reliance on a
+ centralized entity.
+- **Cross-Device Recovery**: Users can regain access to their accounts even if they switch devices.
+- **Flexible Implementation**: Developers can choose the right balance between security and UX by
+ tuning MFA behavior and available factors.
+- **Threshold Signature Architecture**: Enhances resilience against loss or compromise of individual
+ factors.
+
+By integrating Web3Auth’s MFA, developers can provide a secure, user-friendly authentication system
+that aligns with the decentralized principles of web3 while delivering modern account recovery and
+protection features.
diff --git a/docs/features/mobile.mdx b/docs/features/mobile.mdx
index c47cb5f50..787fe444e 100644
--- a/docs/features/mobile.mdx
+++ b/docs/features/mobile.mdx
@@ -4,7 +4,7 @@ sidebar_label: Mobile
description: "Native Mobile SDKs | Documentation - Web3Auth"
---
-import { mpccorekitjs, pnpmobile, sfamobile, sfaweb } from "@site/src/components/SDKReferenceCards";
+import { mpccorekitjs, pnpmobile, sfamobile } from "@site/src/components/SDKReferenceCards";
Building mobile apps with blockchain features has never been easier. With Web3Auth's Native Mobile
SDKs, you can integrate secure wallet functionality and blockchain interactions directly into your
@@ -29,11 +29,11 @@ app with minimal effort. Here’s how you can use our SDKs to create better mobi
{ pnpmobile }
-## Single Factor Auth SDKs
+## Single Factor Auth Mobile SDKs
---
-{sfaweb} {sfamobile}
+{sfamobile}
## MPC Core Kit
diff --git a/docs/features/mpc.mdx b/docs/features/mpc.mdx
index 920273ddd..8ccc3bbd5 100644
--- a/docs/features/mpc.mdx
+++ b/docs/features/mpc.mdx
@@ -1,6 +1,6 @@
---
title: Multi-Party Computation
-
+sidebar_label: Multi-Party Computation
description: "Multi-Party Computation | Documentation - Web3Auth"
---
diff --git a/docs/features/nft-minting.mdx b/docs/features/nft-minting.mdx
index 197a197d0..3a344d1f5 100644
--- a/docs/features/nft-minting.mdx
+++ b/docs/features/nft-minting.mdx
@@ -2,6 +2,7 @@
title: NFT Minting
image: "images/docs-meta-cards/documentation-card.png"
description: "NFT Minting | Documentation - Web3Auth"
+sidebar_label: NFT Minting
---
Web3Auth NFT Minting Service facilitates NFT airdrops and minting, giving you granular control over
diff --git a/docs/features/passkeys.mdx b/docs/features/passkeys.mdx
deleted file mode 100644
index 21bae42c8..000000000
--- a/docs/features/passkeys.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Passkeys
-sidebar_label: Passkeys
-displayed_sidebar: docs
-description: "Passkeys | Documentation - Web3Auth"
-image: "images/docs-meta-cards/documentation-card.png"
----
-
-import PasskeysDemo from "@site/static/images/passkeys-demo.gif";
-
-Passkeys offer a secure, passwordless authentication method, enhancing user experience with the
-WebAuthn standard. Web3Auth supports passkeys via its Single Factor Auth (SFA) Web SDK, enabling
-seamless developer integration.
-
-:::info
-
-Checkout our [Demo](https://demo-sfa.web3auth.io) to see it in action.
-
-:::
-
-
-
-:::note
-
-For now, passkeys support is available for the Web3Auth Single Factor Auth (SFA) Web SDK through the
-[Passkeys SFA Plugin package](/sdk/sfa/sfa-js/passkeys-sfa). Support for additional SDKs is coming
-soon.
-
-:::
-
-### Key Benefits of Passkeys
-
-#### Convenience
-
-- **Passwordless Login:** Users can authenticate without the need for passwords, reducing friction
- and improving the overall user experience.
-- **Biometric Authentication:** Passkeys support biometric methods such as fingerprint or facial
- recognition, offering a quick and secure way to log in.
-
-#### Security
-
-- **Phishing Resistant:** Passkeys are inherently phishing-resistant, as they use public-key
- cryptography and are bound to the origin they were created for, making it difficult for attackers
- to intercept or misuse them.
-- **Strong Authentication:** Passkeys provide a strong form of authentication, leveraging the
- security features of the user's device.
-
-#### Seamless Integration
-
-- **Web3Auth SFA SDK Compatibility:** The Passkeys SFA Plugin integrates seamlessly with Web3Auth
- Single Factor Auth (SFA) Web SDK, enabling easy implementation of passkey registration, login, and
- management functionalities.
diff --git a/docs/features/server-side-verification.mdx b/docs/features/server-side-verification.mdx
index 3f6d00280..a0673008e 100644
--- a/docs/features/server-side-verification.mdx
+++ b/docs/features/server-side-verification.mdx
@@ -1,5 +1,6 @@
---
title: Server-Side Verification
+sidebar_label: Server-Side Verification
description: "Server-Side Verification | Documentation - Web3Auth"
---
@@ -35,384 +36,9 @@ To implement server-side verification with Web3Auth:
3. **Authenticate the User:** Based on the verified claims within the JWT, including wallet address
ownership, authenticate the user in your backend system.
-## Getting the ID Token
+:::info
-After a user is logged in using one of the supported Wallets, One can obtain the `idToken` by
-calling the `authenticateUser` function of Web3Auth.
-
-```tsx
-await web3auth.authenticateUser();
-```
-
-#### Returns
-
-```json
-{
- "idToken": "JWT_TOKEN_ISSUED_BY_WEB3AUTH"
-}
-```
-
-:::tip Extending Beyond Social Logins to External Wallets
-
-Web3Auth's server-side verification extends not only to users authenticated via the social/federated
-logins, but also to those using **external wallets**. This flexibility ensures that dApps can
-authenticate Web3Auth users in their backend systems, regardless of the authentication method used
-on the frontend.
-
-:::
-
-### Sample ID Token payload
-
-:::warning
-
-The `idToken` payload for the External Wallet is different from the one used in Social logins. For
-Social logins, we receive the user's `public_key`, while for External Wallets we obtain the
-`address`.
-
-It's important to note that not all social logins will provide all user information, such as
-`email`, `name`, and `profileImage`. If your application relies on this information, make sure you
-handle cases where these fields are not present. We recommend using the value of `oAuthIdToken` as
-it will be more accurate, based on the specific oAuth provider you're working with. Please note that
-`oAuthIdToken` is only available when using our Custom Authentication feature.
+Head over to our [Web3Auth Identity Token](/authentication/id-token) documentation to learn more
+about the JWT and how to verify it.
:::
-
-
-
-
-
-```js
-{
- "iat": 1722394613,
- "aud": "BHgArYmWwSeq21czpcarYh0EVq2WWOzflX-NTK-tY1-1pauPzHKRRLgpABkmYiIV_og9jAvoIxQ8L3Smrwe04Lw",
- "iss": "https://api-auth.web3auth.io",
- "nonce": "036256d2a4055cea253e250c3e3158bf86576477d944fd5ee23f92454e13098267",
- "email": "xyz@xyz.com", // this field may not be present for all social providers
- "name": "John Doe", // this field may not be present for all social providers
- "profileImage": "https://lh3.googleusercontent.com/a/AATXAJx3lnGmHiM4K97uLo9Rb0AxOceH-dQCBSRqGbck=s96-c", // this field may not be present for all social providers
- "verifier": "web3auth",
- "verifierId": "xyz@xyz.com",
- "aggregateVerifier": "web3auth-google-sapphire-devnet",
- "exp": 1722481013,
- "wallets": [
- {
- // This is your PnP Key
- // focus-next-line
- "public_key": "578970a884b44bbe0cf479d633fe7fa20cfc92dd4ac05eabdb298f4a6413064c",
- "type": "web3auth_app_key",
- "curve": "secp256k1" // or "ed25519"
- },
- {
- // This is your CoreKit Key
- // focus-next-line
- "public_key": "218a3a9eb7febe18daa126902080a5a84c3952810d86d6f4d54c283007f2f868",
- "type": "web3auth_threshold_key",
- "curve": "secp256k1" // or "ed25519"
- }
- ]
-}
-```
-
-| Parameter | Type | Description |
-| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `iat` | `number` | The "iat" (issued at) claim identifies the time at which the JWT was issued. |
-| `aud` | `string` | The "aud" (audience) claim identifies the recipients that the JWT is intended for. (Here, it's the dapp `client_id`) |
-| `iss` | `string` | The "iss" (issuer) claim identifies who issued the JWT. (Here, it's Web3Auth's `https://api-auth.web3auth.io`) |
-| `email` | `string` | The email address of the user (optional). **_This field may not be present for all social providers_** |
-| `name` | `string` | The name of the user (optional). **_This field may not be present for all social providers_** |
-| `profileImage` | `string` | The profile image of the user (optional). **_This field may not be present for all social providers_** |
-| `verifier` | `string` | Web3auth's verifier used while user login |
-| `verifierId` | `string` | Unique user id given by OAuth login provider |
-| `aggregateVerifier` | `string` | Name of the verifier if you are using a single id verifier (aggregateVerifier) (optional) |
-| `exp` | `number` | The "exp" (expiration time) claim identifies the expiration time on or after which the _JWT MUST NOT be accepted for processing_. |
-| `wallets` | `array` | A list of wallets for which this token is issued:
`curve` "secp256k1" (default) or "ed25519"
`type` "web3auth_app_key" or "web3auth_threshold_key" in case of social logins
`public_key` compressed public key derived based on the specified curve
To get the `ed25519` curve based `public_key`, you can specify in the loginSettings of the AuthAdapter when working with Web SDK. For mobile SDKs, specify the curve in the LoginParams. |
-
-##### Changing the Public Key Curve
-
-If you want to encode the public_key in `ed25519` format then you have to pass the curve parameter
-in AuthAdapter as:
-
-```ts
-const authAdapter = new AuthAdapter({
- loginSettings: {
- curve: "ed25519", // allowed values "secp256k1" (default) or "ed25519"
- },
-});
-```
-
-:::warning NOTE
-
-By default, Web3Auth returns an `idToken` which contains the `public_key` in the `secp256k1` format.
-
-:::
-
-
-
-
-
-```js
-{
- "iat": 1661158877,
- "iss": "ISSUER_NAME", // metamask, phantom, walletconnect-v2, coinbase, rainbow etc.
- "aud": "https://requesting.website",
- "wallets": [
- {
- "address": "0x809d4310d578649d8539e718030ee11e603ee8f3",
- "type": "ethereum"
- }
- ],
- "exp": 1661245277
-}
-```
-
-| Parameter | Type | Description |
-| --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `iat` | `number` | The "iat" (issued at) claim identifies the time at which the JWT was issued. |
-| `aud` | `string` | The "audience" claim identifies the recipients that the JWT is intended for. (Here, it's `website's url`) |
-| `iss` | `string` | The "issuer" claim identifies who issued the JWT. Here, the issuer is the name of external wallet such as `torus-evm`, `torus-solana`, `metamask`, `phantom`, `rainbow`, `walletconnect-v2`, `coinbase`, `solflare` etc |
-| `wallets` | `array` | list of wallets for which this token is issued:
`address` : Wallet public address
`type` Network Type such as "ethereum", "solana" or "starkware" incase of external wallets
|
-
-
-
-
-## Verifing the ID Token
-
-- **JWT Validation:** The associated public key, available on a hosted endpoint by Web3Auth, allows
- you to verify the token's authenticity and integrity. A JWT that can be successfully verified with
- this public key confirms that the information it contains is trustworthy and has not been altered.
-- **Proof of Wallet Ownership:** The JWT includes a claim that certifies the user's ownership of a
- specific wallet's public address, enabling a reliable method of user authentication on the server
- side.
-
- :::info JWKS endpoints by Web3Auth
-
- Please note, the JWKS endpoint for External wallets **is different** from the Social logins.
-
- - JWKS Endpoint for External Wallets:
- [`https://authjs.web3auth.io/jwks`](https://authjs.web3auth.io/jwks)
- - JWKS Endpoint for Social Logins:
- [`https://api-auth.web3auth.io/jwks`](https://api-auth.web3auth.io/jwks)
-
- :::
-
-## Social Login Verification
-
-In order to verify the JWT Token(`idToken`) you'll need the compressed **app_pub_key** (derived from
-_**app_scoped_privkey**_) and the `idToken` obtained from the `authenticateUser` function in your
-frontend.
-
-### Getting `app_pub_key` and `idToken`
-
-Get the `app_pub_key` and `idToken` in the frontend of your application.
-
-
-
-
-
-```ts
-import { getPublicCompressed } from "@toruslabs/eccrypto";
-
-const app_scoped_privkey = await web3auth.provider?.request({
- // focus-next-line
- method: "eth_private_key", // use "private_key" for other non-evm chains
-});
-
-const app_pub_key = getPublicCompressed(
- Buffer.from(app_scoped_privkey.padStart(64, "0"), "hex"),
-).toString("hex");
-```
-
-
-
-
-
-```ts
-import { getED25519Key } from "@web3auth/base-provider";
-
-const app_scoped_privkey = await web3auth.provider?.request({
- // focus-next-line
- method: "solanaPrivateKey",
-});
-
-const ed25519Key = getED25519Key(Buffer.from(app_scoped_privkey.padStart(64, "0"), "hex"));
-const app_pub_key = ed25519Key.pk.toString("hex");
-```
-
-
-
-
-
-```ts
-/* Assuming the user is logged in, get the userInfo containing idToken */
-const user = await web3auth.getUserInfo();
-
-/*
-OR
-const token = await web3auth.authenticateUser();
- */
-
-// Verify idToken at your backend server
-const res = await fetch("/api/verify", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- Authorization: "Bearer " + user.idToken, // or token.idToken
- },
- body: JSON.stringify({ appPubKey: app_pub_key }),
-});
-```
-
-### Verifying `idToken`
-
-Verify the JWT Token(`idToken`) on the backend and match the `app_pub_key` obtained from the
-frontend.
-
-:::info JWKS endpoints by Web3Auth
-
-Please note that the JWKS endpoint for the External wallets **_is different_** from the Social
-logins.
-
-- JWKS Endpoint for External Wallets:
- [`https://authjs.web3auth.io/jwks`](https://authjs.web3auth.io/jwks)
-- **JWKS Endpoint for Social Logins**:
- [`https://api-auth.web3auth.io/jwks`](https://api-auth.web3auth.io/jwks)
- `<---Use this for social logins`
-
-:::
-
-```javascript
-import * as jose from "jose"
-
-// idToken passed from the frontend in the Authorization header
-const idToken = req.headers.authorization?.split(' ')[1];
-
-// app_pub_key passed from the frontend in the request body
-const app_pub_key = req.body.appPubKey;
-
-// Get the JWKS used to sign the JWT issued by Web3Auth
-// focus-next-line
-const jwks = jose.createRemoteJWKSet(new URL("https://api-auth.web3auth.io/jwks")); // for social logins
-
-// Verify the JWT using Web3Auth's JWKS
-const jwtDecoded = await jose.jwtVerify(idToken, jwks, { algorithms: ["ES256"] });
-
-// Checking `app_pub_key` against the decoded JWT wallet's public_key
-// focus-next-line
-// use type === web3auth_threshold_key when working with CoreKitKey
-if ((jwtDecoded.payload as any).wallets.find((x: { type: string }) => x.type === "web3auth_app_key").public_key.toLowerCase() === app_pub_key.toLowerCase()) {
- // Verified
- res.status(200).json({name: 'Verification Successful'})
-} else {
- res.status(400).json({name: 'Verification Failed'})
-}
-```
-
-## External Wallet Verification
-
-To verify the JWT Token(`idToken`) you need the wallet `address` and the `idToken` obtained from the
-`authenticateUser()` function in your frontend.
-
-### Getting `address` and `idToken`
-
-Get the `address` and `idToken` in the frontend of your application.
-
-```typescript
-// Get user's Ethereum public address
-const address = (await web3.eth.getAccounts())[0];
-// Get user's Solana public address
-const address = await solanaWallet.requestAccounts();
-
-// For other chains, please refer to https://web3auth.io/docs/connect-blockchain/
-
-/* Assuming user is logged in, get the token containtaing idToken */
-const token = await web3auth.authenticateUser();
-
-// Verify idToken at your backend server
-const res = await fetch("/api/verify", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- Authorization: "Bearer " + token.idToken,
- },
- body: JSON.stringify({ public_address: address }),
-});
-```
-
-### Verifying `idToken`
-
-Verify the JWT Token(`idToken`) on the backend and match the `public_address` obtained from the
-frontend.
-
-:::info JWKS endpoints by Web3Auth
-
-Please note that the JWKS endpoint for the External wallets **_is different_** from the Social
-logins.
-
-- **JWKS Endpoint for External Wallets**:
- [`https://authjs.web3auth.io/jwks`](https://authjs.web3auth.io/jwks)
- `<---Use this for external wallets`
-- JWKS Endpoint for Social Logins:
- [`https://api-auth.web3auth.io/jwks`](https://api-auth.web3auth.io/jwks)
-
-:::
-
-```javascript
-import * as jose from "jose"
-
-// passed from the frontend in the Authorization header
-const idToken = req.headers.authorization?.split(' ')[1];
-
-// passed from the frontend in the request body
-const publicAddress = req.body.public_address;
-
-// Get the JWK set used to sign the JWT issued by Web3Auth
-// focus-next-line
-const jwks = jose.createRemoteJWKSet(new URL("https://authjs.web3auth.io/jwks"));
-
-// Verify the JWT using Web3Auth's JWKS
-const jwtDecoded = await jose.jwtVerify(idToken, jwks, { algorithms: ["ES256"] });
-
-// Incase of Non-Torus Users
-// Checking Wallet's `publicAddress` against the decoded JWT wallet's address
-// focus-next-line
-// use type === ethereum for Ethereum wallets, solana for Solana wallets, default is ethereum
-if((jwtDecoded.payload as any).wallets.find((x: { type: string }) => x.type === "ethereum").address.toLowerCase() === publicAddress.toLowerCase()) {
- // Verified
- res.status(200).json({name: 'Verification Successful'})
-} else {
- res.status(400).json({name: 'Verification Failed'})
-}
-```
-
-## Things to Remember
-
-1. **Use the Correct JWKS Endpoint**: Always ensure that you are using the correct JWKS endpoint
- corresponding to the user’s login method (social login vs. external wallet). This will prevent
- verification failures.
-2. **Understand the JWT Structure**: Familiarize yourself with the differences in JWT payloads
- between social logins and external wallets. Ensure your backend logic can handle these
- differences correctly.
-3. **Verify the Key Curve**: Double-check that your backend is configured to handle the specific key
- curve used by Web3Auth (either secp256k1 or ed25519). This will prevent verification errors and
- improve security.
-4. **Handle Expired Tokens**: Implement proper checks for the exp claim to ensure tokens are not
- used beyond their expiration. Consider adding custom logic to refresh tokens when necessary.
-5. **Match the Audience**: Verify that the aud claim in the JWT matches the expected audience on
- your backend. This ensures that the JWT is intended for your application and prevents potential
- misuse.
-
-By following these, you can ensure a smoother integration and reduce the likelihood of errors during
-server-side verification with Web3Auth. Still have questions? Feel free to reach out to our
-[Community Forum](https://web3auth.io/community) for further assistance.
diff --git a/docs/features/session-management.mdx b/docs/features/session-management.mdx
index 8eba2b8fa..468be01f3 100644
--- a/docs/features/session-management.mdx
+++ b/docs/features/session-management.mdx
@@ -1,6 +1,6 @@
---
title: Session Management
-
+sidebar_label: Session Management
description: "Session Management | Documentation - Web3Auth"
---
diff --git a/docs/features/smart-accounts.mdx b/docs/features/smart-accounts.mdx
new file mode 100644
index 000000000..c1c598f35
--- /dev/null
+++ b/docs/features/smart-accounts.mdx
@@ -0,0 +1,52 @@
+---
+title: Web3Auth's Native Smart Accounts
+sidebar_label: Smart Accounts
+description: "Smart Accounts | Documentation - Web3Auth"
+---
+
+Create and manage smart accounts for your users with just a few lines of code, using Web3Auth’s
+native smart accounts. With smart accounts, you can offer enhanced control and programmability, such
+as these listed below:
+
+- **Gas Sponsorship:** Cover transaction fees, or allow users to pay for their own transactions
+ using ERC-20 tokens.
+
+- **Batch Transactions:** Perform multiple transactions in a single call.
+
+- **Automated Transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH
+ hits $4,000.
+
+- **Set Spending Limits:** Allow users to set tailored spending limits.
+
+:::note
+
+Find out more about
+[Account Abstraction (ERC 4337)](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337)
+and how it works.
+
+:::
+
+## Getting Started
+
+Our native smart accounts powered by Account Abstraction (AA) simplifies setup, enabling you to
+create and manage smart accounts effortlessly with popular libraries like Viem, Ethers, and Web3.js
+—no need for third-party packages to achieve ERC-4337 compatibility. We are working closely with
+different partners in the account abstraction ecosystem and will provide support for evolving
+standards like EIP-7702, ERC-7579 (Modular Accounts), and ERC-7555 (account discovery) as they get
+finalized.
+
+:::note
+
+Getting started is easy; you just have to select your preferred smart account provider, configure
+your bundler client, and integrate your paymaster. [See this link for the steps.](/sdk/web/react)
+
+:::
+
+:::tip
+
+For a quick configuration tailored to your needs, explore our detailed guides:
+
+- [Guide to Sending Gasless Transactions](/guides/sending-gasless-transaction)
+- [Guide to Sending Transactions with an ERC-20 Paymaster](/guides/erc20-paymaster)
+
+:::
diff --git a/docs/features/topup.mdx b/docs/features/topup.mdx
index 3eed59b6f..24253269f 100644
--- a/docs/features/topup.mdx
+++ b/docs/features/topup.mdx
@@ -1,6 +1,6 @@
---
title: Fiat On Ramp Aggregator
-
+sidebar_label: Fiat On Ramp Aggregator
description: "Fiat On Ramp Aggregator | Documentation - Web3Auth"
---
@@ -47,7 +47,7 @@ To integrate in your dapp, visit the Top up Wallet page and setup the configurat
application.
- [PnP Modal SDK](/sdk/pnp/web/modal/initiate-topup)
-- [PnP No Modal SDK](/sdk/pnp/web/no-modal/initiate-topup)
+- [PnP No Modal SDK](/sdk/web/react/#advanced-configuration)
:::
diff --git a/docs/features/wallet-pregeneration.mdx b/docs/features/wallet-pregeneration.mdx
index 5a7986339..24761ce8f 100644
--- a/docs/features/wallet-pregeneration.mdx
+++ b/docs/features/wallet-pregeneration.mdx
@@ -1,6 +1,6 @@
---
title: Wallet Pregeneration
-
+sidebar_label: Wallet Pregeneration
description: "Wallet Pregeneration | Documentation - Web3Auth"
---
@@ -47,7 +47,7 @@ environment is the **Scale Plan**.
This API only returns the Core Kit Key wallet addresses. To use the wallet addresses with the
Web3Auth SDKs, you will need to either use the `useCoreKitKey` flag in our PnP SDKs or use any of
-our Single Factor Auth SDKs
+our Single Factor Auth Mobile SDKs
Learn more about how
[keys can change within different Web3Auth Products](/docs/troubleshooting/different-private-key#product)
diff --git a/docs/features/wallet-ui.mdx b/docs/features/wallet-ui.mdx
index 558b948c0..230dfa5b3 100644
--- a/docs/features/wallet-ui.mdx
+++ b/docs/features/wallet-ui.mdx
@@ -1,6 +1,6 @@
---
title: Embedded Wallet UI
-
+sidebar_label: Embedded Wallet UI
description: "Embedded Wallet UI | Documentation - Web3Auth"
---
@@ -48,10 +48,10 @@ To integrate in your dapp, visit the Wallet Services section and setup the confi
application.
- [PnP Web SDKs](/sdk/pnp/web/wallet-services/)
-- [PnP Android SDK](/sdk/pnp/android/usage#launch-wallet-services)
-- [PnP iOS SDK](/sdk/pnp/ios/usage#launch-wallet-services)
-- [PnP React Native SDK](/sdk/pnp/react-native/usage#launching-wallet-services-ui)
-- [PnP Flutter SDK](/sdk/pnp/flutter/usage#launch-wallet-services)
+- [PnP Android SDK](/sdk/mobile/pnp/android/usage#launch-wallet-services)
+- [PnP iOS SDK](/sdk/mobile/pnp/ios/usage#launch-wallet-services)
+- [PnP React Native SDK](/sdk/mobile/pnp/react-native/usage#launching-wallet-services-ui)
+- [PnP Flutter SDK](/sdk/mobile/pnp/flutter/usage#launch-wallet-services)
- [PnP Unity SDK](/sdk/pnp/unity/usage#launch-wallet-services)
:::
diff --git a/docs/how-web3auth-works.mdx b/docs/how-web3auth-works.mdx
index bc322e8cf..d80be5ffa 100644
--- a/docs/how-web3auth-works.mdx
+++ b/docs/how-web3auth-works.mdx
@@ -1,7 +1,7 @@
---
title: How Web3Auth Works?
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: How Web3Auth Works?
description: "How Web3Auth Works? | Documentation - Web3Auth"
---
diff --git a/docs/infrastructure/nodes-and-dkg.mdx b/docs/infrastructure/nodes-and-dkg.mdx
index 4eb54760d..701a54171 100644
--- a/docs/infrastructure/nodes-and-dkg.mdx
+++ b/docs/infrastructure/nodes-and-dkg.mdx
@@ -1,6 +1,6 @@
---
title: Nodes and DKG
-
+sidebar_label: Nodes and DKG
description: "DKG Nodes in Wallet Management | Documentation - Web3Auth"
---
diff --git a/docs/infrastructure/sss-architecture.mdx b/docs/infrastructure/sss-architecture.mdx
index 1171a17b7..f9118cf8c 100644
--- a/docs/infrastructure/sss-architecture.mdx
+++ b/docs/infrastructure/sss-architecture.mdx
@@ -11,7 +11,7 @@ import KeyReconstructionFlow from "@site/static/images/key-reconstruction-sss-fl
import SSSArchitectureFlow from "@site/static/images/sss-architecture-flow.png";
This document provides an in-depth exploration of the technical architecture of the Shamir's Secret
-Sharing(SSS)-based SDKs, this includes the current Plug and Play & Single Factor Auth SDKs.
+Sharing(SSS)-based SDKs, this includes the current Plug and Play & Single Factor Auth Mobile SDKs.
Shamir's Secret Sharing is a base form of MPC that splits a secret into $n$ shares, of which
threshold $t$ are required to reconstruct the secret. You maybe looking for the
diff --git a/docs/legal/cookie-policy.mdx b/docs/legal/cookie-policy.mdx
index 59923fdfb..57a1aed75 100644
--- a/docs/legal/cookie-policy.mdx
+++ b/docs/legal/cookie-policy.mdx
@@ -1,47 +1,57 @@
---
title: Cookie Policy
description: "Cookie Policy | Documentation - Web3Auth"
+sidebar_label: Cookie Policy
---
Latest update: 2 June 2023
-This cookie policy is only applicable to Torus website (https://tor.us) and Web3Auth's website (https://web3auth.io) not Torus wallet
-(https://app.tor.us). The Torus wallet does not use any cookies.
+This cookie policy is only applicable to Torus website (https://tor.us) and Web3Auth's website
+(https://web3auth.io) not Torus wallet (https://app.tor.us). The Torus wallet does not use any
+cookies.
-Cookies consist of portions of code installed in the browser that assist the Owner in providing the Service according to the purposes described. Some
-of the purposes for which Cookies are installed may also require the User's consent.
+Cookies consist of portions of code installed in the browser that assist the Owner in providing the
+Service according to the purposes described. Some of the purposes for which Cookies are installed
+may also require the User's consent.
-Where the installation of Cookies is based on consent, such consent can be freely withdrawn at any time following the instructions provided in this
-document.
+Where the installation of Cookies is based on consent, such consent can be freely withdrawn at any
+time following the instructions provided in this document.
## Technical Cookies and Cookies Serving Aggregated Statistical Purposes
### Activity Strictly Necessary for the Functioning of the Service
-Torus Labs uses Cookies to save the User's session and to carry out other activities that are strictly necessary for the operation of Torus Labs, for
-example in relation to the distribution of traffic.
+Torus Labs uses Cookies to save the User's session and to carry out other activities that are
+strictly necessary for the operation of Torus Labs, for example in relation to the distribution of
+traffic.
### Activity Regarding the Saving of Preferences, Optimization, and Statistics
-Torus Labs uses Cookies to save browsing preferences and to optimize the User's browsing experience. Among these Cookies are, for example, those used
-for the setting of language and currency preferences or for the management of first party statistics employed directly by the Owner of the site.
+Torus Labs uses Cookies to save browsing preferences and to optimize the User's browsing experience.
+Among these Cookies are, for example, those used for the setting of language and currency
+preferences or for the management of first party statistics employed directly by the Owner of the
+site.
## Other types of Cookies or Third Parties that Install Cookies
-Some of the services listed below collect statistics in an anonymized and aggregated form and may not require the consent of the User or may be
-managed directly by the Owner - depending on how they are described - without the help of third parties.
+Some of the services listed below collect statistics in an anonymized and aggregated form and may
+not require the consent of the User or may be managed directly by the Owner - depending on how they
+are described - without the help of third parties.
-If any third party operated services are listed among the tools below, these may be used to track Users’ browsing habits – in addition to the
-information specified herein and without the Owner’s knowledge. Please refer to the privacy policy of the listed services for detailed information.
+If any third party operated services are listed among the tools below, these may be used to track
+Users’ browsing habits – in addition to the information specified herein and without the Owner’s
+knowledge. Please refer to the privacy policy of the listed services for detailed information.
### Analytics
-The services contained in this section enable the Owner to monitor and analyze web traffic and can be used to keep track of User behavior.
+The services contained in this section enable the Owner to monitor and analyze web traffic and can
+be used to keep track of User behavior.
**Google Analytics \(Google LLC\)**
-Google Analytics is a web analysis service provided by Google LLC \(“Google”\). Google utilizes the Data collected to track and examine the use of
-Torus Labs, to prepare reports on its activities and share them with other Google services. Google may use the Data collected to contextualize and
+Google Analytics is a web analysis service provided by Google LLC \(“Google”\). Google utilizes the
+Data collected to track and examine the use of Torus Labs, to prepare reports on its activities and
+share them with other Google services. Google may use the Data collected to contextualize and
personalize the ads of its own advertising network.
Personal Data collected: Cookies and Usage Data.
@@ -51,21 +61,25 @@ Place of processing: United States – [Privacy Policy](https://policies.google.
### Displaying Content from External Platforms
-This type of service allows you to view content hosted on external platforms directly from the pages of Torus Labs and interact with them. This type
-of service might still collect web traffic data for the pages where the service is installed, even when Users do not use it.
+This type of service allows you to view content hosted on external platforms directly from the pages
+of Torus Labs and interact with them. This type of service might still collect web traffic data for
+the pages where the service is installed, even when Users do not use it.
**YouTube Video Widget \(Google LLC\)**
-YouTube is a video content visualization service provided by Google LLC that allows Torus Labs to incorporate content of this kind on its pages.
+YouTube is a video content visualization service provided by Google LLC that allows Torus Labs to
+incorporate content of this kind on its pages.
Personal Data collected: Cookies and Usage Data.
-Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy Shield participant.
+Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy
+Shield participant.
### Tag Management
-This type of service helps the Owner to manage the tags or scripts needed on Torus Labs in a centralized fashion. This results in the Users' Data
-flowing through these services, potentially resulting in the retention of this Data.
+This type of service helps the Owner to manage the tags or scripts needed on Torus Labs in a
+centralized fashion. This results in the Users' Data flowing through these services, potentially
+resulting in the retention of this Data.
**Google Tag Manager \(Google LLC\)**
@@ -73,44 +87,56 @@ Google Tag Manager is a tag management service provided by Google LLC.
Personal Data collected: Cookies and Usage Data.
-Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy Shield participant.
+Place of processing: United States – [Privacy Policy](https://policies.google.com/privacy). Privacy
+Shield participant.
### Traffic Optimization and Distribution
-This type of service allows Torus Labs to distribute their content using servers located across different countries and to optimize their performance.
-Which Personal Data are processed depends on the characteristics and the way these services are implemented. Their function is to filter
-communications between Torus Labs and the User's browser. Considering the widespread distribution of this system, it is difficult to determine the
-locations to which the contents that may contain Personal Information User are transferred.
+This type of service allows Torus Labs to distribute their content using servers located across
+different countries and to optimize their performance. Which Personal Data are processed depends on
+the characteristics and the way these services are implemented. Their function is to filter
+communications between Torus Labs and the User's browser. Considering the widespread distribution of
+this system, it is difficult to determine the locations to which the contents that may contain
+Personal Information User are transferred.
**Cloudflare \(Cloudflare Inc.\)**
-Cloudflare is a traffic optimization and distribution service provided by Cloudflare Inc. The way Cloudflare is integrated means that it filters all
-the traffic through Torus Labs, i.e., communication between Torus Labs and the User's browser, while also allowing analytical data from Torus Labs to
-be collected.
+Cloudflare is a traffic optimization and distribution service provided by Cloudflare Inc. The way
+Cloudflare is integrated means that it filters all the traffic through Torus Labs, i.e.,
+communication between Torus Labs and the User's browser, while also allowing analytical data from
+Torus Labs to be collected.
-Personal Data collected: Cookies and various types of Data as specified in the privacy policy of the service.
+Personal Data collected: Cookies and various types of Data as specified in the privacy policy of the
+service.
Place of processing: United States – [Privacy Policy](https://www.cloudflare.com/privacypolicy/).
## How to Provide or Withdraw Consent to the Installation of Cookies
-In addition to what is specified in this document, the User can manage preferences for Cookies directly from within their own browser and prevent –
-for example – third parties from installing Cookies. Through browser preferences, it is also possible to delete Cookies installed in the past,
-including the Cookies that may have saved the initial consent for the installation of Cookies by this website. Users can, for example, find
-information about how to manage Cookies in the most commonly used browsers at the following addresses:
+In addition to what is specified in this document, the User can manage preferences for Cookies
+directly from within their own browser and prevent – for example – third parties from installing
+Cookies. Through browser preferences, it is also possible to delete Cookies installed in the past,
+including the Cookies that may have saved the initial consent for the installation of Cookies by
+this website. Users can, for example, find information about how to manage Cookies in the most
+commonly used browsers at the following addresses:
[Google Chrome](https://support.google.com/chrome/answer/95647?hl=en&p=cpn_cookies),
[Mozilla Firefox](https://support.mozilla.org/en-US/kb/enable-and-disable-cookies-website-preferences),
-[Apple Safari](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/) and
+[Apple Safari](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/)
+and
[Microsoft Internet Explorer](http://windows.microsoft.com/en-us/windows-vista/block-or-allow-cookies).
-With regard to Cookies installed by third parties, Users can manage their preferences and withdraw of their consent by clicking the related opt-out
-link \(if provided\), by using the means provided in the third party's privacy policy, or by contacting the third party.
-
-Notwithstanding the above, the Owner informs that Users may follow the instructions provided on the subsequently linked initiatives by the
-[EDAA](http://www.youronlinechoices.eu/) \(EU\), the [Network Advertising Initiative](https://thenai.org/) \(US\) and the
-[Digital Advertising Alliance](#) \(US\), [DAAC](https://youradchoices.ca/en/learn) \(Canada\), [DDAI](http://www.ddai.info/optout) \(Japan\) or other
-similar services. Such initiatives allow Users to select their tracking preferences for most of the advertising tools. The Owner thus recommends that
-Users make use of these resources in addition to the information provided in this document.
+With regard to Cookies installed by third parties, Users can manage their preferences and withdraw
+of their consent by clicking the related opt-out link \(if provided\), by using the means provided
+in the third party's privacy policy, or by contacting the third party.
+
+Notwithstanding the above, the Owner informs that Users may follow the instructions provided on the
+subsequently linked initiatives by the [EDAA](http://www.youronlinechoices.eu/) \(EU\), the
+[Network Advertising Initiative](https://thenai.org/) \(US\) and the
+[Digital Advertising Alliance](#) \(US\), [DAAC](https://youradchoices.ca/en/learn) \(Canada\),
+[DDAI](http://www.ddai.info/optout) \(Japan\) or other similar services. Such initiatives allow
+Users to select their tracking preferences for most of the advertising tools. The Owner thus
+recommends that Users make use of these resources in addition to the information provided in this
+document.
## Owner and Data Controller
@@ -118,28 +144,35 @@ Torus Labs Private Limited 60 Paya Lebar Road, \#04-46, Paya Lebar Square, Singa
**Owner Contact Email:** hello@tor.us
-Since the installation of third-party Cookies and other tracking systems through the services used within Torus Labs cannot be technically controlled
-by the Owner, any specific references to Cookies and tracking systems installed by third parties are to be considered indicative. In order to obtain
-complete information, the User is kindly requested to consult the privacy policy for the respective third-party services listed in this document.
+Since the installation of third-party Cookies and other tracking systems through the services used
+within Torus Labs cannot be technically controlled by the Owner, any specific references to Cookies
+and tracking systems installed by third parties are to be considered indicative. In order to obtain
+complete information, the User is kindly requested to consult the privacy policy for the respective
+third-party services listed in this document.
-Given the objective complexity surrounding the identification of technologies based on Cookies, Users are encouraged to contact the Owner should they
-wish to receive any further information on the use of Cookies by Torus Labs.
+Given the objective complexity surrounding the identification of technologies based on Cookies,
+Users are encouraged to contact the Owner should they wish to receive any further information on the
+use of Cookies by Torus Labs.
## Definitions and Legal References
**Personal Data \(or Data\)**
-Any information that directly, indirectly, or in connection with other information — including a personal identification number — allows for the
-identification or identifiability of a natural person.
+Any information that directly, indirectly, or in connection with other information — including a
+personal identification number — allows for the identification or identifiability of a natural
+person.
**Usage Data**
-Information collected automatically through Torus Labs \(or third-party services employed in Torus Labs\), which can include: the IP addresses or
-domain names of the computers utilized by the Users who use Torus Labs, the URI addresses \(Uniform Resource Identifier\), the time of the request,
-the method utilized to submit the request to the server, the size of the file received in response, the numerical code indicating the status of the
-server's answer \(successful outcome, error, etc.\), the country of origin, the features of the browser and the operating system utilized by the User,
-the various time details per visit \(e.g., the time spent on each page within the Application\) and the details about the path followed within the
-Application with special reference to the sequence of pages visited, and other parameters about the device operating system and/or the User's IT
+Information collected automatically through Torus Labs \(or third-party services employed in Torus
+Labs\), which can include: the IP addresses or domain names of the computers utilized by the Users
+who use Torus Labs, the URI addresses \(Uniform Resource Identifier\), the time of the request, the
+method utilized to submit the request to the server, the size of the file received in response, the
+numerical code indicating the status of the server's answer \(successful outcome, error, etc.\), the
+country of origin, the features of the browser and the operating system utilized by the User, the
+various time details per visit \(e.g., the time spent on each page within the Application\) and the
+details about the path followed within the Application with special reference to the sequence of
+pages visited, and other parameters about the device operating system and/or the User's IT
environment.
**User**
@@ -152,13 +185,14 @@ The natural person to whom the Personal Data refers.
**Data Processor \(or Data Supervisor\)**
-The natural or legal person, public authority, agency or other body which processes Personal Data on behalf of the Controller, as described in this
-privacy policy.
+The natural or legal person, public authority, agency or other body which processes Personal Data on
+behalf of the Controller, as described in this privacy policy.
**Data Controller \(or Owner\)**
-The natural or legal person, public authority, agency or other body which, alone or jointly with others, determines the purposes and means of the
-processing of Personal Data, including the security measures concerning the operation and use of Torus Labs. The Data Controller, unless otherwise
+The natural or legal person, public authority, agency or other body which, alone or jointly with
+others, determines the purposes and means of the processing of Personal Data, including the security
+measures concerning the operation and use of Torus Labs. The Data Controller, unless otherwise
specified, is the Owner of Torus Labs.
**Torus Labs \(or this Application\)**
@@ -167,12 +201,13 @@ The means by which the Personal Data of the User is collected and processed.
**Service**
-The service provided by Torus Labs as described in the relative terms \(if available\) and on this site/application.
+The service provided by Torus Labs as described in the relative terms \(if available\) and on this
+site/application.
**European Union \(or EU\)**
-Unless otherwise specified, all references made within this document to the European Union include all current member states to the European Union and
-the European Economic Area.
+Unless otherwise specified, all references made within this document to the European Union include
+all current member states to the European Union and the European Economic Area.
**Cookies**
@@ -180,7 +215,7 @@ Small sets of data stored in the User's device.
**Legal information**
-This privacy statement has been prepared based on provisions of multiple legislations, including Art. 13/14 of Regulation \(EU\) 2016/679 \(General
-Data Protection Regulation\).
+This privacy statement has been prepared based on provisions of multiple legislations, including
+Art. 13/14 of Regulation \(EU\) 2016/679 \(General Data Protection Regulation\).
This privacy policy relates solely to Torus Labs, if not stated otherwise within this document.
diff --git a/docs/legal/privacy-policy.mdx b/docs/legal/privacy-policy.mdx
index 885d77f74..bce6aad2e 100644
--- a/docs/legal/privacy-policy.mdx
+++ b/docs/legal/privacy-policy.mdx
@@ -1,6 +1,7 @@
---
title: Privacy Policy
description: "Privacy Policy | Documentation - Web3Auth"
+sidebar_label: Privacy Policy
---
Latest update: **9 December 2024**
diff --git a/docs/legal/terms-and-conditions.mdx b/docs/legal/terms-and-conditions.mdx
index 121c2aae2..962c8d96b 100644
--- a/docs/legal/terms-and-conditions.mdx
+++ b/docs/legal/terms-and-conditions.mdx
@@ -1,6 +1,7 @@
---
title: Terms and Conditions
description: "Terms and Conditions | Documentation - Web3Auth"
+sidebar_label: Terms and Conditions
---
Latest update: 28 April 2025
diff --git a/docs/migration-guides/modal-v7-to-v8.mdx b/docs/migration-guides/modal-v7-to-v8.mdx
index 0accf6963..b21b08b7c 100644
--- a/docs/migration-guides/modal-v7-to-v8.mdx
+++ b/docs/migration-guides/modal-v7-to-v8.mdx
@@ -45,8 +45,8 @@ introduced which can be used to define whether the network is testnet or not.
:::note
From v8, parameters apart from `chainId`, `rpcTarget`, and `chainNamespace` are now optional. Please
-note, while using [Wallet Services](/docs/sdk/pnp/web/wallet-services) you have to also pass the
-optional parameters.
+note, while using [Wallet Services](/docs/sdk/web/react) you have to also pass the optional
+parameters.
:::
diff --git a/docs/migration-guides/rn-v3-to-v4.mdx b/docs/migration-guides/rn-v3-to-v4.mdx
index 210a012df..40776d8eb 100644
--- a/docs/migration-guides/rn-v3-to-v4.mdx
+++ b/docs/migration-guides/rn-v3-to-v4.mdx
@@ -1,6 +1,6 @@
---
title: PnP React Native - v3 to v4
-
+sidebar_label: PnP React Native - v3 to v4
description: "PnP React Native SDK - v3 to v4 | Documentation - Web3Auth"
---
diff --git a/docs/migration-guides/rn-v4-to-v5.mdx b/docs/migration-guides/rn-v4-to-v5.mdx
index 9f6f3b7ad..b3d4637d6 100644
--- a/docs/migration-guides/rn-v4-to-v5.mdx
+++ b/docs/migration-guides/rn-v4-to-v5.mdx
@@ -1,6 +1,6 @@
---
title: PnP React Native - v4 to v5
-
+sidebar_label: PnP React Native - v4 to v5
description: "PnP React Native SDK - v4 to v5 | Documentation - Web3Auth"
---
@@ -20,8 +20,8 @@ import Tabs from "@theme/Tabs";
- Other than the above modifications, new parameters have been added to the `WhiteLabelData` object,
like, `appUrl`, `useLogoLoader`, `tncLink` and `privacyPolicy`.
-Please look at the [whitelabel](/sdk/pnp/react-native/whitelabel) section for `WhiteLabelData`
-interface.
+Please look at the [whitelabel](/sdk/mobile/pnp/react-native/whitelabel) section for
+`WhiteLabelData` interface.
Fully Customisable UI/UX | ❌ Single Click Login (No flows needed) | ❌ |
-| **Custom UI/UX** | ❌ | ✅ Single Click Login (No flows needed) | ✅ Infrastructure SDK, ability to build your own flows |
+| **Custom UI/UX** | ✅ Only in Web | ✅ Single Click Login (No flows needed) | ✅ Infrastructure SDK, ability to build your own flows |
| **Built-in Key Recovery Flows** | ✅ | ✅ Only 1 Factor Needed | ❌ |
| **Non-Custodial** | ✅ | ❗️ Semi Custodial | ✅ |
| **Out-of-box Authentication** | ✅ | ❌ | ❌ |
@@ -81,7 +82,7 @@ your project requirements and find out which Web3Auth product is the best fit fo
| Platform | Plug and Play | Single Factor Auth | MPC Core Kit |
| ---------------------- | ------------- | ------------------ | ------------ |
-| **Web** | ✅ | ✅ | ✅ |
+| **Web** | ✅ | ❌ | ✅ |
| **React Native** | ✅ | ✅ | ✅ |
| **Flutter** | ✅ | ✅ | ❌ |
| **Native iOS** | ✅ | ✅ | ✅ |
diff --git a/docs/product/mpc-core-kit.mdx b/docs/product/mpc-core-kit.mdx
index 06911c58d..fb04cf4cb 100644
--- a/docs/product/mpc-core-kit.mdx
+++ b/docs/product/mpc-core-kit.mdx
@@ -1,11 +1,12 @@
---
title: MPC Core Kit
+sidebar_label: MPC Core Kit
description: "MPC Core Kit | Documentation - Web3Auth"
---
import KeyManagementDark from "@site/static/images/key-management-dark.png";
import KeyManagementLight from "@site/static/images/key-management-light.png";
-import { MPCCards } from "@site/src/components/SDKReferenceCards";
+import { mpccorekit } from "@site/src/components/SDKReferenceCards";
The MPC Core Kit is designed for applications that need advanced security and complete control over
their authentication flows. It provides the necessary tools and flexibility to build sophisticated
@@ -65,4 +66,4 @@ To learn more about MPC Core Kit architecture, visit
## Get Started with MPC Core Kit SDKs
-
+{mpccorekit}
diff --git a/docs/product/pnp.mdx b/docs/product/pnp.mdx
index be83be96d..08e792a07 100644
--- a/docs/product/pnp.mdx
+++ b/docs/product/pnp.mdx
@@ -6,7 +6,7 @@ description: "Plug and Play | Documentation - Web3Auth"
---
import Web3AuthWorking from "@site/static/guides/web3auth-pnp-working.png";
-import { PnPCards } from "@site/src/components/SDKReferenceCards";
+import { pnpweb, pnpmobile, pnpgaming } from "@site/src/components/SDKReferenceCards";
With Web3Auth's Plug-and-Play (PnP) integration, you can provide a fully-featured, secure embedded
wallet into your app in just 4 lines of code! Simply initialize the SDK, configure your settings,
@@ -21,13 +21,13 @@ Checkout our [Demo](https://demo.web3auth.io) to see it in action.
## How Plug and Play Works
-Here's a visual representation of the high-level flow:
+Below is a simplified overview of the Plug and Play authentication flow for you users:
-1. Users lands on your dApp
-2. User initiates login (via Web3Auth Modal)
-3. User logins using OAuth/ social login
-4. User authenticated (via auth.web3auth.io)
-5. User logins to your dapp (with application scoped key)
+1. Visit your dApp.
+2. Initiate login (using the Web3Auth Modal/ Custom UI).
+3. Authenticate via OAuth or social login.
+4. Complete any required 2FA setup.
+5. Log in to your dApp with an application-scoped key.
+{pnpweb} {pnpmobile} {pnpgaming}
diff --git a/docs/product/product.mdx b/docs/product/product.mdx
index e8754dbec..3a7f0200e 100644
--- a/docs/product/product.mdx
+++ b/docs/product/product.mdx
@@ -1,7 +1,7 @@
---
title: Explore our Products
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: Explore our Products
description: "Web3Auth Product Stack | Documentation - Web3Auth"
---
diff --git a/docs/product/sfa.mdx b/docs/product/sfa.mdx
index a3fd5ecfd..df3120a7c 100644
--- a/docs/product/sfa.mdx
+++ b/docs/product/sfa.mdx
@@ -1,12 +1,12 @@
---
-title: Single Factor Auth SDKs
+title: Single Factor Auth Mobile SDKs
sidebar_label: Single Factor Auth
description: "Single Factor Auth | Documentation - Web3Auth"
---
import SFAInfraDark from "@site/static/images/sfa-infra-dark.png";
import SFAInfraLight from "@site/static/images/sfa-infra-light.png";
-import { SFACards } from "@site/src/components/SDKReferenceCards";
+import { sfamobile } from "@site/src/components/SDKReferenceCards";
Single Factor Auth(SFA) provides the most seamless Web3 onboarding experience possible by making it
feel completely like Web2. Users can access your application with just one click through their
@@ -78,6 +78,6 @@ to full non-custodial security by activating Multi-Factor Authentication (MFA) w
- **WalletConnect Integration:** Enable seamless interoperability with the broader Web3 ecosystem
through native WalletConnect support.
-## Get Started with Single Factor Auth SDKs
+## Get Started with Single Factor Auth Mobile SDKs
-
+{sfamobile}
diff --git a/docs/sdk/gaming/gaming.mdx b/docs/sdk/gaming/gaming.mdx
new file mode 100644
index 000000000..c4bb950fa
--- /dev/null
+++ b/docs/sdk/gaming/gaming.mdx
@@ -0,0 +1,13 @@
+---
+title: Explore Web3Auth Gaming SDKs
+hide_table_of_contents: true
+sidebar_label: Gaming SDKs
+displayed_sidebar: sdk_pnp_unity
+image: "images/docs-meta-cards/sdk-reference-card.png"
+description: "Gaming SDKs | Documentation - Web3Auth"
+---
+
+import { pnpgaming } from "@site/src/components/SDKReferenceCards";
+import Tiles from "@theme/Tiles";
+
+{pnpgaming}
diff --git a/docs/sdk/gaming/unity/custom-authentication.mdx b/docs/sdk/gaming/unity/custom-authentication.mdx
new file mode 100644
index 000000000..e4c6feac7
--- /dev/null
+++ b/docs/sdk/gaming/unity/custom-authentication.mdx
@@ -0,0 +1,270 @@
+---
+title: Using Custom Authentication in PnP Unity SDK
+sidebar_label: Custom Authentication
+description: "Web3Auth PnP Unity SDK - Using Custom Authentication | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+## Overview
+
+Custom Authentication in the Web3Auth PnP Unity SDK allows you to authenticate users using your own
+custom authentication service or third-party providers like Google, Auth0, AWS Cognito, or Firebase.
+This guide will walk you through setting up custom authentication in your Unity project.
+
+## Prerequisites
+
+Before you start, ensure you have configured a custom verifier in the Web3Auth Dashboard. This
+verifier will be used to facilitate custom authentication.
+
+:::tip
+
+Check out how to create a **[Custom Verifier](/authentication)** on the Web3Auth Dashboard.
+
+:::
+
+:::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 **Growth Plan**. You can use this feature for free in the
+`sapphire_devnet`.
+
+:::
+
+## Single Verifier
+
+### Step 1: Configure the `LoginConfig`
+
+To use custom authentication with a single verifier, configure the `loginConfig` parameter of the
+`Web3AuthOptions` class. The `loginConfig` parameter is a key-value map where the key should be one
+of the `Web3AuthProvider` in its string form, and the value should be a `LoginConfigItem` struct
+instance.
+
+```csharp
+void Start()
+{
+ web3Auth = GetComponent();
+
+ var loginConfigItem = new LoginConfigItem()
+ {
+ verifier = "google-verifier", // Get this from the Web3Auth Dashboard
+ typeOfLogin = TypeOfLogin.GOOGLE,
+ clientId = "YOUR_GOOGLE_CLIENT_ID" // Google's client ID
+ };
+
+ web3Auth.setOptions(new Web3AuthOptions()
+ {
+ redirectUrl = new Uri("torusapp://com.torus.Web3AuthUnity/auth"),
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Web3Auth's client ID
+ network = Web3Auth.Network.TESTNET, // or other networks
+ loginConfig = new Dictionary
+ {
+ {"google", loginConfigItem}
+ }
+ });
+}
+```
+
+### Step 2: `LoginConfigItem` Object Structure
+
+The `LoginConfigItem` struct contains various parameters that define the behavior of the custom
+authentication process. Below are the details of the `LoginConfigItem` struct:
+
+| Parameter | Description |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `string` as a value. |
+| `typeOfLogin` | Type of login for this verifier. This value will affect the login flow. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should provide your own JWT token, and no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
+| `clientId` | Client ID provided by your login provider, e.g., Google's Client ID or Web3Auth's client ID if using `jwt` as `TypeOfLogin`. It's a mandatory field, and accepts `string` as a value. |
+| `name?` | Display name for the verifier. If null, the default name is used. It accepts `string` as a value. |
+| `description?` | Description for the button. If provided, it renders as a full-length button; otherwise, an icon button is shown. It accepts `string` as a value. |
+| `verifierSubIdentifier?` | The field in the JWT token that maps to the verifier ID. Ensure you selected the correct JWT verifier ID in the developer dashboard. It accepts `string` as a value. |
+| `logoHover?` | Logo to be shown on mouse hover. It accepts `string` as a value. |
+| `logoLight?` | Light logo for dark backgrounds. It accepts `string` as a value. |
+| `logoDark?` | Dark logo for light backgrounds. It accepts `string` as a value. |
+| `mainOption?` | Shows the login button on the main list. It accepts `bool` as a value. The default value is `false`. |
+| `showOnModal?` | Whether to show the login button on the modal. The default value is `true`. |
+| `showOnDesktop?` | Whether to show the login button on the desktop. The default value is `true`. |
+| `showOnMobile?` | Whether to show the login button on mobile. The default value is `true`. |
+
+### Step 3: `TypeOfLogin` Enum
+
+```csharp
+public enum TypeOfLogin
+{
+ [EnumMember(Value = "google")]
+ GOOGLE,
+ [EnumMember(Value = "facebook")]
+ FACEBOOK,
+ [EnumMember(Value = "reddit")]
+ REDDIT,
+ [EnumMember(Value = "discord")]
+ DISCORD,
+ [EnumMember(Value = "twitch")]
+ TWITCH,
+ [EnumMember(Value = "apple")]
+ APPLE,
+ [EnumMember(Value = "line")]
+ LINE,
+ [EnumMember(Value = "github")]
+ GITHUB,
+ [EnumMember(Value = "kakao")]
+ KAKAO,
+ [EnumMember(Value = "linkedin")]
+ LINKEDIN,
+ [EnumMember(Value = "twitter")]
+ TWITTER,
+ [EnumMember(Value = "weibo")]
+ WEIBO,
+ [EnumMember(Value = "wechat")]
+ WECHAT,
+ [EnumMember(Value = "email_passwordless")]
+ EMAIL_PASSWORDLESS,
+ [EnumMember(Value = "email_password")]
+ EMAIL_PASSWORD,
+ [EnumMember(Value = "jwt")]
+ JWT
+}
+```
+
+### Step 4: Example Implementations
+
+#### Using Google Login
+
+```csharp
+public void loginGoogle()
+{
+ var selectedProvider = Provider.GOOGLE;
+
+ var options = new LoginParams()
+ {
+ loginProvider = selectedProvider,
+ };
+
+ web3Auth.login(options);
+}
+```
+
+#### Using JWT Login (e.g., Auth0)
+
+```csharp
+public void loginJWT()
+{
+ var selectedProvider = Provider.JWT;
+
+ var options = new LoginParams()
+ {
+ loginProvider = selectedProvider,
+ extraLoginOptions = new ExtraLoginOptions()
+ {
+ domain = "https://example.auth0.com", // Auth0 domain
+ verifierIdField = "sub", // The field in JWT token mapping to verifier ID
+ id_token = "YOUR_JWT_ID_TOKEN" // JWT ID token
+ }
+ };
+
+ web3Auth.login(options);
+}
+```
+
+## Aggregate Verifier
+
+You can use an aggregate verifier to combine multiple login methods, allowing users to log in using
+different providers but receive the same address.
+
+### Step 1: Configure the `LoginConfig`
+
+To use aggregate verifiers, set up the `loginConfig` object with multiple providers under a single
+verifier.
+
+```csharp
+void Start()
+{
+ web3Auth = GetComponent();
+
+ var googleConfig = new LoginConfigItem()
+ {
+ verifier = "aggregate-sapphire",
+ verifierSubIdentifier = "google-sub-id",
+ clientId = "YOUR_GOOGLE_CLIENT_ID",
+ typeOfLogin = TypeOfLogin.GOOGLE,
+ };
+
+ var auth0GitHubConfig = new LoginConfigItem()
+ {
+ verifier = "aggregate-sapphire",
+ verifierSubIdentifier = "github-sub-id",
+ clientId = "YOUR_GITHUB_CLIENT_ID",
+ typeOfLogin = TypeOfLogin.JWT,
+ };
+
+ web3Auth.setOptions(new Web3AuthOptions()
+ {
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID",
+ redirectUrl = new System.Uri("w3aexample://com.web3auth.unityaggregateexample"),
+ network = Web3Auth.Network.SAPPHIRE_MAINNET,
+ loginConfig = new Dictionary
+ {
+ {"google", googleConfig},
+ {"github", auth0GitHubConfig}
+ }
+ });
+}
+```
+
+### Step 2: Example Implementations
+
+#### Using Google and GitHub Combined Login
+
+```csharp
+public void loginGoogle()
+{
+ var selectedProvider = Provider.GOOGLE;
+
+ var options = new LoginParams()
+ {
+ loginProvider = selectedProvider,
+ };
+
+ web3Auth.login(options);
+}
+
+public void loginGitHub()
+{
+ var selectedProvider = Provider.GITHUB;
+
+ var options = new LoginParams()
+ {
+ loginProvider = selectedProvider,
+ extraLoginOptions = new ExtraLoginOptions()
+ {
+ domain = "https://example.auth0.com",
+ verifierIdField = "email",
+ isVerifierIdCaseSensitive = false,
+ prompt = Prompt.LOGIN,
+ }
+ };
+
+ web3Auth.login(options);
+}
+```
+
+## Extra Login Options for Special Cases
+
+The `extraLoginOptions` parameter can be used to pass additional options required by specific login
+providers.
+
+| Parameter | Description |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `domain?` | Your custom authentication domain in `string` format. For example, if you are using Auth0, it can be `example.auth0.com`. |
+| `client_id?` | Client ID in `string` format, provided by your login provider and used for the custom verifier. |
+| `verifierIdField?` | The field in JWT token which maps to verifier ID. Ensure you select the correct JWT verifier ID in the developer dashboard. It takes a `string` as a value. |
+| `isVerifierIdCaseSensitive?` | Boolean to confirm whether the verifier ID field is case-sensitive or not. |
+| `prompt?` | Prompt shown to the user during the authentication process. It takes a `string` as a value. |
+| `id_token?` | JWT (ID Token) to be passed for login. |
+| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes a `string` as a value. |
+
+---
+
+This custom authentication page for the Web3Auth PnP Unity SDK mirrors the structure of the Android
+custom authentication page, with Unity-specific examples and code structures.
diff --git a/docs/sdk/pnp/unity/dapp-share.mdx b/docs/sdk/gaming/unity/dapp-share.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/dapp-share.mdx
rename to docs/sdk/gaming/unity/dapp-share.mdx
diff --git a/docs/sdk/pnp/unity/examples.mdx b/docs/sdk/gaming/unity/examples.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/examples.mdx
rename to docs/sdk/gaming/unity/examples.mdx
diff --git a/docs/sdk/pnp/unity/initialize.mdx b/docs/sdk/gaming/unity/initialize.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/initialize.mdx
rename to docs/sdk/gaming/unity/initialize.mdx
diff --git a/docs/sdk/pnp/unity/install.mdx b/docs/sdk/gaming/unity/install.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/install.mdx
rename to docs/sdk/gaming/unity/install.mdx
diff --git a/docs/sdk/pnp/unity/mfa.mdx b/docs/sdk/gaming/unity/mfa.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/mfa.mdx
rename to docs/sdk/gaming/unity/mfa.mdx
diff --git a/docs/sdk/pnp/unity/unity.mdx b/docs/sdk/gaming/unity/unity.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/unity.mdx
rename to docs/sdk/gaming/unity/unity.mdx
diff --git a/docs/sdk/pnp/unity/usage.mdx b/docs/sdk/gaming/unity/usage.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/usage.mdx
rename to docs/sdk/gaming/unity/usage.mdx
diff --git a/docs/sdk/pnp/unity/whitelabel.mdx b/docs/sdk/gaming/unity/whitelabel.mdx
similarity index 100%
rename from docs/sdk/pnp/unity/whitelabel.mdx
rename to docs/sdk/gaming/unity/whitelabel.mdx
diff --git a/docs/sdk/gaming/unreal/custom-authentication.mdx b/docs/sdk/gaming/unreal/custom-authentication.mdx
new file mode 100644
index 000000000..0253c185e
--- /dev/null
+++ b/docs/sdk/gaming/unreal/custom-authentication.mdx
@@ -0,0 +1,199 @@
+---
+title: Using Custom Authentication in PnP Unreal Engine SDK
+sidebar_label: Custom Authentication
+description:
+ "Web3Auth PnP Unreal Engine SDK - Using Custom Authentication | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Custom Authentication is a way to authenticate users with your own custom authentication service.
+For example, while authenticating with Google, you have the ability to use your own Google Client ID
+and Dashboard to authenticate users directly. To login using your own custom JWT issuers like Auth0,
+AWS Cognito, or Firebase, you can add the your configuration to the `loginConfig` field of the
+`Web3AuthOptions` class.
+
+The `loginConfig` field is a key value map. The key should be one of the `Web3AuthProvider` in its
+string form, and the value should be a `LoginConfigItem` struct instance.
+
+First, configure your own verifier in the Web3Auth Dashboard to use custom authentication.
+
+
+
+:::tip
+
+Check out how to create [Custom Verifier](/authentication) on Web3Auth Dashboard.
+
+:::
+
+Then, you should specify the details of your verifier in the `LoginConfigItem` struct, the details
+of this struct are as follows.
+
+## Arguments
+
+### `LoginConfigItem`
+
+
+
+
+
+| Parameter | Description |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `FString` as a value. |
+| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `FTypeOfLogin` as a value. |
+| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `FString` as a value. |
+| `name?` | Display name for the verifier. If null, the default name is used. It accepts `FString` as a value. |
+| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `FString` as a value. |
+| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `FString` as a value. |
+| `logoHover?` | Logo to be shown on mouse hover. It accepts `FString` as a value. |
+| `logoLight?` | Light logo for dark background. It accepts `FString` as a value. |
+| `logoDark?` | Dark logo for light background. It accepts `FString` as a value. |
+| `mainOption?` | Show login button on the main list. It accepts `bool` as a value. Default value is false. |
+| `showOnModal?` | Whether to show the login button on modal or not. Default value is true. |
+| `showOnDesktop?` | Whether to show the login button on desktop. Default value is true. |
+| `showOnMobile?` | Whether to show the login button on mobile. Default value is true. |
+
+
+
+
+
+```cs
+USTRUCT(BlueprintType)
+struct FLoginConfigItem
+{
+ GENERATED_BODY()
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString verifier;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString typeOfLogin;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString name;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString description;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString clientId;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString verifierSubIdentifier;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString logoHover;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString logoLight;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ FString logoDark;
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ bool mainOption;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ bool showOnModal;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ bool showOnDesktop;
+
+ UPROPERTY(EditAnywhere, BlueprintReadWrite)
+ bool showOnMobile;
+
+ FLoginConfigItem() {};
+
+ bool operator== (const FLoginConfigItem& other) {
+ return other.clientId == clientId;
+ }
+
+};
+```
+
+
+
+
+
+### `TypeOfLogin`
+
+```c
+UENUM(BlueprintType)
+enum class FTypeOfLogin : uint8
+{
+ GOOGLE,
+ FACEBOOK,
+ REDDIT,
+ DISCORD,
+ TWITCH,
+ APPLE,
+ LINE,
+ GITHUB,
+ KAKAO,
+ LINKEDIN,
+ TWITTER,
+ WEIBO,
+ WECHAT,
+ EMAIL_PASSWORDLESS,
+ EMAIL_PASSWORD,
+ JWT
+};
+```
+
+## Usage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+:::note
+
+- dApp Share is only returned for the Custom Authentication verifiers.
+- Also, 2FA should be enabled for the account using it.
+
+ Use `mfaLevel = MFALevel.MANDATORY` in the `LoginParams` during login. See
+ **[MFA](/sdk/pnp/unreal/mfa)** for more details.
+
+:::
diff --git a/docs/sdk/pnp/unreal/examples.mdx b/docs/sdk/gaming/unreal/examples.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/examples.mdx
rename to docs/sdk/gaming/unreal/examples.mdx
diff --git a/docs/sdk/pnp/unreal/initialize.mdx b/docs/sdk/gaming/unreal/initialize.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/initialize.mdx
rename to docs/sdk/gaming/unreal/initialize.mdx
diff --git a/docs/sdk/pnp/unreal/install.mdx b/docs/sdk/gaming/unreal/install.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/install.mdx
rename to docs/sdk/gaming/unreal/install.mdx
diff --git a/docs/sdk/pnp/unreal/mfa.mdx b/docs/sdk/gaming/unreal/mfa.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/mfa.mdx
rename to docs/sdk/gaming/unreal/mfa.mdx
diff --git a/docs/sdk/pnp/unreal/unreal.mdx b/docs/sdk/gaming/unreal/unreal.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/unreal.mdx
rename to docs/sdk/gaming/unreal/unreal.mdx
diff --git a/docs/sdk/pnp/unreal/usage.mdx b/docs/sdk/gaming/unreal/usage.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/usage.mdx
rename to docs/sdk/gaming/unreal/usage.mdx
diff --git a/docs/sdk/pnp/unreal/whitelabel.mdx b/docs/sdk/gaming/unreal/whitelabel.mdx
similarity index 100%
rename from docs/sdk/pnp/unreal/whitelabel.mdx
rename to docs/sdk/gaming/unreal/whitelabel.mdx
diff --git a/docs/sdk/mobile/mobile.mdx b/docs/sdk/mobile/mobile.mdx
new file mode 100644
index 000000000..35e9941c4
--- /dev/null
+++ b/docs/sdk/mobile/mobile.mdx
@@ -0,0 +1,13 @@
+---
+title: Explore Web3Auth Mobile SDKs
+hide_table_of_contents: true
+sidebar_label: Mobile SDKs
+displayed_sidebar: sdk_pnp_android
+image: "images/docs-meta-cards/sdk-reference-card.png"
+description: "Mobile SDKs | Documentation - Web3Auth"
+---
+
+import { pnpmobile, sfamobile } from "@site/src/components/SDKReferenceCards";
+import Tiles from "@theme/Tiles";
+
+{pnpmobile} {sfamobile}
diff --git a/docs/sdk/pnp/android/android.mdx b/docs/sdk/mobile/pnp/android/android.mdx
similarity index 100%
rename from docs/sdk/pnp/android/android.mdx
rename to docs/sdk/mobile/pnp/android/android.mdx
diff --git a/docs/sdk/mobile/pnp/android/custom-authentication.mdx b/docs/sdk/mobile/pnp/android/custom-authentication.mdx
new file mode 100644
index 000000000..f6d0d7abf
--- /dev/null
+++ b/docs/sdk/mobile/pnp/android/custom-authentication.mdx
@@ -0,0 +1,524 @@
+---
+title: Using Custom Authentication in PnP Android SDK
+sidebar_label: Custom Authentication
+description: "Web3Auth PnP Android SDK - Using Custom Authentication | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+import SMSPasswordless from "@site/src/common/sdk/pnp/android/_sms_passwordless.mdx";
+
+## Configuration
+
+To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
+Firebase etc. or even your own custom JWT login) you can add the configuration using `loginConfig`
+parameter during the initialization.
+
+The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in
+its string form, and the value should be a `LoginConfigItem` instance.
+
+To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
+Dashboard in "Custom Authentication" section.
+[Learn how to create a custom verifier](/authentication).
+
+:::tip Create Custom Verifier
+
+Learn how to create a [Custom Verifier](/authentication) on the Web3Auth Dashboard.
+
+:::
+
+
+
+### Parameters
+
+After creating the verifier, you can use the following parameters in the `LoginConfigItem`.
+
+
+
+
+
+| Parameter | Description |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `String` as a value. |
+| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
+| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `String` as a value. |
+| `name?` | Display name for the verifier. If null, the default name is used. It accepts `String` as a value. |
+| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `String` as a value. |
+| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `String` as a value. |
+| `logoHover?` | Logo to be shown on mouse hover. It accepts `String` as a value. |
+| `logoLight?` | Light logo for dark background. It accepts `String` as a value. |
+| `logoDark?` | Dark logo for light background. It accepts `String` as a value. |
+| `mainOption?` | Show login button on the main list. It accepts `Boolean` as a value. Default value is false. |
+| `showOnModal?` | Whether to show the login button on modal or not. Default value is true. |
+| `showOnDesktop?` | Whether to show the login button on desktop. Default value is true. |
+| `showOnMobile?` | Whether to show the login button on mobile. Default value is true. |
+
+
+
+
+
+```kotlin
+data class LoginConfigItem(
+ var verifier: String,
+ private var typeOfLogin: TypeOfLogin,
+ private var name: String? = null,
+ private var description: String? = null,
+ private var clientId: String,
+ private var verifierSubIdentifier: String? = null,
+ private var logoHover: String? = null,
+ private var logoLight: String? = null,
+ private var logoDark: String? = null,
+ private var mainOption: Boolean? = false,
+ private var showOnModal: Boolean? = true,
+ private var showOnDesktop: Boolean? = true,
+ private var showOnMobile: Boolean? = true,
+)
+
+enum class TypeOfLogin {
+ @SerializedName("google")
+ GOOGLE,
+ @SerializedName("facebook")
+ FACEBOOK,
+ @SerializedName("reddit")
+ REDDIT,
+ @SerializedName("discord")
+ DISCORD,
+ @SerializedName("twitch")
+ TWITCH,
+ @SerializedName("apple")
+ APPLE,
+ @SerializedName("line")
+ LINE,
+ @SerializedName("github")
+ GITHUB,
+ @SerializedName("kakao")
+ KAKAO,
+ @SerializedName("linkedin")
+ LINKEDIN,
+ @SerializedName("twitter")
+ TWITTER,
+ @SerializedName("weibo")
+ WEIBO,
+ @SerializedName("wechat")
+ WECHAT,
+ @SerializedName("email_passwordless")
+ EMAIL_PASSWORDLESS,
+ @SerializedName("email_password")
+ EMAIL_PASSWORD,
+ @SerializedName("jwt")
+ JWT
+}
+```
+
+
+
+
+### Usage
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf("google" to LoginConfigItem(
+ verifier = "verifier-name", // Get it from Web3Auth dashboard
+ typeOfLogin = TypeOfLogin.GOOGLE,
+ clientId = getString(R.string.google_client_id) // Google's client id
+ ))
+ // focus-end
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.GOOGLE)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf(
+ "facebook" to LoginConfigItem(
+ verifier = "verifier-name", // Get it from Web3Auth dashboard
+ typeOfLogin = TypeOfLogin.FACEBOOK,
+ clientId = getString(R.string.facebook_client_id) // Facebook's client id
+ )
+ )
+ // focus-end
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.Facebook)
+)
+// focus-end
+
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf("jwt" to LoginConfigItem(
+ verifier = "verifier-name", // Get it from Web3Auth dashboard
+ typeOfLogin = TypeOfLogin.JWT,
+ clientId = getString (R.string.auth0_project_id) // Auth0's client id
+ ))
+ // focus-end
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.JWT)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf(
+ "jwt" to LoginConfigItem(
+ verifier = "verifier-name", // Get it from Web3Auth dashboard
+ typeOfLogin = TypeOfLogin.JWT,
+ )
+ )
+ // focus-end
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.JWT)
+)
+// focus-end
+
+```
+
+
+
+
+## Configure Extra Login Options
+
+Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the
+login flow for cases requiring additional info for enabling login. The `ExtraLoginOptions` accepts
+the following parameters.
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `additionalParams?` | Additional params in `HashMap` format for OAuth login, use id_token(JWT) to authenticate with web3auth. |
+| `domain?` | Your custom authentication domain in `String` format. For example, if you are using Auth0, it can be example.au.auth0.com. |
+| `client_id?` | Client id in `String` format, provided by your login provider used for custom verifier. |
+| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes `String` as a value. |
+| `verifierIdField?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes `String` as a value. |
+| `isVerifierIdCaseSensitive?` | Boolean to confirm Whether the verifier id field is case sensitive or not. |
+| `display?` | Allows developers the configure the display of UI. It takes `Display` as a value. |
+| `prompt?` | Prompt shown to the user during authentication process. It takes `Prompt` as a value. |
+| `max_age?` | Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes `String` as a value. |
+| `ui_locales?` | The space separated list of language tags, ordered by preference. For instance `fr-CA fr en`. |
+| `id_token_hint?` | It denotes the previously issued ID token. It takes `String` as a value. |
+| `id_token?` | JWT (ID Token) to be passed for login. |
+| `login_hint?` | Used to specify the user's email address or phone number for Email/SMS Passwordless login flows. Takes a `String` value. For the SMS, the format should be: `+{country_code}-{phone_number}` (e.g. `+1-1234567890`) |
+| `acr_values?` | acc_values |
+| `scope?` | The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes `String` as a value. |
+| `audience?` | The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes `String` as a value. |
+| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes `String` as a value. |
+| `state?` | state |
+| `response_type?` | Defines which grant to execute for the authorization server. It takes `String` as a value. |
+| `nonce?` | nonce |
+| `redirect_uri?` | It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application. |
+
+
+
+
+
+```kotlin
+data class ExtraLoginOptions(
+ private var additionalParams : HashMap? = null,
+ private var domain : String? = null,
+ private var client_id : String? = null,
+ private var leeway : String? = null,
+ private var verifierIdField : String? =null,
+ private var isVerifierIdCaseSensitive : Boolean? = null,
+ private var display : Display? = null,
+ private var prompt : Prompt? = null,
+ private var max_age : String? = null,
+ private var ui_locales : String? = null,
+ private var id_token : String? = null,
+ private var id_token_hint : String? = null,
+ private var login_hint : String? = null,
+ private var acr_values : String? = null,
+ private var scope : String? = null,
+ private var audience : String? = null,
+ private var connection : String? = null,
+ private var state : String? = null,
+ private var response_type : String? = null,
+ private var nonce : String? = null,
+ private var redirect_uri : String? = null
+)
+```
+
+
+
+
+### Single Verifier Usage
+
+
+
+
+
+Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
+to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
+configurations in the `ExtraLoginOptions` object in the login function.
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf("jwt" to LoginConfigItem(
+ verifier = "verifier-name", // Get it from Web3Auth dashboard
+ typeOfLogin = TypeOfLogin.JWT,
+ clientId = getString (R.string.auth0_project_id) // Auth0's client id
+ ))
+ // focus-end
+ )
+)
+
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(
+ Provider.JWT,
+ // focus-start
+ extraLoginOptions = ExtraLoginOptions(
+ domain: "https://username.us.auth0.com", // Domain of your Auth0 app
+ verifierIdField: "sub", // The field in jwt token which maps to verifier id.
+ )
+ // focus-end
+ )
+)
+```
+
+
+
+
+If you're using any other provider like Firebase/ AWS Cognito or deploying your own Custom JWT
+server, you need to put the jwt token into the `id_token` field of the `extraLoginOptions`,
+additionally, you need to pass over the `domain` field as well, which is mandatory. If you don't
+have a domain, just passover a string in that field.
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf("jwt" to LoginConfigItem(
+ verifier = "verifier-name", // Get it from Web3Auth dashboard
+ typeOfLogin = TypeOfLogin.JWT,
+ ))
+ // focus-end
+ )
+)
+
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(
+ Provider.JWT,
+ // focus-start
+ extraLoginOptions = ExtraLoginOptions(
+ id_token: "Your JWT id token",
+ )
+ // focus-end
+ )
+)
+```
+
+
+
+
+To use the Email Passwordless login, you need to put the email into the `login_hint` parameter of
+the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
+`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
+`ExtraLoginOptions`.
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(
+ Provider.EMAIL_PASSWORDLESS,
+ // focus-next-line
+ extraLoginOptions = ExtraLoginOptions(login_hint = "hello@web3auth.io")
+ )
+)
+```
+
+
+
+
+To use the SMS Passwordless login, send the phone number as the `login_hint` parameter of the
+`ExtraLoginOptions`. Please make sure the phone number is in the format of
++\{country_code}-\{phone_number}, i.e. (+91-09xx901xx1).
+
+
+
+
+
+### Aggregate Verifier Usage
+
+You can use aggregate verifier to combine multiple login methods to get the same address for the
+users regardless of their login providers. For example, combining a Google and Email Passwordless
+login, or Google and GitHub via Auth0 to access the same address for your user.
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ // focus-start
+ loginConfig = hashMapOf(
+ "google" to LoginConfigItem(
+ verifier = "aggregate-sapphire",
+ verifierSubIdentifier= "w3a-google",
+ typeOfLogin = TypeOfLogin.GOOGLE,
+ name = "Aggregate Login",
+ clientId = getString(R.string.web3auth_google_client_id)
+ ),
+ "jwt" to LoginConfigItem(
+ verifier = "aggregate-sapphire",
+ verifierSubIdentifier= "w3a-a0-email-passwordless",
+ typeOfLogin = TypeOfLogin.JWT,
+ name = "Aggregate Login",
+ clientId = getString(R.string.web3auth_auth0_client_id)
+ )
+ )
+ // focus-end
+ )
+)
+
+// focus-start
+// Google Login
+web3Auth.login(LoginParams(Provider.GOOGLE))
+// focus-end
+
+// focus-start
+// Auth0 Login
+web3Auth.login(LoginParams(
+ Provider.JWT,
+ extraLoginOptions = ExtraLoginOptions(
+ domain = "https://web3auth.au.auth0.com",
+ verifierIdField = "email",
+ isVerifierIdCaseSensitive = false
+ )
+))
+// focus-end
+```
diff --git a/docs/sdk/pnp/android/dapp-share.mdx b/docs/sdk/mobile/pnp/android/dapp-share.mdx
similarity index 100%
rename from docs/sdk/pnp/android/dapp-share.mdx
rename to docs/sdk/mobile/pnp/android/dapp-share.mdx
diff --git a/docs/sdk/pnp/android/examples.mdx b/docs/sdk/mobile/pnp/android/examples.mdx
similarity index 100%
rename from docs/sdk/pnp/android/examples.mdx
rename to docs/sdk/mobile/pnp/android/examples.mdx
diff --git a/docs/sdk/mobile/pnp/android/initialize.mdx b/docs/sdk/mobile/pnp/android/initialize.mdx
new file mode 100644
index 000000000..a4674365b
--- /dev/null
+++ b/docs/sdk/mobile/pnp/android/initialize.mdx
@@ -0,0 +1,150 @@
+---
+title: Initializing PnP Android SDK
+sidebar_label: Initialize
+description: "Web3Auth PnP Android SDK - Initialize | Documentation - Web3Auth"
+---
+
+import Initialization from "@site/src/common/sdk/pnp/android/_initialize.mdx";
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+After installation, the next step to use Web3Auth is to configure & initialize the SDK.
+
+However, configuring and initializing is a four-step process:
+
+1. [Creating a Web3Auth Instance](#create-web3auth-instance)
+2. [Setting a Result URL](#set-result-url)
+3. [Triggering Login exceptions](#triggering-login-exceptions)
+4. [Initialize Web3Auth](#initialize-web3auth)
+
+## Create Web3Auth Instance
+
+The first step is to create the Web3Auth instance, and configure the Whitelabeling, Session time,
+and Custom Authentication. Please note that these are the most critical steps where you need to pass
+on different parameters according to the preference of your project.
+
+### Parameters
+
+The Web3Auth Constructor takes an object with `Web3AuthOptions` as input.
+
+
+
+
+
+| Parameter | Description |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `context` | Android context to launch Web-based authentication, usually is the current activity. It's a mandatory field, and accepts `android.content.Context` as a value. |
+| `clientId` | Your Web3Auth Client ID. You can get it from Web3Auth [Dashboard](https://dashboard.web3auth.io/) under project details. It's a mandatory field of type `String` |
+| `network` | Defines the Web3Auth network. It's a mandatory field of type Network. |
+| `redirectUrl` | URL that Web3Auth will redirect API responses upon successful authentication from browser. It's a mandatory field of type `Uri`. |
+| `whiteLabel?` | WhiteLabel options for web3auth. It helps you define custom UI, branding, and translations for your brand app. It takes `WhiteLabelData` as a value. |
+| `loginConfig?` | Login config for the custom verifiers. It takes `HashMap` as a value. |
+| `useCoreKitKey?` | Use CoreKit Key to get core kit key. It's an optional field with default value as `false`. |
+| `chainNamespace?` | Chain Namespace [`EIP155` and `SOLANA`]. It takes `ChainNamespace` as a value. |
+| `mfaSettings?` | Allows developers to configure the Mfa settings for authentication. It takes `MfaSettings` as a value. |
+| `sessionTime?` | It allows developers to configure the session management time. Session Time is in seconds, default is 86400 seconds which is 1 day. `sessionTime` can be max 30 days |
+
+
+
+
+
+```kotlin
+data class Web3AuthOptions(
+ var context: Context,
+ val clientId: String,
+ val network: Network,
+ var buildEnv: BuildEnv? = BuildEnv.PRODUCTION,
+ @Transient var redirectUrl: Uri,
+ var sdkUrl: String = getSdkUrl(buildEnv),
+ val whiteLabel: WhiteLabelData? = null,
+ val loginConfig: HashMap? = null,
+ val useCoreKitKey: Boolean? = false,
+ val chainNamespace: ChainNamespace? = ChainNamespace.EIP155,
+ val mfaSettings: MfaSettings? = null,
+ val sessionTime: Int? = 86400
+)
+```
+
+
+
+
+### Instantiate Web3Auth
+
+
+
+## Set Result URL
+
+Whenever user initiates a login flow, a new intent of CustomTabs is launched. It's necessary step to
+use `setResultUrl` in `onNewIntent` method to successful track the login process.
+
+```kotlin
+override fun onNewIntent(intent: Intent?) {
+ super.onNewIntent(intent)
+
+ // Handle user signing in when app is active
+ web3Auth.setResultUrl(intent.data)
+}
+```
+
+## Triggering Login exceptions
+
+The `setCustomTabsClosed` method can be used to trigger login exceptions for Android. The Android
+SDK uses the custom tabs and from current implementation of chrome custom tab, it's not possible to
+add a listener directly to chrome custom tab close button and trigger login exceptions.
+
+Hence, it's necessary to use `setCustomTabsClosed` method in your login screen to trigger
+exceptions.
+
+```kotlin
+class MainActivity : AppCompatActivity() {
+ // Additional code
+
+ override fun onResume() {
+ super.onResume()
+ // focus-start
+ if (Web3Auth.getCustomTabsClosed()) {
+ Toast.makeText(this, "User closed the browser.", Toast.LENGTH_SHORT).show()
+ web3Auth.setResultUrl(null)
+ Web3Auth.setCustomTabsClosed(false)
+ }
+ // focus-end
+ }
+
+ // Additional code
+}
+```
+
+## Initialize Web3Auth
+
+After instantiating Web3Auth, the next step is to initialize it using the `initialize` method. This
+method is essential for setting up the SDK, checking for any active sessions, and fetching the
+whitelabel configuration from your dashboard.
+
+Once the `initialize` method executes successfully, you can use the `getPrivKey` or
+`getEd25519PrivKey` methods to verify if an active session exists. If there is no active session,
+these methods will return an empty string; otherwise, they will return the respective private key.
+
+Note that if the API call to fetch the project configuration fails, the method will throw an error.
+
+```kotlin
+val initializeCF: CompletableFuture = web3Auth.initialize()
+initializeCF.whenComplete { _, error ->
+ if (error == null) {
+ // Check for the active session
+ if(web3Auth.getPrivKey()isNotEmpty()) {
+ // Active session found
+ }
+ // No active session is not present
+
+ } else {
+ // Handle the error
+ }
+}
+```
diff --git a/docs/sdk/mobile/pnp/android/install.mdx b/docs/sdk/mobile/pnp/android/install.mdx
new file mode 100644
index 000000000..99982c7b1
--- /dev/null
+++ b/docs/sdk/mobile/pnp/android/install.mdx
@@ -0,0 +1,67 @@
+---
+title: "Installing PnP Android SDK"
+sidebar_label: "Install"
+description: "Installing Web3Auth PnP Android SDK | Documentation - Web3Auth"
+---
+
+import UpdateGradle from "@site/src/common/sdk/pnp/android/_update-gradle.mdx";
+import Installation from "@site/src/common/sdk/pnp/android/_installation.mdx";
+import AndroidPermissions from "@site/src/common/sdk/pnp/android/_android-permissions.mdx";
+import Whitelist from "@site/src/common/sdk/pnp/android/_android-whitelist.mdx";
+import Deeplinking from "@site/src/common/sdk/pnp/android/_android-deep-linking.mdx";
+
+## Requirements
+
+- Android API version `24` or newer.
+- Android Compile and Target SDK: `34`.
+- Basic knowledge of Java or Kotlin Development.
+
+## Installation
+
+
+
+Then, in your app-level `build.gradle` dependencies section, add the following:
+
+
+
+## Update Permissions
+
+
+
+## Configure AndroidManifest File
+
+Make sure your Main activity launchMode is set to **singleTop** in your `AndroidManifest.xml`
+
+```xml
+
+ // ...
+
+```
+
+From version **7.1.2**, please make sure to set `android:allowBackup` to `false`, and add
+`tools:replace="android:fullBackupContent"` in your `AndroidManifest.xml` file.
+
+```xml
+
+
+```
+
+## Configuration Redirection
+
+Once the gradles and permission has been updated, you need to configure Web3Auth project by
+whitelisting your scheme and package name.
+
+### Configure a Plug n Play project
+
+
+
+### Configure Deep Link
+
+
diff --git a/docs/sdk/pnp/android/mfa.mdx b/docs/sdk/mobile/pnp/android/mfa.mdx
similarity index 100%
rename from docs/sdk/pnp/android/mfa.mdx
rename to docs/sdk/mobile/pnp/android/mfa.mdx
diff --git a/docs/sdk/mobile/pnp/android/usage.mdx b/docs/sdk/mobile/pnp/android/usage.mdx
new file mode 100644
index 000000000..37e43b66c
--- /dev/null
+++ b/docs/sdk/mobile/pnp/android/usage.mdx
@@ -0,0 +1,607 @@
+---
+title: Usage of PnP Android SDK
+sidebar_label: Usage
+description: "Web3Auth PnP Android SDK - Usage | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import AndroidResponse from "@site/src/common/sdk/pnp/_userinfo_response.mdx";
+import SMSPasswordless from "@site/src/common/sdk/pnp/android/_sms_passwordless.mdx";
+import EnableMFAMethod from "@site/src/common/sdk/pnp/android/_enable-mfa.mdx";
+
+Web3Auth's Android SDK is a set of libraries and tools that allow you to easily integrate Web3 with
+Android applications.
+
+## Functionality Overview
+
+| Name | Description |
+| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [login](#logging-in-a-user) | Logs in the user with the selected login provider. |
+| [logout](#logging-out-a-user) | Logs out the user from the currently active session. |
+| [getPrivKey](#secp256k1-private-key) | Retrieve the user's secp256K1 key. The key can be used to sign transactions for chains using the secp256k1 curve like EVM-compatible chains. |
+| [getEd25519PrivKey](#ed25519-private-key) | Retrieve the user's ed25519 key. The key can be used to sign transactions for chains using the ed25519 curve like Solana, Near, Algorand, and others. |
+| [getUserInfo](#retrieve-user-information) | Retrieve the user information, such as login provider, name, email, oAuth token, etc. |
+| [enableMFA](#enable-mfa-for-a-user) | Use to trigger the setup MFA flow for the users. |
+| [manageMFA](#manage-mfa-for-a-user) | Use to trigger the manage MFA flow for the users. |
+| [launchWalletServices](#launch-wallet-services) | Use to open the templated wallet UI in WebView. |
+| [request](#request-signature) | Use to open templated transaction screens for signing EVM transactions. |
+
+## Logging in a User
+
+To login in a user, you can use the `login` method. It will trigger login flow will navigate the
+user to a browser model allowing the user to login into the service. You can pass in the supported
+providers to the login method for specific social logins such as GOOGLE, APPLE, FACEBOOK, etc., and
+do whitelabel login.
+
+### Parameters
+
+The `login` method takes in `LoginParams` as a required input.
+
+
+
+
+
+| Parameter | Description |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loginProvider` | It sets the OAuth login method to be used. You can use any of the supported values are `GOOGLE`, `FACEBOOK`, `REDDIT`, `DISCORD`, `TWITCH`, `APPLE`, `LINE`, `GITHUB`, `KAKAO`, `LINKEDIN`, `TWITTER`, `WEIBO`, `WECHAT`, `EMAIL_PASSWORDLESS`, `JWT`, `SMS_PASSWORDLESS`, and `FARCASTER`. |
+| `extraLoginOptions?` | It can be used to set the OAuth login options for corresponding `loginProvider`. For instance, you'll need to pass user's email address as. Default value for the field is `null`, and it accepts `ExtraLoginOptions` as a value. |
+| `redirectUrl?` | Url where user will be redirected after successfull login. By default user will be redirected to same page where login will be initiated. Default value for the field is `null`, and accepts `Uri` as a value. |
+| `appState?` | It can be used to keep track of the app state when user will be redirected to app after login. Default is `null`, and accepts `String` as a value. |
+| `mfaLevel?` | Customize the MFA screen shown to the user during OAuth authentication. Default value for field is `MFALevel.DEFAULT`, which shows MFA screen every 3rd login. It accepts `MFALevel` as a value. |
+| `dappShare?` | Custom verifier 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. It accepts `String` as a value. |
+| `curve?` | It will be used to determine the public key encoded in the jwt token which returned in `getUserInfo` function after user login. This parameter won't change format of private key returned by We3Auth. Private key returned by `getPrivKey` is always secp256k1. To get the ed25519 key you can use `getEd25519PrivKey` method. The default value is `Curve.SECP256K1`. |
+
+
+
+
+
+```kotlin
+data class LoginParams(
+ val loginProvider: Provider,
+ var dappShare: String? = null,
+ val extraLoginOptions: ExtraLoginOptions? = null,
+ @Transient var redirectUrl: Uri? = null,
+ val appState: String? = null,
+ val mfaLevel: MFALevel? = null,
+ val curve: Curve? = Curve.SECP256K1
+)
+
+enum class Provider {
+ @SerializedName("google")
+ GOOGLE,
+ @SerializedName("facebook")
+ FACEBOOK,
+ @SerializedName("reddit")
+ REDDIT,
+ @SerializedName("discord")
+ DISCORD,
+ @SerializedName("twitch")
+ TWITCH,
+ @SerializedName("apple")
+ APPLE,
+ @SerializedName("line")
+ LINE,
+ @SerializedName("github")
+ GITHUB,
+ @SerializedName("kakao")
+ KAKAO,
+ @SerializedName("linkedin")
+ LINKEDIN,
+ @SerializedName("twitter")
+ TWITTER,
+ @SerializedName("weibo")
+ WEIBO,
+ @SerializedName("wechat")
+ WECHAT,
+ @SerializedName("email_passwordless")
+ EMAIL_PASSWORDLESS,
+ @SerializedName("jwt")
+ JWT,
+ @SerializedName("sms_passwordless")
+ SMS_PASSWORDLESS,
+ @SerializedName("farcaster")
+ FARCASTER
+}
+```
+
+
+
+
+### Usage
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.GOOGLE)
+)
+// focus-end
+```
+
+### Examples
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.GOOGLE)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.FACEBOOK)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.DISCORD)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.TWITCH)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(
+ Provider.EMAIL_PASSWORDLESS,
+ extraLoginOptions = ExtraLoginOptions(login_hint = "hello@web3auth.io")
+ )
+)
+// focus-end
+```
+
+
+
+
+
+
+
+
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(Provider.Farcaster)
+)
+// focus-end
+```
+
+
+
+
+
+```kotlin title="Usage"
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ )
+)
+
+// focus-start
+val loginCompletableFuture: CompletableFuture = web3Auth.login(
+ LoginParams(
+ Provider.JWT,
+ extraLoginOptions = ExtraLoginOptions(id_token = "your_jwt_token")
+ )
+)
+// focus-end
+```
+
+
+
+
+## Retrieve Private Key
+
+Web3Auth supports two widely used cryptographic curves, Secp256k1 and Ed25519, making it
+chain-agnostic and compatible with multiple blockchain networks.
+[Learn more about how to connect different blockchains](/docs/connect-blockchain).
+
+### Secp256k1 Private Key
+
+To retrieve the secp256k1 private key of the user., use `getPrivkey` method. The method returns an
+EVM compatible private key which can be used to sign transactions on EVM compatible chains.
+
+```kotlin
+val privateKey = web3Auth.getPrivKey()
+```
+
+### Ed25519 Private Key
+
+To retrieve the secp256k1 private key of the user., use `getEd25519PrivKey` method. This private key
+can be used to sign transactions on Solana, Near, Algorand, and other chains that use the ed25519
+curve.
+
+```kotlin
+val privateKey = web3Auth.getEd25519PrivKey()
+```
+
+## Retrieve User Information
+
+You can use the `getUserInfo` method to retrieve various details about the user, such as their login
+type, whether multi-factor authentication (MFA) is enabled, profile image, name, and other relevant
+information.
+
+### Usage
+
+```kotlin
+val userInfo = web3Auth.getUserInfo()
+```
+
+### UserInfo Response
+
+
+
+## Session Management
+
+The Session Management feature allows you to check the existing sessions with Web3Auth. The SDK will
+allow users to remain authenticated with Web3Auth for 1 day by default, or a maximum of 30 days, or
+until the user logout or session data is cleared.
+
+The `Web3AuthOptions` initialization accepts a `sessionTime` parameter.
+
+### Usage
+
+```kotlin
+import com.web3auth.core.Web3Auth
+import com.web3auth.core.types.Web3AuthOptions
+
+val web3Auth = Web3Auth(
+ Web3AuthOptions(
+ context = this,
+ clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
+ network = Network.MAINNET,
+ redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
+ sessionTime = 172800 // 2 Days
+ )
+)
+```
+
+## Logging out a user
+
+Logging out your user is as simple as calling the `logout` method. This method will clear the
+session data and the user will be logged out from Web3Auth.
+
+```kotlin
+val logoutCompletableFuture = web3Auth.logout()
+```
+
+## Enable MFA for a user
+
+
+
+## Manage MFA for a user
+
+The `manageMFA` method is used to trigger manage MFA flow for users, allowing users to update their
+MFA settings. The method takes `LoginParams` which will used during custom verifiers. If you are
+using default login providers, you don't need to pass `LoginParams`. If you are using custom jwt
+verifiers, you need to pass the JWT token in `loginParams` as well.
+
+
+
+
+
+```kotlin
+val manageMFACF = web3Auth.manageMFA()
+
+manageMFACF.whenComplete{_, error ->
+ if (error == null) {
+ // Handle success
+ } else {
+ // Handle error
+ }
+}
+```
+
+
+
+
+
+```kotlin title="Usage"
+val loginParams = LoginParams(
+ Provider.JWT,
+ extraLoginOptions = ExtraLoginOptions(id_token = "your_jwt_token")
+)
+
+val manageMFACF = web3Auth.manageMFA(loginParams)
+
+manageMFACF.whenComplete{_, error ->
+ if (error == null) {
+ // Handle success
+ } else {
+ // Handle error
+ }
+}
+
+```
+
+
+
+
+## Launch Wallet Services
+
+The `launchWalletServices` method launches a WebView which allows you to use the templated wallet UI
+services. The method takes`ChainConfig` as the required input. Wallet Services is currently only
+available for EVM chains.
+
+:::note
+
+Access to Wallet Services is gated. You can use this feature in `sapphire_devnet` for free. The
+minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production
+environment is the **Scale Plan**.
+
+:::
+
+
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `chainNamespace` | Custom configuration for your preferred blockchain. As of now only EVM supported. Default value is `ChainNamespace.EIP155`. |
+| `decimals?` | Number of decimals for the currency ticker. Default value is 18, and accepts `Int` as value. |
+| `blockExplorerUrl?` | Blockchain's explorer URL. (eg: `https://etherscan.io`) |
+| `chainId` | The chain id of the selected blockchain in hex `String`. |
+| `displayName?` | Display Name for the chain. |
+| `logo?` | Logo for the selected `chainNamespace` & `chainId`. |
+| `rpcTarget` | RPC Target URL for the selected `chainNamespace` & `chainId`. |
+| `ticker?` | Default currency ticker of the network (e.g: `ETH`) |
+| `tickerName?` | Name for currency ticker (e.g: `Ethereum`) |
+
+
+
+
+
+```kotlin
+data class ChainConfig(
+ val chainNamespace: ChainNamespace = ChainNamespace.EIP155,
+ val decimals: Int? = 18,
+ val blockExplorerUrl: String? = null,
+ val chainId: String,
+ val displayName: String? = null,
+ val logo: String? = null,
+ val rpcTarget: String,
+ val ticker: String?,
+ val tickerName: String? = null,
+)
+```
+
+
+
+
+### Usage
+
+```kotlin
+val chainConfig = ChainConfig(
+ chainId = "0x1",
+ rpcTarget = "https://rpc.ethereum.org",
+ ticker = "ETH",
+ chainNamespace = ChainNamespace.EIP155
+)
+
+// focus-start
+val completableFuture = web3Auth.launchWalletServices(
+ chainConfig
+)
+// focus-end
+```
+
+## Request signature
+
+The `request` method facilitates the use of templated transaction screens for signing transactions.
+The method will return [SignResponse](#signresponse). It can be used to sign transactions for any
+EVM chain and screens can be whitelabeled to your branding.
+
+Please check the list of
+[JSON RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/), noting that the request
+method currently supports only the signing methods.
+
+
+
+### Parameters
+
+| Parameter | Description |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `chainConifg` | Defines the chain to be used for signature request. |
+| `method` | JSON RPC method name in `String`. Currently, the request method only supports the singing methods. |
+| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/) to know more. |
+
+### Usage
+
+```kotlin
+val params = JsonArray().apply {
+ // Message to be signed
+ add("Hello, World!")
+ // User's EOA address
+ add(address)
+}
+
+val chainConfig = ChainConfig(
+ chainId = "0x1",
+ rpcTarget = "https://rpc.ethereum.org",
+ ticker = "ETH",
+ chainNamespace = ChainNamespace.EIP155
+)
+
+// focus-start
+val signMsgCompletableFuture = web3Auth.request(
+ chainConfig = chainConfig,
+ "personal_sign",
+ requestParams = params
+)
+// focus-end
+
+signMsgCompletableFuture.whenComplete { signResult, error ->
+ if (error == null) {
+ // focus-next-line
+ Log.d("Sign Result", signResult.toString())
+
+ } else {
+ Log.d("Sign Error", error.message ?: "Something went wrong")
+ }
+}
+```
+
+### SignResponse
+
+| Name | Description |
+| --------- | ------------------------------------------------------------- |
+| `success` | Determines whether the request was successful or not. |
+| `result?` | Holds the signature for the request when `success` is `true`. |
+| `error?` | Holds the error for the request when `success` is `false`. |
diff --git a/docs/sdk/pnp/android/whitelabel.mdx b/docs/sdk/mobile/pnp/android/whitelabel.mdx
similarity index 100%
rename from docs/sdk/pnp/android/whitelabel.mdx
rename to docs/sdk/mobile/pnp/android/whitelabel.mdx
diff --git a/docs/sdk/mobile/pnp/flutter/custom-authentication.mdx b/docs/sdk/mobile/pnp/flutter/custom-authentication.mdx
new file mode 100644
index 000000000..d837c61c3
--- /dev/null
+++ b/docs/sdk/mobile/pnp/flutter/custom-authentication.mdx
@@ -0,0 +1,661 @@
+---
+title: Using Custom Authentication in PnP Flutter SDK
+sidebar_label: Custom Authentication
+description: "Web3Auth PnP Flutter SDK - Using Custom Authentication | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+import SMSPasswordless from "@site/src/common/sdk/pnp/flutter/_sms_passwordless.mdx";
+
+## Configuration
+
+To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
+Firebase etc. or even your own custom JWT login) you can add the configuration using the
+`loginConfig` parameter during the initialization.
+
+The `loginConfig` parameter is a key value map. The key should be one of the `TypeOfLogin` in its
+string form, and the value should be a `LoginConfigItem` object.
+
+To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
+Dashboard in "Custom Authentication" section.
+[Learn how to create a custom verifier](/authentication).
+
+:::tip Create Custom Verifier
+
+Learn how to create a [Custom Verifier](/authentication) on the Web3Auth Dashboard.
+
+:::
+
+
+
+### Parameters
+
+After creating the verifier, you can use the following parameters in the `LoginConfigItem`.
+
+
+
+
+
+| Parameter | Description |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `String` as a value. |
+| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
+| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `String` as a value. |
+| `name?` | Display name for the verifier. If null, the default name is used. It accepts `String` as a value. |
+| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `String` as a value. |
+| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `String` as a value. |
+| `logoHover?` | Logo to be shown on mouse hover. It accepts `String` as a value. |
+| `logoLight?` | Light logo for dark background. It accepts `String` as a value. |
+| `logoDark?` | Dark logo for light background. It accepts `String` as a value. |
+| `mainOption?` | Show login button on the main list. It accepts `bool` as a value. |
+| `showOnModal?` | Whether to show the login button on modal or not. |
+| `showOnDesktop?` | Whether to show the login button on desktop. |
+| `showOnMobile?` | Whether to show the login button on mobile. |
+
+
+
+
+
+```dart
+class LoginConfigItem {
+ final String verifier;
+ final TypeOfLogin typeOfLogin;
+ final String clientId;
+ final String? name;
+ final String? description;
+ final String? verifierSubIdentifier;
+ final String? logoHover;
+ final String? logoLight;
+ final String? logoDark;
+ final bool? mainOption;
+ final bool? showOnModal;
+ final bool? showOnDesktop;
+ final bool? showOnMobile;
+
+ LoginConfigItem({
+ required this.verifier,
+ required this.typeOfLogin,
+ required this.clientId,
+ this.name,
+ this.description,
+ this.verifierSubIdentifier,
+ this.logoHover,
+ this.logoLight,
+ this.logoDark,
+ this.mainOption,
+ this.showOnModal,
+ this.showOnDesktop,
+ this.showOnMobile,
+ });
+
+ Map toJson() {
+ return {
+ 'verifier': verifier,
+ 'typeOfLogin': typeOfLogin.name,
+ 'clientId': clientId,
+ 'name': name,
+ 'description': description,
+ 'verifierSubIdentifier': verifierSubIdentifier,
+ 'logoHover': logoHover,
+ 'logoLight': logoLight,
+ 'logoDark': logoDark,
+ 'mainOption': mainOption,
+ 'showOnModal': showOnModal,
+ 'showOnDesktop': showOnDesktop,
+ 'showOnMobile': showOnMobile
+ };
+ }
+}
+
+enum TypeOfLogin {
+ google,
+ facebook,
+ reddit,
+ discord,
+ twitch,
+ github,
+ apple,
+ kakao,
+ linkedin,
+ twitter,
+ weibo,
+ wechat,
+ line,
+ email_passwordless,
+ email_password,
+ jwt,
+ sms_passwordless,
+ farcaster,
+}
+```
+
+
+
+
+### Usage
+
+
+
+
+
+```dart title="Usage"
+Future initWeb3Auth() async {
+ final themeMap = HashMap();
+ themeMap['primary'] = "#229954";
+
+ // focus-start
+ final loginConfig = new HashMap();
+ loginConfig['google'] = LoginConfigItem(
+ verifier: "verifier-name", // get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.google,
+ clientId: "google_client_id" // google's client id
+ );
+ // focus-end
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: "WEB3AUTH_CLIENT_ID",
+ network: Network.sapphire_mainnet,
+ redirectUrl: redirectUrl,
+ // focus-next-line
+ loginConfig: loginConfig
+ ),
+ );
+}
+
+// Login
+final Web3AuthResponse response = await Web3AuthFlutter.login(
+ // focus-next-line
+ LoginParams(loginProvider: Provider.google)
+);
+```
+
+
+
+
+
+```dart title="Usage"
+Future initWeb3Auth() async {
+ final themeMap = HashMap();
+ themeMap['primary'] = "#229954";
+
+ // focus-start
+ final loginConfig = new HashMap();
+ loginConfig['facebook'] = LoginConfigItem(
+ verifier: "verifier-name", // get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.facebook,
+ clientId: "facebook_client_id" // facebook's client id
+ );
+ // focus-end
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: "WEB3AUTH_CLIENT_ID",
+ network: Network.testnet,
+ redirectUrl: redirectUrl,
+ // focus-next-line
+ loginConfig: loginConfig
+ ),
+ );
+}
+
+// Login
+final Web3AuthResponse response = await Web3AuthFlutter.login(
+ // focus-next-line
+ LoginParams(loginProvider: Provider.facebook)
+);
+```
+
+
+
+
+
+```dart title="Usage"
+Future initWeb3Auth() async {
+ final themeMap = HashMap();
+ themeMap['primary'] = "#229954";
+
+ // focus-start
+ final loginConfig = new HashMap();
+ loginConfig['jwt'] = LoginConfigItem(
+ verifier: "verifier-name", // get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ clientId: "web3auth_client_id" // web3auth's plug and play client id
+ );
+ // focus-end
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: "WEB3AUTH_CLIENT_ID",
+ network: Network.testnet,
+ redirectUrl: redirectUrl,
+ // focus-next-line
+ loginConfig: loginConfig
+ ),
+ );
+}
+
+// Login
+final Web3AuthResponse response = await Web3AuthFlutter.login(
+ LoginParams(
+ // focus-start
+ loginProvider: Provider.jwt,
+ extraLoginOptions: ExtraLoginOptions(
+ id_token: "YOUR_JWT_TOKEN"
+ )
+ // focus-end
+ )
+);
+```
+
+
+
+
+## Congfigure Extra Login Options
+
+Additional to the loginConfig during initialization, you can pass extra options to the `login`
+method to configure the login flow for cases requiring additional info for authorization. The
+`ExtraLoginOptions` accepts the following parameters.
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `additionalParams?` | Additional params in `Map` format for OAuth login, use id_token(JWT) to authenticate with web3auth. |
+| `domain?` | Your custom authentication domain in `String` format. For example, if you are using Auth0, it can be example.au.auth0.com. |
+| `client_id?` | Client id in `String` format, provided by your login provider used for custom verifier. |
+| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes `String` as a value. |
+| `verifierIdField?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes `String` as a value. |
+| `isVerifierIdCaseSensitive?` | Boolean to confirm Whether the verifier id field is case sensitive or not. |
+| `display?` | Allows developers the configure the display of UI. It takes `Display` as a value. |
+| `prompt?` | Prompt shown to the user during authentication process. It takes `Prompt` as a value. |
+| `max_age?` | Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes `String` as a value. |
+| `ui_locales?` | The space separated list of language tags, ordered by preference. For instance `fr-CA fr en`. |
+| `id_token_hint?` | It denotes the previously issued ID token. It takes `String` as a value. |
+| `id_token?` | JWT (ID Token) to be passed for login. |
+| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes `String` as a value. |
+| `acr_values?` | acc_values |
+| `scope?` | The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes `String` as a value. |
+| `audience?` | The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes `String` as a value. |
+| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes `String` as a value. |
+| `state?` | state |
+| `response_type?` | Defines which grant to execute for the authorization server. It takes `String` as a value. |
+| `nonce?` | nonce |
+| `redirect_uri?` | It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application. |
+
+
+
+
+
+```dart
+class ExtraLoginOptions {
+ final Map? additionalParams;
+ final String? domain;
+ final String? client_id;
+ final String? leeway;
+ final String? verifierIdField;
+ final bool? isVerifierIdCaseSensitive;
+ final Display? display;
+ final Prompt? prompt;
+ final String? max_age;
+ final String? ui_locales;
+ final String? id_token_hint;
+ final String? id_token;
+ final String? login_hint;
+ final String? acr_values;
+ final String? scope;
+ final String? audience;
+ final String? connection;
+ final String? state;
+ final String? response_type;
+ final String? nonce;
+ final String? redirect_uri;
+
+ ExtraLoginOptions({
+ this.additionalParams = const {},
+ this.domain,
+ this.client_id,
+ this.leeway,
+ this.verifierIdField,
+ this.isVerifierIdCaseSensitive,
+ this.display,
+ this.prompt,
+ this.max_age,
+ this.ui_locales,
+ this.id_token_hint,
+ this.id_token,
+ this.login_hint,
+ this.acr_values,
+ this.scope,
+ this.audience,
+ this.connection,
+ this.state,
+ this.response_type,
+ this.nonce,
+ this.redirect_uri,
+ });
+
+ Map toJson() => {
+ "additionalParams": additionalParams,
+ "domain": domain,
+ "client_id": client_id,
+ "leeway": leeway,
+ "verifierIdField": verifierIdField,
+ "isVerifierIdCaseSensitive": isVerifierIdCaseSensitive,
+ "display": display?.name,
+ "prompt": prompt?.name,
+ "max_age": max_age,
+ "ui_locales": ui_locales,
+ "id_token_hint": id_token_hint,
+ "id_token": id_token,
+ "login_hint": login_hint,
+ "acr_values": acr_values,
+ "scope": scope,
+ "audience": audience,
+ "connection": connection,
+ "state": state,
+ "response_type": response_type,
+ "nonce": nonce,
+ "redirect_uri": redirect_uri,
+ };
+}
+```
+
+
+
+
+### Single Verifer Example
+
+
+
+
+Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
+to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
+configurations in the `ExtraLoginOptions` object in the `login` function.
+
+```dart
+Future initWeb3Auth() async {
+ final themeMap = HashMap();
+ themeMap['primary'] = "#229954";
+
+ // focus-start
+ final loginConfig = new HashMap();
+ loginConfig['jwt'] = LoginConfigItem(
+ verifier: "verifier-name", // get it from web3auth dashboard for auth0 configuration
+ typeOfLogin: TypeOfLogin.jwt,
+ clientId: "auth0_client_id" // get it from auth0 dashboard
+ );
+ // focus-end
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: "WEB3AUTH_CLIENT_ID",
+ network: Network.sapphire_mainnet,
+ redirectUrl: redirectUrl,
+ // focus-next-line
+ loginConfig: loginConfig,
+ ),
+ );
+}
+
+// Login
+final Web3AuthResponse response = await Web3AuthFlutter.login(
+ LoginParams(
+ // focus-start
+ loginProvider: Provider.jwt,
+ extraLoginOptions: ExtraLoginOptions(
+ domain: "https://tenant-name.us.auth0.com", // Domain of your auth0 app
+ verifierIdField: "sub", // The field in jwt token which maps to verifier id.
+ )
+ // focus-end
+ )
+);
+```
+
+
+
+
+If you're using any other provider like Firebase, AWS Cognito or deploying your own Custom JWT
+server, you need to put the jwt token into the `id_token` parameter of the `ExtraLoginOptions`.
+
+```dart
+Future initWeb3Auth() async {
+ final themeMap = HashMap();
+ themeMap['primary'] = "#229954";
+
+ // focus-start
+ final loginConfig = new HashMap();
+ loginConfig['jwt'] = LoginConfigItem(
+ verifier: "verifier-name", // get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ );
+ // focus-end
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: 'WEB3AUTH_CLIENT_ID',
+ network: Network.sapphire_mainnet,
+ redirectUrl: redirectUrl,
+ // focus-next-line
+ loginConfig: loginConfig,
+ ),
+ );
+}
+
+// Login
+final Web3AuthResponse response = await Web3AuthFlutter.login(
+ LoginParams(
+ // focus-start
+ loginProvider: Provider.jwt,
+ extraLoginOptions: ExtraLoginOptions(
+ id_token: "YOUR_ID_TOKEN",
+ )
+ // focus-end
+ )
+);
+```
+
+
+
+
+To use the Email Passwordless login, you need to put the email into the `login_hint` parameter of
+the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
+`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
+`ExtraLoginOptions`.
+
+```dart
+Future initWeb3Auth() async {
+ final themeMap = HashMap();
+ themeMap['primary'] = "#229954";
+
+ final additionalParams = HashMap();
+ additionalParams['flow_type'] = "link"; // default is 'code'
+
+ Uri redirectUrl;
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else if (Platform.isIOS) {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://openlogin
+ } else {
+ throw UnKnownException('Unknown platform');
+ }
+
+ await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: "WEB3AUTH_CLIENT_ID",
+ network: Network.sapphire_mainnet,
+ redirectUrl: redirectUrl,
+ ),
+ );
+}
+
+// Login
+final Web3AuthResponse response = await Web3AuthFlutter.login(
+ LoginParams(loginProvider: Provider.email_passwordless,
+ // focus-start
+ extraLoginOptions: ExtraLoginOptions(
+ login_hint: "hello@web3auth.io",
+ additionalParams: additionalParams
+ ),
+ // focus-end
+ ),
+);
+```
+
+
+
+
+To use the SMS Passwordless login, send the phone number as the `login_hint` parameter of the
+`ExtraLoginOptions`. Please make sure the phone number is in the format of
++\{country_code}-\{phone_number}, i.e. (+91-09xx901xx1).
+
+
+
+
+
+### Aggregate Verifier Example
+
+You can use aggregate verifier to combine multiple login methods to get the same address for the
+users regardless of their login providers. For example, combining a Google and Email Passwordless
+login, or Google and GitHub via Auth0 to access the same address for your user.
+
+```dart
+// focus-start
+final loginConfig = HashMap();
+
+loginConfig['google'] = LoginConfigItem(
+ verifier: "aggregate-sapphire",
+ verifierSubIdentifier: "w3a-google",
+ typeOfLogin: TypeOfLogin.google,
+ clientId: "YOUR_GOOGLE_CLIENT_ID",
+);
+
+loginConfig['jwt'] = LoginConfigItem(
+ verifier: "aggregate-sapphire",
+ verifierSubIdentifier: "w3a-a0-github",
+ typeOfLogin: TypeOfLogin.jwt,
+ clientId: "YOUR_AUTHO_CLIENT_ID",
+);
+// focus-end
+
+await Web3AuthFlutter.init(
+ Web3AuthOptions(
+ clientId: 'YOUR_WEB3AUTH_CLIENT_ID',
+ network: Network.sapphire_mainnet,
+ redirectUrl: redirectUrl,
+ // focus-next-line
+ loginConfig: loginConfig,
+ ),
+);
+
+await Web3AuthFlutter.initialize();
+
+// Login with Google
+// focus-next-line
+await Web3AuthFlutter.login(LoginParams(loginProvider: Provider.google));
+
+// Login With GitHub
+// focus-start
+await Web3AuthFlutter.login(
+ LoginParams(
+ loginProvider: Provider.jwt,
+ extraLoginOptions: ExtraLoginOptions(
+ domain: 'https://web3auth.au.auth0.com',
+ verifierIdField: 'email',
+ connection: 'github',
+ isVerifierIdCaseSensitive: false,
+ ),
+ ),
+);
+// focus-end
+```
diff --git a/docs/sdk/pnp/flutter/dapp-share.mdx b/docs/sdk/mobile/pnp/flutter/dapp-share.mdx
similarity index 100%
rename from docs/sdk/pnp/flutter/dapp-share.mdx
rename to docs/sdk/mobile/pnp/flutter/dapp-share.mdx
diff --git a/docs/sdk/pnp/flutter/examples.mdx b/docs/sdk/mobile/pnp/flutter/examples.mdx
similarity index 100%
rename from docs/sdk/pnp/flutter/examples.mdx
rename to docs/sdk/mobile/pnp/flutter/examples.mdx
diff --git a/docs/sdk/pnp/flutter/flutter.mdx b/docs/sdk/mobile/pnp/flutter/flutter.mdx
similarity index 100%
rename from docs/sdk/pnp/flutter/flutter.mdx
rename to docs/sdk/mobile/pnp/flutter/flutter.mdx
diff --git a/docs/sdk/mobile/pnp/flutter/initialize.mdx b/docs/sdk/mobile/pnp/flutter/initialize.mdx
new file mode 100644
index 000000000..9ae6bf837
--- /dev/null
+++ b/docs/sdk/mobile/pnp/flutter/initialize.mdx
@@ -0,0 +1,200 @@
+---
+title: Initializing PnP Flutter SDK
+sidebar_label: Initialize
+description: "Web3Auth PnP Flutter SDK - Initialization | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+After installation, the next step to use Web3Auth is to configure & initialize the SDK.
+
+However, configuring & initializing is a three-step process:
+
+1. [Configure the Web3Auth Instance](#configure-web3auth-instance)
+2. [Triggering Login exceptions](#triggering-login-exceptions)
+3. [Initialize Web3Auth](#initialize-web3auth)
+
+## Configure Web3Auth instance
+
+Please note that these are the most critical steps where you need to pass on different parameters
+according to the preference of your project. Additionally, Whitelabeling and Custom Authentication
+have to be configured within this step, if you wish to customize your Web3Auth Instance.
+
+### Parameters
+
+The `init` method takes an object called `Web3AuthOptions` as input to configure the Web3Auth
+instance.
+
+
+
+
+
+| Parameter | Description |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `clientId` | Your Web3Auth Client ID. You can get it from Web3Auth [Dashboard](https://dashboard.web3auth.io/) under project details. It's a mandatory field of type `String` |
+| `network` | Web3Auth Network, `sapphire_mainnet`, `sapphire_devnet`, `mainnet`, `cyan`, `aqua` or `testnet`. It's a mandatory field of type [Network](https://pub.dev/documentation/web3auth_flutter/latest/enums/Network.html). |
+| `redirectUrl` | URL that Web3Auth will redirect API responses upon successful authentication from browser. It's a mandatory field of type [Uri](https://api.dart.dev/stable/2.18.0/dart-core/Uri-class.html). |
+| `whiteLabel?` | WhiteLabel options for web3auth. It helps you define custom UI, branding, and translations for your brand app. It takes [WhiteLabelData](https://pub.dev/documentation/web3auth_flutter/latest/input/WhiteLabelData-class.html) as a value. |
+| `loginConfig?` | Login config for the custom verifiers. It takes `HashMap` as a value. |
+| `useCoreKitKey?` | Use CoreKit Key to get core kit key. It's an optional field with default value as `false`. |
+| `chainNamespace?` | Chain Namespace [`eip155` and `solana`]. It takes [ChainNamespace](https://pub.dev/documentation/web3auth_flutter/latest/enums/ChainNamespace.html) as a value. |
+| `mfaSettings?` | Allows developers to configure the Mfa settings for authentication. It takes [MfaSettings](https://pub.dev/documentation/web3auth_flutter/latest/input/MfaSettings-class.html) as a value. |
+| `sessionTime?` | It allows developers to configure the session management time. Session Time is in seconds, default is 86400 seconds which is 1 day. `sessionTime` can be max 30 days |
+
+
+
+
+
+```dart
+class Web3AuthOptions {
+ final String clientId;
+ final Network network;
+ final BuildEnv? buildEnv;
+ final String? sdkUrl;
+ final Uri redirectUrl;
+ final WhiteLabelData? whiteLabel;
+ final HashMap? loginConfig;
+ final bool? useCoreKitKey;
+ final ChainNamespace? chainNamespace;
+ final MfaSettings? mfaSettings;
+ final int? sessionTime;
+
+ Web3AuthOptions({
+ required this.clientId,
+ required this.network,
+ this.buildEnv = BuildEnv.production,
+ String? sdkUrl,
+ required this.redirectUrl,
+ this.whiteLabel,
+ this.loginConfig,
+ this.useCoreKitKey,
+ this.chainNamespace = ChainNamespace.eip155,
+ this.sessionTime = 86400,
+ this.mfaSettings,
+ }): sdkUrl = sdkUrl ?? getSdkUrl(buildEnv ?? BuildEnv.production);
+
+ Map toJson() {
+ return {
+ 'clientId': clientId,
+ 'network': network.name,
+ 'sdkUrl': sdkUrl,
+ 'buildEnv': buildEnv?.name,
+ 'redirectUrl': redirectUrl.toString(),
+ 'whiteLabel': whiteLabel?.toJson(),
+ 'loginConfig': loginConfig,
+ 'useCoreKitKey': useCoreKitKey,
+ 'chainNamespace': chainNamespace?.name,
+ 'mfaSettings': mfaSettings,
+ "sessionTime": sessionTime,
+ };
+ }
+}
+```
+
+
+
+
+### Configure Web3AuthFlutter
+
+```dart
+Future initWeb3Auth() async {
+
+ late final Uri redirectUrl;
+
+ if (Platform.isAndroid) {
+ redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+ // w3a://com.example.w3aflutter/auth
+ } else {
+ redirectUrl = Uri.parse('{bundleId}://auth');
+ // com.example.w3aflutter://auth
+ }
+
+ // focus-start
+
+ await Web3AuthFlutter.init(Web3AuthOptions(
+ clientId: "WEB3AUTH_CLIENT_ID",
+ network: Network.sapphire_mainnet,
+ redirectUrl: redirectUrl,
+ ));
+
+ // focus-end
+}
+```
+
+## Triggering Login exceptions
+
+The `setCustomTabsClosed` method can be used to trigger login exceptions for Android. For iOS, you
+don't need this method to trigger the login exceptions. The Android SDK uses the custom tabs and
+from current implementation of chrome custom tab, it's not possible to add a listener directly to
+chrome custom tab close button and trigger login exceptions.
+
+Hence, it's necessary to use `setCustomTabsClosed` method in your login screen to trigger
+exceptions.
+
+```dart
+class LoginScreen extends State with WidgetsBindingObserver {
+ @override
+ void initState() {
+ super.initState();
+ // focus-next-line
+ WidgetsBinding.instance.addObserver(this);
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+ // focus-next-line
+ WidgetsBinding.instance.removeObserver(this);
+ }
+
+ // focus-start
+ @override
+ void didChangeAppLifecycleState(final AppLifecycleState state) {
+ // This is important to trigger the user cancellation on Android.
+ if (state == AppLifecycleState.resumed) {
+ Web3AuthFlutter.setCustomTabsClosed();
+ }
+ }
+ // focus-end
+
+ @override
+ Widget build(BuildContext context) {
+ // Your UI code
+ }
+}
+```
+
+## Initialize Web3Auth
+
+After configuring Web3Auth, the next step is to initialize it using the `initialize` method. This
+method is essential for setting up the SDK, checking for any active sessions, and fetching the
+whitelabel configuration from your dashboard.
+
+Once the `initialize` method executes successfully, you can use the `getPrivKey` or
+`getEd25519PrivKey` methods to verify if an active session exists. If there is no active session,
+these methods will return an empty string; otherwise, they will return the respective private key.
+
+Note that if the API call to fetch the project configuration fails, the method will throw an error.
+
+```dart
+try {
+ await Web3AuthFlutter.initialize();
+} catch (e) {
+ // Handle/Swallow Error
+}
+
+final privateKey = await Web3AuthFlutter.getPrivKey();
+
+// Check if the session is present or not
+if(privateKey.isNotEmpty) {
+ // Active session present
+}
+// No active session present
+```
diff --git a/docs/sdk/mobile/pnp/flutter/install.mdx b/docs/sdk/mobile/pnp/flutter/install.mdx
new file mode 100644
index 000000000..eed4a4a7e
--- /dev/null
+++ b/docs/sdk/mobile/pnp/flutter/install.mdx
@@ -0,0 +1,81 @@
+---
+title: "Installing PnP Flutter SDK"
+sidebar_label: "Install"
+description: "Installing Web3Auth PnP Flutter SDK | Documentation - Web3Auth"
+---
+
+import FlutterInstallation from "@site/src/common/sdk/pnp/flutter/_installation.mdx";
+
+import UpdateGradle from "@site/src/common/sdk/pnp/android/_update-gradle.mdx";
+import AndroidPermission from "@site/src/common/sdk/pnp/android/_android-permissions.mdx";
+import AndroidDeepLinking from "@site/src/common/sdk/pnp/android/_android-deep-linking.mdx";
+import AndroidWhitelist from "@site/src/common/sdk/pnp/android/_android-whitelist.mdx";
+
+import SPM from "@site/src/common/sdk/pnp/ios/_spm.mdx";
+import Cocoapods from "@site/src/common/sdk/pnp/ios/_cocoapods.mdx";
+import IOSWhitelist from "@site/src/common/sdk/pnp/ios/ios-whitelist.mdx";
+
+## Requirements
+
+- **Android** API version 26 or newer.
+- **iOS** 14, Xcode 12+ and Swift 5.x
+
+## Installation
+
+
+
+## Android Configuration
+
+Once we have installed Web3Auth Flutter SDK, we also need to add the configuration for Android.
+
+### Update compileSdkVersion
+
+For Android build `compileSdkVersion` needs to be `34`. Check your app module gradle file in your
+project to change it.
+
+```groovy
+android {
+ namespace "com.example.app_name"
+ // focus-next-line
+ compileSdkVersion 34
+ // ..
+}
+```
+
+### Add Web3Auth to Gradle
+
+
+
+### Update Permissions
+
+
+
+### Configure Redirection
+
+Once the gradles and permission has been updated, you need to configure Web3Auth project by
+whitelisting your scheme and package name.
+
+#### Configure Web3Auth project
+
+
+
+#### Configure Deep Link
+
+
+
+## iOS Configuration
+
+Once we have configured the Android SDK, we also need add the configuration for iOS.
+
+### Update global iOS platform
+
+For iOS build global platform needs to be 14.0. Check `Podfile` in your project to change the global
+platform.
+
+```
+platform :ios, '14.0'
+```
+
+### Configure Redirection
+
+
diff --git a/docs/sdk/pnp/flutter/mfa.mdx b/docs/sdk/mobile/pnp/flutter/mfa.mdx
similarity index 100%
rename from docs/sdk/pnp/flutter/mfa.mdx
rename to docs/sdk/mobile/pnp/flutter/mfa.mdx
diff --git a/docs/sdk/pnp/flutter/usage.mdx b/docs/sdk/mobile/pnp/flutter/usage.mdx
similarity index 100%
rename from docs/sdk/pnp/flutter/usage.mdx
rename to docs/sdk/mobile/pnp/flutter/usage.mdx
diff --git a/docs/sdk/pnp/flutter/whitelabel.mdx b/docs/sdk/mobile/pnp/flutter/whitelabel.mdx
similarity index 100%
rename from docs/sdk/pnp/flutter/whitelabel.mdx
rename to docs/sdk/mobile/pnp/flutter/whitelabel.mdx
diff --git a/docs/sdk/mobile/pnp/ios/custom-authentication.mdx b/docs/sdk/mobile/pnp/ios/custom-authentication.mdx
new file mode 100644
index 000000000..3599bae04
--- /dev/null
+++ b/docs/sdk/mobile/pnp/ios/custom-authentication.mdx
@@ -0,0 +1,445 @@
+---
+title: Using Custom Authentication in PnP iOS SDK
+sidebar_label: Custom Authentication
+description: "Web3Auth PnP iOS SDK - Using Custom Authentication | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+import SMSPasswordless from "@site/src/common/sdk/pnp/ios/_sms_passwordless.mdx";
+
+## Configuration
+
+To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
+Firebase etc. or even your own custom JWT login) you can add the configuration using the
+`loginConfig` parameter during the initialization.
+
+The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in
+its string form, and the value should be a `W3ALoginConfig` struct.
+
+To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
+Dashboard in "Custom Authentication" section.
+[Learn how to create a custom verifier](/authentication).
+
+:::tip Create Custom Verifier
+
+Learn how to create a [Custom Verifier](/authentication) on the Web3Auth Dashboard.
+
+:::
+
+
+
+### Parameters
+
+After creating the verifier, you can use the following parameters in the `W3ALoginConfig`.
+
+
+
+
+
+| Parameter | Description |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `String` as a value. |
+| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
+| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `String` as a value. |
+| `name?` | Display name for the verifier. If null, the default name is used. It accepts `String` as a value. |
+| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `String` as a value. |
+| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `String` as a value. |
+| `logoHover?` | Logo to be shown on mouse hover. It accepts `String` as a value. |
+| `logoLight?` | Light logo for dark background. It accepts `String` as a value. |
+| `logoDark?` | Dark logo for light background. It accepts `String` as a value. |
+| `mainOption?` | Show login button on the main list. It accepts `Bool` as a value. Default value is false. |
+| `showOnModal?` | Whether to show the login button on modal or not. Default value is true. |
+| `showOnDesktop?` | Whether to show the login button on desktop. Default value is true. |
+| `showOnMobile?` | Whether to show the login button on mobile. Default value is true. |
+
+
+
+
+
+```swift
+public struct W3ALoginConfig: Codable {
+ let verifier: String
+ let typeOfLogin: TypeOfLogin
+ let clientId: String
+ let name: String?
+ let description: String?
+ let verifierSubIdentifier: String?
+ let logoHover: String?
+ let logoLight: String?
+ let logoDark: String?
+ let mainOption: Bool?
+ let showOnModal: Bool?
+ let showOnDesktop: Bool?
+ let showOnMobile: Bool?
+}
+
+public enum TypeOfLogin: String, Codable {
+ case google
+ case facebook
+ case reddit
+ case discord
+ case twitch
+ case apple
+ case github
+ case linkedin
+ case twitter
+ case weibo
+ case line
+ case email_password
+ case passwordless
+ case jwt
+}
+
+```
+
+
+
+
+### Usage
+
+
+
+
+
+```swift
+import Web3Auth
+
+let web3Auth = try await Web3Auth(
+ W3AInitParams(
+ clientId: "YOUR_CLIENT_ID",
+ network: .sapphire_mainnet,
+ // focus-start
+ loginConfig: [
+ Web3AuthProvider.JWT.rawValue: .init(
+ verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.google,
+ clientId: "YOUR_GOOGLE_CLIENT_ID",
+ )
+ ]
+ // focus-end
+ )
+)
+```
+
+
+
+
+
+```swift
+import Web3Auth
+
+let web3Auth = try await Web3Auth(
+ W3AInitParams(
+ clientId: "YOUR_CLIENT_ID",
+ network: .sapphire_mainnet,
+ // focus-start
+ loginConfig: [
+ Web3AuthProvider.JWT.rawValue: .init(
+ verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.facebook,
+ clientId: "YOUR_FACEBOOK_CLIENT_ID",
+ )
+ ]
+ // focus-end
+ )
+)
+
+```
+
+
+
+
+
+```swift
+import Web3Auth
+
+let web3Auth = try await Web3Auth(
+ W3AInitParams(
+ clientId:"YOUR_CLIENT_ID",
+ network: .sapphire_mainnet,
+ // focus-start
+ loginConfig: [
+ Web3AuthProvider.JWT.rawValue: .init(
+ verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ clientId: "YOUR_CLIENT_ID",
+ )
+ ]
+ // focus-end
+ )
+)
+```
+
+
+
+
+
+## Configure Extra Login Options
+
+Additional to the login config during initialization, you can pass extra options to the `login`
+function to configure the login flow for cases requiring additional info for enabling login. The
+`ExtraLoginOptions` accepts the following parameters.
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `additionalParams?` | Additional params in `[String:String]` format for OAuth login, use id_token(JWT) to authenticate with web3auth. |
+| `domain?` | Your custom authentication domain in `String` format. For example, if you are using Auth0, it can be example.au.auth0.com. |
+| `client_id?` | Client id in `String` format, provided by your login provider used for custom verifier. |
+| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes `Int` as a value. |
+| `verifierIdField?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes `String` as a value. |
+| `isVerifierIdCaseSensitive?` | `Bool` to confirm Whether the verifier id field is case sensitive or not. |
+| `display?` | Allows developers the configure the display of UI. It takes `String` as a value. |
+| `prompt?` | Prompt shown to the user during authentication process. It takes `String` as a value. |
+| `max_age?` | Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes `String` as a value. |
+| `ui_locales?` | The space separated list of language tags, ordered by preference. For instance `fr-CA fr en`. |
+| `id_token_hint?` | It denotes the previously issued ID token. It takes `String` as a value. |
+| `id_token?` | JWT (ID Token) to be passed for login. |
+| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes `String` as a value. |
+| `acr_values?` | acc_values |
+| `scope?` | The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes `String` as a value. |
+| `audience?` | The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes `String` as a value. |
+| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes `String` as a value. |
+| `state?` | state |
+| `response_type?` | Defines which grant to execute for the authorization server. It takes `String` as a value. |
+| `nonce?` | nonce |
+| `redirect_uri?` | It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application. |
+
+
+
+
+
+```swift
+public struct ExtraLoginOptions: Codable {
+ let display: String?
+ let prompt: String?
+ let max_age: String?
+ let ui_locales: String?
+ let id_token_hint: String?
+ let id_token: String?
+ let login_hint: String?
+ let acr_values: String?
+ let scope: String?
+ let audience: String?
+ let connection: String?
+ let domain: String?
+ let client_id: String?
+ let redirect_uri: String?
+ let leeway: Int?
+ let verifierIdField: String?
+ let isVerifierIdCaseSensitive: Bool?
+ let additionalParams: [String : String]?
+}
+```
+
+
+
+
+
+### Single Verifier Example
+
+
+
+
+Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
+to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
+configurations in the `ExtraLoginOptions` object in the login function.
+
+```swift
+import
+
+let web3Auth = try await Web3Auth(
+ W3AInitParams(
+ clientId:"YOUR_CLIENT_ID",
+ network: .sapphire_mainnet,
+ // Optional loginConfig object
+ //focus-start
+ loginConfig: [
+ Web3AuthProvider.JWT.rawValue: .init(
+ verifier: "YOUR_VERIFIER_NAME", // Get it from Web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ clientId: "YOUR_AUTH0_CLIENT_ID",
+ )
+ ]
+ //focus-end
+ )
+)
+
+ // focus-start
+let result = try await web3Auth.login(
+ W3ALoginParams(
+ .JWT,
+ extraLoginOptions: .init(
+ // Domain of your auth0 app
+ domain:"https://username.us.auth0.com",
+ // The field in jwt token which maps to verifier id
+ verifierIdField: "sub",
+ )
+ )
+)
+// focus-end
+```
+
+
+
+
+If you're using any other provider like Firebase, AWS Cognito or deploying your own Custom JWT
+server, you need to put the jwt token into the `id_token` field of the `extraLoginOptions`,
+additionally, you need to pass over the `domain` field as well, which is mandatory. If you don't
+have a domain, just passover a string in that field.
+
+```swift
+import Web3Auth
+
+let web3Auth = try await Web3Auth(
+ W3AInitParams(
+ clientId:"YOUR_CLIENT_ID",
+ network: .testnet,
+ // Optional loginConfig object
+ // focus-start
+ loginConfig: [
+ Web3AuthProvider.JWT.rawValue: .init(
+ verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
+ typeOfLogin: TypeOfLogin.jwt,
+ clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+ )
+ ]
+ //focus-end
+ )
+)
+
+ // focus-start
+let result = await web3Auth.login(
+ W3ALoginParams(
+ Web3AuthProvider.JWT,
+ extraLoginOptions: .init(domain:"your-domain", id_token: "your_jwt_token")
+ )
+)
+// focus-end
+```
+
+
+
+
+To use the Email Passwordless login, you need to put the email into the `login_hint` parameter of
+the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
+`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
+`ExtraLoginOptions`.
+
+```swift
+import Web3Auth
+
+let web3auth = try await Web3Auth(W3AInitParams(
+ clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+ network: .sapphire_mainnet,
+ redirectUrl: "bundleId://auth"
+))
+
+ // focus-start
+let result = try await web3Auth.login(
+ W3ALoginParams(
+ Web3AuthProvider.EMAIL_PASSWORDLESS,
+ extraLoginOptions: .init(loginHint: "hello@web3auth.io")
+))
+// focus-end
+```
+
+
+
+
+
+To use the SMS Passwordless login, send the phone number as the `login_hint` parameter of the
+`ExtraLoginOptions`. Please make sure the phone number is in the format of
++\{country_code}-\{phone_number}, i.e. (+91-09xx901xx1).
+
+
+
+
+
+### Aggregate Verifier Example
+
+You can use aggregate verifier to combine multiple login methods to get the same address for the
+users regardless of their login providers. For example, combining a Google and Email Passwordless
+login, or Google and GitHub via Auth0 to access the same address for your user.
+
+```swift
+import Web3Auth
+
+let web3Auth = try await Web3Auth(
+ W3AInitParams(
+ clientId: clientId,
+ network: network,
+ redirectUrl: "web3auth.ios-aggregate-example://auth",
+ // focus-start
+ loginConfig: [
+ TypeOfLogin.google.rawValue: .init(
+ verifier: "aggregate-sapphire",
+ typeOfLogin: .google,
+ name: "Web3Auth-Aggregate-Verifier-Google-Example",
+ clientId: "YOUR_GOOGLE_CLIENT_ID",
+ verifierSubIdentifier: "w3a-google"
+ ),
+ TypeOfLogin.jwt.rawValue: .init(
+ verifier: "aggregate-sapphire",
+ typeOfLogin: .jwt,
+ clientId: "YOUR_AUTH0_CLIENT_ID",
+ verifierSubIdentifier: "w3a-a0-github"
+ )
+ ],
+ // focus-end
+))
+
+func loginWithGoogle() async {
+ // focus-start
+ let result = try await web3Auth?.login(
+ W3ALoginParams(
+ loginProvider: .GOOGLE,
+ )
+ )
+ // focus-end
+}
+
+func loginWithGitHub() async {
+ // focus-start
+ let result = try await web3Auth?.login(
+ W3ALoginParams(
+ loginProvider: .JWT,
+ extraLoginOptions: ExtraLoginOptions(display: nil, prompt: nil, max_age: nil, ui_locales: nil, id_token_hint: nil, id_token: nil, login_hint: nil, acr_values: nil, scope: nil, audience: nil, connection: "github", domain: "https://web3auth.au.auth0.com", client_id: nil, redirect_uri: nil, leeway: nil, verifierIdField: "email", isVerifierIdCaseSensitive: false, additionalParams: nil),
+ )
+ )
+ // focus-end
+}
+```
diff --git a/docs/sdk/pnp/ios/dapp-share.mdx b/docs/sdk/mobile/pnp/ios/dapp-share.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/dapp-share.mdx
rename to docs/sdk/mobile/pnp/ios/dapp-share.mdx
diff --git a/docs/sdk/pnp/ios/examples.mdx b/docs/sdk/mobile/pnp/ios/examples.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/examples.mdx
rename to docs/sdk/mobile/pnp/ios/examples.mdx
diff --git a/docs/sdk/pnp/ios/initialize.mdx b/docs/sdk/mobile/pnp/ios/initialize.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/initialize.mdx
rename to docs/sdk/mobile/pnp/ios/initialize.mdx
diff --git a/docs/sdk/pnp/ios/install.mdx b/docs/sdk/mobile/pnp/ios/install.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/install.mdx
rename to docs/sdk/mobile/pnp/ios/install.mdx
diff --git a/docs/sdk/pnp/ios/ios.mdx b/docs/sdk/mobile/pnp/ios/ios.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/ios.mdx
rename to docs/sdk/mobile/pnp/ios/ios.mdx
diff --git a/docs/sdk/pnp/ios/mfa.mdx b/docs/sdk/mobile/pnp/ios/mfa.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/mfa.mdx
rename to docs/sdk/mobile/pnp/ios/mfa.mdx
diff --git a/docs/sdk/pnp/ios/usage.mdx b/docs/sdk/mobile/pnp/ios/usage.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/usage.mdx
rename to docs/sdk/mobile/pnp/ios/usage.mdx
diff --git a/docs/sdk/pnp/ios/whitelabel.mdx b/docs/sdk/mobile/pnp/ios/whitelabel.mdx
similarity index 100%
rename from docs/sdk/pnp/ios/whitelabel.mdx
rename to docs/sdk/mobile/pnp/ios/whitelabel.mdx
diff --git a/docs/sdk/mobile/pnp/react-native/account-abstraction.mdx b/docs/sdk/mobile/pnp/react-native/account-abstraction.mdx
new file mode 100644
index 000000000..4f7eecfc7
--- /dev/null
+++ b/docs/sdk/mobile/pnp/react-native/account-abstraction.mdx
@@ -0,0 +1,198 @@
+---
+title: Account Abstraction
+sidebar_label: Account Abstraction
+description: "@web3auth/react-native-sdk Native Account Abstraction | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
+import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
+import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx";
+import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
+import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
+import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
+import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
+
+import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
+import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
+import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
+
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+
+
+
+## Installation
+
+
+
+## Configure
+
+
+
+Please note this is the important step for setting the Web3Auth account abstraction provider.
+
+- [Configure Smart Account provider](#configure-smart-account-provider)
+- [Configure Bundler](#configure-bundler)
+- [Configure Sponsored Paymaster](#sponsored-paymaster)
+- [Configure ERC-20 Paymaster](#erc-20-paymaster)
+
+## Configure Smart Account Provider
+
+
+
+## Configure Bundler
+
+
+
+## Configure Paymaster
+
+You can configure the paymaster of your choice to sponsor gas fees for your users, along with the
+paymaster context. The paymaster context lets you set additional parameters, such as choosing the
+token for ERC-20 paymasters, defining gas policies, and more.
+
+### Sponsored Paymaster
+
+
+
+### ERC-20 Paymaster
+
+
+
+## Set up
+
+### Configure Web3Auth Instance
+
+
+
+
+```ts
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+// focus-start
+import {
+ AccountAbstractionProvider,
+ SafeSmartAccount,
+} from "@web3auth/account-abstraction-provider";
+//focus-end
+import Web3Auth, { WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";
+import * as WebBrowser from "@toruslabs/react-native-web-browser";
+import EncryptedStorage from "react-native-encrypted-storage";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+
+const chainConfig = {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ chainId: "0xaa36a7",
+ rpcTarget: "https://rpc.sepolia.org",
+ displayName: "Ethereum Sepolia Testnet",
+ blockExplorerUrl: "https://sepolia.etherscan.io",
+ ticker: "ETH",
+ tickerName: "Ethereum",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+// focus-start
+const accountAbstractionProvider = new AccountAbstractionProvider({
+ config: {
+ chainConfig,
+ bundlerConfig: {
+ // Get the pimlico API Key from dashboard.pimlico.io
+ url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
+ },
+ smartAccountInit: new SafeSmartAccount(),
+ },
+});
+// focus-end
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
+ clientId,
+ redirectUrl,
+ network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
+ privateKeyProvider,
+ // focus-next-line
+ accountAbstractionProvider: aaProvider,
+});
+```
+
+
+
+
+```ts
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+// focus-start
+import {
+ AccountAbstractionProvider,
+ SafeSmartAccount,
+} from "@web3auth/account-abstraction-provider";
+//focus-end
+import Web3Auth, { WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";
+import * as WebBrowser from "expo-web-browser";
+import * as SecureStore from "expo-secure-store";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+
+const chainConfig = {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ chainId: "0xaa36a7",
+ rpcTarget: "https://rpc.sepolia.org",
+ displayName: "Ethereum Sepolia Testnet",
+ blockExplorerUrl: "https://sepolia.etherscan.io",
+ ticker: "ETH",
+ tickerName: "Ethereum",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+// focus-start
+const accountAbstractionProvider = new AccountAbstractionProvider({
+ config: {
+ chainConfig,
+ bundlerConfig: {
+ // Get the pimlico API Key from dashboard.pimlico.io
+ url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
+ },
+ smartAccountInit: new SafeSmartAccount(),
+ },
+});
+// focus-end
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+const web3auth = new Web3Auth(WebBrowser, SecureStore, {
+ clientId,
+ redirectUrl,
+ network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
+ privateKeyProvider,
+ // focus-next-line
+ accountAbstractionProvider: aaProvider,
+});
+```
+
+
+
+
+### Configure Signer
+
+
+
+## Smart Account Address
+
+
+
+## Send Transaction
+
+
+
+## Advanced Smart Account Operations
+
+To learn more about supported transaction methods, and how to perform batch transactions,
+[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/web/react).
diff --git a/docs/sdk/mobile/pnp/react-native/custom-authentication.mdx b/docs/sdk/mobile/pnp/react-native/custom-authentication.mdx
new file mode 100644
index 000000000..e729a146e
--- /dev/null
+++ b/docs/sdk/mobile/pnp/react-native/custom-authentication.mdx
@@ -0,0 +1,236 @@
+---
+title: Custom Authentication in PnP React Native SDK
+sidebar_label: Custom Authentication
+description:
+ "Web3Auth PnP React Native SDK - Using Custom Authentication | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+## Overview
+
+Custom Authentication allows you to authenticate users using your own custom authentication service
+or third-party providers like Google, Auth0, AWS Cognito, or Firebase. This guide will walk you
+through the process of integrating custom authentication into your React Native app using the
+Web3Auth PnP React Native SDK.
+
+## Prerequisites
+
+Before you start, ensure you have configured a custom verifier in the Web3Auth Dashboard. This
+verifier will be used to facilitate custom authentication.
+
+
+
+:::tip
+
+Create Custom Verifier Check out how to create a **[Custom Verifier](/authentication)** on the
+Web3Auth Dashboard.
+
+:::
+
+:::info using dapp share
+
+- dApp Share is only returned for Custom verifiers.
+- 2FA should be enabled for accounts using it. Use `mfaLevel = MFALevel.MANDATORY` in the
+ `LoginParams` during login. See **[MFA](/sdk/mobile/pnp/react-native/mfa)** for more details.
+
+:::
+
+## Single Verifier
+
+### Step 1: Configure the `LoginConfig`
+
+To use custom authentication with a single verifier, add the configuration to the `loginConfig`
+parameter of the `SdkInitParams` object during initialization. The `loginConfig` parameter is a
+key-value map where the key should be one of the `LOGIN_PROVIDER` in its string form, and the value
+should be a `LoginConfig` object.
+
+```javascript
+import * as WebBrowser from "@toruslabs/react-native-web-browser";
+import Web3Auth, {
+ WEB3AUTH_NETWORK,
+ LOGIN_PROVIDER,
+ TypeOfLogin,
+} from "@web3auth/react-native-sdk";
+
+const web3auth = new Web3Auth(WebBrowser, {
+ clientId: "YOUR_CLIENT_ID", // web3auth's client id
+ network: WEB3AUTH_NETWORK.MAINNET, // or other networks
+ loginConfig: {
+ google: {
+ verifier: "google-verifier", // Get this from the Web3Auth Dashboard
+ typeOfLogin: TypeOfLogin.GOOGLE,
+ clientId: "GOOGLE_CLIENT_ID", // Google's client id
+ },
+ jwt: {
+ verifier: "jwt-verifier", // Get this from the Web3Auth Dashboard
+ typeOfLogin: TypeOfLogin.JWT,
+ clientId: "JWT_CLIENT_ID", // Custom JWT client id
+ },
+ },
+});
+```
+
+### Step 2: `LoginConfig` Object Structure
+
+The `LoginConfig` object contains various parameters that define the behavior of the custom
+authentication process. Below are the details of the `LoginConfig` object:
+
+| Parameter | Description |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field and accepts a `string` as a value. |
+| `typeOfLogin` | Type of login for this verifier. This value will affect the login flow. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should provide your own JWT token, and no sign-in flow will be presented. It's a mandatory field and accepts a `TypeOfLogin` value. |
+| `clientId` | The client ID provided by your login provider, e.g., Google's Client ID or Web3Auth's client ID if using `jwt` as `typeOfLogin`. It's a mandatory field and accepts a `string` as a value. |
+| `name?` | Display name for the verifier. If null, the default name is used. It accepts a `string` as a value. |
+| `description?` | Description for the button. If provided, it renders as a full-length button; otherwise, an icon button is shown. It accepts a `string` as a value. |
+| `verifierSubIdentifier?` | The field in the JWT token that maps to the verifier ID. Ensure you selected the correct JWT verifier ID in the developer dashboard. It accepts a `string` as a value. |
+| `logoHover?` | Logo to be shown on mouse hover. It accepts a `string` as a value. |
+| `logoLight?` | Light logo for dark backgrounds. It accepts a `string` as a value. |
+| `logoDark?` | Dark logo for light backgrounds. It accepts a `string` as a value. |
+| `mainOption?` | Shows the login button on the main list. It accepts a `boolean` as a value. The default value is `false`. |
+| `showOnModal?` | Whether to show the login button on the modal. The default value is `true`. |
+| `showOnDesktop?` | Whether to show the login button on the desktop. The default value is `true`. |
+| `showOnMobile?` | Whether to show the login button on mobile. The default value is `true`. |
+| `jwtParameters?` | Custom JWT parameters to configure the login. Useful for Auth0 configuration. It accepts `JwtParameters` as a value. |
+
+### Step 3: `TypeOfLogin` Enum
+
+```typescript
+export type TypeOfLogin =
+ | "google"
+ | "facebook"
+ | "reddit"
+ | "discord"
+ | "twitch"
+ | "apple"
+ | "github"
+ | "linkedin"
+ | "twitter"
+ | "weibo"
+ | "line"
+ | "email_password"
+ | "passwordless"
+ | "jwt";
+
+export const LOGIN_PROVIDER = {
+ GOOGLE: "google",
+ FACEBOOK: "facebook",
+ REDDIT: "reddit",
+ DISCORD: "discord",
+ TWITCH: "twitch",
+ APPLE: "apple",
+ LINE: "line",
+ GITHUB: "github",
+ KAKAO: "kakao",
+ LINKEDIN: "linkedin",
+ TWITTER: "twitter",
+ WEIBO: "weibo",
+ WECHAT: "wechat",
+ EMAIL_PASSWORDLESS: "email_passwordless",
+ SMS_PASSWORDLESS: "sms_passwordless",
+ JWT: "jwt",
+} as const;
+```
+
+### Step 4: Example Implementations
+
+#### Using Google Login
+
+```javascript
+web3auth.login({
+ loginProvider: LOGIN_PROVIDER.GOOGLE,
+ redirectUrl: `${scheme}://auth`,
+ extraLoginOptions: {
+ login_hint: "user@example.com", // Optional: pre-fill the email field
+ },
+});
+```
+
+#### Using JWT Login (e.g., Auth0)
+
+```javascript
+web3auth.login({
+ loginProvider: LOGIN_PROVIDER.JWT,
+ redirectUrl: `${scheme}://auth`,
+ extraLoginOptions: {
+ id_token: "YOUR_JWT_ID_TOKEN", // JWT ID token
+ domain: "https://example.auth0.com", // Auth0 domain
+ verifierIdField: "sub", // The field in JWT token mapping to verifier id
+ },
+});
+```
+
+## Aggregate Verifier
+
+You can use an aggregate verifier to combine multiple login methods, allowing users to log in using
+different providers but receive the same address.
+
+### Step 1: Configure the `LoginConfig`
+
+To use aggregate verifiers, set up the `loginConfig` object with multiple providers under a single
+verifier.
+
+```javascript
+const web3auth = new Web3Auth(WebBrowser, {
+ clientId: "YOUR_CLIENT_ID", // Web3Auth's client id
+ network: WEB3AUTH_NETWORK.MAINNET, // or other networks
+ loginConfig: {
+ google: {
+ verifier: "aggregate-verifier",
+ verifierSubIdentifier: "google-sub-id",
+ typeOfLogin: TypeOfLogin.GOOGLE,
+ clientId: "GOOGLE_CLIENT_ID",
+ },
+ auth0emailpasswordless: {
+ verifier: "aggregate-verifier",
+ verifierSubIdentifier: "auth0-sub-id",
+ typeOfLogin: TypeOfLogin.JWT,
+ clientId: "AUTH0_CLIENT_ID",
+ jwtParameters: {
+ domain: "https://example.auth0.com",
+ verifierIdField: "email",
+ isVerifierIdCaseSensitive: false,
+ },
+ },
+ },
+});
+```
+
+### Step 2: Example Implementations
+
+#### Using Google and Auth0 Combined Login
+
+```javascript
+web3auth.login({
+ loginProvider: LOGIN_PROVIDER.GOOGLE, // or LOGIN_PROVIDER.JWT
+ redirectUrl: `${scheme}://auth`,
+});
+```
+
+## Extra Login Options for Special Cases
+
+The `extraLoginOptions` parameter can be used to pass additional options required by specific login
+providers.
+
+| Parameter | Description |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `additionalParams?` | Additional params in `[key: string]` format for OAuth login. Use `id_token` (JWT) to authenticate with Web3Auth. |
+| `domain?` | Your custom authentication domain in `string` format. For example, if you are using Auth0, it can be `example.auth0.com`. |
+| `client_id?` | Client ID in `string` format, provided by your login provider and used for the custom verifier. |
+| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in seconds, ideally no more than 60 seconds or 120 seconds at max. It takes a `string` as a value. |
+| `verifierIdField?` | The field in JWT token which maps to verifier ID. Ensure you select the correct JWT verifier ID in the developer dashboard. It takes a `string` as a value. |
+| `isVerifierIdCaseSensitive?` | Boolean to confirm whether the verifier ID field is case-sensitive or not. |
+| `display?` | Allows developers to configure the display of UI. It takes a `string` as a value. |
+| `prompt?` | Prompt shown to the user during the authentication process. It takes a `string` as a value. |
+| `max_age?` | Maximum allowable elapsed time (in seconds) since authentication. If the last time user authenticated is greater than this value, the user must reauthenticate. It takes a `string` as a value. |
+| `ui_locales?` | The space-separated list of language tags, ordered by preference. For example `fr-CA fr en`. |
+| `id_token_hint?` | It denotes the previously issued ID token. It takes a `string` as a value. |
+| `id_token?` | JWT (ID Token) to be passed for login. |
+| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes a `string` as a value. |
+| `acr_values?` | `acr_values` is a space-separated string that specifies the desired Authentication Context Class Reference values. |
+| `scope?` | The default scope to be used on authentication requests. The `defaultScope` defined in the Auth0Client is included along with this scope. It takes a `string` as a value. |
+| `audience?` | The audience, presented as the `aud` claim in the access token, defines the intended consumer of the token. It takes a `string` as a value. |
+| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes a `string` as a value. |
+| `redirect_uri?` | It can be used to specify the default URL where your custom JWT verifier can redirect your browser with the result. If using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0 application settings. It takes a `string` as a value. |
diff --git a/docs/sdk/pnp/react-native/dapp-share.mdx b/docs/sdk/mobile/pnp/react-native/dapp-share.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/dapp-share.mdx
rename to docs/sdk/mobile/pnp/react-native/dapp-share.mdx
diff --git a/docs/sdk/pnp/react-native/examples.mdx b/docs/sdk/mobile/pnp/react-native/examples.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/examples.mdx
rename to docs/sdk/mobile/pnp/react-native/examples.mdx
diff --git a/docs/sdk/pnp/react-native/initialize.mdx b/docs/sdk/mobile/pnp/react-native/initialize.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/initialize.mdx
rename to docs/sdk/mobile/pnp/react-native/initialize.mdx
diff --git a/docs/sdk/mobile/pnp/react-native/install.mdx b/docs/sdk/mobile/pnp/react-native/install.mdx
new file mode 100644
index 000000000..bcf619c97
--- /dev/null
+++ b/docs/sdk/mobile/pnp/react-native/install.mdx
@@ -0,0 +1,280 @@
+---
+title: "Installing PnP React Native SDK"
+sidebar_label: "Install"
+description: "Installing Web3Auth Plug and Play React Native SDK | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import ExpoWarning from "@site/src/common/docs/_expo-warning.mdx";
+
+#### [`@web3auth/react-native-sdk`](https://github.com/web3auth/web3auth-react-native-sdk)
+
+```bash npm2yarn
+npm install --save @web3auth/react-native-sdk
+```
+
+## Selecting your Workflow
+
+In React Native, you have the choice to use one of the following workflows:
+
+### Expo Managed Workflow
+
+Your Expo app is built on your Expo's cloud, so you don't have control over the native modules used
+in the app. Developers build managed workflow apps using `expo-cli` on their computers and a
+development client on their mobile devices. Managed workflow apps typically use one or more Expo
+services, such as push notifications, builds, and updates.
+
+
+
+### Bare React Native Workflow
+
+Your Bare React Native app is entirely built on your machine. In this workflow, the developer has
+complete control, along with the complexity that comes with that. Configuration with `app.json` /
+`app.config.js` is mostly not supported in this context; instead, you will need to configure each
+native project directly with Swift/Kotlin native modules. Check out the
+[troubleshooting section](/sdk/mobile/pnp/react-native/install#troubleshooting) for fixing common
+issues.
+
+:::tip
+
+You can read more about different workflows in the
+[Expo documentation](https://docs.expo.dev/archive/managed-vs-bare/).
+
+:::
+
+## Installing Helper Modules
+
+### Adding a Web Browser Module
+
+We will also require a `WebBrowser` implementation to allow our JS-based SDK to interact with the
+native APIs, and there are different extra installation steps depending on whether you are using the
+bare workflow or managed workflow.
+
+
+
+
+
+When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install
+the `expo-web-browser` package as a `WebBrowser` implementation.
+
+```shell
+expo install expo-web-browser
+```
+
+
+
+
+
+When using our SDK with a bare workflow React Native app, you have to install a `WebBrowser`
+implementation made by us.
+
+```bash npm2yarn
+npm install --save @toruslabs/react-native-web-browser
+```
+
+
+
+
+### Adding a `Storage` Module
+
+Now with v4, we need to pass a `Storage` parameter to the SDK, which will be used for session
+management without storing the private keys of the user in the device.
+
+
+
+
+
+When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install
+the `expo-secure-store` package as a `Storage` implementation.
+
+```shell
+expo install expo-secure-store
+```
+
+
+
+
+
+When using our SDK with a bare workflow React Native app, you have to install a `Storage`
+implementation provided by react-native.
+
+```bash npm2yarn
+npm install --save react-native-encrypted-storage
+```
+
+
+
+
+### Add a Provider to your project
+
+The `@web3auth/react-native` package requires a private key provider to facilitate interaction with
+your preferred blockchain network. You can choose between the following providers based on your
+usecase.
+
+- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/mobile/pnp/react-native/providers/evm)
+- [Solana Private Key Provider for Solana Blockchain](/sdk/mobile/pnp/react-native/providers/solana)
+- [XRPL Private Key Provider for XRPL Blockchain](/sdk/mobile/pnp/react-native/providers/xrpl)
+- [Common Private Key Provider for Connecting to any Blockchain](/sdk/mobile/pnp/react-native/providers/common)
+
+## Configuration
+
+After you have installed the files needed for your workflow, you'll have to configure the SDK with
+some additional steps to be able to use the SDK properly.
+
+### Expo Managed Workflow
+
+- Adding URL scheme to `app.json`
+
+To allow the Expo-based SDK to work with exported Expo Android apps, you need to add the designated
+scheme into `app.json`
+
+```json title="app.json"
+{
+ "expo": {
+ "scheme": "web3authexpoexample" // replace with your own scheme
+ }
+}
+```
+
+- For constructing your `redirectUrl`, you'll need to use the `expo-linking`, which will help you
+ generate a `redirectUrl` for your app. Make sure you register that URL in the
+ [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+
+```tsx title="App.js"
+import Constants, { AppOwnership } from "expo-constants";
+import * as Linking from "expo-linking";
+
+const resolvedRedirectUrl =
+ Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
+ ? Linking.createURL("web3auth", {})
+ : Linking.createURL("web3auth", { scheme: "web3authexpoexample" }); // replace with your own scheme
+```
+
+:::tip
+
+You may refer to [these example apps](./examples) and try it out yourself.
+
+:::
+
+:::tip
+
+For Android, make sure to check the intent filter with `scheme` defined in your
+`AndroidManifest.xml`
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+
+
+
+
+ # replace with your own scheme
+ # focus-next-line
+
+
+```
+
+The scheme should be the same as what you have added in your app.json files
+
+:::
+
+### Bare React Native Workflow
+
+For the bare workflow, you need to perform additional installation steps, alongside specific
+configurations for Android and iOS separately.
+
+#### Android
+
+- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
+
+```gradle title="android/build.gradle"
+buildToolsVersion = "31.0.0"
+minSdkVersion = 21
+# focus-next-line
+compileSdkVersion = 31
+# focus-next-line
+targetSdkVersion = 31
+```
+
+- Add the intent filter with `scheme` defined in your `AndroidManifest.xml`
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+
+
+
+
+ # replace with your own scheme
+ # focus-next-line
+
+
+```
+
+- SDK version 31 requires you to explicitly define `android:exported="true"` in
+ `AndroidManifest.xml`, and check whether it is correctly present or not.
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+
+```
+
+- Your `redirectUrl` is your defined scheme following some identifier or your choice. For example,
+ if your scheme is `web3authrnexample`, you can define your `redirectUrl` as
+ `web3authrnexample://auth`. Make sure you register this `redirectUrl` in the
+ [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+
+```tsx title="App.js"
+const scheme = "web3authrnexample"; // Or your desired app redirection scheme
+const resolvedRedirectUrl = `${scheme}://auth`;
+```
+
+#### iOS
+
+- Make sure that the minimum SDK compile version in `Podfile` is 14 or more.
+
+```Podfile title="ios/Podfile"
+platform :ios, '14'
+```
+
+- Install the Cocoa Pods within your project directory.
+
+```shell
+cd ios
+pod install
+```
+
+- In iOS, you don't need to add `redirectUrl` as an iOS Custom URL Scheme, however, you may add it
+ to your `Info.plist`, but it is not required. Make sure your `redirectUrl` is registered in the
+ [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+
+:::tip
+
+You may refer to **[these example apps](./examples)** and try it out yourself.
+
+:::
+
+## Troubleshooting
+
+### Bundler Issues: Missing Dependencies
+
+You might face issues mentioning that certain dependencies are missing within the React Native
+environment. These are node dependencies that need to be polyfilled in your application, to enable
+Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
+building the app. Please check out our
+**[React Native Troubleshooting Guide](/troubleshooting/metro-issues)**
diff --git a/docs/sdk/pnp/react-native/mfa.mdx b/docs/sdk/mobile/pnp/react-native/mfa.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/mfa.mdx
rename to docs/sdk/mobile/pnp/react-native/mfa.mdx
diff --git a/docs/sdk/pnp/react-native/providers/aa-provider.mdx b/docs/sdk/mobile/pnp/react-native/providers/aa-provider.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/providers/aa-provider.mdx
rename to docs/sdk/mobile/pnp/react-native/providers/aa-provider.mdx
diff --git a/docs/sdk/pnp/react-native/providers/common.mdx b/docs/sdk/mobile/pnp/react-native/providers/common.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/providers/common.mdx
rename to docs/sdk/mobile/pnp/react-native/providers/common.mdx
diff --git a/docs/sdk/pnp/react-native/providers/evm.mdx b/docs/sdk/mobile/pnp/react-native/providers/evm.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/providers/evm.mdx
rename to docs/sdk/mobile/pnp/react-native/providers/evm.mdx
diff --git a/docs/sdk/pnp/react-native/providers/providers.mdx b/docs/sdk/mobile/pnp/react-native/providers/providers.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/providers/providers.mdx
rename to docs/sdk/mobile/pnp/react-native/providers/providers.mdx
diff --git a/docs/sdk/pnp/react-native/providers/solana.mdx b/docs/sdk/mobile/pnp/react-native/providers/solana.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/providers/solana.mdx
rename to docs/sdk/mobile/pnp/react-native/providers/solana.mdx
diff --git a/docs/sdk/pnp/react-native/providers/xrpl.mdx b/docs/sdk/mobile/pnp/react-native/providers/xrpl.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/providers/xrpl.mdx
rename to docs/sdk/mobile/pnp/react-native/providers/xrpl.mdx
diff --git a/docs/sdk/pnp/react-native/react-native.mdx b/docs/sdk/mobile/pnp/react-native/react-native.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/react-native.mdx
rename to docs/sdk/mobile/pnp/react-native/react-native.mdx
diff --git a/docs/sdk/mobile/pnp/react-native/usage.mdx b/docs/sdk/mobile/pnp/react-native/usage.mdx
new file mode 100644
index 000000000..79afab6f5
--- /dev/null
+++ b/docs/sdk/mobile/pnp/react-native/usage.mdx
@@ -0,0 +1,454 @@
+---
+title: Using of PnP React Native SDK
+sidebar_label: Usage
+description: "Web3Auth PnP React Native SDK - Usage | Documentation - Web3Auth"
+---
+
+import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
+users.
+
+Web3Auth returns the following functions:
+
+- `login()` - Logs in the User using the particular configuration you require for authentication.
+- `logout()` - Logs out the User.
+- `userInfo()` - After logging in, the Web3Auth instance will provide you with information regarding
+ the user that is logged in.
+- `privKey()` - After login, gets the private key of the user (default is `secp256k1` key).
+- `ed25519Key()` - After login, gets the `ed25519` key.
+- `enableMFA()` - Takes your user to the MFA enabling flow, helping them set up MFA.
+- `launchWalletServices()` - Launches the Wallet Services UI for the user to interact with their
+ wallet.
+- `request()` - Pops up the signature request modal for the user to sign a message.
+
+## Logging in a User
+
+#### `login(loginParams: SdkLoginParams): Promise;`
+
+Trigger the login flow that navigates the user to a browser model that allows them to log in with
+the selected login provider.
+
+#### Arguments
+
+
+
+
+
+| Parameter | Description |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `loginProvider` | It sets the OAuth login method to be used. You can use any of the supported values are `GOOGLE`, `FACEBOOK`, `REDDIT`, `DISCORD`, `TWITCH`, `APPLE`, `LINE`, `GITHUB`, `KAKAO`, `LINKEDIN`, `TWITTER`, `WEIBO`, `WECHAT`, `EMAIL_PASSWORDLESS`. |
+| `extraLoginOptions?` | It can be used to set the OAuth login options for corresponding `loginProvider`. For instance, you'll need to pass user's email address as. Default value for the field is `null`, and it accepts `ExtraLoginOptions` as a value. |
+| `redirectUrl?` | Url where user will be redirected after successfull login. By default user will be redirected to same page where login will be initiated. Default value for the field is `null`, and accepts `string` as a value. |
+| `appState?` | It can be used to keep track of the app state when user will be redirected to app after login. Default is `null`, and accepts `string` as a value. |
+| `mfaLevel?` | Customize the MFA screen shown to the user during OAuth authentication. Default value for field is `MfaLevelType.default`, which shows MFA screen every 3rd login. It accepts `MfaLevelType` as a value. |
+| `dappShare?` | Custom verifier 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. It accepts `string` as a value. |
+| `curve?` | It will be used to determine the public key encoded in the jwt token which returned in `getUserInfo` function after user login. This parameter won't change format of private key returned by We3Auth. Private key returned by `getPrivKey` is always secp256k1. To get the ed25519 key you can use `ed25519Key` method. The default value is `SUPPORTED_KEY_CURVES_TYPE.secp256k1`. |
+
+
+
+
+
+```typescript
+
+async login(options: SdkLoginParams): Promise;
+export type SdkLoginParams = Omit & Required>;
+
+export type BaseRedirectParams = {
+ /**
+ * redirectUrl is the dapp's url where user will be redirected after login.
+ *
+ * @remarks
+ * Register this url at {@link "https://dashboard.web3auth.io"| developer dashboard}
+ * else initialization will give error.
+ */
+ redirectUrl?: string;
+ /**
+ * 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.
+ */
+ appState?: string;
+};
+
+export type LoginParams = BaseRedirectParams & {
+ /**
+ * loginProvider sets the oauth login method to be used.
+ * You can use any of the valid loginProvider from the supported list.
+ *
+ * If this param is not passed then it will show all the available
+ * login methods to user in a modal.
+ *
+ */
+ loginProvider: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE;
+
+ /**
+ * 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
+ *
+ * Defaults to `default`
+ * @defaultValue `default`
+ */
+ mfaLevel?: MfaLevelType;
+
+ /**
+ * extraLoginOptions 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
+ */
+ extraLoginOptions?: ExtraLoginOptions;
+
+ /**
+ * 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
+ */
+ dappShare?: string;
+
+ /**
+ * How long should a login session last at a minimum in seconds
+ *
+ * @defaultValue 86400 seconds
+ * @remarks Max value of sessionTime can be 7 * 86400 (30 days)
+ */
+ sessionTime?: number;
+
+ /**
+ * 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 service. Private key returned
+ * by auth service is always `secp256k1`. As of now you have to convert it to `'ed25519'` if you want.
+ * You can use `@web3auth/base-provider` npm package for this purpose.
+ *
+ *
+ * @defaultValue secp256k1
+ */
+ curve?: SUPPORTED_KEY_CURVES_TYPE;
+};
+
+```
+
+
+
+
+
+#### Example
+
+```typescript title="example.tsx"
+await web3auth.login({
+ loginProvider: LoginProvider.GOOGLE,
+ redirectUrl: resolvedRedirectUrl,
+});
+```
+
+### Selecting Curve
+
+The `web3auth.login()` method accepts a `curve` parameter. This parameter can be used to select the
+elliptic curve to use for deriving the address of the key within the jwt returned by Web3Auth for
+Server Side Verification.
+
+```typescript
+await web3auth.login({
+ loginProvider: LoginProvider.GOOGLE,
+ redirectUrl: resolvedRedirectUrl,
+ // focus-next-line
+ curve: "secp256k1", // `secp256k1` and `ed25519` are supported
+});
+```
+
+#### Example
+
+
+
+
+
+```typescript
+await web3auth.login({
+ loginProvider: LoginProvider.GOOGLE,
+ redirectUrl: resolvedRedirectUrl,
+ // focus-next-line
+ curve: "secp256k1",
+});
+```
+
+
+
+
+
+```typescript
+await web3auth.login({
+ loginProvider: LoginProvider.GOOGLE,
+ redirectUrl: resolvedRedirectUrl,
+ // focus-next-line
+ curve: "ed25519",
+});
+```
+
+
+
+
+
+## Logging out a user
+
+#### `logout(): Promise;`
+
+:::info
+
+Trigger the logout flow. It is not advised to be used in iOS since it will trigger a system dialog
+that asks if users want to allow a Login operation.
+
+:::
+
+This method has no input and returns a `Promise` that resolves if the operation is successful, and
+rejects if the operation failed.
+
+#### Example
+
+```typescript
+await web3auth.logout();
+```
+
+## Getting the User Information
+
+#### `userInfo(): State["userInfo"];`
+
+To get the information of the user, extracted from the id token, you can call the `userInfo` method
+in the web3auth instance.
+
+```tsx
+const userInfo = web3auth.userInfo();
+```
+
+```json
+{
+ "aggregateVerifier": "tkey-google",
+ "email": "john@gmail.com",
+ "name": "John Dash",
+ "profileImage": "https://lh3.googleusercontent.com/a/Ajjjsdsmdjmnm...",
+ "typeOfLogin": "google",
+ "verifier": "torus",
+ "verifierId": "john@gmail.com",
+ "dappShare": "<24 words seed phrase>", // will be sent only incase of custom verifiers
+ "idToken": "",
+ "oAuthIdToken": "", // will be sent only incase of custom verifiers
+ "oAuthAccessToken": "" // will be sent only incase of custom verifiers
+}
+```
+
+## Getting the `secp256k1` private key
+
+#### `get privKey(): string;`
+
+Using the `privKey()` method in the web3auth instance you can get the `secp256k1` private key.
+
+```tsx
+const privateKey = web3auth.privKey();
+```
+
+```string
+"0ajjsdsd...."
+```
+
+## Getting the `ed25519` private key
+
+#### `get ed25519Key(): string;`
+
+Using the `ed25519Key()` method in the web3auth instance you can get the `ed25519` private key.
+
+```tsx
+const ed25519Key = web3auth.ed25519Key();
+```
+
+```string
+"666523652352635...."
+```
+
+## Enabling MFA
+
+#### `enableMFA(): Promise;`
+
+This method is used to enable MFA for the user. It takes no arguments and returns a `Promise` that
+resolves if the operation is successful, and rejects if the operation failed.
+
+#### Example
+
+```typescript
+await web3auth.enableMFA();
+```
+
+## Launching Wallet Services UI
+
+#### `launchWalletServices(chainConfig: ChainConfig, path?: string | null): Promise;`
+
+The `launchWalletServices` method launches a Secure Web Browser which allows you to use the
+templated wallet UI services. The method takes `ChainConfig` as the required input. Wallet Services
+is currently only available for EVM chains.
+
+
+
+:::note
+
+Access to Wallet Services is gated. You can use this feature in `sapphire_devnet` for free. The
+minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production
+environment is the **Scale Plan**.
+
+:::
+
+#### Example
+
+```typescript
+const chainConfig = {
+ chainNamespace: ChainNamespace.EIP155,
+ chainId: "0xaa36a7",
+ rpcTarget: "https://rpc.sepolia.org",
+ // Avoid using public rpcTarget in production.
+ // Use services like Infura
+ displayName: "Ethereum Sepolia Testnet",
+ blockExplorerUrl: "https://sepolia.etherscan.io",
+ ticker: "ETH",
+ tickerName: "Ethereum",
+ decimals: 18,
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+await web3auth.launchWalletServices(chainConfig);
+```
+
+## Requesting a Signature
+
+#### `request(chainConfig: ChainConfig, method: string, params: unknown[], path?: string): Promise;`
+
+The `request` method facilitates the use of templated transaction screens for signing transactions.
+This function returns a promise of the signature that can be used to broadcast the transaction.
+
+Please check the list of
+[JSON RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/), noting that the request
+method currently supports only the signing methods.
+
+### Arguments
+
+| Arguments | Description |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `chainConfig` | Defines the chain to be used for signature. |
+| `method` | JSON RPC method name in `string`. Currently, the request method only supports the singing methods. |
+| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api) to know more. |
+
+#### Example
+
+##### Personal Sign
+
+```tsx
+const params = [
+ {
+ challenge: "Hello World",
+ address,
+ },
+ null,
+];
+const res = await web3auth.request(chainConfig, "personal_sign", params);
+```
+
+##### Personal Sign Shorthand
+
+```tsx
+const params = ["Hello World", address];
+const res = await web3auth.request(chainConfig, "personal_sign", params);
+```
+
+##### Sign Type 4
+
+```tsx
+const params = [
+ address,
+ {
+ types: {
+ EIP712Domain: [
+ {
+ name: "name",
+ type: "string",
+ },
+ {
+ name: "version",
+ type: "string",
+ },
+ {
+ name: "chainId",
+ type: "uint256",
+ },
+ {
+ name: "verifyingContract",
+ type: "address",
+ },
+ ],
+ Person: [
+ {
+ name: "name",
+ type: "string",
+ },
+ {
+ name: "wallet",
+ type: "address",
+ },
+ ],
+ Mail: [
+ {
+ name: "from",
+ type: "Person",
+ },
+ {
+ name: "to",
+ type: "Person",
+ },
+ {
+ name: "contents",
+ type: "string",
+ },
+ ],
+ },
+ primaryType: "Mail",
+ domain: {
+ name: "Ether Mail",
+ version: "1",
+ chainId: chainConfig.chainId,
+ verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+ },
+ message: {
+ from: {
+ name: "Cow",
+ wallet: address,
+ },
+ to: {
+ name: "Bob",
+ wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+ },
+ contents: "Hello, Bob!",
+ },
+ },
+];
+const res = await web3auth.request(chainConfig, "eth_signTypedData_v4", params);
+```
diff --git a/docs/sdk/pnp/react-native/whitelabel.mdx b/docs/sdk/mobile/pnp/react-native/whitelabel.mdx
similarity index 100%
rename from docs/sdk/pnp/react-native/whitelabel.mdx
rename to docs/sdk/mobile/pnp/react-native/whitelabel.mdx
diff --git a/docs/sdk/sfa/sfa-android/sfa-android.mdx b/docs/sdk/mobile/sfa/android/android.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-android/sfa-android.mdx
rename to docs/sdk/mobile/sfa/android/android.mdx
diff --git a/docs/sdk/sfa/sfa-android/authentication.mdx b/docs/sdk/mobile/sfa/android/authentication.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-android/authentication.mdx
rename to docs/sdk/mobile/sfa/android/authentication.mdx
diff --git a/docs/sdk/sfa/sfa-android/examples.mdx b/docs/sdk/mobile/sfa/android/examples.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-android/examples.mdx
rename to docs/sdk/mobile/sfa/android/examples.mdx
diff --git a/docs/sdk/mobile/sfa/android/initialize.mdx b/docs/sdk/mobile/sfa/android/initialize.mdx
new file mode 100644
index 000000000..ef667447f
--- /dev/null
+++ b/docs/sdk/mobile/sfa/android/initialize.mdx
@@ -0,0 +1,69 @@
+---
+title: Initializing Single Factor Auth Android SDK
+sidebar_label: Initialize
+description: "Web3Auth Single Factor Auth Android SDK - Initialize | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+Once you have installed the Web3Auth SDK, the next crucial step is to initialize it. This step
+requires passing various parameters that align with your project preferences. It's important to note
+that the initialization process is critical to the successful use of Web3Auth.
+
+## Parameters
+
+In your activity, create a `SingleFactorAuth` instance with `Web3AuthOptions`. You can define the
+Web3Auth network, client id, and other parameters during initialization.
+
+| Parameter | Description |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `network` | The Web3auth network is to be used by the SDK. Supported values are `Web3AuthNetwork.SAPPHIRE_MAINNET`, `Web3AuthNetwork.SAPPHIRE_DEVNET` ,`Web3AuthNetwork.MAINNET`, `Web3AuthNetwork.TESTNET`, `Web3AuthNetwork.CYAN`, and `Web3AuthNetwork.AQUA` |
+| `clientId` | The clientId for your Web3Auth project. You can get it from [Web3Auth dashboard](https://dashboard.web3auth.io/). |
+| `sessionTime` | Specifies the session duration in seconds. By default, the value is set to 86400 seconds (1 day), with a maximum session duration of up to 30 days. |
+| `serverTimeOffset` | Specify a custom server time offset. The default value is 0. |
+| `storageServerUrl?` | Specifies the storage server URL. The default value is `https://session.web3auth.io`. |
+| `whiteLabel?` | You can pass the white labeling options for web3auth. It helps you define your brand app's custom UI, and branding for the Wallet Services feature. The recommended way to configure the `whiteLabel` is through the Web3Auth Dashboard. [Learn how to configure the `whiteLabel` via Web3Auth Dashboard](/docs/features/whitelabel). |
+| `redirectUri?` | URL that Web3Auth will redirect API responses upon successful `request` method call. Please note, that it's mandatory to configure the `redirectUri` if you are using the `request` method. |
+
+## Create Instance
+
+```kotlin
+import android.content.Context
+import com.web3auth.singlefactorauth.SingleFactorAuth
+import com.web3auth.singlefactorauth.types.Web3AuthOptions
+import org.torusresearch.fetchnodedetails.types.Web3AuthNetwork
+
+// You can get the client id for your Web3Auth project from Web3Auth dashboard.
+val web3AuthOptions = Web3AuthOptions(
+ "YOUR_WEB3AUTH_CLIENT_ID",
+ Web3AuthNetwork.SAPPHIRE_MAINNET
+)
+
+val context: Context = "YOUR_APPLICATION_CONTEXT"
+
+val singleFactorAuth = SingleFactorAuth(web3AuthOptions, context)
+```
+
+## Initialize
+
+To initialize the SDK, you can use the `initialize` method. This method helps you initialize the SDK
+with existing session. After successful initialization, you can use the
+[getSessionData](./usage/#get-session-data) method to check if the user is logged in or not.
+
+```kotlin
+import android.content.Context
+
+val context: Context = "YOUR_APPLICATION_CONTEXT"
+val sessionDataCF = singleFactorAuth.initialize(context)
+
+sessionDataCF.whenComplete {sessionData, error ->
+ if(error != null) {
+ // Something went wrong
+ // Initiate the login flow again
+ } else {
+ // You can use the SessionData to check if the user is
+ //logged in or not
+ }
+}
+```
diff --git a/docs/sdk/mobile/sfa/android/install.mdx b/docs/sdk/mobile/sfa/android/install.mdx
new file mode 100644
index 000000000..417bd88cb
--- /dev/null
+++ b/docs/sdk/mobile/sfa/android/install.mdx
@@ -0,0 +1,46 @@
+---
+title: "Installing Single Factor Auth Android SDK"
+sidebar_label: "Install"
+description: "Web3Auth Single Factor Auth Android SDK - Install | Documentation - Web3Auth"
+---
+
+## Add Web3Auth to Gradle
+
+In your project-level `build.gradle` or `settings.gradle` file, add JitPack repository:
+
+```groovy
+dependencyResolutionManagement {
+ repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+ repositories {
+ google()
+ mavenCentral()
+ maven { url "https://jitpack.io" }
+ }
+}
+```
+
+Then, in your app-level `build.gradle` dependencies section, add the following:
+
+```groovy
+dependencies {
+ implementation 'com.github.web3auth:single-factor-auth-android:4.0.1'
+}
+```
+
+:::info Latest-SDK
+
+Check the
+**[latest version of Web3Auth's SFA Android SDK](https://github.com/Web3Auth/single-factor-auth-android/releases)**
+and update accordingly.
+
+:::
+
+## Permissions
+
+Open your app's `AndroidManifest.xml` file and add the INTERNET permission.
+
+Please note, the `` element must be a direct child of the `` root element
+
+```xml
+
+```
diff --git a/docs/sdk/sfa/sfa-android/usage.mdx b/docs/sdk/mobile/sfa/android/usage.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-android/usage.mdx
rename to docs/sdk/mobile/sfa/android/usage.mdx
diff --git a/docs/sdk/sfa/sfa-flutter/authentication.mdx b/docs/sdk/mobile/sfa/flutter/authentication.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-flutter/authentication.mdx
rename to docs/sdk/mobile/sfa/flutter/authentication.mdx
diff --git a/docs/sdk/sfa/sfa-flutter/examples.mdx b/docs/sdk/mobile/sfa/flutter/examples.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-flutter/examples.mdx
rename to docs/sdk/mobile/sfa/flutter/examples.mdx
diff --git a/docs/sdk/sfa/sfa-flutter/sfa-flutter.mdx b/docs/sdk/mobile/sfa/flutter/flutter.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-flutter/sfa-flutter.mdx
rename to docs/sdk/mobile/sfa/flutter/flutter.mdx
diff --git a/docs/sdk/mobile/sfa/flutter/initialize.mdx b/docs/sdk/mobile/sfa/flutter/initialize.mdx
new file mode 100644
index 000000000..ccbebadfa
--- /dev/null
+++ b/docs/sdk/mobile/sfa/flutter/initialize.mdx
@@ -0,0 +1,108 @@
+---
+title: Initializing Single Factor Auth Flutter SDK
+sidebar_label: Initialize
+description: "Web3Auth Single Factor Auth Flutter SDK - Initialize | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+After installation, the next step to use Web3Auth SFA Flutter is to initialize the SDK and is
+achieved by `init` method. This step requires passing various parameters that align with your
+project preferences. It's important to note that the initialization process is critical to the
+successful use of Web3Auth SFA Flutter.
+
+## Parameters
+
+The `init` method requires a `Web3AuthOptions` object. Please note that these are the important
+parameters to configure the SDK.
+
+
+
+
+
+| Parameter | Description |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `network` | The Web3auth network to be used by the SDK. Supported values are `Web3AuthNetwork.sapphire_mainnet`, `Web3AuthNetwork.sapphire_devnet`,`Web3AuthNetwork.mainnet`, `Web3AuthNetwork.testnet`, `Web3AuthNetwork.cyan`, and `Web3AuthNetwork.aqua` |
+| `clientId` | The client id for your Web3Auth project. You can get it from [Web3Auth dashboard](https://dashboard.web3auth.io/). |
+| `sessionTime` | Specifies the session duration in seconds. By default, the value is set to 86400 seconds (1 day), with a maximum session duration of up to 30 days. |
+
+
+
+
+
+```dart
+class Web3AuthOptions {
+ final Web3AuthNetwork network;
+ final String clientId;
+ final int sessionTime;
+
+ Web3AuthOptions(
+ {required this.network,
+ required this.clientId,
+ this.sessionTime = 86400});
+
+ Map toJson() {
+ return {
+ 'network': network.name,
+ 'clientId': clientId,
+ 'sessionTime': sessionTime,
+ };
+ }
+}
+
+enum Web3AuthNetwork {
+ mainnet,
+ testnet,
+ cyan,
+ aqua,
+ celeste,
+ sapphire_testnet,
+ sapphire_mainnet
+}
+```
+
+
+
+
+
+## Initialize Web3AuthFlutter
+
+To initialize the SDK, you can use the `init` method. Once, the SDK is initialized, you can use the
+`initialize` method to initialize the SDK with existing session. After successful initialization,
+you can use the `getSessionData` method to check if the user is logged in or not.
+
+Please note, the `initialize` method will throw an error if there is no active session present. You
+can swallow the error or handle it gracefully in your app.
+
+```dart
+import 'package:single_factor_auth_flutter/single_factor_auth_flutter.dart';
+import 'package:single_factor_auth_flutter/enums.dart';
+import 'package:single_factor_auth_flutter/input.dart';
+
+final web3authOptions = Web3AuthOptions(
+ network: Web3AuthNetwork.sapphire_devnet,
+ clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+);
+
+final singleFactorAuthFlutter = SingleFactorAuthFlutter();
+
+await singleFactorAuthFlutter.init(
+ web3authOptions,
+);
+
+try {
+ await singleFactorAuthFlutter.initialize();
+} catch (e) {
+ // SDK will throw an error if there is no active session
+ // present in the storage.
+ //
+ // Handle the error gracefully in your app.
+}
+```
diff --git a/docs/sdk/mobile/sfa/flutter/install.mdx b/docs/sdk/mobile/sfa/flutter/install.mdx
new file mode 100644
index 000000000..a1d4c033f
--- /dev/null
+++ b/docs/sdk/mobile/sfa/flutter/install.mdx
@@ -0,0 +1,22 @@
+---
+title: "Installing Single Factor Auth Flutter SDK"
+sidebar_label: "Install"
+description: "Web3Auth Single Factor Auth Flutter SDK - Install | Documentation - Web3Auth"
+---
+
+To install the [single_factor_auth_flutter](https://pub.dev/packages/single_factor_auth_flutter)
+package, you have two options. You can either manually add the package in the `pubspec.yaml` file,
+or you can use the `flutter pub add` command.
+
+Add `single_factor_auth_flutter` as a dependency to your `pubspec.yaml`.
+
+```yaml
+dependencies:
+ single_factor_auth_flutter: ^6.0.0
+```
+
+Add `single_factor_auth_flutter` using `flutter pub add` command.
+
+```sh
+flutter pub add single_factor_auth_flutter
+```
diff --git a/docs/sdk/mobile/sfa/flutter/usage.mdx b/docs/sdk/mobile/sfa/flutter/usage.mdx
new file mode 100644
index 000000000..5d8f4a670
--- /dev/null
+++ b/docs/sdk/mobile/sfa/flutter/usage.mdx
@@ -0,0 +1,206 @@
+---
+title: "Using Single Factor Auth Flutter SDK"
+sidebar_label: "Usage"
+description: "Web3Auth Single Factor Auth Flutter SDK - Usage | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+After successfully installing and initializing SingleFactorAuth, you can use it to authenticate your
+users and obtain their private and public keys.
+
+:::tip Note
+
+Web3Auth SFA Flutter SDK only works for users who have **not enabled MFA**. For MFA enabled users,
+you'll see an Error message.
+
+:::
+
+## Functionality Overview
+
+The SingleFactorAuth instance natively provides the following methods:
+
+| Method | Description |
+| ------------------------------------------ | ------------------------------------------------------------ |
+| [connect](#login-user) | Use to login user and retrieve private key pair. |
+| [logout](#logout-user) | Use to logout existing user. |
+| [connected](#check-users-logged-in-status) | Use to check whether the user is logged in or not. |
+| [getSessionData](#get-session-data) | This method helps to get the session data for valid session. |
+
+## Login User
+
+:::tip
+
+Please refer to the [Authentication](./authentication) section for more details on the setting up
+your verifier and other authentication parameters.
+
+:::
+
+To obtain a user's private key using the Web3Auth SFA Flutter SDK, you can call the `connect`
+method. The method accepts `LoginParams`, and returns `SFAKey`.
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The `verifier` parameter takes the name of the custom verifier from the Web3Auth Dashboard. This is a required field that must be a `String`. If you're using an aggregate verifier, make sure to pass the aggregate verifier name. |
+| `verifierId` | The `verifierID` takes the JWT verifier ID to be used for JWT/ID token verification. It can be an email, sub, or custom value available in the JWT token. |
+| `idToken` | The `idToken` accepts a JWT token obtained from the user's login provider. |
+| `subVerifierInfoArray?` | Sub verifier info. Usually used during the aggregate verifier. It takes `List` as a value. |
+
+
+
+
+
+```dart
+class LoginParams {
+ final String verifier;
+ final String verifierId;
+ final String idToken;
+ final String? aggregateVerifier;
+
+ LoginParams({
+ required this.verifier,
+ required this.verifierId,
+ required this.idToken,
+ this.aggregateVerifier,
+ });
+
+ Map toJson() {
+ return {
+ 'verifier': verifier,
+ 'verifierId': verifierId,
+ 'idToken': idToken,
+ 'aggregateVerifier': aggregateVerifier,
+ };
+ }
+}
+```
+
+
+
+
+### Usage
+
+
+
+
+```dart
+final loginParams = LoginParams(
+ verifier: 'YOUR_VERIFIER_NAME',
+ verifierId: 'YOUR_VERIFIER_ID',
+ idToken: 'YOUR_ID_TOKEN',
+);
+
+try { final sessionData = await singleFactorAuthFlutter.connect(loginParams); } catch (e) { //
+Handle error }
+
+````
+
+
+
+```dart
+
+final subVerifierInfoArray = [
+ TorusSubVerifierInfo(
+ 'YOUR_SUB_VERIFIER_NAME',
+ 'YOUR_ID_TOKEN',
+ ),
+];
+
+final loginParams = LoginParams(
+ verifier: 'YOUR_AGGREGATE_VERIFIER_NAME',
+ verifierId: 'YOUR_VERIFIER_ID',
+ idToken: 'YOUR_ID_TOKEN',
+ subVerifierInfoArray: subVerifierInfoArray,
+);
+
+try {
+ final sessionData = await singleFactorAuthFlutter.connect(loginParams);
+} catch (e) {
+ // Handle error
+}
+````
+
+
+
+
+## Logout User
+
+To logout the current user, you can use the `logout` method. Please note, the method will not logout
+the user from the authentication provider, it'll only logout and invalidate the Web3Auth session.
+
+### Usage
+
+```dart
+try {
+ await singleFactorAuthFlutter.logout();
+ // Logged out successfully
+} catch (e) {
+ // Handle error
+}
+```
+
+## Check User's Logged In Status
+
+You can use the `connected` method to check whether the user is logged in Web3Auth or not. Please
+note, you should call this method after the `initialize` method if you want to check the user's
+connection status for an existing session.
+
+### Usage
+
+```dart
+final isConnected = await singleFactorAuthFlutter.connected();
+```
+
+## Get Session Data
+
+We have included Session Management in this SDK, so calling the `getSessionData` will retrive the
+user's `SessionData` without re-logging in the user if a user has an active session. Otherwise, it
+will return `null`.
+
+:::tip
+
+Please note, you should use this method after the `initialize` method.
+
+:::
+
+### Usage
+
+```dart
+final SessionData? sessionData = await singleFactorAuthFlutter.getSessionData();
+
+if (sessionData != null) {
+ // User is logged in
+} else {
+ // User is not logged in
+}
+```
+
+### Response
+
+The `SessionData` has the following properties to retrive the relevant session information.
+
+| Name | Description |
+| --------------- | ------------------------------------------------------------------------- |
+| `privateKey` | Retrieves the user's private key. |
+| `publicAddress` | Retrieves the user's public address. |
+| `userInfo?` | Retrieves the user's information like email, name, verifier id, and more. |
+| `signatures?` | Retrieves the node's signatures that are returned for request. |
diff --git a/docs/sdk/sfa/sfa-ios/authentication.mdx b/docs/sdk/mobile/sfa/ios/authentication.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-ios/authentication.mdx
rename to docs/sdk/mobile/sfa/ios/authentication.mdx
diff --git a/docs/sdk/sfa/sfa-ios/examples.mdx b/docs/sdk/mobile/sfa/ios/examples.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-ios/examples.mdx
rename to docs/sdk/mobile/sfa/ios/examples.mdx
diff --git a/docs/sdk/mobile/sfa/ios/initialize.mdx b/docs/sdk/mobile/sfa/ios/initialize.mdx
new file mode 100644
index 000000000..01e4f3987
--- /dev/null
+++ b/docs/sdk/mobile/sfa/ios/initialize.mdx
@@ -0,0 +1,49 @@
+---
+title: Initializing SFA Swift SDK
+sidebar_label: Initialize
+description: "Web3Auth SFA Swift SDK - Initialization | Documentation - Web3Auth"
+---
+
+After Installation, the next step to use Web3Auth is to create an instance, and initialize the SDK.
+Please note that these are the most critical steps where you need to pass on different parameters
+according to the preference of your project.
+
+## Parameters
+
+The `SingleFactoreAuth` constructor takes an object called `Web3AuthOptions` as input. The
+constructor parameters are listed below
+
+| Parameter | Description |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `clientId` | Your Web3Auth Client Id from [Web3Auth Dashboard](https://dashboard.web3auth.io/). |
+| `web3AuthNetwork` | The Web3auth network to be used by the SDK. Supported values are `.SAPPHIRE_MAINNET`, `.SAPPHIRE_DEVNET`, `.MAINNET`, `.TESTNET`, `.CYAN`, and `.AQUA` |
+| `sessionTime` | Specifies the session duration in seconds. By default, the value is set to 86400 seconds (1 day), with a maximum session duration of up to 30 days. |
+| `serverTimeOffset` | Specifies the server time offset in seconds. This parameter is used to adjust the server time to the local time. The default value is 0 seconds. |
+| `storageServerUrl?` | Specifies the storage server URL. The default value is `https://session.web3auth.io`. |
+| `whiteLabel?` | You can pass the white labeling options for Web3Auth. It helps you define your brand app's custom UI, and branding for the Wallet Services and request signature feature. The recommended way to configure the `whiteLabel` is through the Web3Auth Dashboard. [Learn how to configure the `whiteLabel` via Web3Auth Dashboard](/docs/features/whitelabel). |
+| `redirectUrl?` | URL that Web3Auth will redirect API responses upon successful `request` method call. Please note, that it's mandatory to configure the `redirectUrl` if you are using the `request` method. Redirect Url shoudl be your bundle identifier. |
+
+## Create instance
+
+The `initialize` method is responsible for authorizing the existing sessions, and initializing the
+SDK. If the existing session is not valid, it'll throw an error.
+
+```swift
+import SingleFactorAuth
+
+let options = Web3AuthOptions(
+ clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+ web3AuthNetwork: .SAPPHIRE_MAINNET,
+ // Sets a session for 2 days, takes the input
+ // in seconds.
+ sessionTime: 172800
+)
+
+do {
+ let singleFactoreAuth = try SingleFactorAuth(params: options)
+
+ try await singleFactoreAuth.initialize()
+} catch {
+ // Handle error
+}
+```
diff --git a/docs/sdk/mobile/sfa/ios/install.mdx b/docs/sdk/mobile/sfa/ios/install.mdx
new file mode 100644
index 000000000..a1ec129e1
--- /dev/null
+++ b/docs/sdk/mobile/sfa/ios/install.mdx
@@ -0,0 +1,32 @@
+---
+title: "Installing SFA Swift SDK"
+sidebar_label: "Install"
+description: "Installing Web3Auth SFA Swift SDK | Documentation - Web3Auth"
+---
+
+## Swift Package Manager
+
+1. In Xcode, with your app project open, navigate to **File > Add Packages**.
+
+1. When prompted, add the single-factor-auth-swift iOS SDK repository:
+
+ ```sh
+ https://github.com/Web3Auth/single-factor-auth-swift
+ ```
+
+ From the `Dependency Rule` dropdown, select `Exact Version` and enter `9.1.0` as the version.
+
+1. When finished, Xcode will automatically begin resolving and downloading your dependencies in the
+ background.
+
+## Cocoapods
+
+To install the Web3Auth SingleFactorAuth SDK using Cocoapods, follow the below steps:
+
+1. Open the Podfile, and add the SingleFactorAuth pod:
+
+```sh
+pod 'SingleFactorAuth', '~> 9.1.0'
+```
+
+2. Once added, use `pod install` command to download the SingleFactorAuth dependency.
diff --git a/docs/sdk/sfa/sfa-ios/sfa-ios.mdx b/docs/sdk/mobile/sfa/ios/ios.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-ios/sfa-ios.mdx
rename to docs/sdk/mobile/sfa/ios/ios.mdx
diff --git a/docs/sdk/mobile/sfa/ios/usage.mdx b/docs/sdk/mobile/sfa/ios/usage.mdx
new file mode 100644
index 000000000..f89bc5e5a
--- /dev/null
+++ b/docs/sdk/mobile/sfa/ios/usage.mdx
@@ -0,0 +1,333 @@
+---
+title: "Using Single Factor Auth Swift SDK"
+sidebar_label: "Usage"
+description: "Web3Auth Single Factor Auth Swift SDK - Usage | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+After successfully installing and initializing SingleFactorAuth, you can use it to authenticate your
+users and obtain their private and public keys.
+
+:::tip NOTE
+
+Web3Auth SFA Swift SDK only works for users who have **not enabled MFA**. For MFA enabled users,
+you'll see an Error message.
+
+:::
+
+The SingleFactorAuth instance natively provides the following methods:
+
+| Method | Description |
+| ------------------------------------------ | ------------------------------------------------------------------- |
+| [connect](#login-user) | Use to login user and retrieve private key pair. |
+| [logout](#logout-user) | Use to logout existing user. |
+| [connected](#check-users-logged-in-status) | Use to check whether the user is logged in or not. |
+| [getSessionData](#get-session-data) | This method helps to get the session data for valid session. |
+| [showWalletUI](#show-wallet-ui) | Use to open templated the wallet UI in WebView. |
+| [request](#request-signature) | Use to open templated transaction screens for signing transactions. |
+
+## Login User
+
+:::tip
+
+Please refer to the [Authentication](./authentication) section for more details on the setting up
+your verifier and other authentication parameters.
+
+:::
+
+To obtain a user's private key using the Web3Auth SFA iOS SDK, you can call the `connect` method.
+The method accepts `LoginParams`, and returns `SessionData`.
+[Please checkout the SessionData response for more details](#response).
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | The `verifier` parameter takes the name of the custom verifier from the Web3Auth Dashboard. This is a required field that must be a `String`. If you're using an aggregate verifier, make sure to pass the aggregate verifier name. |
+| `verifierId` | The `verifierID` takes the JWT verifier ID to be used for JWT/ID token verification. It can be an email, sub, or custom value available in the JWT token. |
+| `idToken` | The `idToken` accepts a JWT token obtained from the user's login provider. |
+| `subVerifierInfoArray?` | Sub verifier info. Usually used during aggregate verifier. It takes `[TorusSubVerifierInfo]` as a value. |
+| `serverTimeOffset?` | Specifies the server time offset in seconds. |
+
+
+
+
+
+```swift
+public class LoginParams {
+ public let verifier: String
+ public let verifierId: String
+ public let idToken: String
+ public let subVerifierInfoArray: [TorusSubVerifierInfo]?
+ public let serverTimeOffset: Int?
+ public let fallbackUserInfo: UserInfo?
+
+ public init(verifier: String, verifierId: String, idToken: String, subVerifierInfoArray: [TorusSubVerifierInfo]? = nil, serverTimeOffset: Int? = nil, fallbackUserInfo: UserInfo? = nil) {
+ self.verifier = verifier
+ self.verifierId = verifierId
+ self.idToken = idToken
+ self.subVerifierInfoArray = subVerifierInfoArray
+ self.serverTimeOffset = serverTimeOffset
+ self.fallbackUserInfo = fallbackUserInfo
+ }
+}
+
+public struct TorusSubVerifierInfo {
+ public var verifier: String
+ public var idToken: String
+
+ public init(verifier: String, idToken: String) {
+ self.verifier = verifier
+ self.idToken = idToken
+ }
+}
+```
+
+
+
+
+### Usage
+
+```swift
+let loginParams = LoginParams(verifier: "YOUR_VERIFIER_NAME", verifierId: "YOUR_VERIFIER_ID", idToken: "YOUR_ID_TOKEN")
+do {
+ let sfaKey = try await singleFactorAuth.connect(loginParams: loginParams)
+} catch {
+ // Handle error
+}
+```
+
+## Logout User
+
+To logout the current user, you can use the `logout` method. Please note, the method will not logout
+the user from the authentication provider, it'll only logout and invalidate the Web3Auth session.
+
+### Usage
+
+```swift
+do {
+ try await singleFactorAuth.logout()
+} catch {
+ // Handle error
+}
+```
+
+## Check User's Logged In Status
+
+You can use the `connected` method to check whether the user is logged in Web3Auth or not. Please
+note, you should call this method after the `initialize` method if you want to check the user's
+connection status for an existing session.
+
+### Usage
+
+```swift
+let isConnected = singleFactorAuth.connected()
+```
+
+## Get Session Data
+
+We have included Session Management in this SDK, so calling the `getSessionData` will retrive the
+user's `SessionData` without re-logging in the user if a user has an active session. Otherwise, it
+will return `nil`.
+
+:::tip
+
+Please note, you should call this method after the `initialize` method.
+
+:::
+
+### Usage
+
+```swift
+let sessionData = singleFactorAuth.getSessionData()
+
+if(sessionData != nil) {
+ // User is logged in
+} else {
+ // User is not logged in
+}
+```
+
+```swift
+do {
+ let result = try await singleFactorAuth.initialize()
+ // Handle Success
+} catch let error {
+ // Handle Error
+}
+```
+
+### Response
+
+The `SessionData` has the following four properties to retrive the relevant session information.
+
+| Name | Description |
+| --------------- | ------------------------------------------------------------------------- |
+| `privateKey` | Retrieves the user's private key. |
+| `publicAddress` | Retrieves the user's public address. |
+| `userInfo` | Retrieves the user's information like email, name, verifier id, and more. |
+| `signatures` | Retrieves the node's signatures that are returned for request. |
+
+## Show Wallet UI
+
+The `showWalletUI` method launches a WebView which allows you to use the templated wallet UI
+services. The method takes `ChainConfig` as the required input. Wallet Services is currently only
+available for EVM chains.
+
+:::note
+
+Access to Wallet Services is gated. You can use this feature in `sapphire_devnet` for free. The
+minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production
+environment is the **Scale Plan**.
+
+:::
+
+
+
+### Parameters
+
+
+
+
+
+| Parameter | Description |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `chainNamespace` | Custom configuration for your preferred blockchain. As of now only EVM supported. Default value is `ChainNamespace.eip155`. |
+| `decimals?` | Number of decimals for the currency ticker. Default value is 18, and accepts `Int` as value. |
+| `blockExplorerUrl?` | Blockchain's explorer URL. (eg: `https://etherscan.io`) |
+| `chainId` | The chain id of the selected blockchain in hex string format. |
+| `displayName?` | Display Name for the chain. |
+| `logo?` | Logo for the selected `chainNamespace` & `chainId`. |
+| `rpcTarget` | RPC Target URL for the selected `chainNamespace` & `chainId`. |
+| `ticker?` | Default currency ticker of the network (e.g: `ETH`) |
+| `tickerName?` | Name for currency ticker (e.g: `Ethereum`) |
+
+
+
+
+
+```swift
+public enum ChainNamespace: String, Codable {
+ case eip155
+ case solana
+}
+
+public struct ChainConfig: Codable {
+ public init(chainNamespace: ChainNamespace = ChainNamespace.eip155, decimals: Int? = 18, blockExplorerUrl: String? = nil, chainId: String, displayName: String? = nil, logo: String? = nil, rpcTarget: String, ticker: String? = nil, tickerName: String? = nil) {
+ self.chainNamespace = chainNamespace
+ self.decimals = decimals
+ self.blockExplorerUrl = blockExplorerUrl
+ self.chainId = chainId
+ self.displayName = displayName
+ self.logo = logo
+ self.rpcTarget = rpcTarget
+ self.ticker = ticker
+ self.tickerName = tickerName
+ }
+}
+```
+
+
+
+
+### Usage
+
+```swift
+do {
+ try await web3Auth.showWalletUI(
+ chainConfig: ChainConfig(
+ chainId: "0xaa36a7",
+ rpcTarget: "https://eth-sepolia.public.blastapi.io"
+ )
+ )
+} catch {
+ // Handle error
+}
+```
+
+## Request signature
+
+The `request` method facilitates the use of templated transaction screens for signing transactions.
+The method will return [SignResponse](#signresponse). It can be used to sign transactions for any
+EVM chain and screens can be whitelabeled to your branding.
+
+Please check the list of
+[JSON RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/), noting that the request
+method currently supports only the signing methods.
+
+:::note
+
+Please note, to use the `request` method, you need to configure the `redirectUrl` in the
+[`Web3AuthOptions`](/docs/sdk/sfa/sfa-ios/initialize#parameters) while initializing the SDK.
+
+:::
+
+
+
+### Parameters
+
+| Parameter | Description |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `chainConfig` | Defines the chain to be used for signature. |
+| `method` | JSON RPC method name in `String`. Currently, the request method only supports the singing methods. |
+| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/) to know more. |
+
+### Usage
+
+```swift
+do {
+ var params = [Any]()
+ // Message to be signed
+ params.append("Hello, Web3Auth from iOS!")
+ // User's EOA address
+ params.append(address)
+
+ // focus-start
+ let response = try await web3Auth.request(
+ chainConfig: ChainConfig(
+ chainId: "0xaa36a7",
+ rpcTarget: "https://eth-sepolia.public.blastapi.io"
+ ),
+ method: "personal_sign",
+ requestParams: params
+ )
+ // focus-end
+
+ if response!.success {
+ print(response!.result!)
+ } else {
+ // Handle Error
+ print(response!.error!)
+ }
+
+} catch {
+ print(error.localizedDescription)
+ // Handle error
+}
+```
+
+### SignResponse
+
+| Name | Description |
+| --------- | ------------------------------------------------------------- |
+| `success` | Determines whether the request was successful or not. |
+| `result?` | Holds the signature for the request when `success` is `true`. |
+| `error?` | Holds the error for the request when `success` is `false`. |
diff --git a/docs/sdk/mobile/sfa/react-native/account-abstraction.mdx b/docs/sdk/mobile/sfa/react-native/account-abstraction.mdx
new file mode 100644
index 000000000..6f38b1649
--- /dev/null
+++ b/docs/sdk/mobile/sfa/react-native/account-abstraction.mdx
@@ -0,0 +1,127 @@
+---
+title: Account Abstraction
+sidebar_label: Account Abstraction
+description: "@web3auth/single-factor-auth Native Account Abstraction | Documentation - Web3Auth"
+---
+
+import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
+import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
+import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx";
+import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
+import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
+import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
+import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
+import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
+import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
+import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
+
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+
+
+
+## Installation
+
+
+
+## Configure
+
+
+
+Please note this is the important step for setting the Web3Auth account abstraction provider.
+
+- [Configure Smart Account provider](#configure-smart-account-provider)
+- [Configure Bundler](#configure-bundler)
+- [Configure Sponsored Paymaster](#sponsored-paymaster)
+- [Configure ERC-20 Paymaster](#erc-20-paymaster)
+
+## Configure Smart Account Provider
+
+
+
+## Configure Bundler
+
+
+
+## Configure Paymaster
+
+You can configure the paymaster of your choice to sponsor gas fees for your users, along with the
+paymaster context. The paymaster context lets you set additional parameters, such as choosing the
+token for ERC-20 paymasters, defining gas policies, and more.
+
+### Sponsored Paymaster
+
+
+
+### ERC-20 Paymaster
+
+
+
+## Set up
+
+### Configure Web3Auth Instance
+
+```ts
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+// focus-start
+import {
+ AccountAbstractionProvider,
+ SafeSmartAccount,
+} from "@web3auth/account-abstraction-provider";
+// focus-end
+import { Web3Auth } from "@web3auth/single-factor-auth";
+
+const chainConfig = {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ chainId: "0xaa36a7",
+ rpcTarget: "https://rpc.sepolia.org",
+ displayName: "Ethereum Sepolia Testnet",
+ blockExplorerUrl: "https://sepolia.etherscan.io",
+ ticker: "ETH",
+ tickerName: "Ethereum",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+// focus-start
+const accountAbstractionProvider = new AccountAbstractionProvider({
+ config: {
+ chainConfig,
+ bundlerConfig: {
+ // Get the pimlico API Key from dashboard.pimlico.io
+ url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
+ },
+ smartAccountInit: new SafeSmartAccount(),
+ },
+});
+// focus-end
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ privateKeyProvider,
+ // focus-start
+ accountAbstractionProvider,
+ // focus-end
+});
+```
+
+### Configure Signer
+
+
+
+## Smart Account Address
+
+
+
+## Send Transaction
+
+
+
+## Advanced Smart Account Operations
+
+To learn more about supported transaction methods, and how to perform batch transactions,
+[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/web/react).
diff --git a/docs/sdk/sfa/sfa-js/authentication.mdx b/docs/sdk/mobile/sfa/react-native/authentication.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/authentication.mdx
rename to docs/sdk/mobile/sfa/react-native/authentication.mdx
diff --git a/docs/sdk/sfa/sfa-js/examples.mdx b/docs/sdk/mobile/sfa/react-native/examples.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/examples.mdx
rename to docs/sdk/mobile/sfa/react-native/examples.mdx
diff --git a/docs/sdk/mobile/sfa/react-native/initialize.mdx b/docs/sdk/mobile/sfa/react-native/initialize.mdx
new file mode 100644
index 000000000..8a55f221b
--- /dev/null
+++ b/docs/sdk/mobile/sfa/react-native/initialize.mdx
@@ -0,0 +1,348 @@
+---
+title: "Initializing Single Factor Auth JS SDK"
+sidebar_label: "Initialize"
+description: "Web3Auth Single Factor Auth JS SDK - Initialize | Documentation - Web3Auth"
+---
+
+import InstantiatingProvider from "@site/src/common/sdk/sfa/_instantiating_provider.mdx";
+import ExampleCards from "@theme/ExampleCards";
+import {
+ coreKitSfaWebExamples,
+ coreKitSfaReactNativeExamples,
+ coreKitSfaNodeExamples,
+ QUICK_START,
+} from "@site/src/common/maps";
+
+After Installation, the next step to use Web3Auth Single Factor Auth JS SDK is to Initialize the
+SDK.
+
+However, the Initialization is a two-step process, ie.
+
+- [Instantiation of Web3Auth](#instantiating-web3auth)
+- [Initialization of Web3Auth](#initializing-web3auth)
+
+## Instantiating Web3Auth
+
+#### Import the `Web3Auth` class from `@web3auth/single-factor-auth` package.
+
+```tsx
+import { Web3Auth } from "@web3auth/single-factor-auth";
+```
+
+#### Assign the `Web3Auth` class to a variable
+
+```javascript
+const web3auth = new Web3Auth(Web3AuthOptions);
+```
+
+This Web3Auth constructor takes an object with `Web3AuthOptions` as input.
+
+### Arguments
+
+#### `Web3AuthOptions`
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+
+
+
+
+| Parameter | Description |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `clientId` | Client id for web3auth. You can obtain your client ID from the web3auth developer dashboard. You can set any random string for this on localhost. |
+| `web3AuthNetwork` | Web3Auth Network to use for login. The default value is `mainnet`. |
+| `privateKeyProvider` | Private key provider for your chain namespace. |
+| `accountAbstractionProvider?` | Account abstraction provider for your preferred chain and provider. |
+| `enableLogging?` | Setting to true will enable logs. The default value is `false`. |
+| `usePnPKey?` | Setting this to true returns the same key as web SDK (i.e., plug-n-play key). By default, this SDK returns CoreKitKey. |
+| `sessionTime?` | How long should a login session last at a minimum in seconds? The default value is `86400` seconds. The max value of sessionTime can be `7 * 86400` (30 days). |
+| `storageKey?` | Setting to "local" will persist the social login session across browser tabs. The default value is `local`. |
+| `storageServerUrl?` | Specify a custom storage server URL. The default value is `https://session.web3auth.io`. |
+| `serverTimeOffset?` | Specify a custom server time offset. The default value is `0`. |
+| `mode?` | Defines the mode of the SDK. The default value is `web`. You can use `react-native` or `node` for respective platforms. |
+| `storage?` | Storage for SFA's local state. The default value is `localStorage`. You need to pass the storage instance for `react-native` mode. |
+
+
+
+
+
+```tsx
+export interface Web3AuthOptions {
+ /**
+ * Client id for web3auth.
+ * You can obtain your client ID from the web3auth developer dashboard.
+ * You can set any random string for this on localhost.
+ */
+ clientId: string;
+ /**
+ * Web3Auth Network to use for login
+ * @defaultValue mainnet
+ */
+ web3AuthNetwork?: TORUS_NETWORK_TYPE;
+ /**
+ * setting to true will enable logs
+ *
+ * @defaultValue false
+ */
+ enableLogging?: boolean;
+ /**
+ * setting this to true returns the same key as web SDK (i.e., plug-n-play key)
+ * By default, this SDK returns CoreKitKey
+ */
+ usePnPKey?: boolean;
+ /**
+ * How long should a login session last at a minimum in seconds
+ *
+ * @defaultValue 86400 seconds
+ * @remarks Max value of sessionTime can be 7 * 86400 (30 days)
+ */
+ sessionTime?: number;
+ /**
+ * setting to "local" will persist social login session across browser tabs.
+ *
+ * @defaultValue "local"
+ */
+ storageKey?: "session" | "local";
+ /**
+ * Specify a custom storage server URL
+ * @defaultValue https://session.web3auth.io
+ */
+ storageServerUrl?: string;
+ /**
+ * Specify a custom server time offset.
+ *
+ * @defaultValue 0
+ */
+ serverTimeOffset?: number;
+
+ /**
+ * Private key provider for your chain namespace
+ */
+ privateKeyProvider: IBaseProvider;
+ /**
+ * Account abstraction provider for your chain namespace
+ */
+ accountAbstractionProvider?: IBaseProvider;
+ /**
+ * Defines the mode of the SDK
+ *
+ * @defaultValue "web"
+ */
+ mode?: SDK_MODE_TYPE;
+ /**
+ * storage for sfa's local state.
+ *
+ * - undefined with localStorage
+ * - "local" with localStorage
+ * - "session" with sessionStorage
+ *
+ * For asyncStorage, provide instance of IAsyncStorage.
+ *
+ */
+ storage?: IAsyncStorage | ISecureStore | "session" | "local";
+}
+```
+
+
+
+
+
+### Instantiating Provider
+
+
+
+## Initializing Web3Auth
+
+#### `init()`
+
+To complete the initialization process, we need to initialize the `Web3Auth` instance, which we
+named `web3auth`. This is achieved by calling the `init()` function of the previously created
+`web3auth` instance.
+
+```javascript
+await web3auth.init();
+```
+
+## Usage
+
+### Web
+
+For Web, you need to simply pass the basic `Web3AuthOptions`, and the private key provider, and the
+SDK will handle the rest.
+
+```javascript
+import { Web3Auth } from "@web3auth/single-factor-auth";
+import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+
+const chainConfig = {
+ chainId: "0x1",
+ displayName: "Ethereum Mainnet",
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ tickerName: "Ethereum",
+ ticker: "ETH",
+ decimals: 18,
+ rpcTarget: "https://rpc.ethereum.org",
+ blockExplorerUrl: "https://etherscan.io",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+// focus-start
+const web3auth = new Web3Auth({
+ clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ privateKeyProvider: privateKeyProvider,
+ usePnPKey: false, // By default, this SDK returns CoreKitKey
+});
+// focus-end
+```
+
+### React Native
+
+While configuring the React Native Instance, you need to pass the `storage` option, and the `mode`
+of the SDK should be set to `react-native`.
+
+
+
+
+
+```javascript
+import { Web3Auth, SDK_MODE } from "@web3auth/single-factor-auth";
+import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import EncryptedStorage from "react-native-encrypted-storage";
+
+const chainConfig = {
+ chainId: "0x1",
+ displayName: "Ethereum Mainnet",
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ tickerName: "Ethereum",
+ ticker: "ETH",
+ decimals: 18,
+ rpcTarget: "https://rpc.ethereum.org",
+ blockExplorerUrl: "https://etherscan.io",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+// focus-start
+const web3auth = new Web3Auth({
+ clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ privateKeyProvider: privateKeyProvider,
+ usePnPKey: false, // By default, this SDK returns CoreKitKey
+ // focus-start
+ storage: EncryptedStorage,
+ mode: SDK_MODE.REACT_NATIVE,
+ // focus-end
+});
+// focus-end
+```
+
+
+
+
+
+```javascript
+import { Web3Auth, SDK_MODE } from "@web3auth/single-factor-auth";
+import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import * as SecureStore from "expo-secure-store";
+
+const chainConfig = {
+ chainId: "0x1",
+ displayName: "Ethereum Mainnet",
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ tickerName: "Ethereum",
+ ticker: "ETH",
+ decimals: 18,
+ rpcTarget: "https://rpc.ethereum.org",
+ blockExplorerUrl: "https://etherscan.io",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+// focus-start
+const web3auth = new Web3Auth({
+ clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ privateKeyProvider: privateKeyProvider,
+ usePnPKey: false, // By default, this SDK returns CoreKitKey
+ // focus-start
+ storage: SecureStore,
+ mode: SDK_MODE.REACT_NATIVE,
+ // focus-end
+});
+// focus-end
+```
+
+
+
+
+
+### Node JS
+
+```javascript
+import { Web3Auth, SDK_MODE } from "@web3auth/single-factor-auth";
+import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+
+const chainConfig = {
+ chainId: "0x1",
+ displayName: "Ethereum Mainnet",
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ tickerName: "Ethereum",
+ ticker: "ETH",
+ decimals: 18,
+ rpcTarget: "https://rpc.ethereum.org",
+ blockExplorerUrl: "https://etherscan.io",
+ logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+ config: { chainConfig },
+});
+
+// focus-start
+const web3auth = new Web3Auth({
+ clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ privateKeyProvider: privateKeyProvider,
+ usePnPKey: false, // By default, this SDK returns CoreKitKey
+ // focus-start
+ mode: SDK_MODE.NODE,
+ // focus-end
+});
+// focus-end
+```
+
+For Node JS, you just need to set the `mode` of the SDK to `node`.
+
+## Quick Starts
+
+ obj.type === QUICK_START)}
+/>
diff --git a/docs/sdk/mobile/sfa/react-native/initiate-topup.mdx b/docs/sdk/mobile/sfa/react-native/initiate-topup.mdx
new file mode 100644
index 000000000..c88759736
--- /dev/null
+++ b/docs/sdk/mobile/sfa/react-native/initiate-topup.mdx
@@ -0,0 +1,44 @@
+---
+title: Topup your Wallet in SFA JS SDK
+sidebar_label: Top-up Wallet
+description: "@web3auth/single-factor-auth Topup your Wallet | Documentation - Web3Auth"
+---
+
+For topping up the wallet of a user, you can use the `showCheckout` function which is part of Wallet
+Services Plugin. This method allow users to select their local currency and specify the token to top
+up their wallet.
+
+:::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 Web3Auth Sapphire
+Devnet network for free.
+
+:::
+
+## Parameters
+
+| Name | Description |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `receiveWalletAddress?` | Specifies the recipient's address. By default, it is set to the currently connected address. |
+| `tokenList?` | Specifies the tokens to display in the list. By default, all tokens are shown. Use the ticker name to specify which tokens to display, such as `[USDC, USDT, ETH]`. Please checkout the coverage details for [full list of supported networks and tokens](/docs/features/topup#network-coverage). |
+| `fiatList?` | Specifies the available fiat currencies enabled for purchase. Use the currency acronym to define which fiat currencies to display, such as `[USD, SGD, INR, JPY]`. Please checkout the coverage details for [full list of supported currencies](/docs/features/topup#country-and-payment-method-coverage). |
+| `show` | Determines whether the checkout UI is displayed. This can be used to programmatically control its visibility. |
+
+## Usage
+
+```javascript
+import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
+
+const walletServicesPlugin = new WalletServicesPlugin();
+web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth
+
+await walletServicesPlugin.showCheckout({
+ show: true,
+}); // Opens the TopUp modal
+```
+
+## Supported Cryptocurrency
+
+To checkout the support cryptocurrency and networks,
+[please checkout the coverage documentation](/docs/features/topup#coverage).
diff --git a/docs/sdk/mobile/sfa/react-native/install.mdx b/docs/sdk/mobile/sfa/react-native/install.mdx
new file mode 100644
index 000000000..fcf27d730
--- /dev/null
+++ b/docs/sdk/mobile/sfa/react-native/install.mdx
@@ -0,0 +1,208 @@
+---
+title: "Installing Single Factor Auth JS SDK"
+sidebar_label: "Install"
+description: "Web3Auth Single Factor Auth JS SDK - Install | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import ExpoWarning from "@site/src/common/docs/_expo-warning.mdx";
+
+### [`@web3auth/single-factor-auth`](https://npmjs.com/package/@web3auth/single-factor-auth)
+
+```bash npm2yarn
+npm install --save @web3auth/single-factor-auth
+```
+
+## Add a Provider to your project
+
+The `@web3auth/single-factor-auth` package requires a private key provider to facilitate interaction
+with your preferred blockchain network. You can choose between the following providers based on your
+usecase.
+
+- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/sfa/sfa-js/providers/evm)
+- [Solana Private Key Provider for Solana Blockchain](/sdk/sfa/sfa-js/providers/solana)
+- [XRPL Private Key Provider for XRPL Blockchain](/sdk/sfa/sfa-js/providers/xrpl)
+- [Common Private Key Provider for Connecting to any Blockchain](/sdk/sfa/sfa-js/providers/common)
+
+## Common Types and Interfaces
+
+### [`@web3auth/base`](https://npmjs.com/package/@web3auth/base)
+
+This package gives access to common types and interfaces for Web3Auth. This comes in handy by
+providing you with a standard way of importing the values you need to work with the SDKs. We highly
+recommend using it while working with `Typescript`.
+
+```bash npm2yarn
+npm install --save @web3auth/base
+```
+
+## Web - Bundler Configuration
+
+You may run into problems where certain dependencies are missing within the browser environment.
+These are node dependencies that need to be polyfilled in your application, to enable Web3Auth
+functionalities. Furthermore, your bundler needs to be reconfigured to use them while building the
+app. We have created guides for different bundlers to help you with this issue:
+
+- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
+- Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
+
+## React Native - Bare React Native Workflow
+
+Your Bare React Native app is entirely built on your machine. In this workflow, the developer has
+complete control, along with the complexity that comes with that. Configuration with `app.json` /
+`app.config.js` is mostly not supported in this context; instead, you will need to configure each
+native project directly with Swift/Kotlin native modules. Check out the
+[troubleshooting section](/sdk/mobile/pnp/react-native/install#troubleshooting) for fixing common
+issues.
+
+:::tip
+
+You can read more about different workflows in the
+[Expo documentation](https://docs.expo.dev/archive/managed-vs-bare/).
+
+:::
+
+### Adding a `Storage` Module
+
+We need to pass a `Storage` parameter to the SDK, which will be used for session management without
+storing the private keys of the user in the device. When using our SDK with a bare workflow React
+Native app, you have to install a `Storage` implementation provided by react-native.
+
+```bash npm2yarn
+npm install --save react-native-encrypted-storage
+```
+
+### Configuration
+
+After you have installed the files needed for your workflow, you'll have to configure the SDK with
+some additional steps to be able to use the SDK properly.
+
+For the bare workflow, you need to perform additional installation steps, alongside specific
+configurations for Android and iOS separately.
+
+
+
+
+
+- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
+
+```gradle title="android/build.gradle"
+buildToolsVersion = "31.0.0"
+minSdkVersion = 21
+# focus-next-line
+compileSdkVersion = 31
+# focus-next-line
+targetSdkVersion = 31
+```
+
+- Add the intent filter with `scheme` defined in your `AndroidManifest.xml`
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+
+
+
+
+ # replace with your own scheme
+ # focus-next-line
+
+
+```
+
+- SDK version 31 requires you to explicitly define `android:exported="true"` in
+ `AndroidManifest.xml`, check whether it is correctly present or not.
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+
+```
+
+
+
+
+
+- Make sure that the minimum SDK compile version in `Podfile` is 14 or more.
+
+```Podfile title="ios/Podfile"
+platform :ios, '14'
+```
+
+- Install the Cocoa Pods within your project directory.
+
+```shell
+cd ios
+pod install
+```
+
+:::tip
+
+You may refer to **[these example apps](./examples)** and try it out yourself.
+
+:::
+
+
+
+
+## React Native - Expo Managed Workflow
+
+Your Expo app is built on your Expo's cloud, so you don't have control over the native modules used
+in the app. Developers build managed workflow apps using `expo-cli` on their computers and a
+development client on their mobile devices. Managed workflow apps typically use one or more Expo
+services, such as push notifications, builds, and updates.
+
+
+
+### Adding a `Storage` Module
+
+We need to pass a `Storage` parameter to the SDK, which will be used for session management without
+storing the private keys of the user in the device. When using our SDK with an Expo-based React
+Native app (aka managed workflow), you have to install the `expo-secure-store` package as a
+`Storage` implementation.
+
+```shell
+npx expo install expo-secure-store
+```
+
+### Configuration
+
+After you have installed the files needed for your workflow, you'll have to configure the SDK with
+some additional steps to be able to use the SDK properly.
+
+- Adding URL scheme to `app.json`
+
+To allow the Expo-based SDK to work with exported Expo Android apps, you need to add the designated
+scheme into `app.json`
+
+```json title="app.json"
+{
+ "expo": {
+ "scheme": "web3authexpoexample" // replace with your own scheme
+ }
+}
+```
+
+:::tip
+
+You may refer to [these example apps](./examples) and try it out yourself.
+
+:::
+
+### Bundler Issues: Missing Dependencies
+
+You might face issues mentioning that certain dependencies are missing within the React Native
+environment. These are node dependencies that need to be polyfilled in your application, to enable
+Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
+building the app. Please check out our
+**[React Native Troubleshooting Guide](/troubleshooting/metro-issues)**
diff --git a/docs/sdk/sfa/sfa-js/providers/aa-provider.mdx b/docs/sdk/mobile/sfa/react-native/providers/aa-provider.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/providers/aa-provider.mdx
rename to docs/sdk/mobile/sfa/react-native/providers/aa-provider.mdx
diff --git a/docs/sdk/sfa/sfa-js/providers/common.mdx b/docs/sdk/mobile/sfa/react-native/providers/common.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/providers/common.mdx
rename to docs/sdk/mobile/sfa/react-native/providers/common.mdx
diff --git a/docs/sdk/sfa/sfa-js/providers/evm.mdx b/docs/sdk/mobile/sfa/react-native/providers/evm.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/providers/evm.mdx
rename to docs/sdk/mobile/sfa/react-native/providers/evm.mdx
diff --git a/docs/sdk/sfa/sfa-js/providers/providers.mdx b/docs/sdk/mobile/sfa/react-native/providers/providers.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/providers/providers.mdx
rename to docs/sdk/mobile/sfa/react-native/providers/providers.mdx
diff --git a/docs/sdk/sfa/sfa-js/providers/solana.mdx b/docs/sdk/mobile/sfa/react-native/providers/solana.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/providers/solana.mdx
rename to docs/sdk/mobile/sfa/react-native/providers/solana.mdx
diff --git a/docs/sdk/sfa/sfa-js/providers/xrpl.mdx b/docs/sdk/mobile/sfa/react-native/providers/xrpl.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/providers/xrpl.mdx
rename to docs/sdk/mobile/sfa/react-native/providers/xrpl.mdx
diff --git a/docs/sdk/sfa/sfa-js/sfa-js.mdx b/docs/sdk/mobile/sfa/react-native/react-native.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/sfa-js.mdx
rename to docs/sdk/mobile/sfa/react-native/react-native.mdx
diff --git a/docs/sdk/mobile/sfa/react-native/show-wallet-connect.mdx b/docs/sdk/mobile/sfa/react-native/show-wallet-connect.mdx
new file mode 100644
index 000000000..ab5c5888a
--- /dev/null
+++ b/docs/sdk/mobile/sfa/react-native/show-wallet-connect.mdx
@@ -0,0 +1,40 @@
+---
+title: Interoperability with WalletConnect in PnP Web Modal SDK
+sidebar_label: Show Wallet Connect Scanner
+description: "@web3auth/modal Interoperability with WalletConnect | Documentation - Web3Auth"
+---
+
+For enabling interoperability with Wallet Connect, ie. connecting your W3A generated wallet to other
+dApps which have Wallet Connect integration, you can use the `showWalletConnectScanner()` method.
+This method uses the Wallet Connect `copy and paste` flow, in which you can directly copy the QR
+Code details from a dApp like [OpenSea](https://opensea.io) and paste in the modal.
+
+:::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 Web3Auth Sapphire
+Devnet network for free.
+
+:::
+
+## Parameters
+
+| Name | Description |
+| ------ | ------------------------------------------------------------------------------------------------------------------- |
+| `show` | Determines whether the Wallet Connect UI is displayed. This can be used to programmatically control its visibility. |
+
+## Usage
+
+Shows the Wallet Connect Scanner to connect with dApps having Wallet Connect login option. This is
+useful for interoperability with dApps having Wallet Connect login option.
+
+```javascript
+import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
+
+const walletServicesPlugin = new WalletServicesPlugin();
+web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth
+
+await walletServicesPlugin.showWalletConnectScanner({
+ show: true,
+});
+```
diff --git a/docs/sdk/mobile/sfa/react-native/usage.mdx b/docs/sdk/mobile/sfa/react-native/usage.mdx
new file mode 100644
index 000000000..927a3f7af
--- /dev/null
+++ b/docs/sdk/mobile/sfa/react-native/usage.mdx
@@ -0,0 +1,363 @@
+---
+title: "Usage of Single Factor Auth JS SDK"
+sidebar_label: "Usage"
+description: "Web3Auth Single Factor Auth JS SDK - Usage | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
+users. Further, you can use the native provider given by Web3Auth to connect the users to the
+respective blockchain network.
+
+## Functionality Overview
+
+Natively, the instance of Web3Auth (called web3auth in our examples) has the following
+methods/getters:
+
+| Name | Description |
+| ------------------------------------------ | --------------------------------------------------------------------------------------- |
+| [connect](#logging-in-your-user) | Use this method to login a user to Web3Auth SFA JS SDK. |
+| [provider](#get-a-native-provider) | Returns the native provider that can be used to make different blockchain transactions. |
+| [sessionId](#get-sessionid) | Returns the sessionId of the user as a string. |
+| [authenticateUser](#authenticate-the-user) | Returns a promise of the `UserAuthInfo` object containing the `idToken` of the user. |
+| [addChain](#add-a-new-chain) | Add chain configuration to the web3auth instance. |
+| [switchChain](#switch-the-chain) | Switches the chainId to one of the added chainIds. |
+| [logout](#logging-out-the-user) | Log out the user from the web3auth instance. |
+
+## Logging in your User
+
+To log in a user using the Web3Auth SFA JS SDK, call the `connect` method. This method returns an
+`IProvider` instance upon successful authentication which can then be used to interact with various
+blockchain networks. For more details, [refer to the provider documentation](./providers/).
+
+:::tip
+
+Please refer to the [Authentication](./authentication) section for more details on the setting up
+your verifier and other authentication parameters.
+
+:::
+
+### LoginParams
+
+The method accepts `LoginParams` as an input.
+
+
+
+
+
+| Parameter | Description |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | Name of the verifier. It's a mandatory parameter as a string. |
+| `verifierId` | Verifier ID's value, `sub` or `email` value present in the idToken. It's a mandatory parameter as a string. |
+| `idToken` | A newly created `JWT Token` that has not already been sent to Web3Auth or a `Duplicate Token` error will be thrown. It's a mandatory parameter as a string. |
+| `subVerifierInfoArray?` | Sub verifier info. It's an optional parameter as a TorusSubVerifierInfo[]. |
+| `serverTimeOffset?` | Server time offset. It's an optional parameter as a number. |
+
+
+
+
+
+```ts
+export type LoginParams = {
+ verifier: string;
+ verifierId: string;
+ idToken: string;
+ subVerifierInfoArray?: TorusSubVerifierInfo[];
+ serverTimeOffset?: number;
+};
+```
+
+
+
+
+### TorusSubVerifierInfo
+
+
+
+
+
+| Name | Description |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `verifier` | Name of the verifier. It's a `string` mandatory parameter. |
+| `idToken` | A newly created `JWT Token` that has not already been sent to Web3Auth or a `Duplicate Token` error will be thrown. It's a `string` mandatory parameter. |
+
+
+
+
+
+```ts
+export interface TorusSubVerifierInfo {
+ verifier: string;
+ idToken: string;
+}
+```
+
+
+
+
+### Usage
+
+
+
+
+
+```js
+await web3auth.connect({
+ // Get the verifier name from the Web3Auth Dashboard
+ verifier: "YOUR_VERIFIER_NAME",
+ // Pass the JWT token verification value selected for verifier.
+ verifierId: "YOUR_VERIFIER_ID",
+ // Pass your JWT token
+ idToken: "YOUR_JWT_TOKEN",
+});
+```
+
+
+
+
+
+```js
+await web3auth.connect({
+ // Get the aggregate verifier name from the Web3Auth Dashboard
+ verifier: "YOUR_AGGREGATE_VERIFIER_NAME",
+ // Pass the JWT token verification value selected for sub verifier.
+ verifierId: "YOUR_VERIFIER_ID",
+ // Pass your JWT token
+ idToken: "YOUR_JWT_TOKEN",
+ subVerifierInfoArray: [
+ {
+ // Get the sub verifier name from the Web3Auth Dashboard
+ verifier: "YOUR_SUB_VERIFIER_NAME",
+ // Pass the JWT token
+ idToken: "YOUR_JWT_TOKEN",
+ },
+ ],
+});
+```
+
+
+
+
+
+## Get a native provider
+
+The method returns the provider instance that can be used to interact with different blockchain
+networks. Please note, if there's no active session, the method will return `null`.
+
+Please refer to the [provider documentation](./providers/) for more details.
+
+### Usage
+
+```js
+const provider = web3auth.provider;
+// Use the provider to interact with the blockchain
+```
+
+## Get sessionId
+
+The method returns the session id for the current active session as the string.
+
+### Usage
+
+```js
+const sessionId = web3auth.sessionId;
+```
+
+## Authenticate the user
+
+The method authenticates the connected user, and returns user auth info containing the Web3Auth JWT
+token. You can use the idToken for backend verification.
+
+### Usage
+
+```js
+const userAuthInfo = await web3auth.authenticateUser();
+```
+
+### Response
+
+```ts
+export type UserAuthInfo = {
+ idToken: string;
+};
+```
+
+## Add a new chain
+
+To add a new chain to your Web3Auth provider instance you can use the `addChain` method.
+
+### Parameters
+
+The method accepts a `CustomChainConfig` object as an input.
+
+
+
+
+
+| Name | Description |
+| ------------------- | ------------------------------------------------------------------------------------------ |
+| `chainNamespace` | Namespace of the chain. It `ChainNamespaceType` type. |
+| `chainId` | The chain id of the network in Hex format. |
+| `rpcTarget` | RPC target URL for the chain. The RPC url is used to interact with the blockchain network. |
+| `wsTarget?` | Web socket target URL for the chain. |
+| `displayName?` | Display Name for the chain. |
+| `blockExplorerUrl?` | Blockchain explorer URL for the network. |
+| `ticker?` | Network's native currency ticker (e.g: ETH for Ethereum) |
+| `tickerName?` | Network's native currency name (e.g: `Ethereum`). |
+| `decimals?` | Network's native currency decimal precision (e.g: 18 for Ethereum). Default value is 18. |
+| `logo?` | Logo for the token. |
+| `isTestnet?` | Whether the network is testnet or not. |
+
+
+
+
+
+```ts
+export declare const ADAPTER_NAMESPACES: {
+ readonly EIP155: "eip155";
+ readonly SOLANA: "solana";
+ readonly CASPER: "casper";
+ readonly XRPL: "xrpl";
+ readonly MULTICHAIN: "multichain";
+};
+
+declare type ChainNamespaceType = (typeof CHAIN_NAMESPACES)[keyof typeof CHAIN_NAMESPACES];
+export type CustomChainConfig = {
+ chainNamespace: ChainNamespaceType;
+ /**
+ * The chain id of the chain
+ */
+ chainId: string;
+ /**
+ * RPC target Url for the chain
+ */
+ rpcTarget: string;
+ /**
+ * web socket target Url for the chain
+ */
+ wsTarget?: string;
+ /**
+ * Display Name for the chain
+ */
+ displayName?: string;
+ /**
+ * Url of the block explorer
+ */
+ blockExplorerUrl?: string;
+ /**
+ * Default currency ticker of the network (e.g: ETH)
+ */
+ ticker?: string;
+ /**
+ * Name for currency ticker (e.g: `Ethereum`)
+ */
+ tickerName?: string;
+ /**
+ * Number of decimals for the currency ticker (e.g: 18)
+ */
+ decimals?: number;
+ /**
+ * Logo for the token
+ */
+ logo?: string;
+ /**
+ * Whether the network is testnet or not
+ */
+ isTestnet?: boolean;
+};
+```
+
+
+
+
+
+## Switch the chain
+
+To switch the chain for the provider instance you need to call the `switchChain` method. Please make
+sure, you have first added the chain using the [addChain](#add-a-new-chain) method.
+
+### Parameters
+
+| Name | Description |
+| --------- | ---------------------------------------------------------------- |
+| `chainId` | The hex chain ID of the blockchain network you want to switch to |
+
+### Usage
+
+```ts
+// Switches the chain to the Polygon network
+await web3auth.switchChain({ chainId: "0x89" });
+```
+
+## Logging out the user
+
+To logout the user and clear the session, call the `logout` method. Please note, this method only
+clears the Web3Auth session, and doesn't clears the OAuth session.
+
+### Usage
+
+```ts
+await web3auth.logout();
+```
+
+## Wallet Services Plugin Methods
+
+You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet
+UI Screen, Wallet Connect Scanner, and initiating topup for the user.
+
+:::tip
+
+Learn more about the Wallet Services Plugin in the
+[Wallet Services SDK Reference](./wallet-services/).
+
+:::
+
+### Show WalletConnect Scanner
+
+You can use the `showWalletConnectScanner` function to show the Wallet Connect Scanner, and connect
+with dApps having Wallet Connect login option. This is useful for interoperability with dApps having
+Wallet Connect login option.
+[Learn more about `showWalletConnectScanner`](./wallet-services/usage#connect-dapps-with-wallet-connect).
+
+### Fiat On Ramp
+
+You can use the `showCheckout` function to show the TopUp modal, allowing users to select their
+local currency and specify the token to top up their wallet.
+[Learn more about `showCheckout`](./wallet-services/usage#fiat-on-ramp).
+
+### Embedded Wallet UI
+
+You can use the `showWalletUI` function to show the templated wallet UI services.
+[Learn more about `showWalletUI`](./wallet-services/usage#show-wallet-embedded-ui).
+
+### Transaction Confirmatons 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.
+[Learn more about transaction confirmation screens](./wallet-services/usage#transaction-confirmation-screens).
diff --git a/docs/sdk/pnp/web/wallet-services/usage.mdx b/docs/sdk/mobile/sfa/react-native/wallet-services/usage.mdx
similarity index 100%
rename from docs/sdk/pnp/web/wallet-services/usage.mdx
rename to docs/sdk/mobile/sfa/react-native/wallet-services/usage.mdx
diff --git a/docs/sdk/sfa/sfa-js/wallet-services/wallet-services-hooks.mdx b/docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services-hooks.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/wallet-services/wallet-services-hooks.mdx
rename to docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services-hooks.mdx
diff --git a/docs/sdk/sfa/sfa-js/wallet-services/wallet-services.mdx b/docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services.mdx
similarity index 100%
rename from docs/sdk/sfa/sfa-js/wallet-services/wallet-services.mdx
rename to docs/sdk/mobile/sfa/react-native/wallet-services/wallet-services.mdx
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/authentication.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/authentication.mdx
index d0dd4df90..cfaae8427 100644
--- a/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/authentication.mdx
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/authentication.mdx
@@ -31,7 +31,7 @@ authenticate users directly or use auth provider services like Auth0, Firebase,
Additionally, you can make your own JWT token authentication system and pass over the ID Token to
Web3Auth.
-[Learn how to create a verifier](/auth-provider-setup/verifiers).
+[Learn how to create a verifier](/authentication).
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-jwt.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-jwt.mdx
index 6ab254b28..08a726531 100644
--- a/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-jwt.mdx
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-jwt.mdx
@@ -108,7 +108,7 @@ type AuthenticatorTransport = "ble" | "hybrid" | "internal" | "nfc" | "usb";
To login with a single verifier, you will require to create a custom verifier in the Web3Auth
dashboard. If you haven't already created one,
-[learn how to create a verifier](/docs/auth-provider-setup/byo-jwt-provider/#set-up-custom-jwt-verifier).
+[learn how to create a verifier](/docs/authentication/custom-connections/custom-jwt#set-up-custom-jwt-connection).
```tsx
import { JWTLoginParams } from "@web3auth/mpc-core-kit";
@@ -126,7 +126,7 @@ await coreKitInstance.loginWithJWT(jwtLoginParams);
To login with an aggregate verifier, you will require to create an aggregate verifier in the
Web3Auth dashboard. If you haven't already created one,
-[learn how to create an aggregate verifier](/docs/auth-provider-setup/aggregate-verifier#setting-up-an-aggregate-verifier).
+[learn how to create an aggregate verifier](/docs/authentication/group-connections).
```tsx
import { JWTLoginParams } from "@web3auth/mpc-core-kit";
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-oauth.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-oauth.mdx
index 3f7450a13..3223c3b3e 100644
--- a/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-oauth.mdx
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-oauth.mdx
@@ -5,8 +5,6 @@ sidebar_label: "Log in with OAuth"
description: "Web3Auth MPC Core Kit JS SDK - Log in with OAuth | Documentation - Web3Auth"
---
-import ServiceWorkerCode from "@site/src/common/sdk/mpc-core-kit/_sw-js.mdx";
-
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
@@ -153,7 +151,7 @@ export type AGGREGATE_VERIFIER_TYPE = (typeof AGGREGATE_VERIFIER)[keyof typeof A
To login with a single verifier, you will require to create a custom verifier in the Web3Auth
dashboard. If you haven't already created one,
-[learn how to create a verifier](/docs/auth-provider-setup/verifiers).
+[learn how to create a verifier](/docs/authentication).
```tsx
import { SubVerifierDetailsParams } from "@web3auth/mpc-core-kit";
@@ -173,7 +171,7 @@ await coreKitInstance.loginWithOAuth(verifierConfig);
To login with an aggregate verifier, you will require to create an aggregate verifier in the
Web3Auth dashboard. If you haven't already created one,
-[learn how to create an aggregate verifier](/docs/auth-provider-setup/aggregate-verifier#setting-up-an-aggregate-verifier).
+[learn how to create an aggregate verifier](/docs/authentication/group-connections).
```tsx
import { AggregateVerifierLoginParams } from "@web3auth/mpc-core-kit";
@@ -312,7 +310,308 @@ folder. You can also find the code in our
Service Worker Code
-
+ ```tsx title="/public/serviceworker/sw.js"
+/* eslint-disable */
+function getScope() {
+ return self.registration.scope;
+}
+
+self.addEventListener("message", function (event) { if (event.data && event.data.type ===
+"SKIP_WAITING") { self.skipWaiting(); } });
+
+self.addEventListener("fetch", function (event) { try { const url = new URL(event.request.url); if
+(url.pathname.includes("redirect") && url.href.includes(getScope())) { event.respondWith( new
+Response( new Blob( [ `
+
+
+
+
+
+
+
+
+ Redirect
+
+
+
+
+
+
+
+
+
+
+
+
You can close this window now
+
+
+
+
+
+
+
+${""} `, ], { type: "text/html" }, ), ), ); } } catch (error) { console.error(error); } });
+
+```
## Redirect Mode
@@ -323,3 +622,4 @@ file. You can get login results by calling the `init()` function on the redirect
For example, if `baseUrl` is `https://your-domain.com` and `redirectPathName` is `auth` then the
user will be redirected to the `https://your-domain.com/auth` page after logging in where you can
get login result by calling `init()` function on redirected page mount.
+```
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx
index 8e20378d3..dacc7eec2 100644
--- a/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit-js/providers/evm.mdx
@@ -1,6 +1,6 @@
---
title: EIP1193 (EVM) Signing Provider for MPC Core Kit
-
+sidebar_label: EIP1193 (EVM) Signing Provider
description: "EIP1193 Signing Provider for EVM Compatible Chains | Documentation - Web3Auth"
---
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/authentication.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/authentication.mdx
index 448e1970a..f28a217ac 100644
--- a/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/authentication.mdx
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/authentication.mdx
@@ -25,7 +25,7 @@ authenticate users directly or use auth provider services like Auth0, Firebase,
Additionally, you can make your own JWT token authentication system and pass over the ID Token to
Web3Auth.
-[Learn how to create a verifier](/auth-provider-setup/verifiers).
+[Learn how to create a verifier](/authentication).
@@ -130,7 +130,7 @@ type AuthenticatorTransport = "ble" | "hybrid" | "internal" | "nfc" | "usb";
To login with a single verifier, you will require to create a custom verifier in the Web3Auth
dashboard. If you haven't already created one,
-[learn how to create a verifier](/docs/auth-provider-setup/byo-jwt-provider/#set-up-custom-jwt-verifier).
+[learn how to create a verifier](/docs/authentication/custom-connections/custom-jwt#set-up-custom-jwt-connection).
```tsx
const jwtLoginParams: JWTLoginParams = {
@@ -146,7 +146,7 @@ await coreKitInstance.loginWithJWT(jwtLoginParams);
To login with an aggregate verifier, you will require to create an aggregate verifier in the
Web3Auth dashboard. If you haven't already created one,
-[learn how to create an aggregate verifier](/docs/auth-provider-setup/aggregate-verifier#setting-up-an-aggregate-verifier).
+[learn how to create an aggregate verifier](/docs/authentication/group-connections).
```tsx
const jwtLoginParams = {
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx
index 8e20378d3..dacc7eec2 100644
--- a/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit-react-native/providers/evm.mdx
@@ -1,6 +1,6 @@
---
title: EIP1193 (EVM) Signing Provider for MPC Core Kit
-
+sidebar_label: EIP1193 (EVM) Signing Provider
description: "EIP1193 Signing Provider for EVM Compatible Chains | Documentation - Web3Auth"
---
diff --git a/docs/sdk/mpc-core-kit/mpc-core-kit.mdx b/docs/sdk/mpc-core-kit/mpc-core-kit.mdx
new file mode 100644
index 000000000..1621a6317
--- /dev/null
+++ b/docs/sdk/mpc-core-kit/mpc-core-kit.mdx
@@ -0,0 +1,13 @@
+---
+title: Explore Web3Auth MPC Core Kit
+hide_table_of_contents: true
+sidebar_label: MPC Core Kit
+displayed_sidebar: sdk_mpc_core_kit_js
+image: "images/docs-meta-cards/sdk-reference-card.png"
+description: "MPC Core Kit | Documentation - Web3Auth"
+---
+
+import { mpccorekit } from "@site/src/components/SDKReferenceCards";
+import Tiles from "@theme/Tiles";
+
+{mpccorekit}
diff --git a/docs/sdk/pnp/android/custom-authentication.mdx b/docs/sdk/pnp/android/custom-authentication.mdx
deleted file mode 100644
index 73dfc7eae..000000000
--- a/docs/sdk/pnp/android/custom-authentication.mdx
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: Using Custom Authentication in PnP Android SDK
-sidebar_label: Custom Authentication
-description: "Web3Auth PnP Android SDK - Using Custom Authentication | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-import SMSPasswordless from "@site/src/common/sdk/pnp/android/_sms_passwordless.mdx";
-
-## Configuration
-
-To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
-Firebase etc. or even your own custom JWT login) you can add the configuration using `loginConfig`
-parameter during the initialization.
-
-The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in
-its string form, and the value should be a `LoginConfigItem` instance.
-
-To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
-Dashboard in "Custom Authentication" section.
-[Learn how to create a custom verifier](/auth-provider-setup/verifiers).
-
-:::tip Create Custom Verifier
-
-Learn how to create a [Custom Verifier](/auth-provider-setup/verifiers) on the Web3Auth Dashboard.
-
-:::
-
-
-
-### Parameters
-
-After creating the verifier, you can use the following parameters in the `LoginConfigItem`.
-
-
-
-
-
-| Parameter | Description |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `String` as a value. |
-| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
-| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `String` as a value. |
-| `name?` | Display name for the verifier. If null, the default name is used. It accepts `String` as a value. |
-| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `String` as a value. |
-| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `String` as a value. |
-| `logoHover?` | Logo to be shown on mouse hover. It accepts `String` as a value. |
-| `logoLight?` | Light logo for dark background. It accepts `String` as a value. |
-| `logoDark?` | Dark logo for light background. It accepts `String` as a value. |
-| `mainOption?` | Show login button on the main list. It accepts `Boolean` as a value. Default value is false. |
-| `showOnModal?` | Whether to show the login button on modal or not. Default value is true. |
-| `showOnDesktop?` | Whether to show the login button on desktop. Default value is true. |
-| `showOnMobile?` | Whether to show the login button on mobile. Default value is true. |
-
-
-
-
-
-```kotlin
-data class LoginConfigItem(
- var verifier: String,
- private var typeOfLogin: TypeOfLogin,
- private var name: String? = null,
- private var description: String? = null,
- private var clientId: String,
- private var verifierSubIdentifier: String? = null,
- private var logoHover: String? = null,
- private var logoLight: String? = null,
- private var logoDark: String? = null,
- private var mainOption: Boolean? = false,
- private var showOnModal: Boolean? = true,
- private var showOnDesktop: Boolean? = true,
- private var showOnMobile: Boolean? = true,
-)
-
-enum class TypeOfLogin {
- @SerializedName("google")
- GOOGLE,
- @SerializedName("facebook")
- FACEBOOK,
- @SerializedName("reddit")
- REDDIT,
- @SerializedName("discord")
- DISCORD,
- @SerializedName("twitch")
- TWITCH,
- @SerializedName("apple")
- APPLE,
- @SerializedName("line")
- LINE,
- @SerializedName("github")
- GITHUB,
- @SerializedName("kakao")
- KAKAO,
- @SerializedName("linkedin")
- LINKEDIN,
- @SerializedName("twitter")
- TWITTER,
- @SerializedName("weibo")
- WEIBO,
- @SerializedName("wechat")
- WECHAT,
- @SerializedName("email_passwordless")
- EMAIL_PASSWORDLESS,
- @SerializedName("email_password")
- EMAIL_PASSWORD,
- @SerializedName("jwt")
- JWT
-}
-```
-
-
-
-
-### Usage
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf("google" to LoginConfigItem(
- verifier = "verifier-name", // Get it from Web3Auth dashboard
- typeOfLogin = TypeOfLogin.GOOGLE,
- clientId = getString(R.string.google_client_id) // Google's client id
- ))
- // focus-end
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.GOOGLE)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf(
- "facebook" to LoginConfigItem(
- verifier = "verifier-name", // Get it from Web3Auth dashboard
- typeOfLogin = TypeOfLogin.FACEBOOK,
- clientId = getString(R.string.facebook_client_id) // Facebook's client id
- )
- )
- // focus-end
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.Facebook)
-)
-// focus-end
-
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf("jwt" to LoginConfigItem(
- verifier = "verifier-name", // Get it from Web3Auth dashboard
- typeOfLogin = TypeOfLogin.JWT,
- clientId = getString (R.string.auth0_project_id) // Auth0's client id
- ))
- // focus-end
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.JWT)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf(
- "jwt" to LoginConfigItem(
- verifier = "verifier-name", // Get it from Web3Auth dashboard
- typeOfLogin = TypeOfLogin.JWT,
- )
- )
- // focus-end
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.JWT)
-)
-// focus-end
-
-```
-
-
-
-
-## Configure Extra Login Options
-
-Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the
-login flow for cases requiring additional info for enabling login. The `ExtraLoginOptions` accepts
-the following parameters.
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `additionalParams?` | Additional params in `HashMap` format for OAuth login, use id_token(JWT) to authenticate with web3auth. |
-| `domain?` | Your custom authentication domain in `String` format. For example, if you are using Auth0, it can be example.au.auth0.com. |
-| `client_id?` | Client id in `String` format, provided by your login provider used for custom verifier. |
-| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes `String` as a value. |
-| `verifierIdField?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes `String` as a value. |
-| `isVerifierIdCaseSensitive?` | Boolean to confirm Whether the verifier id field is case sensitive or not. |
-| `display?` | Allows developers the configure the display of UI. It takes `Display` as a value. |
-| `prompt?` | Prompt shown to the user during authentication process. It takes `Prompt` as a value. |
-| `max_age?` | Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes `String` as a value. |
-| `ui_locales?` | The space separated list of language tags, ordered by preference. For instance `fr-CA fr en`. |
-| `id_token_hint?` | It denotes the previously issued ID token. It takes `String` as a value. |
-| `id_token?` | JWT (ID Token) to be passed for login. |
-| `login_hint?` | Used to specify the user's email address or phone number for Email/SMS Passwordless login flows. Takes a `String` value. For the SMS, the format should be: `+{country_code}-{phone_number}` (e.g. `+1-1234567890`) |
-| `acr_values?` | acc_values |
-| `scope?` | The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes `String` as a value. |
-| `audience?` | The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes `String` as a value. |
-| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes `String` as a value. |
-| `state?` | state |
-| `response_type?` | Defines which grant to execute for the authorization server. It takes `String` as a value. |
-| `nonce?` | nonce |
-| `redirect_uri?` | It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application. |
-
-
-
-
-
-```kotlin
-data class ExtraLoginOptions(
- private var additionalParams : HashMap? = null,
- private var domain : String? = null,
- private var client_id : String? = null,
- private var leeway : String? = null,
- private var verifierIdField : String? =null,
- private var isVerifierIdCaseSensitive : Boolean? = null,
- private var display : Display? = null,
- private var prompt : Prompt? = null,
- private var max_age : String? = null,
- private var ui_locales : String? = null,
- private var id_token : String? = null,
- private var id_token_hint : String? = null,
- private var login_hint : String? = null,
- private var acr_values : String? = null,
- private var scope : String? = null,
- private var audience : String? = null,
- private var connection : String? = null,
- private var state : String? = null,
- private var response_type : String? = null,
- private var nonce : String? = null,
- private var redirect_uri : String? = null
-)
-```
-
-
-
-
-### Single Verifier Usage
-
-
-
-
-
-Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
-to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
-configurations in the `ExtraLoginOptions` object in the login function.
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf("jwt" to LoginConfigItem(
- verifier = "verifier-name", // Get it from Web3Auth dashboard
- typeOfLogin = TypeOfLogin.JWT,
- clientId = getString (R.string.auth0_project_id) // Auth0's client id
- ))
- // focus-end
- )
-)
-
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(
- Provider.JWT,
- // focus-start
- extraLoginOptions = ExtraLoginOptions(
- domain: "https://username.us.auth0.com", // Domain of your Auth0 app
- verifierIdField: "sub", // The field in jwt token which maps to verifier id.
- )
- // focus-end
- )
-)
-```
-
-
-
-
-If you're using any other provider like Firebase/ AWS Cognito or deploying your own Custom JWT
-server, you need to put the jwt token into the `id_token` field of the `extraLoginOptions`,
-additionally, you need to pass over the `domain` field as well, which is mandatory. If you don't
-have a domain, just passover a string in that field.
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf("jwt" to LoginConfigItem(
- verifier = "verifier-name", // Get it from Web3Auth dashboard
- typeOfLogin = TypeOfLogin.JWT,
- ))
- // focus-end
- )
-)
-
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(
- Provider.JWT,
- // focus-start
- extraLoginOptions = ExtraLoginOptions(
- id_token: "Your JWT id token",
- )
- // focus-end
- )
-)
-```
-
-
-
-
-To use the Email Passwordless login, you need to put the email into the `login_hint` parameter of
-the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
-`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
-`ExtraLoginOptions`.
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(
- Provider.EMAIL_PASSWORDLESS,
- // focus-next-line
- extraLoginOptions = ExtraLoginOptions(login_hint = "hello@web3auth.io")
- )
-)
-```
-
-
-
-
-To use the SMS Passwordless login, send the phone number as the `login_hint` parameter of the
-`ExtraLoginOptions`. Please make sure the phone number is in the format of
-+\{country_code}-\{phone_number}, i.e. (+91-09xx901xx1).
-
-
-
-
-
-### Aggregate Verifier Usage
-
-You can use aggregate verifier to combine multiple login methods to get the same address for the
-users regardless of their login providers. For example, combining a Google and Email Passwordless
-login, or Google and GitHub via Auth0 to access the same address for your user.
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- // focus-start
- loginConfig = hashMapOf(
- "google" to LoginConfigItem(
- verifier = "aggregate-sapphire",
- verifierSubIdentifier= "w3a-google",
- typeOfLogin = TypeOfLogin.GOOGLE,
- name = "Aggregate Login",
- clientId = getString(R.string.web3auth_google_client_id)
- ),
- "jwt" to LoginConfigItem(
- verifier = "aggregate-sapphire",
- verifierSubIdentifier= "w3a-a0-email-passwordless",
- typeOfLogin = TypeOfLogin.JWT,
- name = "Aggregate Login",
- clientId = getString(R.string.web3auth_auth0_client_id)
- )
- )
- // focus-end
- )
-)
-
-// focus-start
-// Google Login
-web3Auth.login(LoginParams(Provider.GOOGLE))
-// focus-end
-
-// focus-start
-// Auth0 Login
-web3Auth.login(LoginParams(
- Provider.JWT,
- extraLoginOptions = ExtraLoginOptions(
- domain = "https://web3auth.au.auth0.com",
- verifierIdField = "email",
- isVerifierIdCaseSensitive = false
- )
-))
-// focus-end
-```
diff --git a/docs/sdk/pnp/android/initialize.mdx b/docs/sdk/pnp/android/initialize.mdx
deleted file mode 100644
index 734b930c7..000000000
--- a/docs/sdk/pnp/android/initialize.mdx
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: Initializing PnP Android SDK
-sidebar_label: Initialize
-description: "Web3Auth PnP Android SDK - Initialize | Documentation - Web3Auth"
----
-
-import Initialization from "@site/src/common/sdk/pnp/android/_initialize.mdx";
-import SetResultUrl from "@site/src/common/sdk/pnp/android/_set-result-url.mdx";
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-After installation, the next step to use Web3Auth is to configure & initialize the SDK.
-
-However, configuring and initializing is a four-step process:
-
-1. [Creating a Web3Auth Instance](#create-web3auth-instance)
-2. [Setting a Result URL](#set-result-url)
-3. [Triggering Login exceptions](#triggering-login-exceptions)
-4. [Initialize Web3Auth](#initialize-web3auth)
-
-## Create Web3Auth Instance
-
-The first step is to create the Web3Auth instance, and configure the Whitelabeling, Session time,
-and Custom Authentication. Please note that these are the most critical steps where you need to pass
-on different parameters according to the preference of your project.
-
-### Parameters
-
-The Web3Auth Constructor takes an object with `Web3AuthOptions` as input.
-
-
-
-
-
-| Parameter | Description |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `context` | Android context to launch Web-based authentication, usually is the current activity. It's a mandatory field, and accepts `android.content.Context` as a value. |
-| `clientId` | Your Web3Auth Client ID. You can get it from Web3Auth [Dashboard](https://dashboard.web3auth.io/) under project details. It's a mandatory field of type `String` |
-| `network` | Defines the Web3Auth network. It's a mandatory field of type Network. |
-| `redirectUrl` | URL that Web3Auth will redirect API responses upon successful authentication from browser. It's a mandatory field of type `Uri`. |
-| `whiteLabel?` | WhiteLabel options for web3auth. It helps you define custom UI, branding, and translations for your brand app. It takes `WhiteLabelData` as a value. |
-| `loginConfig?` | Login config for the custom verifiers. It takes `HashMap` as a value. |
-| `useCoreKitKey?` | Use CoreKit Key to get core kit key. It's an optional field with default value as `false`. |
-| `chainNamespace?` | Chain Namespace [`EIP155` and `SOLANA`]. It takes `ChainNamespace` as a value. |
-| `mfaSettings?` | Allows developers to configure the Mfa settings for authentication. It takes `MfaSettings` as a value. |
-| `sessionTime?` | It allows developers to configure the session management time. Session Time is in seconds, default is 86400 seconds which is 1 day. `sessionTime` can be max 30 days |
-
-
-
-
-
-```kotlin
-data class Web3AuthOptions(
- var context: Context,
- val clientId: String,
- val network: Network,
- var buildEnv: BuildEnv? = BuildEnv.PRODUCTION,
- @Transient var redirectUrl: Uri,
- var sdkUrl: String = getSdkUrl(buildEnv),
- val whiteLabel: WhiteLabelData? = null,
- val loginConfig: HashMap? = null,
- val useCoreKitKey: Boolean? = false,
- val chainNamespace: ChainNamespace? = ChainNamespace.EIP155,
- val mfaSettings: MfaSettings? = null,
- val sessionTime: Int? = 86400
-)
-```
-
-
-
-
-### Instantiate Web3Auth
-
-
-
-## Set Result URL
-
-
-
-## Triggering Login exceptions
-
-The `setCustomTabsClosed` method can be used to trigger login exceptions for Android. The Android
-SDK uses the custom tabs and from current implementation of chrome custom tab, it's not possible to
-add a listener directly to chrome custom tab close button and trigger login exceptions.
-
-Hence, it's necessary to use `setCustomTabsClosed` method in your login screen to trigger
-exceptions.
-
-```kotlin
-class MainActivity : AppCompatActivity() {
- // Additional code
-
- override fun onResume() {
- super.onResume()
- // focus-start
- if (Web3Auth.getCustomTabsClosed()) {
- Toast.makeText(this, "User closed the browser.", Toast.LENGTH_SHORT).show()
- web3Auth.setResultUrl(null)
- Web3Auth.setCustomTabsClosed(false)
- }
- // focus-end
- }
-
- // Additional code
-}
-```
-
-## Initialize Web3Auth
-
-After instantiating Web3Auth, the next step is to initialize it using the `initialize` method. This
-method is essential for setting up the SDK, checking for any active sessions, and fetching the
-whitelabel configuration from your dashboard.
-
-Once the `initialize` method executes successfully, you can use the `getPrivKey` or
-`getEd25519PrivKey` methods to verify if an active session exists. If there is no active session,
-these methods will return an empty string; otherwise, they will return the respective private key.
-
-Note that if the API call to fetch the project configuration fails, the method will throw an error.
-
-```kotlin
-val initializeCF: CompletableFuture = web3Auth.initialize()
-initializeCF.whenComplete { _, error ->
- if (error == null) {
- // Check for the active session
- if(web3Auth.getPrivKey()isNotEmpty()) {
- // Active session found
- }
- // No active session is not present
-
- } else {
- // Handle the error
- }
-}
-```
diff --git a/docs/sdk/pnp/android/install.mdx b/docs/sdk/pnp/android/install.mdx
deleted file mode 100644
index 387b743dc..000000000
--- a/docs/sdk/pnp/android/install.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: "Installing PnP Android SDK"
-sidebar_label: "Install"
-description: "Installing Web3Auth PnP Android SDK | Documentation - Web3Auth"
----
-
-import UpdateGradle from "@site/src/common/sdk/pnp/android/_update-gradle.mdx";
-import Installation from "@site/src/common/sdk/pnp/android/_installation.mdx";
-import AndroidPermissions from "@site/src/common/sdk/pnp/android/_android-permissions.mdx";
-import Whitelist from "@site/src/common/sdk/pnp/android/_android-whitelist.mdx";
-import Deeplinking from "@site/src/common/sdk/pnp/android/_android-deep-linking.mdx";
-import ManifestChanges from "@site/src/common/sdk/pnp/android/_android-manifest-changes.mdx";
-
-## Requirements
-
-- Android API version `24` or newer.
-- Android Compile and Target SDK: `34`.
-- Basic knowledge of Java or Kotlin Development.
-
-## Installation
-
-
-
-Then, in your app-level `build.gradle` dependencies section, add the following:
-
-
-
-## Update Permissions
-
-
-
-## Configure AndroidManifest File
-
-
-
-## Configuration Redirection
-
-Once the gradles and permission has been updated, you need to configure Web3Auth project by
-whitelisting your scheme and package name.
-
-### Configure a Plug n Play project
-
-
-
-### Configure Deep Link
-
-
diff --git a/docs/sdk/pnp/android/usage.mdx b/docs/sdk/pnp/android/usage.mdx
deleted file mode 100644
index c351e17d4..000000000
--- a/docs/sdk/pnp/android/usage.mdx
+++ /dev/null
@@ -1,603 +0,0 @@
----
-title: Usage of PnP Android SDK
-sidebar_label: Usage
-description: "Web3Auth PnP Android SDK - Usage | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import AndroidResponse from "@site/src/common/sdk/pnp/_userinfo_response.mdx";
-import LogOut from "@site/src/common/sdk/pnp/android/_logout.mdx";
-import SMSPasswordless from "@site/src/common/sdk/pnp/android/_sms_passwordless.mdx";
-import EnableMFAMethod from "@site/src/common/sdk/pnp/android/_enable-mfa.mdx";
-
-Web3Auth's Android SDK is a set of libraries and tools that allow you to easily integrate Web3 with
-Android applications.
-
-## Functionality Overview
-
-| Name | Description |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [login](#logging-in-a-user) | Logs in the user with the selected login provider. |
-| [logout](#logging-out-a-user) | Logs out the user from the currently active session. |
-| [getPrivKey](#secp256k1-private-key) | Retrieve the user's secp256K1 key. The key can be used to sign transactions for chains using the secp256k1 curve like EVM-compatible chains. |
-| [getEd25519PrivKey](#ed25519-private-key) | Retrieve the user's ed25519 key. The key can be used to sign transactions for chains using the ed25519 curve like Solana, Near, Algorand, and others. |
-| [getUserInfo](#retrieve-user-information) | Retrieve the user information, such as login provider, name, email, oAuth token, etc. |
-| [enableMFA](#enable-mfa-for-a-user) | Use to trigger the setup MFA flow for the users. |
-| [manageMFA](#manage-mfa-for-a-user) | Use to trigger the manage MFA flow for the users. |
-| [launchWalletServices](#launch-wallet-services) | Use to open the templated wallet UI in WebView. |
-| [request](#request-signature) | Use to open templated transaction screens for signing EVM transactions. |
-
-## Logging in a User
-
-To login in a user, you can use the `login` method. It will trigger login flow will navigate the
-user to a browser model allowing the user to login into the service. You can pass in the supported
-providers to the login method for specific social logins such as GOOGLE, APPLE, FACEBOOK, etc., and
-do whitelabel login.
-
-### Parameters
-
-The `login` method takes in `LoginParams` as a required input.
-
-
-
-
-
-| Parameter | Description |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loginProvider` | It sets the OAuth login method to be used. You can use any of the supported values are `GOOGLE`, `FACEBOOK`, `REDDIT`, `DISCORD`, `TWITCH`, `APPLE`, `LINE`, `GITHUB`, `KAKAO`, `LINKEDIN`, `TWITTER`, `WEIBO`, `WECHAT`, `EMAIL_PASSWORDLESS`, `JWT`, `SMS_PASSWORDLESS`, and `FARCASTER`. |
-| `extraLoginOptions?` | It can be used to set the OAuth login options for corresponding `loginProvider`. For instance, you'll need to pass user's email address as. Default value for the field is `null`, and it accepts `ExtraLoginOptions` as a value. |
-| `redirectUrl?` | Url where user will be redirected after successfull login. By default user will be redirected to same page where login will be initiated. Default value for the field is `null`, and accepts `Uri` as a value. |
-| `appState?` | It can be used to keep track of the app state when user will be redirected to app after login. Default is `null`, and accepts `String` as a value. |
-| `mfaLevel?` | Customize the MFA screen shown to the user during OAuth authentication. Default value for field is `MFALevel.DEFAULT`, which shows MFA screen every 3rd login. It accepts `MFALevel` as a value. |
-| `dappShare?` | Custom verifier 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. It accepts `String` as a value. |
-| `curve?` | It will be used to determine the public key encoded in the jwt token which returned in `getUserInfo` function after user login. This parameter won't change format of private key returned by We3Auth. Private key returned by `getPrivKey` is always secp256k1. To get the ed25519 key you can use `getEd25519PrivKey` method. The default value is `Curve.SECP256K1`. |
-
-
-
-
-
-```kotlin
-data class LoginParams(
- val loginProvider: Provider,
- var dappShare: String? = null,
- val extraLoginOptions: ExtraLoginOptions? = null,
- @Transient var redirectUrl: Uri? = null,
- val appState: String? = null,
- val mfaLevel: MFALevel? = null,
- val curve: Curve? = Curve.SECP256K1
-)
-
-enum class Provider {
- @SerializedName("google")
- GOOGLE,
- @SerializedName("facebook")
- FACEBOOK,
- @SerializedName("reddit")
- REDDIT,
- @SerializedName("discord")
- DISCORD,
- @SerializedName("twitch")
- TWITCH,
- @SerializedName("apple")
- APPLE,
- @SerializedName("line")
- LINE,
- @SerializedName("github")
- GITHUB,
- @SerializedName("kakao")
- KAKAO,
- @SerializedName("linkedin")
- LINKEDIN,
- @SerializedName("twitter")
- TWITTER,
- @SerializedName("weibo")
- WEIBO,
- @SerializedName("wechat")
- WECHAT,
- @SerializedName("email_passwordless")
- EMAIL_PASSWORDLESS,
- @SerializedName("jwt")
- JWT,
- @SerializedName("sms_passwordless")
- SMS_PASSWORDLESS,
- @SerializedName("farcaster")
- FARCASTER
-}
-```
-
-
-
-
-### Usage
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.GOOGLE)
-)
-// focus-end
-```
-
-### Examples
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.GOOGLE)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.FACEBOOK)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.DISCORD)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.TWITCH)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(
- Provider.EMAIL_PASSWORDLESS,
- extraLoginOptions = ExtraLoginOptions(login_hint = "hello@web3auth.io")
- )
-)
-// focus-end
-```
-
-
-
-
-
-
-
-
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(Provider.Farcaster)
-)
-// focus-end
-```
-
-
-
-
-
-```kotlin title="Usage"
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- )
-)
-
-// focus-start
-val loginCompletableFuture: CompletableFuture = web3Auth.login(
- LoginParams(
- Provider.JWT,
- extraLoginOptions = ExtraLoginOptions(id_token = "your_jwt_token")
- )
-)
-// focus-end
-```
-
-
-
-
-## Retrieve Private Key
-
-Web3Auth supports two widely used cryptographic curves, Secp256k1 and Ed25519, making it
-chain-agnostic and compatible with multiple blockchain networks.
-[Learn more about how to connect different blockchains](/docs/connect-blockchain).
-
-### Secp256k1 Private Key
-
-To retrieve the secp256k1 private key of the user., use `getPrivkey` method. The method returns an
-EVM compatible private key which can be used to sign transactions on EVM compatible chains.
-
-```kotlin
-val privateKey = web3Auth.getPrivKey()
-```
-
-### Ed25519 Private Key
-
-To retrieve the secp256k1 private key of the user., use `getEd25519PrivKey` method. This private key
-can be used to sign transactions on Solana, Near, Algorand, and other chains that use the ed25519
-curve.
-
-```kotlin
-val privateKey = web3Auth.getEd25519PrivKey()
-```
-
-## Retrieve User Information
-
-You can use the `getUserInfo` method to retrieve various details about the user, such as their login
-type, whether multi-factor authentication (MFA) is enabled, profile image, name, and other relevant
-information.
-
-### Usage
-
-```kotlin
-val userInfo = web3Auth.getUserInfo()
-```
-
-### UserInfo Response
-
-
-
-## Session Management
-
-The Session Management feature allows you to check the existing sessions with Web3Auth. The SDK will
-allow users to remain authenticated with Web3Auth for 1 day by default, or a maximum of 30 days, or
-until the user logout or session data is cleared.
-
-The `Web3AuthOptions` initialization accepts a `sessionTime` parameter.
-
-### Usage
-
-```kotlin
-import com.web3auth.core.Web3Auth
-import com.web3auth.core.types.Web3AuthOptions
-
-val web3Auth = Web3Auth(
- Web3AuthOptions(
- context = this,
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Pass over your Web3Auth Client ID from Developer Dashboard
- network = Network.MAINNET,
- redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
- sessionTime = 172800 // 2 Days
- )
-)
-```
-
-## Logging out a user
-
-
-
-## Enable MFA for a user
-
-
-
-## Manage MFA for a user
-
-The `manageMFA` method is used to trigger manage MFA flow for users, allowing users to update their
-MFA settings. The method takes `LoginParams` which will used during custom verifiers. If you are
-using default login providers, you don't need to pass `LoginParams`. If you are using custom jwt
-verifiers, you need to pass the JWT token in `loginParams` as well.
-
-
-
-
-
-```kotlin
-val manageMFACF = web3Auth.manageMFA()
-
-manageMFACF.whenComplete{_, error ->
- if (error == null) {
- // Handle success
- } else {
- // Handle error
- }
-}
-```
-
-
-
-
-
-```kotlin title="Usage"
-val loginParams = LoginParams(
- Provider.JWT,
- extraLoginOptions = ExtraLoginOptions(id_token = "your_jwt_token")
-)
-
-val manageMFACF = web3Auth.manageMFA(loginParams)
-
-manageMFACF.whenComplete{_, error ->
- if (error == null) {
- // Handle success
- } else {
- // Handle error
- }
-}
-
-```
-
-
-
-
-## Launch Wallet Services
-
-The `launchWalletServices` method launches a WebView which allows you to use the templated wallet UI
-services. The method takes`ChainConfig` as the required input. Wallet Services is currently only
-available for EVM chains.
-
-:::note
-
-Access to Wallet Services is gated. You can use this feature in `sapphire_devnet` for free. The
-minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production
-environment is the **Scale Plan**.
-
-:::
-
-
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `chainNamespace` | Custom configuration for your preferred blockchain. As of now only EVM supported. Default value is `ChainNamespace.EIP155`. |
-| `decimals?` | Number of decimals for the currency ticker. Default value is 18, and accepts `Int` as value. |
-| `blockExplorerUrl?` | Blockchain's explorer URL. (eg: `https://etherscan.io`) |
-| `chainId` | The chain id of the selected blockchain in hex `String`. |
-| `displayName?` | Display Name for the chain. |
-| `logo?` | Logo for the selected `chainNamespace` & `chainId`. |
-| `rpcTarget` | RPC Target URL for the selected `chainNamespace` & `chainId`. |
-| `ticker?` | Default currency ticker of the network (e.g: `ETH`) |
-| `tickerName?` | Name for currency ticker (e.g: `Ethereum`) |
-
-
-
-
-
-```kotlin
-data class ChainConfig(
- val chainNamespace: ChainNamespace = ChainNamespace.EIP155,
- val decimals: Int? = 18,
- val blockExplorerUrl: String? = null,
- val chainId: String,
- val displayName: String? = null,
- val logo: String? = null,
- val rpcTarget: String,
- val ticker: String?,
- val tickerName: String? = null,
-)
-```
-
-
-
-
-### Usage
-
-```kotlin
-val chainConfig = ChainConfig(
- chainId = "0x1",
- rpcTarget = "https://rpc.ethereum.org",
- ticker = "ETH",
- chainNamespace = ChainNamespace.EIP155
-)
-
-// focus-start
-val completableFuture = web3Auth.launchWalletServices(
- chainConfig
-)
-// focus-end
-```
-
-## Request signature
-
-The `request` method facilitates the use of templated transaction screens for signing transactions.
-The method will return [SignResponse](#signresponse). It can be used to sign transactions for any
-EVM chain and screens can be whitelabeled to your branding.
-
-Please check the list of
-[JSON RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/), noting that the request
-method currently supports only the signing methods.
-
-
-
-### Parameters
-
-| Parameter | Description |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `chainConifg` | Defines the chain to be used for signature request. |
-| `method` | JSON RPC method name in `String`. Currently, the request method only supports the singing methods. |
-| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/) to know more. |
-
-### Usage
-
-```kotlin
-val params = JsonArray().apply {
- // Message to be signed
- add("Hello, World!")
- // User's EOA address
- add(address)
-}
-
-val chainConfig = ChainConfig(
- chainId = "0x1",
- rpcTarget = "https://rpc.ethereum.org",
- ticker = "ETH",
- chainNamespace = ChainNamespace.EIP155
-)
-
-// focus-start
-val signMsgCompletableFuture = web3Auth.request(
- chainConfig = chainConfig,
- "personal_sign",
- requestParams = params
-)
-// focus-end
-
-signMsgCompletableFuture.whenComplete { signResult, error ->
- if (error == null) {
- // focus-next-line
- Log.d("Sign Result", signResult.toString())
-
- } else {
- Log.d("Sign Error", error.message ?: "Something went wrong")
- }
-}
-```
-
-### SignResponse
-
-| Name | Description |
-| --------- | ------------------------------------------------------------- |
-| `success` | Determines whether the request was successful or not. |
-| `result?` | Holds the signature for the request when `success` is `true`. |
-| `error?` | Holds the error for the request when `success` is `false`. |
diff --git a/docs/sdk/pnp/flutter/custom-authentication.mdx b/docs/sdk/pnp/flutter/custom-authentication.mdx
deleted file mode 100644
index b9270ff61..000000000
--- a/docs/sdk/pnp/flutter/custom-authentication.mdx
+++ /dev/null
@@ -1,661 +0,0 @@
----
-title: Using Custom Authentication in PnP Flutter SDK
-sidebar_label: Custom Authentication
-description: "Web3Auth PnP Flutter SDK - Using Custom Authentication | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-import SMSPasswordless from "@site/src/common/sdk/pnp/flutter/_sms_passwordless.mdx";
-
-## Configuration
-
-To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
-Firebase etc. or even your own custom JWT login) you can add the configuration using the
-`loginConfig` parameter during the initialization.
-
-The `loginConfig` parameter is a key value map. The key should be one of the `TypeOfLogin` in its
-string form, and the value should be a `LoginConfigItem` object.
-
-To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
-Dashboard in "Custom Authentication" section.
-[Learn how to create a custom verifier](/auth-provider-setup/verifiers).
-
-:::tip Create Custom Verifier
-
-Learn how to create a [Custom Verifier](/auth-provider-setup/verifiers) on the Web3Auth Dashboard.
-
-:::
-
-
-
-### Parameters
-
-After creating the verifier, you can use the following parameters in the `LoginConfigItem`.
-
-
-
-
-
-| Parameter | Description |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `String` as a value. |
-| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
-| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `String` as a value. |
-| `name?` | Display name for the verifier. If null, the default name is used. It accepts `String` as a value. |
-| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `String` as a value. |
-| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `String` as a value. |
-| `logoHover?` | Logo to be shown on mouse hover. It accepts `String` as a value. |
-| `logoLight?` | Light logo for dark background. It accepts `String` as a value. |
-| `logoDark?` | Dark logo for light background. It accepts `String` as a value. |
-| `mainOption?` | Show login button on the main list. It accepts `bool` as a value. |
-| `showOnModal?` | Whether to show the login button on modal or not. |
-| `showOnDesktop?` | Whether to show the login button on desktop. |
-| `showOnMobile?` | Whether to show the login button on mobile. |
-
-
-
-
-
-```dart
-class LoginConfigItem {
- final String verifier;
- final TypeOfLogin typeOfLogin;
- final String clientId;
- final String? name;
- final String? description;
- final String? verifierSubIdentifier;
- final String? logoHover;
- final String? logoLight;
- final String? logoDark;
- final bool? mainOption;
- final bool? showOnModal;
- final bool? showOnDesktop;
- final bool? showOnMobile;
-
- LoginConfigItem({
- required this.verifier,
- required this.typeOfLogin,
- required this.clientId,
- this.name,
- this.description,
- this.verifierSubIdentifier,
- this.logoHover,
- this.logoLight,
- this.logoDark,
- this.mainOption,
- this.showOnModal,
- this.showOnDesktop,
- this.showOnMobile,
- });
-
- Map toJson() {
- return {
- 'verifier': verifier,
- 'typeOfLogin': typeOfLogin.name,
- 'clientId': clientId,
- 'name': name,
- 'description': description,
- 'verifierSubIdentifier': verifierSubIdentifier,
- 'logoHover': logoHover,
- 'logoLight': logoLight,
- 'logoDark': logoDark,
- 'mainOption': mainOption,
- 'showOnModal': showOnModal,
- 'showOnDesktop': showOnDesktop,
- 'showOnMobile': showOnMobile
- };
- }
-}
-
-enum TypeOfLogin {
- google,
- facebook,
- reddit,
- discord,
- twitch,
- github,
- apple,
- kakao,
- linkedin,
- twitter,
- weibo,
- wechat,
- line,
- email_passwordless,
- email_password,
- jwt,
- sms_passwordless,
- farcaster,
-}
-```
-
-
-
-
-### Usage
-
-
-
-
-
-```dart title="Usage"
-Future initWeb3Auth() async {
- final themeMap = HashMap();
- themeMap['primary'] = "#229954";
-
- // focus-start
- final loginConfig = new HashMap();
- loginConfig['google'] = LoginConfigItem(
- verifier: "verifier-name", // get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.google,
- clientId: "google_client_id" // google's client id
- );
- // focus-end
-
- Uri redirectUrl;
- if (Platform.isAndroid) {
- redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
- // w3a://com.example.w3aflutter/auth
- } else if (Platform.isIOS) {
- redirectUrl = Uri.parse('{bundleId}://auth');
- // com.example.w3aflutter://openlogin
- } else {
- throw UnKnownException('Unknown platform');
- }
-
- await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: "WEB3AUTH_CLIENT_ID",
- network: Network.sapphire_mainnet,
- redirectUrl: redirectUrl,
- // focus-next-line
- loginConfig: loginConfig
- ),
- );
-}
-
-// Login
-final Web3AuthResponse response = await Web3AuthFlutter.login(
- // focus-next-line
- LoginParams(loginProvider: Provider.google)
-);
-```
-
-
-
-
-
-```dart title="Usage"
-Future initWeb3Auth() async {
- final themeMap = HashMap();
- themeMap['primary'] = "#229954";
-
- // focus-start
- final loginConfig = new HashMap();
- loginConfig['facebook'] = LoginConfigItem(
- verifier: "verifier-name", // get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.facebook,
- clientId: "facebook_client_id" // facebook's client id
- );
- // focus-end
-
- Uri redirectUrl;
- if (Platform.isAndroid) {
- redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
- // w3a://com.example.w3aflutter/auth
- } else if (Platform.isIOS) {
- redirectUrl = Uri.parse('{bundleId}://auth');
- // com.example.w3aflutter://openlogin
- } else {
- throw UnKnownException('Unknown platform');
- }
-
- await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: "WEB3AUTH_CLIENT_ID",
- network: Network.testnet,
- redirectUrl: redirectUrl,
- // focus-next-line
- loginConfig: loginConfig
- ),
- );
-}
-
-// Login
-final Web3AuthResponse response = await Web3AuthFlutter.login(
- // focus-next-line
- LoginParams(loginProvider: Provider.facebook)
-);
-```
-
-
-
-
-
-```dart title="Usage"
-Future initWeb3Auth() async {
- final themeMap = HashMap();
- themeMap['primary'] = "#229954";
-
- // focus-start
- final loginConfig = new HashMap();
- loginConfig['jwt'] = LoginConfigItem(
- verifier: "verifier-name", // get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.jwt,
- clientId: "web3auth_client_id" // web3auth's plug and play client id
- );
- // focus-end
-
- Uri redirectUrl;
- if (Platform.isAndroid) {
- redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
- // w3a://com.example.w3aflutter/auth
- } else if (Platform.isIOS) {
- redirectUrl = Uri.parse('{bundleId}://auth');
- // com.example.w3aflutter://openlogin
- } else {
- throw UnKnownException('Unknown platform');
- }
-
- await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: "WEB3AUTH_CLIENT_ID",
- network: Network.testnet,
- redirectUrl: redirectUrl,
- // focus-next-line
- loginConfig: loginConfig
- ),
- );
-}
-
-// Login
-final Web3AuthResponse response = await Web3AuthFlutter.login(
- LoginParams(
- // focus-start
- loginProvider: Provider.jwt,
- extraLoginOptions: ExtraLoginOptions(
- id_token: "YOUR_JWT_TOKEN"
- )
- // focus-end
- )
-);
-```
-
-
-
-
-## Congfigure Extra Login Options
-
-Additional to the loginConfig during initialization, you can pass extra options to the `login`
-method to configure the login flow for cases requiring additional info for authorization. The
-`ExtraLoginOptions` accepts the following parameters.
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `additionalParams?` | Additional params in `Map` format for OAuth login, use id_token(JWT) to authenticate with web3auth. |
-| `domain?` | Your custom authentication domain in `String` format. For example, if you are using Auth0, it can be example.au.auth0.com. |
-| `client_id?` | Client id in `String` format, provided by your login provider used for custom verifier. |
-| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes `String` as a value. |
-| `verifierIdField?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes `String` as a value. |
-| `isVerifierIdCaseSensitive?` | Boolean to confirm Whether the verifier id field is case sensitive or not. |
-| `display?` | Allows developers the configure the display of UI. It takes `Display` as a value. |
-| `prompt?` | Prompt shown to the user during authentication process. It takes `Prompt` as a value. |
-| `max_age?` | Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes `String` as a value. |
-| `ui_locales?` | The space separated list of language tags, ordered by preference. For instance `fr-CA fr en`. |
-| `id_token_hint?` | It denotes the previously issued ID token. It takes `String` as a value. |
-| `id_token?` | JWT (ID Token) to be passed for login. |
-| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes `String` as a value. |
-| `acr_values?` | acc_values |
-| `scope?` | The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes `String` as a value. |
-| `audience?` | The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes `String` as a value. |
-| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes `String` as a value. |
-| `state?` | state |
-| `response_type?` | Defines which grant to execute for the authorization server. It takes `String` as a value. |
-| `nonce?` | nonce |
-| `redirect_uri?` | It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application. |
-
-
-
-
-
-```dart
-class ExtraLoginOptions {
- final Map? additionalParams;
- final String? domain;
- final String? client_id;
- final String? leeway;
- final String? verifierIdField;
- final bool? isVerifierIdCaseSensitive;
- final Display? display;
- final Prompt? prompt;
- final String? max_age;
- final String? ui_locales;
- final String? id_token_hint;
- final String? id_token;
- final String? login_hint;
- final String? acr_values;
- final String? scope;
- final String? audience;
- final String? connection;
- final String? state;
- final String? response_type;
- final String? nonce;
- final String? redirect_uri;
-
- ExtraLoginOptions({
- this.additionalParams = const {},
- this.domain,
- this.client_id,
- this.leeway,
- this.verifierIdField,
- this.isVerifierIdCaseSensitive,
- this.display,
- this.prompt,
- this.max_age,
- this.ui_locales,
- this.id_token_hint,
- this.id_token,
- this.login_hint,
- this.acr_values,
- this.scope,
- this.audience,
- this.connection,
- this.state,
- this.response_type,
- this.nonce,
- this.redirect_uri,
- });
-
- Map toJson() => {
- "additionalParams": additionalParams,
- "domain": domain,
- "client_id": client_id,
- "leeway": leeway,
- "verifierIdField": verifierIdField,
- "isVerifierIdCaseSensitive": isVerifierIdCaseSensitive,
- "display": display?.name,
- "prompt": prompt?.name,
- "max_age": max_age,
- "ui_locales": ui_locales,
- "id_token_hint": id_token_hint,
- "id_token": id_token,
- "login_hint": login_hint,
- "acr_values": acr_values,
- "scope": scope,
- "audience": audience,
- "connection": connection,
- "state": state,
- "response_type": response_type,
- "nonce": nonce,
- "redirect_uri": redirect_uri,
- };
-}
-```
-
-
-
-
-### Single Verifer Example
-
-
-
-
-Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
-to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
-configurations in the `ExtraLoginOptions` object in the `login` function.
-
-```dart
-Future initWeb3Auth() async {
- final themeMap = HashMap();
- themeMap['primary'] = "#229954";
-
- // focus-start
- final loginConfig = new HashMap();
- loginConfig['jwt'] = LoginConfigItem(
- verifier: "verifier-name", // get it from web3auth dashboard for auth0 configuration
- typeOfLogin: TypeOfLogin.jwt,
- clientId: "auth0_client_id" // get it from auth0 dashboard
- );
- // focus-end
-
- Uri redirectUrl;
- if (Platform.isAndroid) {
- redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
- // w3a://com.example.w3aflutter/auth
- } else if (Platform.isIOS) {
- redirectUrl = Uri.parse('{bundleId}://auth');
- // com.example.w3aflutter://openlogin
- } else {
- throw UnKnownException('Unknown platform');
- }
-
- await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: "WEB3AUTH_CLIENT_ID",
- network: Network.sapphire_mainnet,
- redirectUrl: redirectUrl,
- // focus-next-line
- loginConfig: loginConfig,
- ),
- );
-}
-
-// Login
-final Web3AuthResponse response = await Web3AuthFlutter.login(
- LoginParams(
- // focus-start
- loginProvider: Provider.jwt,
- extraLoginOptions: ExtraLoginOptions(
- domain: "https://tenant-name.us.auth0.com", // Domain of your auth0 app
- verifierIdField: "sub", // The field in jwt token which maps to verifier id.
- )
- // focus-end
- )
-);
-```
-
-
-
-
-If you're using any other provider like Firebase, AWS Cognito or deploying your own Custom JWT
-server, you need to put the jwt token into the `id_token` parameter of the `ExtraLoginOptions`.
-
-```dart
-Future initWeb3Auth() async {
- final themeMap = HashMap();
- themeMap['primary'] = "#229954";
-
- // focus-start
- final loginConfig = new HashMap();
- loginConfig['jwt'] = LoginConfigItem(
- verifier: "verifier-name", // get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.jwt,
- );
- // focus-end
-
- Uri redirectUrl;
- if (Platform.isAndroid) {
- redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
- // w3a://com.example.w3aflutter/auth
- } else if (Platform.isIOS) {
- redirectUrl = Uri.parse('{bundleId}://auth');
- // com.example.w3aflutter://openlogin
- } else {
- throw UnKnownException('Unknown platform');
- }
-
- await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: 'WEB3AUTH_CLIENT_ID',
- network: Network.sapphire_mainnet,
- redirectUrl: redirectUrl,
- // focus-next-line
- loginConfig: loginConfig,
- ),
- );
-}
-
-// Login
-final Web3AuthResponse response = await Web3AuthFlutter.login(
- LoginParams(
- // focus-start
- loginProvider: Provider.jwt,
- extraLoginOptions: ExtraLoginOptions(
- id_token: "YOUR_ID_TOKEN",
- )
- // focus-end
- )
-);
-```
-
-
-
-
-To use the Email Passwordless login, you need to put the email into the `login_hint` parameter of
-the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
-`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
-`ExtraLoginOptions`.
-
-```dart
-Future initWeb3Auth() async {
- final themeMap = HashMap();
- themeMap['primary'] = "#229954";
-
- final additionalParams = HashMap();
- additionalParams['flow_type'] = "link"; // default is 'code'
-
- Uri redirectUrl;
- if (Platform.isAndroid) {
- redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
- // w3a://com.example.w3aflutter/auth
- } else if (Platform.isIOS) {
- redirectUrl = Uri.parse('{bundleId}://auth');
- // com.example.w3aflutter://openlogin
- } else {
- throw UnKnownException('Unknown platform');
- }
-
- await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: "WEB3AUTH_CLIENT_ID",
- network: Network.sapphire_mainnet,
- redirectUrl: redirectUrl,
- ),
- );
-}
-
-// Login
-final Web3AuthResponse response = await Web3AuthFlutter.login(
- LoginParams(loginProvider: Provider.email_passwordless,
- // focus-start
- extraLoginOptions: ExtraLoginOptions(
- login_hint: "hello@web3auth.io",
- additionalParams: additionalParams
- ),
- // focus-end
- ),
-);
-```
-
-
-
-
-To use the SMS Passwordless login, send the phone number as the `login_hint` parameter of the
-`ExtraLoginOptions`. Please make sure the phone number is in the format of
-+\{country_code}-\{phone_number}, i.e. (+91-09xx901xx1).
-
-
-
-
-
-### Aggregate Verifier Example
-
-You can use aggregate verifier to combine multiple login methods to get the same address for the
-users regardless of their login providers. For example, combining a Google and Email Passwordless
-login, or Google and GitHub via Auth0 to access the same address for your user.
-
-```dart
-// focus-start
-final loginConfig = HashMap();
-
-loginConfig['google'] = LoginConfigItem(
- verifier: "aggregate-sapphire",
- verifierSubIdentifier: "w3a-google",
- typeOfLogin: TypeOfLogin.google,
- clientId: "YOUR_GOOGLE_CLIENT_ID",
-);
-
-loginConfig['jwt'] = LoginConfigItem(
- verifier: "aggregate-sapphire",
- verifierSubIdentifier: "w3a-a0-github",
- typeOfLogin: TypeOfLogin.jwt,
- clientId: "YOUR_AUTHO_CLIENT_ID",
-);
-// focus-end
-
-await Web3AuthFlutter.init(
- Web3AuthOptions(
- clientId: 'YOUR_WEB3AUTH_CLIENT_ID',
- network: Network.sapphire_mainnet,
- redirectUrl: redirectUrl,
- // focus-next-line
- loginConfig: loginConfig,
- ),
-);
-
-await Web3AuthFlutter.initialize();
-
-// Login with Google
-// focus-next-line
-await Web3AuthFlutter.login(LoginParams(loginProvider: Provider.google));
-
-// Login With GitHub
-// focus-start
-await Web3AuthFlutter.login(
- LoginParams(
- loginProvider: Provider.jwt,
- extraLoginOptions: ExtraLoginOptions(
- domain: 'https://web3auth.au.auth0.com',
- verifierIdField: 'email',
- connection: 'github',
- isVerifierIdCaseSensitive: false,
- ),
- ),
-);
-// focus-end
-```
diff --git a/docs/sdk/pnp/flutter/initialize.mdx b/docs/sdk/pnp/flutter/initialize.mdx
deleted file mode 100644
index 88207e4c7..000000000
--- a/docs/sdk/pnp/flutter/initialize.mdx
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: Initializing PnP Flutter SDK
-sidebar_label: Initialize
-description: "Web3Auth PnP Flutter SDK - Initialization | Documentation - Web3Auth"
----
-
-import Initialization from "@site/src/common/sdk/pnp/flutter/_initialization.mdx";
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-After installation, the next step to use Web3Auth is to configure & initialize the SDK.
-
-However, configuring & initializing is a three-step process:
-
-1. [Configure the Web3Auth Instance](#configure-web3auth-instance)
-2. [Triggering Login exceptions](#triggering-login-exceptions)
-3. [Initialize Web3Auth](#initialize-web3auth)
-
-## Configure Web3Auth instance
-
-Please note that these are the most critical steps where you need to pass on different parameters
-according to the preference of your project. Additionally, Whitelabeling and Custom Authentication
-have to be configured within this step, if you wish to customize your Web3Auth Instance.
-
-### Parameters
-
-The `init` method takes an object called `Web3AuthOptions` as input to configure the Web3Auth
-instance.
-
-
-
-
-
-| Parameter | Description |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `clientId` | Your Web3Auth Client ID. You can get it from Web3Auth [Dashboard](https://dashboard.web3auth.io/) under project details. It's a mandatory field of type `String` |
-| `network` | Web3Auth Network, `sapphire_mainnet`, `sapphire_devnet`, `mainnet`, `cyan`, `aqua` or `testnet`. It's a mandatory field of type [Network](https://pub.dev/documentation/web3auth_flutter/latest/enums/Network.html). |
-| `redirectUrl` | URL that Web3Auth will redirect API responses upon successful authentication from browser. It's a mandatory field of type [Uri](https://api.dart.dev/stable/2.18.0/dart-core/Uri-class.html). |
-| `whiteLabel?` | WhiteLabel options for web3auth. It helps you define custom UI, branding, and translations for your brand app. It takes [WhiteLabelData](https://pub.dev/documentation/web3auth_flutter/latest/input/WhiteLabelData-class.html) as a value. |
-| `loginConfig?` | Login config for the custom verifiers. It takes `HashMap` as a value. |
-| `useCoreKitKey?` | Use CoreKit Key to get core kit key. It's an optional field with default value as `false`. |
-| `chainNamespace?` | Chain Namespace [`eip155` and `solana`]. It takes [ChainNamespace](https://pub.dev/documentation/web3auth_flutter/latest/enums/ChainNamespace.html) as a value. |
-| `mfaSettings?` | Allows developers to configure the Mfa settings for authentication. It takes [MfaSettings](https://pub.dev/documentation/web3auth_flutter/latest/input/MfaSettings-class.html) as a value. |
-| `sessionTime?` | It allows developers to configure the session management time. Session Time is in seconds, default is 86400 seconds which is 1 day. `sessionTime` can be max 30 days |
-
-
-
-
-
-```dart
-class Web3AuthOptions {
- final String clientId;
- final Network network;
- final BuildEnv? buildEnv;
- final String? sdkUrl;
- final Uri redirectUrl;
- final WhiteLabelData? whiteLabel;
- final HashMap? loginConfig;
- final bool? useCoreKitKey;
- final ChainNamespace? chainNamespace;
- final MfaSettings? mfaSettings;
- final int? sessionTime;
-
- Web3AuthOptions({
- required this.clientId,
- required this.network,
- this.buildEnv = BuildEnv.production,
- String? sdkUrl,
- required this.redirectUrl,
- this.whiteLabel,
- this.loginConfig,
- this.useCoreKitKey,
- this.chainNamespace = ChainNamespace.eip155,
- this.sessionTime = 86400,
- this.mfaSettings,
- }): sdkUrl = sdkUrl ?? getSdkUrl(buildEnv ?? BuildEnv.production);
-
- Map toJson() {
- return {
- 'clientId': clientId,
- 'network': network.name,
- 'sdkUrl': sdkUrl,
- 'buildEnv': buildEnv?.name,
- 'redirectUrl': redirectUrl.toString(),
- 'whiteLabel': whiteLabel?.toJson(),
- 'loginConfig': loginConfig,
- 'useCoreKitKey': useCoreKitKey,
- 'chainNamespace': chainNamespace?.name,
- 'mfaSettings': mfaSettings,
- "sessionTime": sessionTime,
- };
- }
-}
-```
-
-
-
-
-### Configure Web3AuthFlutter
-
-
-
-## Triggering Login exceptions
-
-The `setCustomTabsClosed` method can be used to trigger login exceptions for Android. For iOS, you
-don't need this method to trigger the login exceptions. The Android SDK uses the custom tabs and
-from current implementation of chrome custom tab, it's not possible to add a listener directly to
-chrome custom tab close button and trigger login exceptions.
-
-Hence, it's necessary to use `setCustomTabsClosed` method in your login screen to trigger
-exceptions.
-
-```dart
-class LoginScreen extends State with WidgetsBindingObserver {
- @override
- void initState() {
- super.initState();
- // focus-next-line
- WidgetsBinding.instance.addObserver(this);
- }
-
- @override
- void dispose() {
- super.dispose();
- // focus-next-line
- WidgetsBinding.instance.removeObserver(this);
- }
-
- // focus-start
- @override
- void didChangeAppLifecycleState(final AppLifecycleState state) {
- // This is important to trigger the user cancellation on Android.
- if (state == AppLifecycleState.resumed) {
- Web3AuthFlutter.setCustomTabsClosed();
- }
- }
- // focus-end
-
- @override
- Widget build(BuildContext context) {
- // Your UI code
- }
-}
-```
-
-## Initialize Web3Auth
-
-After configuring Web3Auth, the next step is to initialize it using the `initialize` method. This
-method is essential for setting up the SDK, checking for any active sessions, and fetching the
-whitelabel configuration from your dashboard.
-
-Once the `initialize` method executes successfully, you can use the `getPrivKey` or
-`getEd25519PrivKey` methods to verify if an active session exists. If there is no active session,
-these methods will return an empty string; otherwise, they will return the respective private key.
-
-Note that if the API call to fetch the project configuration fails, the method will throw an error.
-
-```dart
-try {
- await Web3AuthFlutter.initialize();
-} catch (e) {
- // Handle/Swallow Error
-}
-
-final privateKey = await Web3AuthFlutter.getPrivKey();
-
-// Check if the session is present or not
-if(privateKey.isNotEmpty) {
- // Active session present
-}
-// No active session present
-```
diff --git a/docs/sdk/pnp/flutter/install.mdx b/docs/sdk/pnp/flutter/install.mdx
deleted file mode 100644
index 8fe7ffae6..000000000
--- a/docs/sdk/pnp/flutter/install.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: "Installing PnP Flutter SDK"
-sidebar_label: "Install"
-description: "Installing Web3Auth PnP Flutter SDK | Documentation - Web3Auth"
----
-
-import FlutterInstallation from "@site/src/common/sdk/pnp/flutter/_installation.mdx";
-
-import AndroidCompileSDKVersion from "@site/src/common/sdk/pnp/android/_update-compile-sdk-version.mdx";
-import UpdateGradle from "@site/src/common/sdk/pnp/android/_update-gradle.mdx";
-import AndroidPermission from "@site/src/common/sdk/pnp/android/_android-permissions.mdx";
-import AndroidDeepLinking from "@site/src/common/sdk/pnp/android/_android-deep-linking.mdx";
-import AndroidWhitelist from "@site/src/common/sdk/pnp/android/_android-whitelist.mdx";
-
-import IOSPlatform from "@site/src/common/sdk/pnp/ios/_ios-platform.mdx";
-import SPM from "@site/src/common/sdk/pnp/ios/_spm.mdx";
-import Cocoapods from "@site/src/common/sdk/pnp/ios/_cocoapods.mdx";
-import IOSWhitelist from "@site/src/common/sdk/pnp/ios/ios-whitelist.mdx";
-
-## Requirements
-
-- **Android** API version 26 or newer.
-- **iOS** 14, Xcode 12+ and Swift 5.x
-
-## Installation
-
-
-
-## Android Configuration
-
-Once we have installed Web3Auth Flutter SDK, we also need to add the configuration for Android.
-
-### Update compileSdkVersion
-
-
-
-### Add Web3Auth to Gradle
-
-
-
-### Update Permissions
-
-
-
-### Configure Redirection
-
-Once the gradles and permission has been updated, you need to configure Web3Auth project by
-whitelisting your scheme and package name.
-
-#### Configure Web3Auth project
-
-
-
-#### Configure Deep Link
-
-
-
-## iOS Configuration
-
-Once we have configured the Android SDK, we also need add the configuration for iOS.
-
-### Update global iOS platform
-
-
-
-### Configure Redirection
-
-
diff --git a/docs/sdk/pnp/ios/custom-authentication.mdx b/docs/sdk/pnp/ios/custom-authentication.mdx
deleted file mode 100644
index d1887c3fa..000000000
--- a/docs/sdk/pnp/ios/custom-authentication.mdx
+++ /dev/null
@@ -1,445 +0,0 @@
----
-title: Using Custom Authentication in PnP iOS SDK
-sidebar_label: Custom Authentication
-description: "Web3Auth PnP iOS SDK - Using Custom Authentication | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-import SMSPasswordless from "@site/src/common/sdk/pnp/ios/_sms_passwordless.mdx";
-
-## Configuration
-
-To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
-Firebase etc. or even your own custom JWT login) you can add the configuration using the
-`loginConfig` parameter during the initialization.
-
-The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in
-its string form, and the value should be a `W3ALoginConfig` struct.
-
-To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
-Dashboard in "Custom Authentication" section.
-[Learn how to create a custom verifier](/auth-provider-setup/verifiers).
-
-:::tip Create Custom Verifier
-
-Learn how to create a [Custom Verifier](/auth-provider-setup/verifiers) on the Web3Auth Dashboard.
-
-:::
-
-
-
-### Parameters
-
-After creating the verifier, you can use the following parameters in the `W3ALoginConfig`.
-
-
-
-
-
-| Parameter | Description |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `String` as a value. |
-| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
-| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `String` as a value. |
-| `name?` | Display name for the verifier. If null, the default name is used. It accepts `String` as a value. |
-| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `String` as a value. |
-| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `String` as a value. |
-| `logoHover?` | Logo to be shown on mouse hover. It accepts `String` as a value. |
-| `logoLight?` | Light logo for dark background. It accepts `String` as a value. |
-| `logoDark?` | Dark logo for light background. It accepts `String` as a value. |
-| `mainOption?` | Show login button on the main list. It accepts `Bool` as a value. Default value is false. |
-| `showOnModal?` | Whether to show the login button on modal or not. Default value is true. |
-| `showOnDesktop?` | Whether to show the login button on desktop. Default value is true. |
-| `showOnMobile?` | Whether to show the login button on mobile. Default value is true. |
-
-
-
-
-
-```swift
-public struct W3ALoginConfig: Codable {
- let verifier: String
- let typeOfLogin: TypeOfLogin
- let clientId: String
- let name: String?
- let description: String?
- let verifierSubIdentifier: String?
- let logoHover: String?
- let logoLight: String?
- let logoDark: String?
- let mainOption: Bool?
- let showOnModal: Bool?
- let showOnDesktop: Bool?
- let showOnMobile: Bool?
-}
-
-public enum TypeOfLogin: String, Codable {
- case google
- case facebook
- case reddit
- case discord
- case twitch
- case apple
- case github
- case linkedin
- case twitter
- case weibo
- case line
- case email_password
- case passwordless
- case jwt
-}
-
-```
-
-
-
-
-### Usage
-
-
-
-
-
-```swift
-import Web3Auth
-
-let web3Auth = try await Web3Auth(
- W3AInitParams(
- clientId: "YOUR_CLIENT_ID",
- network: .sapphire_mainnet,
- // focus-start
- loginConfig: [
- Web3AuthProvider.JWT.rawValue: .init(
- verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.google,
- clientId: "YOUR_GOOGLE_CLIENT_ID",
- )
- ]
- // focus-end
- )
-)
-```
-
-
-
-
-
-```swift
-import Web3Auth
-
-let web3Auth = try await Web3Auth(
- W3AInitParams(
- clientId: "YOUR_CLIENT_ID",
- network: .sapphire_mainnet,
- // focus-start
- loginConfig: [
- Web3AuthProvider.JWT.rawValue: .init(
- verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.facebook,
- clientId: "YOUR_FACEBOOK_CLIENT_ID",
- )
- ]
- // focus-end
- )
-)
-
-```
-
-
-
-
-
-```swift
-import Web3Auth
-
-let web3Auth = try await Web3Auth(
- W3AInitParams(
- clientId:"YOUR_CLIENT_ID",
- network: .sapphire_mainnet,
- // focus-start
- loginConfig: [
- Web3AuthProvider.JWT.rawValue: .init(
- verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.jwt,
- clientId: "YOUR_CLIENT_ID",
- )
- ]
- // focus-end
- )
-)
-```
-
-
-
-
-
-## Configure Extra Login Options
-
-Additional to the login config during initialization, you can pass extra options to the `login`
-function to configure the login flow for cases requiring additional info for enabling login. The
-`ExtraLoginOptions` accepts the following parameters.
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `additionalParams?` | Additional params in `[String:String]` format for OAuth login, use id_token(JWT) to authenticate with web3auth. |
-| `domain?` | Your custom authentication domain in `String` format. For example, if you are using Auth0, it can be example.au.auth0.com. |
-| `client_id?` | Client id in `String` format, provided by your login provider used for custom verifier. |
-| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes `Int` as a value. |
-| `verifierIdField?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes `String` as a value. |
-| `isVerifierIdCaseSensitive?` | `Bool` to confirm Whether the verifier id field is case sensitive or not. |
-| `display?` | Allows developers the configure the display of UI. It takes `String` as a value. |
-| `prompt?` | Prompt shown to the user during authentication process. It takes `String` as a value. |
-| `max_age?` | Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes `String` as a value. |
-| `ui_locales?` | The space separated list of language tags, ordered by preference. For instance `fr-CA fr en`. |
-| `id_token_hint?` | It denotes the previously issued ID token. It takes `String` as a value. |
-| `id_token?` | JWT (ID Token) to be passed for login. |
-| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes `String` as a value. |
-| `acr_values?` | acc_values |
-| `scope?` | The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes `String` as a value. |
-| `audience?` | The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes `String` as a value. |
-| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes `String` as a value. |
-| `state?` | state |
-| `response_type?` | Defines which grant to execute for the authorization server. It takes `String` as a value. |
-| `nonce?` | nonce |
-| `redirect_uri?` | It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application. |
-
-
-
-
-
-```swift
-public struct ExtraLoginOptions: Codable {
- let display: String?
- let prompt: String?
- let max_age: String?
- let ui_locales: String?
- let id_token_hint: String?
- let id_token: String?
- let login_hint: String?
- let acr_values: String?
- let scope: String?
- let audience: String?
- let connection: String?
- let domain: String?
- let client_id: String?
- let redirect_uri: String?
- let leeway: Int?
- let verifierIdField: String?
- let isVerifierIdCaseSensitive: Bool?
- let additionalParams: [String : String]?
-}
-```
-
-
-
-
-
-### Single Verifier Example
-
-
-
-
-Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
-to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
-configurations in the `ExtraLoginOptions` object in the login function.
-
-```swift
-import
-
-let web3Auth = try await Web3Auth(
- W3AInitParams(
- clientId:"YOUR_CLIENT_ID",
- network: .sapphire_mainnet,
- // Optional loginConfig object
- //focus-start
- loginConfig: [
- Web3AuthProvider.JWT.rawValue: .init(
- verifier: "YOUR_VERIFIER_NAME", // Get it from Web3auth dashboard
- typeOfLogin: TypeOfLogin.jwt,
- clientId: "YOUR_AUTH0_CLIENT_ID",
- )
- ]
- //focus-end
- )
-)
-
- // focus-start
-let result = try await web3Auth.login(
- W3ALoginParams(
- .JWT,
- extraLoginOptions: .init(
- // Domain of your auth0 app
- domain:"https://username.us.auth0.com",
- // The field in jwt token which maps to verifier id
- verifierIdField: "sub",
- )
- )
-)
-// focus-end
-```
-
-
-
-
-If you're using any other provider like Firebase, AWS Cognito or deploying your own Custom JWT
-server, you need to put the jwt token into the `id_token` field of the `extraLoginOptions`,
-additionally, you need to pass over the `domain` field as well, which is mandatory. If you don't
-have a domain, just passover a string in that field.
-
-```swift
-import Web3Auth
-
-let web3Auth = try await Web3Auth(
- W3AInitParams(
- clientId:"YOUR_CLIENT_ID",
- network: .testnet,
- // Optional loginConfig object
- // focus-start
- loginConfig: [
- Web3AuthProvider.JWT.rawValue: .init(
- verifier: "YOUR_VERIFIER_NAME", // Get it from web3auth dashboard
- typeOfLogin: TypeOfLogin.jwt,
- clientId: "YOUR_WEB3AUTH_CLIENT_ID",
- )
- ]
- //focus-end
- )
-)
-
- // focus-start
-let result = await web3Auth.login(
- W3ALoginParams(
- Web3AuthProvider.JWT,
- extraLoginOptions: .init(domain:"your-domain", id_token: "your_jwt_token")
- )
-)
-// focus-end
-```
-
-
-
-
-To use the Email Passwordless login, you need to put the email into the `login_hint` parameter of
-the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
-`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
-`ExtraLoginOptions`.
-
-```swift
-import Web3Auth
-
-let web3auth = try await Web3Auth(W3AInitParams(
- clientId: "YOUR_WEB3AUTH_CLIENT_ID",
- network: .sapphire_mainnet,
- redirectUrl: "bundleId://auth"
-))
-
- // focus-start
-let result = try await web3Auth.login(
- W3ALoginParams(
- Web3AuthProvider.EMAIL_PASSWORDLESS,
- extraLoginOptions: .init(loginHint: "hello@web3auth.io")
-))
-// focus-end
-```
-
-
-
-
-
-To use the SMS Passwordless login, send the phone number as the `login_hint` parameter of the
-`ExtraLoginOptions`. Please make sure the phone number is in the format of
-+\{country_code}-\{phone_number}, i.e. (+91-09xx901xx1).
-
-
-
-
-
-### Aggregate Verifier Example
-
-You can use aggregate verifier to combine multiple login methods to get the same address for the
-users regardless of their login providers. For example, combining a Google and Email Passwordless
-login, or Google and GitHub via Auth0 to access the same address for your user.
-
-```swift
-import Web3Auth
-
-let web3Auth = try await Web3Auth(
- W3AInitParams(
- clientId: clientId,
- network: network,
- redirectUrl: "web3auth.ios-aggregate-example://auth",
- // focus-start
- loginConfig: [
- TypeOfLogin.google.rawValue: .init(
- verifier: "aggregate-sapphire",
- typeOfLogin: .google,
- name: "Web3Auth-Aggregate-Verifier-Google-Example",
- clientId: "YOUR_GOOGLE_CLIENT_ID",
- verifierSubIdentifier: "w3a-google"
- ),
- TypeOfLogin.jwt.rawValue: .init(
- verifier: "aggregate-sapphire",
- typeOfLogin: .jwt,
- clientId: "YOUR_AUTH0_CLIENT_ID",
- verifierSubIdentifier: "w3a-a0-github"
- )
- ],
- // focus-end
-))
-
-func loginWithGoogle() async {
- // focus-start
- let result = try await web3Auth?.login(
- W3ALoginParams(
- loginProvider: .GOOGLE,
- )
- )
- // focus-end
-}
-
-func loginWithGitHub() async {
- // focus-start
- let result = try await web3Auth?.login(
- W3ALoginParams(
- loginProvider: .JWT,
- extraLoginOptions: ExtraLoginOptions(display: nil, prompt: nil, max_age: nil, ui_locales: nil, id_token_hint: nil, id_token: nil, login_hint: nil, acr_values: nil, scope: nil, audience: nil, connection: "github", domain: "https://web3auth.au.auth0.com", client_id: nil, redirect_uri: nil, leeway: nil, verifierIdField: "email", isVerifierIdCaseSensitive: false, additionalParams: nil),
- )
- )
- // focus-end
-}
-```
diff --git a/docs/sdk/pnp/react-native/account-abstraction.mdx b/docs/sdk/pnp/react-native/account-abstraction.mdx
deleted file mode 100644
index 83dce6f62..000000000
--- a/docs/sdk/pnp/react-native/account-abstraction.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Account Abstraction
-sidebar_label: Account Abstraction
-description: "@web3auth/react-native-sdk Native Account Abstraction | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
-import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
-import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx";
-import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
-import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
-import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
-import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
-
-import AARNBareSetup from "@site/src/common/sdk/pnp/react-native/_aa-rn-setup.mdx";
-import AARNExpoSetup from "@site/src/common/sdk/pnp/react-native/_aa-rn-expo-setup.mdx";
-import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
-import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
-import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
-
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-
-
-
-## Installation
-
-
-
-## Configure
-
-
-
-Please note this is the important step for setting the Web3Auth account abstraction provider.
-
-- [Configure Smart Account provider](#configure-smart-account-provider)
-- [Configure Bundler](#configure-bundler)
-- [Configure Sponsored Paymaster](#sponsored-paymaster)
-- [Configure ERC-20 Paymaster](#erc-20-paymaster)
-
-## Configure Smart Account Provider
-
-
-
-## Configure Bundler
-
-
-
-## Configure Paymaster
-
-You can configure the paymaster of your choice to sponsor gas fees for your users, along with the
-paymaster context. The paymaster context lets you set additional parameters, such as choosing the
-token for ERC-20 paymasters, defining gas policies, and more.
-
-### Sponsored Paymaster
-
-
-
-### ERC-20 Paymaster
-
-
-
-## Set up
-
-### Configure Web3Auth Instance
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### Configure Signer
-
-
-
-## Smart Account Address
-
-
-
-## Send Transaction
-
-
-
-## Advanced Smart Account Operations
-
-To learn more about supported transaction methods, and how to perform batch transactions,
-[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider/#send-batch-transaction).
diff --git a/docs/sdk/pnp/react-native/custom-authentication.mdx b/docs/sdk/pnp/react-native/custom-authentication.mdx
deleted file mode 100644
index fdf9b7d0b..000000000
--- a/docs/sdk/pnp/react-native/custom-authentication.mdx
+++ /dev/null
@@ -1,236 +0,0 @@
----
-title: Custom Authentication in PnP React Native SDK
-sidebar_label: Custom Authentication
-description:
- "Web3Auth PnP React Native SDK - Using Custom Authentication | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-## Overview
-
-Custom Authentication allows you to authenticate users using your own custom authentication service
-or third-party providers like Google, Auth0, AWS Cognito, or Firebase. This guide will walk you
-through the process of integrating custom authentication into your React Native app using the
-Web3Auth PnP React Native SDK.
-
-## Prerequisites
-
-Before you start, ensure you have configured a custom verifier in the Web3Auth Dashboard. This
-verifier will be used to facilitate custom authentication.
-
-
-
-:::tip
-
-Create Custom Verifier Check out how to create a
-**[Custom Verifier](/auth-provider-setup/verifiers)** on the Web3Auth Dashboard.
-
-:::
-
-:::info using dapp share
-
-- dApp Share is only returned for Custom verifiers.
-- 2FA should be enabled for accounts using it. Use `mfaLevel = MFALevel.MANDATORY` in the
- `LoginParams` during login. See **[MFA](/sdk/pnp/react-native/mfa)** for more details.
-
-:::
-
-## Single Verifier
-
-### Step 1: Configure the `LoginConfig`
-
-To use custom authentication with a single verifier, add the configuration to the `loginConfig`
-parameter of the `SdkInitParams` object during initialization. The `loginConfig` parameter is a
-key-value map where the key should be one of the `LOGIN_PROVIDER` in its string form, and the value
-should be a `LoginConfig` object.
-
-```javascript
-import * as WebBrowser from "@toruslabs/react-native-web-browser";
-import Web3Auth, {
- WEB3AUTH_NETWORK,
- LOGIN_PROVIDER,
- TypeOfLogin,
-} from "@web3auth/react-native-sdk";
-
-const web3auth = new Web3Auth(WebBrowser, {
- clientId: "YOUR_CLIENT_ID", // web3auth's client id
- network: WEB3AUTH_NETWORK.MAINNET, // or other networks
- loginConfig: {
- google: {
- verifier: "google-verifier", // Get this from the Web3Auth Dashboard
- typeOfLogin: TypeOfLogin.GOOGLE,
- clientId: "GOOGLE_CLIENT_ID", // Google's client id
- },
- jwt: {
- verifier: "jwt-verifier", // Get this from the Web3Auth Dashboard
- typeOfLogin: TypeOfLogin.JWT,
- clientId: "JWT_CLIENT_ID", // Custom JWT client id
- },
- },
-});
-```
-
-### Step 2: `LoginConfig` Object Structure
-
-The `LoginConfig` object contains various parameters that define the behavior of the custom
-authentication process. Below are the details of the `LoginConfig` object:
-
-| Parameter | Description |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field and accepts a `string` as a value. |
-| `typeOfLogin` | Type of login for this verifier. This value will affect the login flow. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should provide your own JWT token, and no sign-in flow will be presented. It's a mandatory field and accepts a `TypeOfLogin` value. |
-| `clientId` | The client ID provided by your login provider, e.g., Google's Client ID or Web3Auth's client ID if using `jwt` as `typeOfLogin`. It's a mandatory field and accepts a `string` as a value. |
-| `name?` | Display name for the verifier. If null, the default name is used. It accepts a `string` as a value. |
-| `description?` | Description for the button. If provided, it renders as a full-length button; otherwise, an icon button is shown. It accepts a `string` as a value. |
-| `verifierSubIdentifier?` | The field in the JWT token that maps to the verifier ID. Ensure you selected the correct JWT verifier ID in the developer dashboard. It accepts a `string` as a value. |
-| `logoHover?` | Logo to be shown on mouse hover. It accepts a `string` as a value. |
-| `logoLight?` | Light logo for dark backgrounds. It accepts a `string` as a value. |
-| `logoDark?` | Dark logo for light backgrounds. It accepts a `string` as a value. |
-| `mainOption?` | Shows the login button on the main list. It accepts a `boolean` as a value. The default value is `false`. |
-| `showOnModal?` | Whether to show the login button on the modal. The default value is `true`. |
-| `showOnDesktop?` | Whether to show the login button on the desktop. The default value is `true`. |
-| `showOnMobile?` | Whether to show the login button on mobile. The default value is `true`. |
-| `jwtParameters?` | Custom JWT parameters to configure the login. Useful for Auth0 configuration. It accepts `JwtParameters` as a value. |
-
-### Step 3: `TypeOfLogin` Enum
-
-```typescript
-export type TypeOfLogin =
- | "google"
- | "facebook"
- | "reddit"
- | "discord"
- | "twitch"
- | "apple"
- | "github"
- | "linkedin"
- | "twitter"
- | "weibo"
- | "line"
- | "email_password"
- | "passwordless"
- | "jwt";
-
-export const LOGIN_PROVIDER = {
- GOOGLE: "google",
- FACEBOOK: "facebook",
- REDDIT: "reddit",
- DISCORD: "discord",
- TWITCH: "twitch",
- APPLE: "apple",
- LINE: "line",
- GITHUB: "github",
- KAKAO: "kakao",
- LINKEDIN: "linkedin",
- TWITTER: "twitter",
- WEIBO: "weibo",
- WECHAT: "wechat",
- EMAIL_PASSWORDLESS: "email_passwordless",
- SMS_PASSWORDLESS: "sms_passwordless",
- JWT: "jwt",
-} as const;
-```
-
-### Step 4: Example Implementations
-
-#### Using Google Login
-
-```javascript
-web3auth.login({
- loginProvider: LOGIN_PROVIDER.GOOGLE,
- redirectUrl: `${scheme}://auth`,
- extraLoginOptions: {
- login_hint: "user@example.com", // Optional: pre-fill the email field
- },
-});
-```
-
-#### Using JWT Login (e.g., Auth0)
-
-```javascript
-web3auth.login({
- loginProvider: LOGIN_PROVIDER.JWT,
- redirectUrl: `${scheme}://auth`,
- extraLoginOptions: {
- id_token: "YOUR_JWT_ID_TOKEN", // JWT ID token
- domain: "https://example.auth0.com", // Auth0 domain
- verifierIdField: "sub", // The field in JWT token mapping to verifier id
- },
-});
-```
-
-## Aggregate Verifier
-
-You can use an aggregate verifier to combine multiple login methods, allowing users to log in using
-different providers but receive the same address.
-
-### Step 1: Configure the `LoginConfig`
-
-To use aggregate verifiers, set up the `loginConfig` object with multiple providers under a single
-verifier.
-
-```javascript
-const web3auth = new Web3Auth(WebBrowser, {
- clientId: "YOUR_CLIENT_ID", // Web3Auth's client id
- network: WEB3AUTH_NETWORK.MAINNET, // or other networks
- loginConfig: {
- google: {
- verifier: "aggregate-verifier",
- verifierSubIdentifier: "google-sub-id",
- typeOfLogin: TypeOfLogin.GOOGLE,
- clientId: "GOOGLE_CLIENT_ID",
- },
- auth0emailpasswordless: {
- verifier: "aggregate-verifier",
- verifierSubIdentifier: "auth0-sub-id",
- typeOfLogin: TypeOfLogin.JWT,
- clientId: "AUTH0_CLIENT_ID",
- jwtParameters: {
- domain: "https://example.auth0.com",
- verifierIdField: "email",
- isVerifierIdCaseSensitive: false,
- },
- },
- },
-});
-```
-
-### Step 2: Example Implementations
-
-#### Using Google and Auth0 Combined Login
-
-```javascript
-web3auth.login({
- loginProvider: LOGIN_PROVIDER.GOOGLE, // or LOGIN_PROVIDER.JWT
- redirectUrl: `${scheme}://auth`,
-});
-```
-
-## Extra Login Options for Special Cases
-
-The `extraLoginOptions` parameter can be used to pass additional options required by specific login
-providers.
-
-| Parameter | Description |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `additionalParams?` | Additional params in `[key: string]` format for OAuth login. Use `id_token` (JWT) to authenticate with Web3Auth. |
-| `domain?` | Your custom authentication domain in `string` format. For example, if you are using Auth0, it can be `example.auth0.com`. |
-| `client_id?` | Client ID in `string` format, provided by your login provider and used for the custom verifier. |
-| `leeway?` | The value used to account for clock skew in JWT expirations. The value is in seconds, ideally no more than 60 seconds or 120 seconds at max. It takes a `string` as a value. |
-| `verifierIdField?` | The field in JWT token which maps to verifier ID. Ensure you select the correct JWT verifier ID in the developer dashboard. It takes a `string` as a value. |
-| `isVerifierIdCaseSensitive?` | Boolean to confirm whether the verifier ID field is case-sensitive or not. |
-| `display?` | Allows developers to configure the display of UI. It takes a `string` as a value. |
-| `prompt?` | Prompt shown to the user during the authentication process. It takes a `string` as a value. |
-| `max_age?` | Maximum allowable elapsed time (in seconds) since authentication. If the last time user authenticated is greater than this value, the user must reauthenticate. It takes a `string` as a value. |
-| `ui_locales?` | The space-separated list of language tags, ordered by preference. For example `fr-CA fr en`. |
-| `id_token_hint?` | It denotes the previously issued ID token. It takes a `string` as a value. |
-| `id_token?` | JWT (ID Token) to be passed for login. |
-| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes a `string` as a value. |
-| `acr_values?` | `acr_values` is a space-separated string that specifies the desired Authentication Context Class Reference values. |
-| `scope?` | The default scope to be used on authentication requests. The `defaultScope` defined in the Auth0Client is included along with this scope. It takes a `string` as a value. |
-| `audience?` | The audience, presented as the `aud` claim in the access token, defines the intended consumer of the token. It takes a `string` as a value. |
-| `connection?` | The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes a `string` as a value. |
-| `redirect_uri?` | It can be used to specify the default URL where your custom JWT verifier can redirect your browser with the result. If using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0 application settings. It takes a `string` as a value. |
diff --git a/docs/sdk/pnp/react-native/install.mdx b/docs/sdk/pnp/react-native/install.mdx
deleted file mode 100644
index 737eea653..000000000
--- a/docs/sdk/pnp/react-native/install.mdx
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: "Installing PnP React Native SDK"
-sidebar_label: "Install"
-description: "Installing Web3Auth Plug and Play React Native SDK | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ExpoWarning from "@site/src/common/docs/_expo-warning.mdx";
-
-#### [`@web3auth/react-native-sdk`](https://github.com/web3auth/web3auth-react-native-sdk)
-
-```bash npm2yarn
-npm install --save @web3auth/react-native-sdk
-```
-
-## Selecting your Workflow
-
-In React Native, you have the choice to use one of the following workflows:
-
-### Expo Managed Workflow
-
-Your Expo app is built on your Expo's cloud, so you don't have control over the native modules used
-in the app. Developers build managed workflow apps using `expo-cli` on their computers and a
-development client on their mobile devices. Managed workflow apps typically use one or more Expo
-services, such as push notifications, builds, and updates.
-
-
-
-### Bare React Native Workflow
-
-Your Bare React Native app is entirely built on your machine. In this workflow, the developer has
-complete control, along with the complexity that comes with that. Configuration with `app.json` /
-`app.config.js` is mostly not supported in this context; instead, you will need to configure each
-native project directly with Swift/Kotlin native modules. Check out the
-[troubleshooting section](/sdk/pnp/react-native/install#troubleshooting) for fixing common issues.
-
-:::tip
-
-You can read more about different workflows in the
-[Expo documentation](https://docs.expo.dev/archive/managed-vs-bare/).
-
-:::
-
-## Installing Helper Modules
-
-### Adding a Web Browser Module
-
-We will also require a `WebBrowser` implementation to allow our JS-based SDK to interact with the
-native APIs, and there are different extra installation steps depending on whether you are using the
-bare workflow or managed workflow.
-
-
-
-
-
-When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install
-the `expo-web-browser` package as a `WebBrowser` implementation.
-
-```shell
-expo install expo-web-browser
-```
-
-
-
-
-
-When using our SDK with a bare workflow React Native app, you have to install a `WebBrowser`
-implementation made by us.
-
-```bash npm2yarn
-npm install --save @toruslabs/react-native-web-browser
-```
-
-
-
-
-### Adding a `Storage` Module
-
-Now with v4, we need to pass a `Storage` parameter to the SDK, which will be used for session
-management without storing the private keys of the user in the device.
-
-
-
-
-
-When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install
-the `expo-secure-store` package as a `Storage` implementation.
-
-```shell
-expo install expo-secure-store
-```
-
-
-
-
-
-When using our SDK with a bare workflow React Native app, you have to install a `Storage`
-implementation provided by react-native.
-
-```bash npm2yarn
-npm install --save react-native-encrypted-storage
-```
-
-
-
-
-### Add a Provider to your project
-
-The `@web3auth/react-native` package requires a private key provider to facilitate interaction with
-your preferred blockchain network. You can choose between the following providers based on your
-usecase.
-
-- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/react-native/providers/evm)
-- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/react-native/providers/solana)
-- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/react-native/providers/xrpl)
-- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/react-native/providers/common)
-
-## Configuration
-
-After you have installed the files needed for your workflow, you'll have to configure the SDK with
-some additional steps to be able to use the SDK properly.
-
-### Expo Managed Workflow
-
-- Adding URL scheme to `app.json`
-
-To allow the Expo-based SDK to work with exported Expo Android apps, you need to add the designated
-scheme into `app.json`
-
-```json title="app.json"
-{
- "expo": {
- "scheme": "web3authexpoexample" // replace with your own scheme
- }
-}
-```
-
-- For constructing your `redirectUrl`, you'll need to use the `expo-linking`, which will help you
- generate a `redirectUrl` for your app. Make sure you register that URL in the
- [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
-
-```tsx title="App.js"
-import Constants, { AppOwnership } from "expo-constants";
-import * as Linking from "expo-linking";
-
-const resolvedRedirectUrl =
- Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
- ? Linking.createURL("web3auth", {})
- : Linking.createURL("web3auth", { scheme: "web3authexpoexample" }); // replace with your own scheme
-```
-
-:::tip
-
-You may refer to [these example apps](./examples) and try it out yourself.
-
-:::
-
-:::tip
-
-For Android, make sure to check the intent filter with `scheme` defined in your
-`AndroidManifest.xml`
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-
-
-
-
- # replace with your own scheme
- # focus-next-line
-
-
-```
-
-The scheme should be the same as what you have added in your app.json files
-
-:::
-
-### Bare React Native Workflow
-
-For the bare workflow, you need to perform additional installation steps, alongside specific
-configurations for Android and iOS separately.
-
-#### Android
-
-- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
-
-```gradle title="android/build.gradle"
-buildToolsVersion = "31.0.0"
-minSdkVersion = 21
-# focus-next-line
-compileSdkVersion = 31
-# focus-next-line
-targetSdkVersion = 31
-```
-
-- Add the intent filter with `scheme` defined in your `AndroidManifest.xml`
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-
-
-
-
- # replace with your own scheme
- # focus-next-line
-
-
-```
-
-- SDK version 31 requires you to explicitly define `android:exported="true"` in
- `AndroidManifest.xml`, and check whether it is correctly present or not.
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-
-```
-
-- Your `redirectUrl` is your defined scheme following some identifier or your choice. For example,
- if your scheme is `web3authrnexample`, you can define your `redirectUrl` as
- `web3authrnexample://auth`. Make sure you register this `redirectUrl` in the
- [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
-
-```tsx title="App.js"
-const scheme = "web3authrnexample"; // Or your desired app redirection scheme
-const resolvedRedirectUrl = `${scheme}://auth`;
-```
-
-#### iOS
-
-- Make sure that the minimum SDK compile version in `Podfile` is 14 or more.
-
-```Podfile title="ios/Podfile"
-platform :ios, '14'
-```
-
-- Install the Cocoa Pods within your project directory.
-
-```shell
-cd ios
-pod install
-```
-
-- In iOS, you don't need to add `redirectUrl` as an iOS Custom URL Scheme, however, you may add it
- to your `Info.plist`, but it is not required. Make sure your `redirectUrl` is registered in the
- [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
-
-:::tip
-
-You may refer to **[these example apps](./examples)** and try it out yourself.
-
-:::
-
-## Troubleshooting
-
-### Bundler Issues: Missing Dependencies
-
-You might face issues mentioning that certain dependencies are missing within the React Native
-environment. These are node dependencies that need to be polyfilled in your application, to enable
-Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
-building the app. Please check out our
-**[React Native Troubleshooting Guide](/troubleshooting/metro-issues)**
diff --git a/docs/sdk/pnp/react-native/usage.mdx b/docs/sdk/pnp/react-native/usage.mdx
deleted file mode 100644
index 51ac1a292..000000000
--- a/docs/sdk/pnp/react-native/usage.mdx
+++ /dev/null
@@ -1,439 +0,0 @@
----
-title: Using of PnP React Native SDK
-sidebar_label: Usage
-description: "Web3Auth PnP React Native SDK - Usage | Documentation - Web3Auth"
----
-
-import RNResponse from "@site/src/common/sdk/pnp/react-native/_get-user-info.mdx";
-import PrivateKey from "@site/src/common/sdk/pnp/react-native/_get-priv-key.mdx";
-import ED25519Key from "@site/src/common/sdk/pnp/react-native/_get-ed25519-priv-key.mdx";
-import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
-users.
-
-Web3Auth returns the following functions:
-
-- `login()` - Logs in the User using the particular configuration you require for authentication.
-- `logout()` - Logs out the User.
-- `userInfo()` - After logging in, the Web3Auth instance will provide you with information regarding
- the user that is logged in.
-- `privKey()` - After login, gets the private key of the user (default is `secp256k1` key).
-- `ed25519Key()` - After login, gets the `ed25519` key.
-- `enableMFA()` - Takes your user to the MFA enabling flow, helping them set up MFA.
-- `launchWalletServices()` - Launches the Wallet Services UI for the user to interact with their
- wallet.
-- `request()` - Pops up the signature request modal for the user to sign a message.
-
-## Logging in a User
-
-#### `login(loginParams: SdkLoginParams): Promise;`
-
-Trigger the login flow that navigates the user to a browser model that allows them to log in with
-the selected login provider.
-
-#### Arguments
-
-
-
-
-
-| Parameter | Description |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `loginProvider` | It sets the OAuth login method to be used. You can use any of the supported values are `GOOGLE`, `FACEBOOK`, `REDDIT`, `DISCORD`, `TWITCH`, `APPLE`, `LINE`, `GITHUB`, `KAKAO`, `LINKEDIN`, `TWITTER`, `WEIBO`, `WECHAT`, `EMAIL_PASSWORDLESS`. |
-| `extraLoginOptions?` | It can be used to set the OAuth login options for corresponding `loginProvider`. For instance, you'll need to pass user's email address as. Default value for the field is `null`, and it accepts `ExtraLoginOptions` as a value. |
-| `redirectUrl?` | Url where user will be redirected after successfull login. By default user will be redirected to same page where login will be initiated. Default value for the field is `null`, and accepts `string` as a value. |
-| `appState?` | It can be used to keep track of the app state when user will be redirected to app after login. Default is `null`, and accepts `string` as a value. |
-| `mfaLevel?` | Customize the MFA screen shown to the user during OAuth authentication. Default value for field is `MfaLevelType.default`, which shows MFA screen every 3rd login. It accepts `MfaLevelType` as a value. |
-| `dappShare?` | Custom verifier 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. It accepts `string` as a value. |
-| `curve?` | It will be used to determine the public key encoded in the jwt token which returned in `getUserInfo` function after user login. This parameter won't change format of private key returned by We3Auth. Private key returned by `getPrivKey` is always secp256k1. To get the ed25519 key you can use `ed25519Key` method. The default value is `SUPPORTED_KEY_CURVES_TYPE.secp256k1`. |
-
-
-
-
-
-```typescript
-
-async login(options: SdkLoginParams): Promise;
-export type SdkLoginParams = Omit & Required>;
-
-export type BaseRedirectParams = {
- /**
- * redirectUrl is the dapp's url where user will be redirected after login.
- *
- * @remarks
- * Register this url at {@link "https://dashboard.web3auth.io"| developer dashboard}
- * else initialization will give error.
- */
- redirectUrl?: string;
- /**
- * 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.
- */
- appState?: string;
-};
-
-export type LoginParams = BaseRedirectParams & {
- /**
- * loginProvider sets the oauth login method to be used.
- * You can use any of the valid loginProvider from the supported list.
- *
- * If this param is not passed then it will show all the available
- * login methods to user in a modal.
- *
- */
- loginProvider: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE;
-
- /**
- * 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
- *
- * Defaults to `default`
- * @defaultValue `default`
- */
- mfaLevel?: MfaLevelType;
-
- /**
- * extraLoginOptions 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
- */
- extraLoginOptions?: ExtraLoginOptions;
-
- /**
- * 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
- */
- dappShare?: string;
-
- /**
- * How long should a login session last at a minimum in seconds
- *
- * @defaultValue 86400 seconds
- * @remarks Max value of sessionTime can be 7 * 86400 (30 days)
- */
- sessionTime?: number;
-
- /**
- * 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 service. Private key returned
- * by auth service is always `secp256k1`. As of now you have to convert it to `'ed25519'` if you want.
- * You can use `@web3auth/base-provider` npm package for this purpose.
- *
- *
- * @defaultValue secp256k1
- */
- curve?: SUPPORTED_KEY_CURVES_TYPE;
-};
-
-```
-
-
-
-
-
-#### Example
-
-```typescript title="example.tsx"
-await web3auth.login({
- loginProvider: LoginProvider.GOOGLE,
- redirectUrl: resolvedRedirectUrl,
-});
-```
-
-### Selecting Curve
-
-The `web3auth.login()` method accepts a `curve` parameter. This parameter can be used to select the
-elliptic curve to use for deriving the address of the key within the jwt returned by Web3Auth for
-Server Side Verification.
-
-```typescript
-await web3auth.login({
- loginProvider: LoginProvider.GOOGLE,
- redirectUrl: resolvedRedirectUrl,
- // focus-next-line
- curve: "secp256k1", // `secp256k1` and `ed25519` are supported
-});
-```
-
-#### Example
-
-
-
-
-
-```typescript
-await web3auth.login({
- loginProvider: LoginProvider.GOOGLE,
- redirectUrl: resolvedRedirectUrl,
- // focus-next-line
- curve: "secp256k1",
-});
-```
-
-
-
-
-
-```typescript
-await web3auth.login({
- loginProvider: LoginProvider.GOOGLE,
- redirectUrl: resolvedRedirectUrl,
- // focus-next-line
- curve: "ed25519",
-});
-```
-
-
-
-
-
-## Logging out a user
-
-#### `logout(): Promise;`
-
-:::info
-
-Trigger the logout flow. It is not advised to be used in iOS since it will trigger a system dialog
-that asks if users want to allow a Login operation.
-
-:::
-
-This method has no input and returns a `Promise` that resolves if the operation is successful, and
-rejects if the operation failed.
-
-#### Example
-
-```typescript
-await web3auth.logout();
-```
-
-## Getting the User Information
-
-#### `userInfo(): State["userInfo"];`
-
-To get the information of the user, extracted from the id token, you can call the `userInfo` method
-in the web3auth instance.
-
-```tsx
-const userInfo = web3auth.userInfo();
-```
-
-
-
-## Getting the `secp256k1` private key
-
-#### `get privKey(): string;`
-
-Using the `privKey()` method in the web3auth instance you can get the `secp256k1` private key.
-
-```tsx
-const privateKey = web3auth.privKey();
-```
-
-
-
-## Getting the `ed25519` private key
-
-#### `get ed25519Key(): string;`
-
-Using the `ed25519Key()` method in the web3auth instance you can get the `ed25519` private key.
-
-```tsx
-const ed25519Key = web3auth.ed25519Key();
-```
-
-
-
-## Enabling MFA
-
-#### `enableMFA(): Promise;`
-
-This method is used to enable MFA for the user. It takes no arguments and returns a `Promise` that
-resolves if the operation is successful, and rejects if the operation failed.
-
-#### Example
-
-```typescript
-await web3auth.enableMFA();
-```
-
-## Launching Wallet Services UI
-
-#### `launchWalletServices(chainConfig: ChainConfig, path?: string | null): Promise;`
-
-The `launchWalletServices` method launches a Secure Web Browser which allows you to use the
-templated wallet UI services. The method takes `ChainConfig` as the required input. Wallet Services
-is currently only available for EVM chains.
-
-
-
-:::note
-
-Access to Wallet Services is gated. You can use this feature in `sapphire_devnet` for free. The
-minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production
-environment is the **Scale Plan**.
-
-:::
-
-#### Example
-
-```typescript
-const chainConfig = {
- chainNamespace: ChainNamespace.EIP155,
- chainId: "0xaa36a7",
- rpcTarget: "https://rpc.sepolia.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Ethereum Sepolia Testnet",
- blockExplorerUrl: "https://sepolia.etherscan.io",
- ticker: "ETH",
- tickerName: "Ethereum",
- decimals: 18,
- logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-
-await web3auth.launchWalletServices(chainConfig);
-```
-
-## Requesting a Signature
-
-#### `request(chainConfig: ChainConfig, method: string, params: unknown[], path?: string): Promise;`
-
-The `request` method facilitates the use of templated transaction screens for signing transactions.
-This function returns a promise of the signature that can be used to broadcast the transaction.
-
-Please check the list of
-[JSON RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/), noting that the request
-method currently supports only the signing methods.
-
-### Arguments
-
-| Arguments | Description |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `chainConfig` | Defines the chain to be used for signature. |
-| `method` | JSON RPC method name in `string`. Currently, the request method only supports the singing methods. |
-| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api) to know more. |
-
-#### Example
-
-##### Personal Sign
-
-```tsx
-const params = [
- {
- challenge: "Hello World",
- address,
- },
- null,
-];
-const res = await web3auth.request(chainConfig, "personal_sign", params);
-```
-
-##### Personal Sign Shorthand
-
-```tsx
-const params = ["Hello World", address];
-const res = await web3auth.request(chainConfig, "personal_sign", params);
-```
-
-##### Sign Type 4
-
-```tsx
-const params = [
- address,
- {
- types: {
- EIP712Domain: [
- {
- name: "name",
- type: "string",
- },
- {
- name: "version",
- type: "string",
- },
- {
- name: "chainId",
- type: "uint256",
- },
- {
- name: "verifyingContract",
- type: "address",
- },
- ],
- Person: [
- {
- name: "name",
- type: "string",
- },
- {
- name: "wallet",
- type: "address",
- },
- ],
- Mail: [
- {
- name: "from",
- type: "Person",
- },
- {
- name: "to",
- type: "Person",
- },
- {
- name: "contents",
- type: "string",
- },
- ],
- },
- primaryType: "Mail",
- domain: {
- name: "Ether Mail",
- version: "1",
- chainId: chainConfig.chainId,
- verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
- },
- message: {
- from: {
- name: "Cow",
- wallet: address,
- },
- to: {
- name: "Bob",
- wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
- },
- contents: "Hello, Bob!",
- },
- },
-];
-const res = await web3auth.request(chainConfig, "eth_signTypedData_v4", params);
-```
diff --git a/docs/sdk/pnp/unity/custom-authentication.mdx b/docs/sdk/pnp/unity/custom-authentication.mdx
deleted file mode 100644
index 63f43e39a..000000000
--- a/docs/sdk/pnp/unity/custom-authentication.mdx
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: Using Custom Authentication in PnP Unity SDK
-sidebar_label: Custom Authentication
-description: "Web3Auth PnP Unity SDK - Using Custom Authentication | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## Overview
-
-Custom Authentication in the Web3Auth PnP Unity SDK allows you to authenticate users using your own
-custom authentication service or third-party providers like Google, Auth0, AWS Cognito, or Firebase.
-This guide will walk you through setting up custom authentication in your Unity project.
-
-## Prerequisites
-
-Before you start, ensure you have configured a custom verifier in the Web3Auth Dashboard. This
-verifier will be used to facilitate custom authentication.
-
-:::tip
-
-Check out how to create a **[Custom Verifier](/auth-provider-setup/verifiers)** on the Web3Auth
-Dashboard.
-
-:::
-
-:::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 **Growth Plan**. You can use this feature for free in the
-`sapphire_devnet`.
-
-:::
-
-## Single Verifier
-
-### Step 1: Configure the `LoginConfig`
-
-To use custom authentication with a single verifier, configure the `loginConfig` parameter of the
-`Web3AuthOptions` class. The `loginConfig` parameter is a key-value map where the key should be one
-of the `Web3AuthProvider` in its string form, and the value should be a `LoginConfigItem` struct
-instance.
-
-```csharp
-void Start()
-{
- web3Auth = GetComponent();
-
- var loginConfigItem = new LoginConfigItem()
- {
- verifier = "google-verifier", // Get this from the Web3Auth Dashboard
- typeOfLogin = TypeOfLogin.GOOGLE,
- clientId = "YOUR_GOOGLE_CLIENT_ID" // Google's client ID
- };
-
- web3Auth.setOptions(new Web3AuthOptions()
- {
- redirectUrl = new Uri("torusapp://com.torus.Web3AuthUnity/auth"),
- clientId = "YOUR_WEB3AUTH_CLIENT_ID", // Web3Auth's client ID
- network = Web3Auth.Network.TESTNET, // or other networks
- loginConfig = new Dictionary
- {
- {"google", loginConfigItem}
- }
- });
-}
-```
-
-### Step 2: `LoginConfigItem` Object Structure
-
-The `LoginConfigItem` struct contains various parameters that define the behavior of the custom
-authentication process. Below are the details of the `LoginConfigItem` struct:
-
-| Parameter | Description |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `string` as a value. |
-| `typeOfLogin` | Type of login for this verifier. This value will affect the login flow. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should provide your own JWT token, and no sign-in flow will be presented. It's a mandatory field, and accepts `TypeOfLogin` as a value. |
-| `clientId` | Client ID provided by your login provider, e.g., Google's Client ID or Web3Auth's client ID if using `jwt` as `TypeOfLogin`. It's a mandatory field, and accepts `string` as a value. |
-| `name?` | Display name for the verifier. If null, the default name is used. It accepts `string` as a value. |
-| `description?` | Description for the button. If provided, it renders as a full-length button; otherwise, an icon button is shown. It accepts `string` as a value. |
-| `verifierSubIdentifier?` | The field in the JWT token that maps to the verifier ID. Ensure you selected the correct JWT verifier ID in the developer dashboard. It accepts `string` as a value. |
-| `logoHover?` | Logo to be shown on mouse hover. It accepts `string` as a value. |
-| `logoLight?` | Light logo for dark backgrounds. It accepts `string` as a value. |
-| `logoDark?` | Dark logo for light backgrounds. It accepts `string` as a value. |
-| `mainOption?` | Shows the login button on the main list. It accepts `bool` as a value. The default value is `false`. |
-| `showOnModal?` | Whether to show the login button on the modal. The default value is `true`. |
-| `showOnDesktop?` | Whether to show the login button on the desktop. The default value is `true`. |
-| `showOnMobile?` | Whether to show the login button on mobile. The default value is `true`. |
-
-### Step 3: `TypeOfLogin` Enum
-
-```csharp
-public enum TypeOfLogin
-{
- [EnumMember(Value = "google")]
- GOOGLE,
- [EnumMember(Value = "facebook")]
- FACEBOOK,
- [EnumMember(Value = "reddit")]
- REDDIT,
- [EnumMember(Value = "discord")]
- DISCORD,
- [EnumMember(Value = "twitch")]
- TWITCH,
- [EnumMember(Value = "apple")]
- APPLE,
- [EnumMember(Value = "line")]
- LINE,
- [EnumMember(Value = "github")]
- GITHUB,
- [EnumMember(Value = "kakao")]
- KAKAO,
- [EnumMember(Value = "linkedin")]
- LINKEDIN,
- [EnumMember(Value = "twitter")]
- TWITTER,
- [EnumMember(Value = "weibo")]
- WEIBO,
- [EnumMember(Value = "wechat")]
- WECHAT,
- [EnumMember(Value = "email_passwordless")]
- EMAIL_PASSWORDLESS,
- [EnumMember(Value = "email_password")]
- EMAIL_PASSWORD,
- [EnumMember(Value = "jwt")]
- JWT
-}
-```
-
-### Step 4: Example Implementations
-
-#### Using Google Login
-
-```csharp
-public void loginGoogle()
-{
- var selectedProvider = Provider.GOOGLE;
-
- var options = new LoginParams()
- {
- loginProvider = selectedProvider,
- };
-
- web3Auth.login(options);
-}
-```
-
-#### Using JWT Login (e.g., Auth0)
-
-```csharp
-public void loginJWT()
-{
- var selectedProvider = Provider.JWT;
-
- var options = new LoginParams()
- {
- loginProvider = selectedProvider,
- extraLoginOptions = new ExtraLoginOptions()
- {
- domain = "https://example.auth0.com", // Auth0 domain
- verifierIdField = "sub", // The field in JWT token mapping to verifier ID
- id_token = "YOUR_JWT_ID_TOKEN" // JWT ID token
- }
- };
-
- web3Auth.login(options);
-}
-```
-
-## Aggregate Verifier
-
-You can use an aggregate verifier to combine multiple login methods, allowing users to log in using
-different providers but receive the same address.
-
-### Step 1: Configure the `LoginConfig`
-
-To use aggregate verifiers, set up the `loginConfig` object with multiple providers under a single
-verifier.
-
-```csharp
-void Start()
-{
- web3Auth = GetComponent();
-
- var googleConfig = new LoginConfigItem()
- {
- verifier = "aggregate-sapphire",
- verifierSubIdentifier = "google-sub-id",
- clientId = "YOUR_GOOGLE_CLIENT_ID",
- typeOfLogin = TypeOfLogin.GOOGLE,
- };
-
- var auth0GitHubConfig = new LoginConfigItem()
- {
- verifier = "aggregate-sapphire",
- verifierSubIdentifier = "github-sub-id",
- clientId = "YOUR_GITHUB_CLIENT_ID",
- typeOfLogin = TypeOfLogin.JWT,
- };
-
- web3Auth.setOptions(new Web3AuthOptions()
- {
- clientId = "YOUR_WEB3AUTH_CLIENT_ID",
- redirectUrl = new System.Uri("w3aexample://com.web3auth.unityaggregateexample"),
- network = Web3Auth.Network.SAPPHIRE_MAINNET,
- loginConfig = new Dictionary
- {
- {"google", googleConfig},
- {"github", auth0GitHubConfig}
- }
- });
-}
-```
-
-### Step 2: Example Implementations
-
-#### Using Google and GitHub Combined Login
-
-```csharp
-public void loginGoogle()
-{
- var selectedProvider = Provider.GOOGLE;
-
- var options = new LoginParams()
- {
- loginProvider = selectedProvider,
- };
-
- web3Auth.login(options);
-}
-
-public void loginGitHub()
-{
- var selectedProvider = Provider.GITHUB;
-
- var options = new LoginParams()
- {
- loginProvider = selectedProvider,
- extraLoginOptions = new ExtraLoginOptions()
- {
- domain = "https://example.auth0.com",
- verifierIdField = "email",
- isVerifierIdCaseSensitive = false,
- prompt = Prompt.LOGIN,
- }
- };
-
- web3Auth.login(options);
-}
-```
-
-## Extra Login Options for Special Cases
-
-The `extraLoginOptions` parameter can be used to pass additional options required by specific login
-providers.
-
-| Parameter | Description |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `domain?` | Your custom authentication domain in `string` format. For example, if you are using Auth0, it can be `example.auth0.com`. |
-| `client_id?` | Client ID in `string` format, provided by your login provider and used for the custom verifier. |
-| `verifierIdField?` | The field in JWT token which maps to verifier ID. Ensure you select the correct JWT verifier ID in the developer dashboard. It takes a `string` as a value. |
-| `isVerifierIdCaseSensitive?` | Boolean to confirm whether the verifier ID field is case-sensitive or not. |
-| `prompt?` | Prompt shown to the user during the authentication process. It takes a `string` as a value. |
-| `id_token?` | JWT (ID Token) to be passed for login. |
-| `login_hint?` | It is used to send the user's email address during Email Passwordless login. It takes a `string` as a value. |
-
----
-
-This custom authentication page for the Web3Auth PnP Unity SDK mirrors the structure of the Android
-custom authentication page, with Unity-specific examples and code structures.
diff --git a/docs/sdk/pnp/unreal/custom-authentication.mdx b/docs/sdk/pnp/unreal/custom-authentication.mdx
deleted file mode 100644
index 418e879a2..000000000
--- a/docs/sdk/pnp/unreal/custom-authentication.mdx
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: Using Custom Authentication in PnP Unreal Engine SDK
-sidebar_label: Custom Authentication
-description:
- "Web3Auth PnP Unreal Engine SDK - Using Custom Authentication | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-Custom Authentication is a way to authenticate users with your own custom authentication service.
-For example, while authenticating with Google, you have the ability to use your own Google Client ID
-and Dashboard to authenticate users directly. To login using your own custom JWT issuers like Auth0,
-AWS Cognito, or Firebase, you can add the your configuration to the `loginConfig` field of the
-`Web3AuthOptions` class.
-
-The `loginConfig` field is a key value map. The key should be one of the `Web3AuthProvider` in its
-string form, and the value should be a `LoginConfigItem` struct instance.
-
-First, configure your own verifier in the Web3Auth Dashboard to use custom authentication.
-
-
-
-:::tip
-
-Check out how to create [Custom Verifier](/auth-provider-setup/verifiers) on Web3Auth Dashboard.
-
-:::
-
-Then, you should specify the details of your verifier in the `LoginConfigItem` struct, the details
-of this struct are as follows.
-
-## Arguments
-
-### `LoginConfigItem`
-
-
-
-
-
-| Parameter | Description |
-| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts `FString` as a value. |
-| `typeOfLogin` | Type of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts `FTypeOfLogin` as a value. |
-| `clientId` | Client id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts `FString` as a value. |
-| `name?` | Display name for the verifier. If null, the default name is used. It accepts `FString` as a value. |
-| `description?` | Description for the button. If provided, it renders as a full length button. else, icon button. It accepts `FString` as a value. |
-| `verifierSubIdentifier?` | The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts `FString` as a value. |
-| `logoHover?` | Logo to be shown on mouse hover. It accepts `FString` as a value. |
-| `logoLight?` | Light logo for dark background. It accepts `FString` as a value. |
-| `logoDark?` | Dark logo for light background. It accepts `FString` as a value. |
-| `mainOption?` | Show login button on the main list. It accepts `bool` as a value. Default value is false. |
-| `showOnModal?` | Whether to show the login button on modal or not. Default value is true. |
-| `showOnDesktop?` | Whether to show the login button on desktop. Default value is true. |
-| `showOnMobile?` | Whether to show the login button on mobile. Default value is true. |
-
-
-
-
-
-```cs
-USTRUCT(BlueprintType)
-struct FLoginConfigItem
-{
- GENERATED_BODY()
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString verifier;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString typeOfLogin;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString name;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString description;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString clientId;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString verifierSubIdentifier;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString logoHover;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString logoLight;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- FString logoDark;
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- bool mainOption;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- bool showOnModal;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- bool showOnDesktop;
-
- UPROPERTY(EditAnywhere, BlueprintReadWrite)
- bool showOnMobile;
-
- FLoginConfigItem() {};
-
- bool operator== (const FLoginConfigItem& other) {
- return other.clientId == clientId;
- }
-
-};
-```
-
-
-
-
-
-### `TypeOfLogin`
-
-```c
-UENUM(BlueprintType)
-enum class FTypeOfLogin : uint8
-{
- GOOGLE,
- FACEBOOK,
- REDDIT,
- DISCORD,
- TWITCH,
- APPLE,
- LINE,
- GITHUB,
- KAKAO,
- LINKEDIN,
- TWITTER,
- WEIBO,
- WECHAT,
- EMAIL_PASSWORDLESS,
- EMAIL_PASSWORD,
- JWT
-};
-```
-
-## Usage
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-:::note
-
-- dApp Share is only returned for the Custom Authentication verifiers.
-- Also, 2FA should be enabled for the account using it.
-
- Use `mfaLevel = MFALevel.MANDATORY` in the `LoginParams` during login. See
- **[MFA](/sdk/pnp/unreal/mfa)** for more details.
-
-:::
diff --git a/docs/sdk/pnp/web/adapters/adapters.mdx b/docs/sdk/pnp/web/adapters/adapters.mdx
deleted file mode 100644
index 3f5f2447f..000000000
--- a/docs/sdk/pnp/web/adapters/adapters.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Adapters for Web3Auth PnP Web SDKs
-sidebar_label: Overview
-description: "Web3Auth PnP Web Adapter SDKs | Documentation - Web3Auth"
----
-
-Adapters are essentially connectors between Web3Auth and the underlying wallet provider. For
-example, an adapter for connecting with torus wallet is available under web3auth as
-[@web3auth/torus-evm-adapter](/sdk/pnp/web/adapters/torus-evm). Every adapter follows a common
-interface which is required by Web3Auth to communicate with the wallet.
-
-An adapter emits certain events like `CONNECTED`, `CONNECTING` and `DISCONNECTED` etc during login
-lifecycle of a user. Each adapter exposes provider on successful user login that can be used to
-invoke RPC calls on wallet and on connected blockchain.
-
-Hence, adapters are needed to connect your Web3Auth instance to a wallet provider. Web3Auth by
-default contains a pre-configured list of login adapters. It also provides flexibility to add/remove
-adapters or to use some existing adapter with custom configurations. To configure an adapter create
-an instance of the adapter by using its corresponding package and pass the returned adapter instance
-in the `configureAdapter` function.
-
-For example, to configure auth adapter,
-
-- Import the `AuthAdapter` from the `@web3auth/auth-adapter` package.
-- Create an instance of the adapter along with the configuration
-- Pass the returned instance to `web3auth.configureAdapter` as shown in the example below.
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- network: "sapphire_mainnet",
- uxMode: "popup",
- },
-});
-
-web3auth.configureAdapter(authAdapter);
-```
-
-## Currently Available Wallet Adapters
-
-By default Web3Auth's modal UI supports a set of default adapters depending on the `authMode` being
-used. By default, Web3Auth requires basic configuration `client_id`, and registering a redirect if
-you are using CustomAuth adapter from the dashboard.
-
-The table below summarizes all the available adapters and their properties
-
-| Adapter | ChainNamespace | Default | Package Name |
-| ------------------------ | ----------------- | ------- | -------------------------------------------------------------------------------- |
-| `auth` | `EIP155`,`SOLANA` | `YES` | [`@web3auth/auth-adapter`](/sdk/pnp/web/adapters/auth) |
-| `torus-evm` | `EIP155` | `NO` | [`@web3auth/torus-evm-adapter`](/sdk/pnp/web/adapters/torus-evm) |
-| `torus-solana` | `SOLANA` | `No` | [`@web3auth/torus-solana-adapter`](/sdk/pnp/web/adapters/torus-solana) |
-| `walletconnect-v2` | `EIP155` | `NO` | [`@web3auth/wallet-connect-v2-adapter`](/sdk/pnp/web/adapters/wallet-connect-v2) |
-| `coinbase` | `EIP155` | `NO` | [`@web3auth/coinbase`](/sdk/pnp/web/adapters/coinbase) |
-| `default-evm-adapter` | `EIP155` | `NO` | [`@web3auth/default-evm-adapter`](/sdk/pnp/web/adapters) |
-| `default-solana-adapter` | `SOLANA` | `NO` | [`@web3auth/default-solana-adapter`](/sdk/pnp/web/adapters) |
-
-## Common Configuration Interfaces
-
-```tsx
-type CustomChainConfig = {
- chainNamespace: ChainNamespaceType;
- /**
- * The chain id of the chain
- */
- chainId: string;
- /**
- * RPC target Url for the chain
- */
- rpcTarget: string;
- /**
- * Display Name for the chain
- */
- displayName: string;
- /**
- * Url of the block explorer
- */
- blockExplorerUrl: string;
- /**
- * Default currency ticker of the network (e.g: ETH)
- */
- ticker: string;
- /**
- * Name for currency ticker (e.g: `Ethereum`)
- */
- tickerName: string;
-
- /**
- * Logo of the chain
- */
- logo: stirng;
-};
-```
-
-:::warning
-
-If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
diff --git a/docs/sdk/pnp/web/adapters/auth.mdx b/docs/sdk/pnp/web/adapters/auth.mdx
deleted file mode 100644
index 4efd0e2d2..000000000
--- a/docs/sdk/pnp/web/adapters/auth.mdx
+++ /dev/null
@@ -1,631 +0,0 @@
----
-title: Auth Adapter for Social Logins
-sidebar_label: Auth (Social Logins)
-description:
- "Web3Auth PnP Web Adapter SDKs - Auth Adapter for Social Logins | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
-import AuthOptions from "@site/src/common/sdk/pnp/web/_auth-options.mdx";
-import LoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-params.mdx";
-import AuthWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx";
-import AuthWhiteLabelExample from "@site/src/common/sdk/pnp/web/_auth-whitelabel-example.mdx";
-import LoginConfig from "@site/src/common/sdk/pnp/web/_login-config.mdx";
-import ConnectTo from "@site/src/common/sdk/pnp/web/_connect-to.mdx";
-import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options.mdx";
-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)
-
-The default adapter of Web3Auth is the `auth-adapter`. This adapter is a wrapper around the
-[`auth`](https://www.npmjs.com/package/@web3auth/auth) library from Web3Auth (previously Torus) and
-enables the main social login features of Web3Auth. By default, Web3Auth has certain configuration
-set to enable a quick integration, however, for customising features, like Whitelabel, Custom
-Authentication, etc. you need to customise the Auth Adapter. With the Auth Adapter package installed
-and instantiated, you can explore a number of options and can customise the login experience of the
-user as per your needs.
-
-## Basic Details
-
-#### Adapter Name: `auth`
-
-#### Package Name: [`@web3auth/auth-adapter`](https://npmjs.com/package/@web3auth/auth-adapter)
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/auth-adapter
-```
-
-## Instantiation
-
-#### Import the `AuthAdapter` class from `@web3auth/auth-adapter`
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-```
-
-#### Assign the `AuthAdapter` class to a variable
-
-```tsx
-const authAdapter = new AuthAdapter(AuthAdapterOptions);
-```
-
-This AuthAdapter constructor takes an object with `AuthAdapterOptions` as input.
-
-## Arguments
-
-#### `AuthAdapterOptions`
-
-
-
-
-
-| Parameter | type |
-| --------------------- | ------------------------------------- |
-| `adapterSettings?` | [authOptions](#auth-adapter-settings) |
-| `loginSettings?` | [LoginSettings](#loginsettings) |
-| `privateKeyProvider?` | [PrivateKeyProvider](#loginsettings) |
-
-
-
-
-
-```tsx
-export interface AuthAdapterOptions extends BaseAdapterSettings {
- adapterSettings?: MakeOptional;
- loginSettings?: LoginSettings;
- privateKeyProvider?: PrivateKeyProvider;
-}
-```
-
-
-
-
-
-### Auth Adapter Settings
-
-#### `adapterSettings`
-
-
-
-### Login Settings
-
-#### `loginSettings`
-
-:::warning
-
-While you can pass your `chainConfig` to `AuthAdapter`, it is not required for `web3auth/no-modal`
-ie. The Web3Auth Plug and Play No Modal package, since you can directly pass `loginParams` over to
-the `connectTo` function.
-
-Either way, both of these methods will work the same. Please note that the `connectTo` function
-params will override the `AuthAdapter` settings.
-
-Read more about how to pass `loginParams` to `connectTo` in its respective section:
-[`web3auth/no-modal`](/sdk/pnp/web/no-modal/usage#logging-in-the-user)
-
-:::
-
-
-
-## Multi-Factor Authentication
-
-At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an
-extra layer of protection that verifies your identity when accessing your account. To ensure
-ownership, you must provide two or more different backup factors. You have the option to choose from
-the device, social, backup factor (seed phrase), and password factors to guarantee access to your
-Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into
-three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can
-easily recover your account if you lose access to your original device or help log into a new
-device.
-
-For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the
-MFA screen by setting the `mfaLevel` argument. You can enable or disable a backup factor and change
-their order. Currently, there are four values for `mfaLevel`:
-
-- `default`: presents the MFA screen every third login
-- `optional`: presents the MFA screen on every login, but you can skip it
-- `mandatory`: make it mandatory to set up MFA after login
-- `none`: skips the MFA setup screen
-
-We offer the following backup factors under `mfaSettings`:
-
-
-
-- `deviceShareFactor`,
-- `backUpShareFactor`,
-- `socialBackupFactor`,
-- `passwordFactor`,
-- `authenticatorFactor`, and
-- `passkeysFactor`.
-
-### Example
-
-```tsx
-const authAdapter = new AuthAdapter({
- loginSettings: {
- mfaLevel: "optional", // default, optional, mandatory, none
- },
- adapterSettings: {
- // SCALE and above plan only feature
- mfaSettings: {
- deviceShareFactor: {
- enable: true,
- priority: 1,
- mandatory: true,
- },
- backUpShareFactor: {
- enable: true,
- priority: 2,
- mandatory: false,
- },
- socialBackupFactor: {
- enable: true,
- priority: 3,
- mandatory: false,
- },
- passwordFactor: {
- enable: true,
- priority: 4,
- mandatory: false,
- },
- authenticatorFactor: {
- enable: true,
- priority: 5,
- mandatory: false,
- },
- passkeysFactor: {
- enable: true,
- priority: 6,
- mandatory: false,
- },
- },
- },
-});
-```
-
-## Whitelabel
-
-Web3Auth's Social Logins and Email Login run using the Auth Flow. The whole Auth user experience can
-also be whitelabeled using Auth Adapter settings. For this, you need to pass on the `whiteLabel`
-configuration parameter to the `adapterSettings` property of the `auth-adapter`.
-
-
-
-### Example
-
-
-
-## Custom Authentication
-
-While instantiating the Auth Adapter, you can pass some configuration objects to the constructor.
-One of these configurations is the `adapterSettings` configuration which enables you to make changes
-in the adapter, enabling you to do things like Whitelabeling and Custom Authentication among other
-things.
-
-#### `loginConfig`
-
-The `loginConfig` parameter of `adapterSettings` in `auth-adapter` contains the following
-properties:
-
-
-
-### Custom Authentication within Web3Auth Modal
-
-When we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the `loginConfig` should
-correspond to the socials mentioned in the modal. This means you can use your own authentication
-services for the following services:
-
-`google` | `facebook` | `twitter` | `reddit` | `discord` | `twitch` | `apple` | `line` | `github` |
-`kakao` | `linkedin` | `weibo` | `wechat` | `passwordless`
-
-:::info
-
-You can customize all or a few of the social logins and others will remain default. You can also
-remove the ones you don't want using the whitelabeling option.
-
-:::
-
-#### Example
-
-
-
-### Logging in through your Custom JWT Token
-
-When we are using `@web3auth/no-modal`, ie. Web3Auth Plug and Play No Modal SDK, we have the option
-to use the `connectTo` function, which enables you to customize the login process according to the
-parameters you have for your custom authentication service.
-
-
-
-:::tip
-
-Know more about the `connectTo` function in the
-[`Usage SDK Reference`](/sdk/pnp/web/no-modal/usage#logging-in-the-user)
-
-:::
-
-Further, to enable Custom Authentication, the `loginParams` parameter takes in another object called
-`extraLoginOptions` which contains the following properties:
-
-
-
-#### Example
-
-
-
-
-## Initialization
-
-Finally, once all the configurations are set, you need to initialize the Auth Adapter.
-
-```tsx
-web3auth.configureAdapter(authAdapter);
-```
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance. This function takes the below-mentioned parameters as well as
-
-[Auth Adapter Settings](#auth-adapter-settings).
-
-### Arguments
-
-
-
-
-
-`AuthOptions`
-
-| Parameter | type | description |
-| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `clientId` | `string` | Your projectId/clientId from the [dashboard](https://dashboard.web3auth.io) |
-| `network` | `WEB3AUTH_NETWORK_TYPE` | Network specifies the web3auth network to be used. |
-| `buildEnv?` | `BUILD_ENV_TYPE` | This parameter will be used to change the build environment of auth sdk. |
-| `redirectUrl?` | `string` | redirectUrl is the dapp's url where user will be redirected after login. Register this url at "https://dashboard.web3auth.io" else initialization will give error. |
-| `uxMode?` | `UX_MODE_TYPE` | Either of the two `uxMode` values: `popup` or `redirect`. Use of `REDIRECT` mode is recommended in browsers where popups might get blocked. |
-| `replaceUrlOnRedirect?` | `boolean` | `replaceUrlOnRedirect` removes the params from the redirected url after login |
-| `originData?` | `OriginData` | `originData` contains a signature of dapp's origin url which is generated using project's secret. |
-| `loginConfig?` | `LoginConfig` | `loginConfig` is key value map where each key should be a valid loginProvider and value should be custom configuration for that loginProvider. |
-| `webauthnTransports?` | `AuthenticatorTransport[]` | `webauthnTransports` enables you to configure the transport type user can use for saving their share. |
-| `whiteLabel?` | `WhiteLabelData` | `whiteLabel` is for whitelabling default auth modal. |
-| `storageServerUrl?` | `string` | `storageServerUrl` specifies a custom storage server url |
-| `storageKey?` | `"session" \| "local"` | `storageKey` setting to `local` will persist social login session across browser tabs. |
-| `sessionTime?` | `number` | How long should a login session last at a minimum in seconds. Maximum value of sessionTime can be 7 \* 86400 (30 days) |
-| `mfaSettings?` | `MfaSettings` | This parameter will be used to enable mfa factors and set priority on UI listing. |
-| `useMpc?` | `boolean` | This parameter will be used to use auth mpc |
-| `useCoreKitKey?` | `boolean` | This parameter will be used to select core kit key. |
-
-`BaseAdapterSettings`
-
-| Parameter | type |
-| ----------------- | ----------------------- |
-| `clientId` | `string` |
-| `sessionTime` | `number` |
-| `chainConfig` | `CustomChainConfig` |
-| `web3AuthNetwork` | `WEB3AUTH_NETWORK_TYPE` |
-| `useCoreKitKey` | `boolean` |
-
-
-
-
-
-```tsx
-setAdapterSettings(adapterSettings: Partial & {
- privateKeyProvider?: PrivateKeyProvider;
-}): void;
-
-export type PrivateKeyProvider = IBaseProvider;
-
-export type AuthOptions = {
- /**
- * You can get your clientId/projectId by registering your
- * dapp on {@link "https://dashboard.web3auth.io"| developer dashboard}
- */
- clientId: string;
- /**
- * network specifies the web3auth network to be used.
- */
- network: WEB3AUTH_NETWORK_TYPE;
- /**
- * This parameter will be used to change the build environment of auth sdk.
- * @defaultValue production
- */
- buildEnv?: BUILD_ENV_TYPE;
- /**
- * redirectUrl is the dapp's url where user will be redirected after login.
- *
- * @remarks
- * Register this url at {@link "https://dashboard.web3auth.io"| developer dashboard}
- * else initialization will give error.
- */
- redirectUrl?: string;
- /**
- * 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.
- *
- * @defaultValue `'POPUP'`
- * @remarks
- *
- * Use of `'REDIRECT'` mode is recommended in browsers where popups might get blocked.
- */
- uxMode?: UX_MODE_TYPE;
- /**
- * replaceUrlOnRedirect removes the params from the redirected url after login
- *
- * @defaultValue true
- */
- replaceUrlOnRedirect?: boolean;
- /**
- * originData is used to verify the origin of dapp by iframe.
- *
- * @internal
- * @remarks
- * You don't have to pass originData explicitly if you have registered your dapp at
- * {@link "https://dashboard.web3auth.io"| developer dashboard}.
- *
- * originData contains a signature of dapp's origin url which is generated using
- * project's secret.
- */
- originData?: OriginData;
- /**
- * 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
- *
- * @remarks
- * You can deploy your own verifiers from {@link "https://dashboard.web3auth.io"| developer dashboard}
- * to use here.
- *
- */
- loginConfig?: LoginConfig;
- /**
- * webauthnTransport enables you to configure the transport type user can use
- * for saving their share.
- *
- * @defaultValue ["internal"]
- *
- * @remarks
- * This is only available for v1 users.
- */
- webauthnTransports?: AuthenticatorTransport[];
- /**
- * sdkUrl is for internal development use only and is used to override the
- * `network` parameter.
- * @internal
- */
- sdkUrl?: string;
- /**
- * dashboardUrl is for internal development use only and is used to override the
- * `buildEnv` parameter.
- * @internal
- */
- dashboardUrl?: string;
- /**
- * options for whitelabling default auth modal.
- */
- whiteLabel?: WhiteLabelData;
- /**
- * Specify a custom storage server url
- * @defaultValue https://session.web3auth.io
- * @internal
- */
- storageServerUrl?: string;
- /**
- * setting to "local" will persist social login session across browser tabs.
- *
- * @defaultValue "local"
- */
- storageKey?: "session" | "local";
- /**
- * How long should a login session last at a minimum in seconds
- *
- * @defaultValue 86400 seconds
- * @remarks Max value of sessionTime can be 7 * 86400 (30 days)
- */
- sessionTime?: number;
- /**
- * This option is for internal use only in torus wallet and has no effect
- * on user's login on other dapps.
- * @internal
- */
- sessionNamespace?: string;
- /**
- * This parameter will be used to enable mfa factors and set priority on UI listing.
- * List of factors available
- * backUpShareFactor | socialFactor | passwordFactor | authenticatorFactor
- * @defaultValue false
- */
- mfaSettings?: MfaSettings;
- /**
- * This parameter will be used to use auth mpc
- * @defaultValue false
- */
- useMpc?: boolean;
- /**
- * This parameter will be used to select core kit key.
- * @defaultValue false
- */
- useCoreKitKey?: boolean;
-};
-
-export interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
- useCoreKitKey?: boolean;
-}
-```
-
-
-
-
-
-## Example
-
-### `@web3auth/modal`
-
-```tsx
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- uxMode: "redirect", // "redirect" | "popup"
- whiteLabel: {
- logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
- logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
- defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
- mode: "dark", // whether to enable dark, light or auto mode. defaultValue: auto [ system theme]
- },
- // SCALE and above plan only feature
- mfaSettings: {
- deviceShareFactor: {
- enable: true,
- priority: 1,
- mandatory: true,
- },
- backUpShareFactor: {
- enable: true,
- priority: 2,
- mandatory: false,
- },
- socialBackupFactor: {
- enable: true,
- priority: 3,
- mandatory: false,
- },
- passwordFactor: {
- enable: true,
- priority: 4,
- mandatory: false,
- },
- },
- loginConfig: {
- // Add login configs corresponding to the providers on modal
- // Google login
- google: {
- verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
- typeOfLogin: "google", // Pass on the login provider of the verifier you've created
- clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
- },
- // Facebook login
- facebook: {
- verifier: "YOUR_FACEBOOK_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
- typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
- clientId: "FACEBOOK_CLIENT_ID_1234567890", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
- },
- // Add other login providers here
- },
- },
- loginSettings: {
- mfaLevel: "mandatory",
- },
-});
-web3auth.configureAdapter(authAdapter);
-
-// You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter instance.
-
-authAdapter.setAdapterSettings({
- web3AuthNetwork: "sapphire_mainnet",
- sessionTime: 3600, // 1 hour in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- clientId,
- redirectUrl: "http://localhost:3000",
-});
-```
-
-### `web3auth/no-modal`
-
-```tsx
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- network: "sapphire_mainnet",
- uxMode: "popup",
- whiteLabel: {
- appName: "W3A Heroes",
- appUrl: "https://web3auth.io",
- logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
- logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
- defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
- mode: "auto", // whether to enable dark mode. defaultValue: false
- theme: {
- primary: "#768729",
- },
- useLogoLoader: true,
- },
- // SCALE and above plan only feature
- mfaSettings: {
- deviceShareFactor: {
- enable: true,
- priority: 1,
- mandatory: true,
- },
- backUpShareFactor: {
- enable: true,
- priority: 2,
- mandatory: false,
- },
- socialBackupFactor: {
- enable: true,
- priority: 3,
- mandatory: false,
- },
- passwordFactor: {
- enable: true,
- priority: 4,
- mandatory: false,
- },
- },
- loginConfig: {
- jwt: {
- verifier: "web3auth-auth0-demo",
- typeOfLogin: "jwt",
- clientId: "294QRkchfq2YaXUbPri7D6PH7xzHgQMT",
- },
- },
- },
-});
-web3auth.configureAdapter(authAdapter);
-
-// You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter instance.
-
-authAdapter.setAdapterSettings({
- web3AuthNetwork: "sapphire_mainnet",
- sessionTime: 3600, // 1 hour in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- clientId,
- redirectUrl: "http://localhost:3000",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/coinbase.mdx b/docs/sdk/pnp/web/adapters/coinbase.mdx
deleted file mode 100644
index 0ac12ffe2..000000000
--- a/docs/sdk/pnp/web/adapters/coinbase.mdx
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: Coinbase Wallet Adapter
-sidebar_label: Coinbase Wallet
-description: "Web3Auth PnP Web Adapter SDKs - Coinbase | Documentation - Web3Auth"
----
-
-# Coinbase Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-The [`@web3auth/coinbase-adapter`](https://npmjs.com/package/@web3auth/coinbase-adapter) package
-enables you to connect with injected Coinbase wallet(Extension Wallet) and
-[Smart Wallet](https://www.smartwallet.dev/quick-start).
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/coinbase-adapter
-```
-
-## Parameters
-
-
-
-
-
-| Parameter | Description |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `chainConfig?` | Custom Chain Configuration you want to connect with. Defaults to `chainConfig` passed to `EthereumPrivateKeyProvider`. |
-| `adapterSettings?` | Adapter settings to fine-tune the connection preferences, you can refer to [CoinbaseWalletSDKOptions](https://www.smartwallet.dev/sdk/create-coinbase-wallet-sdk#parameters) documentation. The default connection mode is set to "all," which means that users can connect either their Coinbase Injected Wallet or the Smart Wallet. |
-| `clientId?` | Client Id for Web3Auth. You can get the client id from Web3Auth Dashboard. |
-| `sessionTime?` | Allows you to configure the connection validity. Defaults to `sessionTime` passed to `Web3AuthOptions`. |
-| `web3AuthNetwork?` | Allows you to configure the `Web3AuthNetwork`. Defaults to `web3AuthNetwork` passed to `Web3AuthOptions.` |
-
-
-
-
-
-```tsx
-interface CoinbaseAdapterOptions {
- chainConfig?: CustomChainConfig;
- adapterSettings?: CoinbaseWalletSDKOptions;
- clientId?: string;
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-## Usage
-
-```tsx
-import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";
-
-// focus-start
-const coinbaseAdapter = new CoinbaseAdapter({
- // This will only allow users to connect with Smart Wallet
- // By default, it's set to "all"
- adapterSettings: { options: "smartWalletOnly" },
-});
-// focus-end
-
-// Use your existing Web3Auth instance
-web3auth.configureAdapter(coinbaseAdapter);
-```
-
-## Use Smart Wallet Features
-
-The Web3Auth provider which is created using the Coinbase Wallet Adapter will be EIP 1193 compatible
-which means, you won't be able to use the Smart Wallet(ERC 4337) features directly
-
-To use the Smart Wallet ERC 4337 features, you can use the Web3Auth provider to send JSON-RPC
-requests to the Smart Wallet. For batching and paymaster feature, it uses EIP 5792
-`wallet_sendCalls` method. [Learn more about EIP 5792](https://eips.ethereum.org/EIPS/eip-5792).
-
-### Send Batch Requests
-
-```tsx
-// Retrive the Web3Auth provider once the connection is established
-const provider = web3auth.provider;
-
-const response = await provider.request({
- method: "wallet_sendCalls",
- params: [
- {
- version: "1.0",
- chainId: "0x01",
- from: address[0],
- calls: [
- {
- to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
- value: "0x9184e72a",
- data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
- },
- {
- to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
- value: "0x182183",
- data: "0xfbadbaf01",
- },
- ],
- },
- ],
-});
-```
-
-### Use Paymaster
-
-```tsx
-// Retrive the Web3Auth provider once the connection is established
-const provider = web3auth.provider;
-
-const response = await provider.request({
- method: "wallet_sendCalls",
- params: [
- {
- version: "1.0",
- chainId: "0x01",
- from: address[0],
- calls: [
- {
- to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
- value: "0x9184e72a",
- data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
- },
- ],
- capabilities: {
- paymasterService: {
- url: "YOUR_PAYMASTER_URL",
- },
- },
- },
- ],
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/default-evm-adapter.mdx b/docs/sdk/pnp/web/adapters/default-evm-adapter.mdx
deleted file mode 100644
index f422b52e0..000000000
--- a/docs/sdk/pnp/web/adapters/default-evm-adapter.mdx
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: Default EVM Adapter
-sidebar_label: Default EVM Adapter
-description: "Web3Auth PnP Web Adapter SDKs - Default EVM Adapter | Documentation - Web3Auth"
----
-
-# Default EVM Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-The [`@web3auth/default-evm-adapter`](https://npmjs.com/package/@web3auth/default-evm-adapter)
-package enables seamless detection of injected EVM wallets and WalletConnect-supported wallets,
-allowing interaction with just a single line of code.
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/default-evm-adapter
-```
-
-## Injected Wallets
-
-To automatically fetch all the available EVM wallets in browser context, you should use the
-`getInjectedAdapters` function. This function uses MIPD (EIP6163) so all available wallets in the
-browser will automatically be detected.
-
-In case of PnP Modal SDK, if no wallets are available, prompts users with an option to install one.
-Refer to the image below for details:
-
-
-
-### Parameter
-
-
-
-
-
-| Parameter | Description |
-| --------- | ------------------------------------------------------------------- |
-| `options` | Accepts `IWeb3AuthCoreOptions` used to initialize the Web3Auth SDK. |
-
-
-
-
-
-```tsx
-export declare const getInjectedAdapters: (params: {
- options: IWeb3AuthCoreOptions;
-}) => Promise[]>;
-```
-
-
-
-
-
-### Usage
-
-```tsx
-// focus-start
-import { getInjectedAdapters } from "@web3auth/default-evm-adapter";
-// focus-end
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-
-const chainConfig = {
- chainId: "0xaa36a7",
- displayName: "Ethereum Sepolia",
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- tickerName: "Ethereum Sepolia",
- ticker: "ETH",
- rpcTarget: "https://rpc.sepolia.org",
- blockExplorerUrl: "https://sepolia.etherscan.io",
- logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
-
-const web3AuthOptions: Web3AuthOptions = {
- clientId,
- chainConfig
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider: privateKeyProvider,
-};
-
-// focus-start
-const adapters = await getInjectedAdapters({ options: web3AuthOptions });
-
-adapters.forEach((adapter) => {
- web3auth.configureAdapter(adapter);
-});
-// focus-end
-```
-
-## WalletConnect-supported Wallets
-
-To list all the wallets supported by the WalletConnect list, you can use the
-`getDefaultExternalAdapters` function.
-
-In case of PnP Modal SDK, if no wallets are available, it provides an option to use the
-WalletConnect v2 to connect the wallet. Refer to the image below for details:
-
-
-
-### Parameter
-
-
-
-
-
-| Parameter | Description |
-| --------- | ------------------------------------------------------------------- |
-| `options` | Accepts `IWeb3AuthCoreOptions` used to initialize the Web3Auth SDK. |
-
-
-
-
-
-```tsx
-export declare const getDefaultExternalAdapters: (params: {
- options: IWeb3AuthCoreOptions;
-}) => Promise[]>;
-```
-
-
-
-
-
-### Usage
-
-```tsx
-// focus-start
-import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
-// focus-end
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-
-const chainConfig = {
- chainId: "0xaa36a7",
- displayName: "Ethereum Sepolia",
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- tickerName: "Ethereum Sepolia",
- ticker: "ETH",
- rpcTarget: "https://rpc.sepolia.org",
- blockExplorerUrl: "https://sepolia.etherscan.io",
- logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
-
-const web3AuthOptions: Web3AuthOptions = {
- clientId,
- chainConfig
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider: privateKeyProvider,
-};
-
-// focus-start
-const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
-
-adapters.forEach((adapter) => {
- web3auth.configureAdapter(adapter);
-});
-// focus-end
-```
diff --git a/docs/sdk/pnp/web/adapters/default-solana-adapter.mdx b/docs/sdk/pnp/web/adapters/default-solana-adapter.mdx
deleted file mode 100644
index abb4a6479..000000000
--- a/docs/sdk/pnp/web/adapters/default-solana-adapter.mdx
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Default Solana Adapter
-sidebar_label: Default Solana Adapter
-description: "Web3Auth PnP Web Adapter SDKs - Default Solana Adapter | Documentation - Web3Auth"
----
-
-# Default Solana Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-The [`@web3auth/default-solana-adapter`](https://npmjs.com/package/@web3auth/default-solana-adapter)
-package enables seamless detection of injected Solana wallets, allowing interaction with just a
-single line of code.
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/default-solana-adapter
-```
-
-## Injected Wallets
-
-To automatically fetch all the available Solana wallets in browser context, you can use the
-`getInjectedAdapters`, or `getDefaultExternalAdapters` function. This function uses Wallet Standard
-for Solana so all available wallets in the browser will automatically be detected.
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| --------- | ------------------------------------------------------------------- |
-| `options` | Accepts `IWeb3AuthCoreOptions` used to initialize the Web3Auth SDK. |
-
-
-
-
-
-```tsx
-export declare const getDefaultExternalAdapters: (params: {
- options: IWeb3AuthCoreOptions;
-}) => Promise[]>;
-
-export declare const getInjectedAdapters: (params: {
- options: IWeb3AuthCoreOptions;
-}) => Promise[]>;
-```
-
-
-
-
-
-### Usage
-
-
-
-
-
-```tsx
-// focus-start
-import { getDefaultExternalAdapters } from "@web3auth/default-solana-adapter";
-// focus-end
-import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
-
-const chainConfig = {
- chainId: "0x2",
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- rpcTarget: "https://api.devnet.solana.com",
- tickerName: "SOLANA",
- ticker: "SOL",
- decimals: 9,
- blockExplorerUrl: "https://explorer.solana.com/?cluster=devnet",
- logo: "https://images.toruswallet.io/sol.svg",
-};
-
-const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } });
-
-const web3AuthOptions: Web3AuthOptions = {
- clientId,
- chainConfig,
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider: privateKeyProvider,
-};
-
-// focus-start
-const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
-
-adapters.forEach((adapter) => {
- web3auth.configureAdapter(adapter);
-});
-// focus-end
-```
-
-
-
-
-
-```tsx
-// focus-start
-import { getInjectedAdapters } from "@web3auth/default-solana-adapter";
-// focus-end
-import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
-
-const chainConfig = {
- chainId: "0x2",
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- rpcTarget: "https://api.devnet.solana.com",
- tickerName: "SOLANA",
- ticker: "SOL",
- decimals: 9,
- blockExplorerUrl: "https://explorer.solana.com/?cluster=devnet",
- logo: "https://images.toruswallet.io/sol.svg",
-};
-
-const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } });
-
-const web3AuthOptions: Web3AuthOptions = {
- clientId,
- chainConfig,
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider: privateKeyProvider,
-};
-
-// focus-start
-const adapters = await getInjectedAdapters({ options: web3AuthOptions });
-
-adapters.forEach((adapter) => {
- web3auth.configureAdapter(adapter);
-});
-// focus-end
-```
-
-
-
diff --git a/docs/sdk/pnp/web/adapters/metamask.mdx b/docs/sdk/pnp/web/adapters/metamask.mdx
deleted file mode 100644
index b16d4db19..000000000
--- a/docs/sdk/pnp/web/adapters/metamask.mdx
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: Metamask Wallet Adapter
-sidebar_label: Metamask Wallet
-description: "Web3Auth PnP Web Adapter SDKs - Metamask | Documentation - Web3Auth"
----
-
-# Metamask Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## [`@web3auth/metamask-adapter`](https://npmjs.com/package/@web3auth/metamask-adapter)
-
-Metamask Adapter allows user to login with metamask wallet. You can read more about metamask wallet
-[here](https://docs.metamask.io/guide/).
-
-## Basic Details
-
-#### Adapter Name: `metamask`
-
-#### Package Name: [`@web3auth/metamask-adapter`](https://npmjs.com/package/@web3auth/metamask-adapter)
-
-#### authMode: `DAPP`
-
-#### chainNamespace: `EIP155`
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/metamask-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `chainConfig?` | `CustomChainConfig` |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface MetamaskAdapterOptions {
- chainConfig?: CustomChainConfig;
- clientId?: string;
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig`, it is not required since you can directly pass it over to
-`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `chainConfig?` | `CustomChainConfig` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-## Example
-
-```tsx
-import { MetamaskAdapter } from "@web3auth/metamask-adapter";
-const metamaskAdapter = new MetamaskAdapter({
- clientId,
- sessionTime: 3600, // 1 hour in seconds
- web3AuthNetwork: "sapphire_mainnet",
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
-});
-
-// it will add/update the metamask adapter in to web3auth class
-web3auth.configureAdapter(metamaskAdapter);
-
-// You can change the adapter settings by calling the setAdapterSettings() function on the adapter instance.
-metamaskAdapter.setAdapterSettings({
- sessionTime: 86400, // 1 day in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/phantom.mdx b/docs/sdk/pnp/web/adapters/phantom.mdx
deleted file mode 100644
index be18763b1..000000000
--- a/docs/sdk/pnp/web/adapters/phantom.mdx
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: Phantom Wallet Adapter
-sidebar_label: Phantom Wallet
-description: "Web3Auth PnP Web Adapter SDKs - Phantom | Documentation - Web3Auth"
----
-
-# Phantom Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## [`@web3auth/phantom-adapter`](https://npmjs.com/package/@web3auth/phantom-adapter)
-
-Phantom adapter allows you to connect with phantom wallet. You can read more about phantom wallet
-here.(https://docs.phantom.app/).
-
-## Basic Details
-
-#### Adapter Name: `phantom`
-
-#### Package Name: [`@web3auth/phantom-adapter`](https://npmjs.com/package/@web3auth/phantom-adapter)
-
-#### authMode: `DAPP`
-
-#### chainNamespace: `SOLANA`
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/phantom-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `chainConfig` | `CustomChainConfig` |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface PhantomAdapterOptions {
- chainConfig?: CustomChainConfig;
- clientId?: string;
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig`, it is not required since you can directly pass it over to the
-`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `chainConfig?` | `CustomChainConfig` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-## Example
-
-```tsx
-import { PhantomAdapter } from "@web3auth/phantom-adapter";
-const phantomAdapter = new PhantomAdapter({
- clientId,
- sessionTime: 3600, // 1 hour in seconds
- web3AuthNetwork: "sapphire_mainnet",
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- chainId: "0x1",
- rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
-});
-web3auth.configureAdapter(phantomAdapter);
-
-// You can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance.
-phantomAdapter.setAdapterSettings({
- sessionTime: 86400, // 1 day in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- chainId: "0x1",
- rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/solflare.mdx b/docs/sdk/pnp/web/adapters/solflare.mdx
deleted file mode 100644
index e43bcb7d1..000000000
--- a/docs/sdk/pnp/web/adapters/solflare.mdx
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: Solflare Wallet Adapter
-sidebar_label: Solflare Wallet
-description: "Web3Auth PnP Web Adapter SDKs - Solfare | Documentation - Web3Auth"
----
-
-# Solflare Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## [`@web3auth/solflare-adapter`](https://npmjs.com/package/@web3auth/solflare-adapter)
-
-Solflare adapter allows you to connect with solflare wallet. You can read more about solflare wallet
-here.(https://docs.solflare.com/solflare/).
-
-## Basic Details
-
-#### Adapter Name: `solflare`
-
-#### Package Name: [`@web3auth/solflare-adapter`](https://npmjs.com/package/@web3auth/solflare-adapter)
-
-#### authMode: `DAPP`
-
-#### chainNamespace: `SOLANA`
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/solflare-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `chainConfig` | `CustomChainConfig` |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface SolflareAdapterOptions {
- chainConfig?: CustomChainConfig;
- clientId?: string;
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig`, it is not required since you can directly pass it over to the
-`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `chainConfig?` | `CustomChainConfig` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-## Example
-
-```tsx
-import { SolflareAdapter } from "@web3auth/solflare-adapter";
-const solflareAdapter = new SolflareAdapter({
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- sessionTime: 3600, // 1 hour in seconds
- web3AuthNetwork: "sapphire_mainnet",
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- chainId: "0x1",
- rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
-});
-web3auth.configureAdapter(solflareAdapter);
-
-// You can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance.
-
-solflareAdapter.setAdapterSettings({
- sessionTime: 86400, // 1 day in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- chainId: "0x1",
- rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/torus-evm.mdx b/docs/sdk/pnp/web/adapters/torus-evm.mdx
deleted file mode 100644
index bcc78fe85..000000000
--- a/docs/sdk/pnp/web/adapters/torus-evm.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
----
-title: Torus EVM Wallet Adapter
-sidebar_label: Torus EVM Wallet
-description: "Web3Auth PnP Web Adapter SDKs - Torus EVM | Documentation - Web3Auth"
----
-
-# Torus EVM Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## [`@web3auth/torus-evm-adapter`](https://npmjs.com/package/@web3auth/torus-evm-adapter)
-
-Torus Wallet adapter allows to connect with torus wallet for evm chains. You can read more about
-torus wallet [here](https://docs.tor.us/wallet/get-started).
-
-## Basic Details
-
-#### Adapter Name: `torus-evm`
-
-#### Package Name: [`@web3auth/torus-evm-adapter`](https://npmjs.com/package/@web3auth/torus-evm-adapter)
-
-#### authMode: `DAPP`
-
-#### chainNamespace: `EIP155`
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/torus-evm-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | --------------------------------------------------------------------------------- |
-| `chainConfig` | `CustomChainConfig` |
-| `adapterSettings` | [`TorusCtorArgs`](https://docs.tor.us/wallet/api-reference/class) |
-| `loginSettings` | [`LoginParams`](https://docs.tor.us/wallet/api-reference/class) |
-| `initParams` | [`Omit `](https://docs.tor.us/wallet/api-reference/class) |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-// refer to https://docs.tor.us/wallet/api-reference/class to know more about interface field types
-interface TorusWalletOptions {
- adapterSettings?: TorusCtorArgs;
- loginSettings?: LoginParams;
- initParams?: Omit;
- chainConfig?: CustomChainConfig;
- clientId?: string;
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig` here, it is not required since you can directly pass it over
-to the `Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `chainConfig?` | `CustomChainConfig` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-## Example
-
-```tsx
-import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";
-
-const torusWalletAdapter = new TorusWalletAdapter({
- adapterSettings: {
- buttonPosition: "bottom-left",
- },
- loginSettings: {
- verifier: "google",
- },
- initParams: {
- buildEnv: "testing",
- },
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org",
- // Avoid using public rpcTarget in production.
- // Use services like Infura
- displayName: "Ethereum Mainnet",
- blockExplorer: "https://etherscan.io",
- ticker: "ETH",
- tickerName: "Ethereum",
- },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- sessionTime: 3600, // 1 hour in seconds
- web3AuthNetwork: "sapphire_mainnet",
-});
-
-// it will add/update the torus-evm adapter in to web3auth class
-web3auth.configureAdapter(torusWalletAdapter);
-
-// You can change the adapter settings by calling the setAdapterSettings() function on the adapter instance.
-torusWalletAdapter.setAdapterSettings({
- sessionTime: 86400, // 1 day in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/torus-solana.mdx b/docs/sdk/pnp/web/adapters/torus-solana.mdx
deleted file mode 100644
index da8e6bf8a..000000000
--- a/docs/sdk/pnp/web/adapters/torus-solana.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: Torus Solana Wallet Adapter
-sidebar_label: Torus Solana Wallet
-description: "Web3Auth PnP Web Adapter SDKs - Torus Solana | Documentation - Web3Auth"
----
-
-# Torus Solana Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-# [`@web3auth/torus-solana-adapter`](https://npmjs.com/package/@web3auth/torus-solana-adapter)
-
-Torus solana adapter allows to connect with torus wallet for solana blockchain. You can read more
-about torus wallet [here](https://docs.tor.us/solana-wallet/get-started).
-
-## Basic Details
-
-#### Adapter Name: `torus-solana`
-
-#### Package Name: [`@web3auth/torus-solana-adapter`](https://npmjs.com/package/@web3auth/torus-solana-adapter)
-
-#### authMode: `DAPP`
-
-#### chainNamespace: `SOLANA`
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/torus-solana-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | --------------------------------------------------------------------------------------- |
-| `chainConfig` | `CustomChainConfig` |
-| `adapterSettings` | [`TorusCtorArgs`](https://docs.tor.us/solana-wallet/api-reference/class) |
-| `loginSettings` | [`LoginParams`](https://docs.tor.us/solana-wallet/api-reference/class) |
-| `initParams` | [`Omit`](https://docs.tor.us/solana-wallet/api-reference/class) |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-// refer to https://docs.tor.us/solana-wallet/api-reference/class to know more about interface field types
-interface SolanaWalletOptions {
- adapterSettings?: TorusCtorArgs;
- loginSettings?: LoginParams;
- initParams?: Omit;
- chainConfig?: CustomChainConfig;
- clientId?: string;
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig`, it is not required since you can directly pass it over to the
-`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `chainConfig?` | `CustomChainConfig` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-## Example
-
-```tsx
-import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter";
-const solanaWalletAdapter = new SolanaWalletAdapter({
- adapterSettings: {
- modalZIndex: 99999,
- },
- loginSettings: {
- loginProvider: "google",
- },
- initParams: {
- buildEnv: "testing",
- },
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- rpcTarget: "https://api.mainnet-beta.solana.com",
- blockExplorer: "https://explorer.solana.com",
- chainId: "0x1", // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet
- displayName: "Solana Mainnet Beta",
- ticker: "sol",
- tickerName: "solana",
- },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- sessionTime: 3600, // 1 hour in seconds
- web3AuthNetwork: "sapphire_mainnet",
-});
-
-// it will add/update the torus-solana adapter in to web3auth class
-web3auth.configureAdapter(solanaWalletAdapter);
-
-// you can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance
-
-solanaWalletAdapter.setAdapterSettings({
- sessionTime: 86400, // 1 day in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.SOLANA,
- chainId: "0x1",
- rpcTarget: "https://api.mainnet-beta.solana.com", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/wallet-connect-v1.mdx b/docs/sdk/pnp/web/adapters/wallet-connect-v1.mdx
deleted file mode 100644
index 4cd5e1eb5..000000000
--- a/docs/sdk/pnp/web/adapters/wallet-connect-v1.mdx
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Wallet Connect V1 Adapter - Web3Auth
-sidebar_label: Wallet Connect V1
-description: "Web3Auth PnP Web Adapter SDKs - Wallet Connect v1 | Documentation - Web3Auth"
----
-
-# WalletConnect v1 Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-:::danger deprecated
-
-Wallet Connect V1 is going to be deprecated, please use
-[**Wallet Connect v2 Adapter**](/sdk/pnp/web/adapters/wallet-connect-v2).
-
-:::
-
-## [`@web3auth/wallet-connect-v1-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v1-adapter)
-
-Wallet connect v1 adapter allows you login with wallet connect v1. You can read more about wallet
-connect sunsetting [here](https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/overview).
-
-## Basic Details
-
-#### Adapter Name: `wallet-connect-v1`
-
-#### Package Name: [`@web3auth/wallet-connect-v1-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v1-adapter)
-
-#### authMode: `DAPP`
-
-#### chainNamespace: `EIP155`
-
-#### Default: `YES`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/wallet-connect-v1-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `adapterSettings?` | `IAdapterSettings` |
-| `chainConfig?` | `CustomChainConfig` |
-| `sessionTime?` | `number` |
-| `clientId?` | `string` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface WalletConnectV1AdapterOptions {
- adapterSettings?: IAdapterSettings;
- chainConfig?: CustomChainConfig;
- sessionTime?: number;
- clientId?: string;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig` here, but it is not required since you can directly pass it
-over to the `Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-### IAdapter Settings
-
-#### `adapterSettings`
-
-```tsx
-interface IAdapterSettings extends IWalletConnectOptions {
- skipNetworkSwitching?: boolean;
- networkSwitchModal?: INetworkSwitch;
-}
-
-interface IWalletConnectOptions {
- bridge?: string;
- uri?: string;
- storageId?: string;
- signingMethods?: string[];
- session?: IWalletConnectSession;
- storage?: ISessionStorage;
- clientMeta?: IClientMeta;
- qrcodeModal?: IQRCodeModal;
- qrcodeModalOptions?: IQRCodeModalOptions;
-}
-
-interface IQRCodeModal {
- open(uri: string, cb: any, opts?: any): void;
- close(): void;
-}
-
-interface IQRCodeModalOptions {
- registryUrl?: string;
- mobileLinks?: string[];
- desktopLinks?: string[];
-}
-```
-
-## Change Adapter Settings
-
-You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
-instance.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `clientId?` | `string` |
-| `sessionTime?` | `number` |
-| `chainConfig?` | `CustomChainConfig` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-
-
-
-
-
-```tsx
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: CustomChainConfig;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
-}
-```
-
-
-
-
-
-## Example
-
-```tsx
-import { WalletConnectV1Adapter } from "@web3auth/wallet-connect-v1-adapter";
-
-const walletConnectV1Adapter = new WalletConnectV1Adapter({
- adapterSettings: {
- bridge: "https://bridge.walletconnect.org",
- },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- sessionTime: 3600, // 1 day in seconds
-});
-
-web3auth.configureAdapter(walletConnectV1Adapter);
-
-// You can also change the adapter settings by calling the setAdapterSettings() function on the adapter instance.
-walletConnectV1Adapter.setAdapterSettings({
- sessionTime: 86400, // 1 day in seconds
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.EIP155,
- chainId: "0x1",
- rpcTarget: "https://rpc.ethereum.org", // This is the public RPC we have added, please pass on your own endpoint while creating an app
- },
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
diff --git a/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx b/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx
deleted file mode 100644
index caf631511..000000000
--- a/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: Wallet Connect V2 Adapter
-sidebar_label: Wallet Connect V2
-description: "Web3Auth PnP Web Adapter SDKs - Wallet Connect v2 | Documentation - Web3Auth"
----
-
-# WalletConnect v2 Adapter
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-:::info
-
-With Web3Auth Web SDK v9.2.0 and above, WalletConnect V2 Adapter can be used to log in with Solana
-chain namespace as well. Have a look at the example
-[here](/sdk/pnp/web/adapters/wallet-connect-v2#example).
-
-:::
-
-## [`@web3auth/wallet-connect-v2-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v2-adapter)
-
-Wallet connect v2 adapter allows you to log in with wallet connect v2. You can read more about
-Walletconnect [here](https://docs.walletconnect.com/).
-
-## Basic Details
-
-#### Adapter Name: `wallet-connect-v2`
-
-#### Package Name: [`@web3auth/wallet-connect-v2-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v2-adapter)
-
-#### chainNamespace: `EIP155`
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/wallet-connect-v2-adapter
-```
-
-## Arguments
-
-
-
-
-
-| Parameter | type |
-| ------------------ | ----------------------- |
-| `adapterSettings?` | `IAdapterSettings` |
-| `chainConfig?` | `CustomChainConfig` |
-| `sessionTime?` | `number` |
-| `clientId?` | `string` |
-| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
-| `useCoreKitKey?` | `boolean` |
-
-
-
-
-
-```tsx
-interface WalletConnectV2AdapterOptions extends BaseAdapterSettings {
- adapterSettings?: IAdapterSettings;
- loginSettings?: EngineTypes.ConnectParams;
-}
-interface BaseAdapterSettings {
- clientId?: string;
- sessionTime?: number;
- chainConfig?: Partial & Pick;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
- useCoreKitKey?: boolean;
-}
-```
-
-
-
-
-
-### Custom Chain Config
-
-#### `chainConfig`
-
-:::warning
-
-While you can pass your `chainConfig` here, it is not required since you can directly pass it over
-to the `Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.
-
-Read more about it in their respective sections:
-
-- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
-- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
-
-:::
-
-:::warning
-
-If you pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
-`Web3Auth`/ `Web3AuthNoModal` constructor.
-
-:::
-
-### IAdapter Settings
-
-#### `adapterSettings`
-
-```tsx
-interface IAdapterSettings {
- walletConnectInitOptions?: SignClientTypes.Options;
- qrcodeModal?: IQRCodeModal;
-}
-
-interface IQRCodeModal {
- openModal: (options?: OpenOptions) => Promise;
- closeModal: () => void;
-}
-interface OpenOptions {
- uri: string;
- chains?: string[];
-}
-```
-
-## getWalletConnectV2Settings
-
-You can get walletConnectV2 settings by calling the `getWalletConnectV2Settings()` function with its
-required arguments.
-
-### Arguments
-
-
-
-
-
-| Parameter | type |
-| ----------- | ---------------------------------------------------------------------- |
-| `namespace` | `ChainNamespaceType`, e.g. (`eip155`) |
-| `chainIds` | `string[]` e.g. ["1"] |
-| `projectID` | WalletConnect Project ID, get one from https://cloud.walletconnect.com |
-
-
-
-
-
-```tsx
-export declare const getWalletConnectV2Settings: (
- namespace: ChainNamespaceType,
- chainIds: string[],
- projectID: string,
-) => Promise<{
- adapterSettings: IAdapterSettings;
- loginSettings: EngineTypes.ConnectParams;
-}>;
-export interface IAdapterSettings {
- walletConnectInitOptions?: SignClientTypes.Options;
- qrcodeModal?: IQRCodeModal;
-}
-```
-
-
-
-
-
-## Example
-
-
-
-
-```tsx
-import { WalletConnectModal } from "@walletconnect/modal";
-import {
- getWalletConnectV2Settings,
- WalletConnectV2Adapter,
-} from "@web3auth/wallet-connect-v2-adapter";
-
-const defaultWcSettings = await getWalletConnectV2Settings(
- "eip155",
- ["1"],
- "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
-);
-const walletConnectModal = new WalletConnectModal({
- projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
-});
-const walletConnectV2Adapter = new WalletConnectV2Adapter({
- adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
- loginSettings: { ...defaultWcSettings.loginSettings },
-});
-
-web3auth.configureAdapter(walletConnectV2Adapter);
-```
-
-
-
-
-```tsx
-import { WalletConnectModal } from "@walletconnect/modal";
-import {
- getWalletConnectV2Settings,
- WalletConnectV2Adapter,
-} from "@web3auth/wallet-connect-v2-adapter";
-
-// adding wallet connect v2 adapter
-const defaultWcSettings = await getWalletConnectV2Settings(
- "solana",
- ["0x1"],
- "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
-);
-const walletConnectModal = new WalletConnectModal({
- projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
-});
-const walletConnectV2Adapter = new WalletConnectV2Adapter({
- adapterSettings: {
- qrcodeModal: walletConnectModal,
- ...defaultWcSettings.adapterSettings,
- },
- loginSettings: { ...defaultWcSettings.loginSettings },
-});
-
-web3auth.configureAdapter(walletConnectV2Adapter);
-```
-
-
-
diff --git a/docs/sdk/pnp/web/modal/account-abstraction.mdx b/docs/sdk/pnp/web/modal/account-abstraction.mdx
deleted file mode 100644
index f42412c9c..000000000
--- a/docs/sdk/pnp/web/modal/account-abstraction.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Account Abstraction
-sidebar_label: Account Abstraction
-description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
----
-
-import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
-import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
-import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx";
-import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
-import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
-import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
-import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
-import ConfigurePaymasterContext from "@site/src/common/sdk/pnp/web/_paymaster-context.mdx";
-import AAModalSetup from "@site/src/common/sdk/pnp/web/_aa-modal-setup.mdx";
-import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
-import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
-import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
-
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-
-
-
-## Installation
-
-
-
-## Configure
-
-
-
-Please note this is the important step for setting the Web3Auth account abstraction provider.
-
-- [Configure Smart Account provider](#configure-smart-account-provider)
-- [Configure Bundler](#configure-bundler)
-- [Configure Sponsored Paymaster](#sponsored-paymaster)
-- [Configure ERC-20 Paymaster](#erc-20-paymaster)
-
-## Configure Smart Account Provider
-
-
-
-## Configure Bundler
-
-
-
-## Configure Paymaster
-
-You can configure the paymaster of your choice to sponsor gas fees for your users, along with the
-paymaster context. The paymaster context lets you set additional parameters, such as choosing the
-token for ERC-20 paymasters, defining gas policies, and more.
-
-### Configure Paymaster Context
-
-
-
-### Sponsored Paymaster
-
-
-
-### ERC-20 Paymaster
-
-
-
-## Set up
-
-Once you have configured your AccountAbstractionProvider, you can now plug it in your Web3Auth Modal
-instance. If you are using the external wallets like MetaMask, Coinbase, etc, you can define whether
-you want to use the AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the
-`useAAWithExternalWallet` in `Web3AuthOptions`.
-
-If you are setting `useAAWithExternalWallet` to `true`, it'll create a new Smart Account for your
-user, where the signer/creator of the Smart Account would be the external wallet.
-
-If you are setting `useAAWithExternalWallet` to `false`, it'll skip creating a new Smart Account,
-and directly use the external wallet to sign the transactions.
-
-### Configure Web3Auth Instance
-
-
-
-### Configure Signer
-
-
-
-## Smart Account Address
-
-
-
-## Send Transaction
-
-
-
-## Advanced Smart Account Operations
-
-To learn more about supported transaction methods, and how to perform batch transactions,
-[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider/#send-batch-transaction).
diff --git a/docs/sdk/pnp/web/modal/custom-authentication.mdx b/docs/sdk/pnp/web/modal/custom-authentication.mdx
deleted file mode 100644
index 2bc514f50..000000000
--- a/docs/sdk/pnp/web/modal/custom-authentication.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Custom Authentication with PnP Web Modal SDK
-sidebar_label: Custom Authentication
-description: "@web3auth/modal Custom Authentication | Documentation - Web3Auth"
----
-
-import CustomAuthenticationWeb3AuthExample from "@site/src/common/sdk/pnp/web/_custom-authentication-web3auth-example.mdx";
-import LoginConfig from "@site/src/common/sdk/pnp/web/_login-config.mdx";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-[Custom Authentication](/features/custom-authentication) is a way to authenticate users with your
-custom authentication service. For example, while authenticating with Google, you can use your own
-Google Client ID to authenticate users directly.
-
-To enable this, you need to [Create a Verifier](/auth-provider-setup/verifiers) from the **Custom
-Authentication** tab of your project from the
-[Web3Auth Developer Dashboard](https://dashboard.web3auth.io) with your desired configuration.
-
-
-
-:::warning
-
-For Custom JWT-based authentication services, you need to use the
-[`Web3Auth Plug and Play NoModal SDK`](/sdk/pnp/web/no-modal), since the Web3Auth Modal will only
-help you configure the social logins present within the Modal UI.
-
-:::
-
-## Installing Auth Adapter
-
----
-
-Social logins in Web3Auth are enabled by the [`auth-adapter`](/sdk/pnp/web/adapters/auth). Natively,
-it is already present and preconfigured within the Plug and Play SDK, but for custom configurations,
-you need to install the adapter package.
-
-```bash npm2yarn
-npm install --save @web3auth/auth-adapter
-```
-
-## Configuring Auth Adapter
-
-While instantiating the Auth Adapter, you can pass some configuration objects to the constructor.
-One of these configurations is the `adapterSettings` configuration which enables you to make changes
-in the adapter, enabling you to do things like Whitelabeling and Custom Authentication among other
-things.
-
-:::tip
-
-Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on
-different configurations, you can pass for customizations.
-
-:::
-
-Further, the `loginConfig` parameter of the `adapterSettings` configuration helps us to customize
-the social logins. Since we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the
-`loginConfig` should correspond to the socials mentioned in the modal.
-
-#### `loginConfig`
-
-The `loginConfig` parameter of `adapterSettings` in `AuthAdapter` contains the following properties:
-
-
-
-## Example
-
-Since we're using the `@web3auth/modal` ie. the Plug and Play Modal SDK, the `loginConfig` should
-correspond to the socials mentioned in the modal.
-
-### Single Verifier
-
-
-
-### Aggregate Verifier
-
-```tsx
-import AuthAdapter from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- // focus-start
- loginConfig: {
- // Google login
- google: {
- verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here
- verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here
- typeOfLogin: "google", // Pass on the login provider of the verifier you've created
- clientId: "YOUR_GOOGLE_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID.
- },
- github: {
- verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here
- verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here
- typeOfLogin: "github", // Pass on the login provider of the verifier you've created
- clientId: "YOUR_GITHUB_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID.
- jwtParameters: {
- domain: "YOUR_AUTH0_DOMAIN",
- verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
- isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive, else remove this line
- },
- },
- },
- // focus-end
- },
- privateKeyProvider,
-});
-web3auth.configureAdapter(authAdapter);
-```
diff --git a/docs/sdk/pnp/web/modal/examples.mdx b/docs/sdk/pnp/web/modal/examples.mdx
deleted file mode 100644
index c5558c2b7..000000000
--- a/docs/sdk/pnp/web/modal/examples.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Examples - PnP Web Modal SDK
-sidebar_label: Examples
-description: "@web3auth/modal Examples | Documentation - Web3Auth"
-hide_table_of_contents: true
----
-
-import Examples from "@site/src/components/Examples";
-import { pnpModalExamples } from "@site/src/common/maps";
-
-
diff --git a/docs/sdk/pnp/web/modal/initialize.mdx b/docs/sdk/pnp/web/modal/initialize.mdx
deleted file mode 100644
index ccbee165d..000000000
--- a/docs/sdk/pnp/web/modal/initialize.mdx
+++ /dev/null
@@ -1,304 +0,0 @@
----
-title: Initializing PnP Web Modal SDK
-sidebar_label: Initialize
-description: "@web3auth/modal initialize | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ExampleCards from "@theme/ExampleCards";
-import { pnpModalExamples, QUICK_START } from "@site/src/common/maps";
-import UIConfig from "@site/src/common/sdk/pnp/web/_ui-config.mdx";
-import UIConfigWhitelabelExample from "@site/src/common/sdk/pnp/web/_ui-config-whitelabel-example.mdx";
-import Web3AuthOptions from "@site/src/common/sdk/pnp/web/_web3auth-options.mdx";
-import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
-import ExternalWalletAdapters from "@site/src/common/sdk/pnp/web/_external-wallet-adapters.mdx";
-import AuthAdapterIntro from "@site/src/common/sdk/pnp/web/_auth-adapter-intro.mdx";
-import CustomAuthenticationWeb3AuthExample from "@site/src/common/sdk/pnp/web/_custom-authentication-web3auth-example.mdx";
-import PluginsIntro from "@site/src/common/sdk/pnp/web/_plugins-intro.mdx";
-import PluginsExample from "@site/src/common/sdk/pnp/web/_plugins-example.mdx";
-import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx";
-import InitModalConfigExample from "@site/src/common/sdk/pnp/web/_init-modal-config-example.mdx";
-import WhiteLabelData from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx";
-
-After Installation, the next step to use Web3Auth is to Initialize the SDK. However, the
-Initialization is a two-step process, with an additional two steps for customizations, i.e.
-
-- [Instantiation of Web3Auth](#instantiating-web3auth)
-- [Configuration of Adapters](#configuring-adapters) _(optional)_
-- [Configuration of Plugins](#configuring-plugins) _(optional)_
-- [Initialization of Modal](#initializing-modal)
-
-Please note that these are the most critical steps where you need to pass on different parameters
-according to the preference of your project. Additionally, If you wish to customize your Web3Auth
-Instance, Whitelabeling, Multi Factor Authentication and Custom Authentication have to be configured
-within this step.
-
-## Instantiating Web3Auth
-
-#### Import the `Web3Auth` class from `@web3auth/modal`
-
-```javascript
-import { Web3Auth } from "@web3auth/modal";
-```
-
-#### Assign the `Web3Auth` class to a variable
-
-```javascript
-const web3auth = new Web3Auth(Web3AuthOptions);
-```
-
-This Web3Auth constructor takes an object with `Web3AuthOptions` as input.
-
-### Arguments
-
-#### `Web3AuthOptions`
-
-
-
-### Adding a Custom Chain Configuration
-
-#### `chainConfig`
-
-
-
-:::tip
-
-Get the **Chain Config** for your preferred Blockchain from the
-[Connect Blockchain Reference](/connect-blockchain#reference-guides-for-blockchain-connections).
-
-:::
-
-### Adding a Private Key Provider
-
-#### `privateKeyProvider`
-
-`privateKeyProvider` parameter helps you to connect with various wallet SDKs. These are
-preconfigured RPC clients for different blockchains used to interact with the respective blockchain
-networks.
-
-:::note
-
-It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more
-in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers).
-
-:::
-
-You can choose between the following providers based on your usecase.
-
-- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm)
-- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana)
-- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl)
-- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common)
-
-
-
-
-
-```ts
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-```ts
-import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
-
-const privateKeyProvider = new SolanaPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-```ts
-import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider";
-
-const privateKeyProvider = new XrplPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-```ts
-import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
-
-const privateKeyProvider = new CommonPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-### Whitelabeling
-
-Within the `uiConfig` parameter, you can configure the Web3Auth Modal according to your
-application's requirements.
-
-:::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).
-
-:::
-
-#### `uiConfig`
-
-
-
-
-
-### Returns
-
-##### `Object`: The web3auth instance with all its methods and events.
-
-## Configuring Adapters
-
-An adapter is a pluggable package that implements an `IAdapter` interface for a wallet within
-Web3Auth. An adapter can be plugged in and out of web3auth modal. Each adapter exposes the provider
-on successful user login that can be used to invoke RPC calls on the wallet and on the connected
-blockchain. Web3Auth's modal UI supports a set of default adapters depending on the
-[`authMode`](/sdk/pnp/web/modal/initialize#web3authoptions) being used.
-
-:::info
-
-This step is generally optional. You don't have to configure any default adapter unless you want to
-override default configs for the adapter.
-
-Only those adapters that are marked are nondefault
-[in this table on the Adapters Documentation](/sdk/pnp/web/adapters/#currently-available-wallet-adapters)
-are required to be configured always based on the `authMode` you are using.
-
-:::
-
-### Configuring Auth Adapter [Social Logins]
-
-
-
-##### Usage
-
-Since we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the `loginConfig` should
-correspond to the socials mentioned in the modal. Here, we're customizing Google and Facebook to be
-custom verified, rest of all other socials will be the default. You can customize other social
-logins or remove them using the whitelabeling option.
-
-
-
-### Configuring External Wallet Adapters
-
-
-
-## Configuring Plugins
-
-:::info
-
-This step is totally optional. If you don't want to use any plugins, feel free to skip this section.
-
-:::
-
-
-
-## Initializing Modal
-
-#### `initModal()`
-
-The final step in the whole initialization process is the initialize the Modal from Web3Auth.
-
-This is done by calling the `initModal` function of the `web3auth` instance we created above.
-
-```javascript
-await web3auth.initModal(params);
-```
-
-### Arguments
-
-The `web3auth.initModal` takes an **optional** `params` config object as input.
-
-```javascript
-params?: {
- modalConfig?: Record;
-}
-```
-
-This `params` object further takes a `modalConfig` object using which you can configure the
-visibility of each adapter within the modal. Each modal config has the following configurations:
-
-##### `modalConfig`
-
-
-
-### Usage
-
-
-
-
-
-
-
-
-
-
-
-```javascript
-await web3auth.initModal();
-```
-
-
-
-
-
-## Quick Starts
-
- obj.type === QUICK_START)} />
diff --git a/docs/sdk/pnp/web/modal/initiate-topup.mdx b/docs/sdk/pnp/web/modal/initiate-topup.mdx
deleted file mode 100644
index 6e387262a..000000000
--- a/docs/sdk/pnp/web/modal/initiate-topup.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Topup your Wallet in PnP Web Modal SDK
-sidebar_label: Top-up Wallet
-description: "@web3auth/modal Topup your Wallet | Documentation - Web3Auth"
----
-
-import ShowCheckoutDoc from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup-doc.mdx";
-
-
diff --git a/docs/sdk/pnp/web/modal/install.mdx b/docs/sdk/pnp/web/modal/install.mdx
deleted file mode 100644
index d0f563d7a..000000000
--- a/docs/sdk/pnp/web/modal/install.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: "Installing PnP Web Modal SDK"
-sidebar_label: "Install"
-description: "Installing Web3Auth PnP Web Modal SDK | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## [`@web3auth/modal`](https://npmjs.com/package/@web3auth/modal)
-
-```bash npm2yarn
-npm install --save @web3auth/modal
-```
-
-### Add `@web3auth/base` to your project
-
-```bash npm2yarn
-npm install --save @web3auth/base
-```
-
-This package gives access to common types and interfaces for Web3Auth. This comes in handy by
-providing you with a standard way of importing the values you need to work with the SDKs. We highly
-recommend using it while working with `Typescript`.
-
-### Add a Provider to your project
-
-The `@web3auth/modal` package requires a private key provider to facilitate interaction with your
-preferred blockchain network. You can choose between the following providers based on your usecase.
-
-- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm)
-- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana)
-- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl)
-- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common)
-
-:::note
-
-It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more
-in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers).
-
-:::
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/ethereum-provider
-```
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/solana-provider
-```
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/xrpl-provider
-```
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/base-provider
-```
-
-
-
-
-
-## Troubleshooting
-
-### Bundler Issues: Missing Dependencies
-
-You might face issues mentioning that certain dependencies are missing within the browser
-environment. These are node dependencies that need to be polyfilled in your application, to enable
-Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
-building the app. We have created guides for different bundlers to help you with this issue:
-
-- Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
-- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
diff --git a/docs/sdk/pnp/web/modal/mfa.mdx b/docs/sdk/pnp/web/modal/mfa.mdx
deleted file mode 100644
index bbdaba27a..000000000
--- a/docs/sdk/pnp/web/modal/mfa.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: Multi Factor Authentication with PnP Web Modal SDK
-sidebar_label: Multi Factor Authentication
-description: "@web3auth/modal Multi Factor Authentication | Documentation - Web3Auth"
----
-
-import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx";
-import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx";
-import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx";
-
-At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an
-extra layer of protection that verifies your identity when accessing your account. To ensure
-ownership, you must provide two or more different backup factors. You have the option to choose from
-the device, social, backup factor (seed phrase), and password factors to guarantee access to your
-Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into
-three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can
-easily recover your account if you lose access to your original device or helps login into a new
-device.
-
-For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the
-MFA screen by setting the `mfaLevel` argument. You can enable or disable a backup factor and change
-their order. Currently, there are four values for `mfaLevel`:
-
-- `default`: presents the MFA screen every third login
-- `optional`: presents the MFA screen on every login, but you can skip it
-- `mandatory`: make it mandatory to set up MFA after login
-- `none`: skips the MFA setup screen
-
-:::caution Note
-
-If you are using default verifiers, your users may have set up MFA on other dApps that also use
-default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has
-enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
-
-:::
-
-{/* */}
-
-## Installing Auth Adapter
-
-Social logins in Web3Auth are enabled by the [`auth-adapter`](/sdk/pnp/web/adapters/auth). Natively,
-it is already present and preconfigured within the Plug and Play SDK, but for custom configurations,
-you need to install the adapter package.
-
-```bash npm2yarn
-npm install --save @web3auth/auth-adapter
-```
-
-## Configuring Auth Adapter
-
-While instantiating the Auth Adapter, you can pass some configuration objects to the constructor.
-One of these configurations is the `loginSettings` configuration which enables you to make changes
-in the adapter, enabling add more settings to your login function using web3auth.
-
-:::tip
-
-Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on
-different configurations you can pass for customisations.
-
-:::
-
-### Login Settings
-
-#### `loginSettings`
-
-
-
-```tsx title="Usage"
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- loginSettings: {
- mfaLevel: "mandatory", // default, optional, mandatory, none
- },
-});
-```
-
-### Adapter Settings
-
-#### `adapterSettings`
-
-
-
-##### `mfaSettings`
-
-
-
-
-
-```tsx title="Usage"
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- loginSettings: {
- mfaLevel: "mandatory", // default, optional, mandatory, none
- },
- adapterSettings: {
- // SCALE and above plan only feature
- mfaSettings: {
- deviceShareFactor: {
- enable: true,
- priority: 1,
- mandatory: true, // at least two factors are mandatory
- },
- backUpShareFactor: {
- enable: true,
- priority: 2,
- mandatory: true, // at least two factors are mandatory
- },
- socialBackupFactor: {
- enable: true,
- priority: 3,
- mandatory: false,
- },
- passwordFactor: {
- enable: true,
- priority: 4,
- mandatory: false,
- },
- passkeysFactor: {
- enable: true,
- priority: 5,
- mandatory: false,
- },
- authenticatorFactor: {
- enable: true,
- priority: 6,
- mandatory: false,
- },
- },
- },
-});
-```
-
-:::note Note
-
-- At least two factors are mandatory when setting up the mfaSettings.
-- If you set `mandatory: true` for all factors, the user must set up all four factors.
-- If you set `mandatory: false` for all factors, the user can skip setting up MFA. But at least two
- factors are mandatory.
-- If you set `mandatory: true` for some factors and `mandatory: false` for others, the user must set
- up the mandatory factors and can skip the optional factors. But, the user must set up at least two
- factors.
-- The `priority` field is used to set the order of the factors. The factor with the lowest priority
- will be the first factor to be set up. The factor with the highest priority will be the last
- factor to be set up.
-
-:::
diff --git a/docs/sdk/pnp/web/modal/modal-hooks.mdx b/docs/sdk/pnp/web/modal/modal-hooks.mdx
deleted file mode 100644
index f193fe487..000000000
--- a/docs/sdk/pnp/web/modal/modal-hooks.mdx
+++ /dev/null
@@ -1,305 +0,0 @@
----
-title: "React Hooks for PnP Modal SDK"
-sidebar_label: React Hooks
-description: "React Hooks for Web3Auth PnP Web Modal SDK | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-Web3Auth provides essential React hooks for Web3Auth Modal SDK for managing authentication, chain
-configuration, and user interactions within your application. These hooks can be directly imported
-from the `@web3auth/modal-react-hooks` package. Here's an example of how to import them:
-
-```jsx
-import { useWeb3Auth } from "@web3auth/modal-react-hooks";
-```
-
-For more information on React hooks, refer to the
-[official React documentation](https://react.dev/learn/reusing-logic-with-custom-hooks).
-
-### Available Hooks
-
-- `useWeb3Auth`: Provides access to the Web3Auth context initialized via the `Web3AuthProvider`
- component.
-
-### Hook Context Interface
-
-
-
-
-
-| Parameter | Description |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `isConnected` | Indicates whether a user is currently logged in or not. |
-| `provider` | The current provider, or `null` if not connected. |
-| `userInfo` | Information about the logged-in user. |
-| `isMFAEnabled` | Indicates whether Multi-Factor Authentication (MFA) is enabled or not. |
-| `isInitialized` | Indicates whether Web3Auth has been initialized or not. |
-| `status` | The current status of Web3Auth. Can take the following values: `NOT_READY`, `READY`, `CONNECTING`, `CONNECTED`, `DISCONNECTED`, `ERRORED`. |
-| `enableMFA(params?)` | Enables Multi-Factor Authentication for the user. Returns a Promise. |
-| `logout(params?)` | Logs out the user, with an optional cleanup parameter. Returns a Promise. |
-| `addAndSwitchChain` | Adds and switches to a new blockchain. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. |
-| `addPlugin` | Adds a plugin to the Web3Auth instance. Takes a `plugin` of type `IPlugin` as a parameter. |
-| `getPlugin` | Retrieves a plugin by name. Takes `pluginName` of type `string` as parameter. Returns an `IPlugin` or `null`. |
-| `authenticateUser` | Retrieves the idToken for the logged-in user. Returns a Promise. |
-| `addChain` | Adds a new blockchain configuration. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. |
-| `switchChain` | Switches to a specified blockchain by chain ID. Takes `params` of type `{ chainId: string }` as a parameter. Returns a Promise. |
-
-
-
-
-
-```tsx
-interface IBaseWeb3AuthHookContext {
- /**
- * Indicates whether a user is currently logged in or not.
- */
- isConnected: boolean;
- /**
- * The current provider, or `null` if not connected.
- */
- provider: IProvider | null;
- /**
- * Information about the logged-in user.
- */
- userInfo: Partial | null;
- /**
- * Indicates whether Multi-Factor Authentication (MFA) is enabled or not.
- */
- isMFAEnabled: boolean;
- /**
- * Indicates whether Web3Auth has been initialized or not.
- */
- isInitialized: boolean;
- /**
- * The current status of the Web3Auth adapter.
- */
- status: ADAPTER_STATUS_TYPE | null;
- /**
- * Enables Multi-Factor Authentication for the user.
- * @param params Optional parameters for enabling MFA.
- * @returns A Promise that resolves when MFA is enabled.
- */
- enableMFA(params?: LoginParams): Promise;
- /**
- * Logs out the user, with an optional cleanup parameter.
- * @param params Optional parameters for logging out.
- * @returns A Promise that resolves when the user is logged out.
- */
- logout(params?: { cleanup: boolean }): Promise;
- /**
- * Adds and switches to a new blockchain.
- * @param chainConfig Configuration for the new blockchain.
- * @returns A Promise that resolves when the chain is added and switched.
- */
- addAndSwitchChain(chainConfig: CustomChainConfig): Promise;
- /**
- * Adds a plugin to the Web3Auth instance.
- * @param plugin The plugin to add.
- */
- addPlugin(plugin: IPlugin): void;
- /**
- * Retrieves a plugin by name.
- * @param pluginName The name of the plugin.
- * @returns The plugin instance or `null` if not found.
- */
- getPlugin(pluginName: string): IPlugin | null;
- /**
- * Retrieves the idToken for the logged-in user.
- * @returns A Promise that resolves with the authenticated user's information.
- */
- authenticateUser(): Promise;
- /**
- * Adds a new blockchain configuration.
- * @param chainConfig Configuration for the new blockchain.
- * @returns A Promise that resolves when the chain is added.
- */
- addChain(chainConfig: CustomChainConfig): Promise;
- /**
- * Switches to a specified blockchain by chain ID.
- * @param params Parameters for switching the chain.
- * @returns A Promise that resolves when the chain is switched.
- */
- switchChain(params: { chainId: string }): Promise;
-}
-```
-
-
-
-
-
-### Web3AuthProvider
-
-The `Web3AuthProvider` component wraps the main component and injects the Web3Auth-related context
-into it. It takes the following properties as its context:
-
-
-
-
-
-| Parameter | Description |
-| ----------------- | --------------------------------------------------------------------- |
-| `web3AuthOptions` | Configuration options for Web3Auth. |
-| `adapters` | An array of adapters for connecting to different blockchain networks. |
-| `plugins` | An array of plugins to add additional functionality to Web3Auth. |
-
-
-
-
-
-```tsx
-export interface Web3AuthProviderProps {
- config: Web3AuthContextConfig;
-}
-
-export type Web3AuthContextConfig = {
- web3AuthOptions: IWeb3AuthCoreOptions;
- adapters?: IAdapter[];
- plugins?: IPlugin[];
-};
-
-export interface IWeb3AuthCoreOptions {
- clientId: string;
- chainConfig?: CustomChainConfig;
- enableLogging?: boolean;
- storageKey?: "session" | "local";
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
- useCoreKitKey?: boolean;
- uiConfig?: WhiteLabelData;
- privateKeyProvider?: IBaseProvider;
-}
-```
-
-
-
-
-
-:::info
-
-Please check out the [PnP Modal SDK references](/sdk/pnp/web/modal/initialize#arguments) for
-interfaces for the inner parameters.
-
-:::
-
-### Shared Methods Descriptions
-
-Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
-users. Further, you can use the native provider given by Web3Auth to connect the users to the
-respective blockchain network.
-
-Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples)_ returns the
-following functions:
-
-- **`init()`** - Initializes the Web3Auth instance.
-
- ```javascript
- await init();
- ```
-
- Returns:
-
- ```tsx
- init(): Promise;
- ```
-
-- **`connect()`** - Showing the Modal and Logging in the User.
-
- ```javascript
- await connect();
- ```
-
- Returns:
-
- ```tsx
- connect(): Promise;
- ```
-
- On successful login, the `connect` function returns an `IProvider` instance. You can use this
- provider to connect your user to the blockchain and make transactions.
-
-- **`provider()`** - Returns the native provider that can be used to make different blockchain
- transactions. Returns:
-
- ```js
- get provider(): IProvider | null;
- ```
-
-- **`connected()`** - Returns `true` or `false` depending on whether the web3auth instance is
- available or not. Returns:
-
- ```js
- get connected(): boolean;
- ```
-
-- **`getUserInfo()`** - Getting the User's Information.
-
- ```javascript
- const userInfo = await getUserInfo();
- ```
-
-- **`authenticateUser()`** - Getting the idToken from Web3Auth.
-
- ```javascript
- const idToken = await authenticateUser();
- ```
-
-- **`addChain()`** - Add chain config details to the connected adapter.
-
- ```javascript
- await addChain(chainConfig);
- ```
-
-- **`switchChain()`** - Switch chain as per chainId already added to chain config.
-
- ```javascript
- await switchChain({ chainId: "0x1" });
- ```
-
-- **`getAdapter()`** - Get the connected adapter instance.
-
- ```javascript
- const adapter = await getAdapter(adapterName);
- ```
-
-- **`configureAdapter()`** - Configure the adapter instance.
-
- ```javascript
- await configureAdapter(adapterConfig);
- ```
-
-- **`clearCache()`** - Clear the cache.
-
- ```javascript
- await clearCache();
- ```
-
-- **`addPlugin()`** - Add a plugin to Web3Auth.
-
- ```javascript
- await addPlugin(plugin);
- ```
-
-- **`logout()`** - Logging out the User.
- ```javascript
- await logout();
- ```
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/modal/modal.mdx b/docs/sdk/pnp/web/modal/modal.mdx
deleted file mode 100644
index 37ac072d8..000000000
--- a/docs/sdk/pnp/web/modal/modal.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: " Web3Auth PnP Web Modal SDK"
-sidebar_label: Overview
-description: " Web3Auth PnP Web Modal SDK | Documentation - Web3Auth"
----
-
-import ExampleCards from "@theme/ExampleCards";
-import { pnpModalExamples, QUICK_START } from "@site/src/common/maps";
-
-This package provides the main class for using the default Web3Auth Modal. The package includes all
-of our packages and gives you a simple way of implementing Web3Auth within your interface.
-Additionally, it is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence,
-you can still call all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal)
-package.
-
-## Requirements
-
-- This is a frontend SDK and can only run in a browser environment
-- Basic knowledge of JavaScipt
-- Supports all major JavaScript Frameworks, Libraries and Bundlers
-
-## Resources
-
-- [Quick Start](/quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0): Get Started
- with an easy to follow integration of Web3Auth
-
-- [Example Applications](./examples): Explore our example applications and try the SDK yourself.
-
-- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers.
-
-- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find
- the source code on our GitHub repository.
-
-- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community
- to get support from our team and other developers.
-
-## Quick Starts
-
- obj.type === QUICK_START)} />
diff --git a/docs/sdk/pnp/web/modal/show-wallet-connect.mdx b/docs/sdk/pnp/web/modal/show-wallet-connect.mdx
deleted file mode 100644
index ed7183ce1..000000000
--- a/docs/sdk/pnp/web/modal/show-wallet-connect.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Interoperability with WalletConnect in PnP Web Modal SDK
-sidebar_label: Show Wallet Connect Scanner
-description: "@web3auth/modal Interoperability with WalletConnect | Documentation - Web3Auth"
----
-
-import ShowWCScannerDoc from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner-doc.mdx";
-
-
diff --git a/docs/sdk/pnp/web/modal/usage.mdx b/docs/sdk/pnp/web/modal/usage.mdx
deleted file mode 100644
index d1e1da263..000000000
--- a/docs/sdk/pnp/web/modal/usage.mdx
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: Using PnP Web Modal SDK
-sidebar_label: Usage
-description: "@web3auth/modal Usage | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import AddChain from "@site/src/common/sdk/pnp/web/_add-chain.mdx";
-import ConnectBlockchain from "@site/src/common/sdk/pnp/web/_connect-blockchain.mdx";
-import GetIdTokenInfo from "@site/src/common/sdk/pnp/web/_get-idtoken-info.mdx";
-import GetUserInfo from "@site/src/common/sdk/pnp/web/_get-user-info.mdx";
-import EnableMFA from "@site/src/common/sdk/pnp/web/_enable-mfa.mdx";
-import ManageMFA from "@site/src/common/sdk/pnp/web/_manage-mfa.mdx";
-import LogOut from "@site/src/common/sdk/pnp/web/_logout.mdx";
-import SwitchChain from "@site/src/common/sdk/pnp/web/_switch-chain.mdx";
-import Status from "@site/src/common/sdk/pnp/web/_status-method.mdx";
-import Provider from "@site/src/common/sdk/pnp/web/_provider-method.mdx";
-import ConnectedAdapterName from "@site/src/common/sdk/pnp/web/_connected-adapter-name-method.mdx";
-import Connected from "@site/src/common/sdk/pnp/web/_connected-method.mdx";
-
-Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
-users. Further, you can use the native provider given by Web3Auth to connect the users to the
-respective blockchain network.
-
-Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples)_ returns the
-following functions:
-
-- `connect()` - Showing the Modal and Logging in the User
-- `getUserInfo()` - Getting the User's Information
-- `enableMFA()` - Enable Multi Factor Authentication for the user
-- `manageMFA()` - Redirect the user to manage their MFA settings in the Web3Auth Account Dashboard
-- `authenticateUser()` - Getting the idToken from Web3Auth
-- `addChain()` - Add chain config details to the connected adapter.
-- `switchChain()` - Switch chain as per chainId already added to chain config.
-- `logout()` - Logging out the User
-
-Additionally the following methods are available to get information about the current state of the
-instance:
-
-- `connected` - Returns `true` or `false` depending on whether the user is connected or not.
-- `status` - Returns the current status of the web3auth instance.
-- `provider` - Returns the currently connected provider to the web3auth instance.
-- `connectedAdapterName` - Returns the currently connected provider to the web3auth instance.
-
-Finally, with the Wallet Services Plugin, you can enable additional functionalities like:
-
-- `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
-
-You can show the modal in the browser by calling `connect()` function on `web3auth` instance. Your
-user can choose their preferred login method and access your application.
-
-```javascript
-await web3auth.connect();
-```
-
-#### Returns
-
-```tsx
-connect(): Promise;
-```
-
-- On successful login, the `connect()` function returns a `IProvider` instance. This instance
- contains the respective provider corresponding to your selected blockchain. You can use this
- provider to connect your user to the blockchain and make transactions.
-- On unsuccessful login, this function will return a `null` value.
-
-:::tip
-
-Read more about connecting your users with the selected blockchain in the
-[Providers SDK Reference](/sdk/pnp/web/providers).
-
-:::
-
-### Check if the user is connected
-
-
-
-### Check which adapter is connected
-
-
-
-### Get the connected provider
-
-
-
-### Know the current status of the instance
-
-
-
-## Get User's Information
-
-
-
-## Enable Multi Factor Authentication (MFA)
-
-
-
-## Manage Multi Factor Authentication (MFA)
-
-
-
-## Get idToken for Backend Verification
-
-
-
-## Add EVM Blockchain to Instance
-
-
-
-## Switch to an EVM Blockchain
-
-
-
-## Logging out the User
-
-
-
-## Connecting to a Blockchain
-
-
-
-## Wallet Services Plugin Methods
-
-You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet
-UI Screen, Wallet Connect Scanner, and initiating topup for the user.
-
-:::tip
-
-Learn more about the Wallet Services Plugin in the
-[Wallet Services SDK Reference](../wallet-services/).
-
-:::
-
-### Show WalletConnect Scanner
-
-You can use the `showWalletConnectScanner` function to show the Wallet Connect Scanner, and connect
-with dApps having Wallet Connect login option. This is useful for interoperability with dApps having
-Wallet Connect login option.
-[Learn more about `showWalletConnectScanner`](/docs/sdk/pnp/web/wallet-services/usage#connect-dapps-with-wallet-connect).
-
-### Fiat On Ramp
-
-You can use the `showCheckout` function to show the TopUp modal, allowing users to select their
-local currency and specify the token to top up their wallet.
-[Learn more about `showCheckout`](/docs/sdk/pnp/web/wallet-services/usage#fiat-on-ramp).
-
-### Embedded Wallet UI
-
-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).
-
-### 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.
-[Learn more about transaction confirmation screens](/docs/sdk/pnp/web/wallet-services/usage#transaction-confirmation-screens).
diff --git a/docs/sdk/pnp/web/modal/whitelabel.mdx b/docs/sdk/pnp/web/modal/whitelabel.mdx
deleted file mode 100644
index b17052c75..000000000
--- a/docs/sdk/pnp/web/modal/whitelabel.mdx
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: Whitelabel Plug n Play Modal
-sidebar_label: Whitelabel
-description: "Whitelabel Web3Auth | Documentation - Web3Auth"
----
-
-import InitModalConfigExample from "@site/src/common/sdk/pnp/web/_init-modal-config-example.mdx";
-import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
-import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx";
-import AuthWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx";
-import AuthWhiteLabelExample from "@site/src/common/sdk/pnp/web/_auth-whitelabel-example.mdx";
-import PluginConfig from "@site/src/common/sdk/pnp/web/_plugin-config.mdx";
-import PluginsExample from "@site/src/common/sdk/pnp/web/_plugins-example.mdx";
-import UIConfig from "@site/src/common/sdk/pnp/web/_ui-config.mdx";
-import UIConfigWhitelabelExample from "@site/src/common/sdk/pnp/web/_ui-config-whitelabel-example.mdx";
-import WhiteLabelData from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx";
-
-Web3Auth is fully whitelabelable with application branding to have a consistent user experience. For
-Whitelabeling, there are three different aspects available for you. Web3Auth gives you the ability
-to define a custom UI, branding, and translations for your applications. All our SDKs support
-Whitelabeling, giving granular customization capability across all our offerings.
-
-:::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 **Growth Plan**. You can use this feature in
-`sapphire_devnet` for free.
-
-:::
-
-Within the Web3Auth Plug and Play Modal SDK, whitelabeling can happen in 3 different places,
-
-- [**Web3Auth Modal**](#web3auth-modal): You can whitelabel the Web3Auth Modal according to your
- needs, for this, you need to pass on the following parameters:
- - Within the [`uiConfig`](#uiconfig) parameter while instantiating Web3Auth, you can configure the
- Web3Auth Modal according to your application's requirements.
- - Change the visibility and order of methods appearing in Web3Auth modal by passing the
- [`modalConfig`](#modalconfig) in [`initModal`](#initmodal) function, while initializing the SDK.
-- [**Auth Adapter**](#auth-adapter): The redirect screens while logging in and constructing the key,
- can be customised according to your common as well. For this, you need to pass on the `whiteLabel`
- configuration parameter to the [`auth-adapter`](/sdk/pnp/web/adapters/auth).
-
-## Web3Auth Modal
-
-### NEW: Whitelabeling via the Dashboard
-
-From version `8.5.0`, **Web3Auth Modal Plug and Play SDK** offers whitelabeling capabilities via the
-**Dashboard**. This enables developers to customize the authentication modal, user interface, and
-translations to align with their application's branding and user experience requirements.
-
-- **Customize the Authentication Modal:** Modify the appearance of the authentication modal,
- including the primary color, application name, logo and dark or light mode, to align with your
- application's branding.
-- **Configure Language and Translations:** Customize the language and translations within the
- authentication flow to cater to your target audience.
-
- 
-
-### Whitelabeling while Web3Auth Instantiation
-
-:::tip
-
-Read more about Instantiating Web3Auth in the
-[Initialization SDK Reference](/sdk/pnp/web/modal/initialize#instantiating-web3auth)
-
-:::
-
-While instantiating Web3Auth, the constructor takes an object with `Web3AuthOptions` as input. The
-`Web3AuthOptions` object is further taken in the parameter of `uiConfig` which is the configuration
-for whitelabeling the Modal UI display properties.
-
-#### `uiConfig`
-
-
-
-#### `WhitelabelData`
-
-
-
-#### Example
-
-
-
-### Whitelabeling while Modal Initialization
-
-:::tip
-
-Read more about Initializing Web3Auth in the
-[Initialization SDK Reference](/sdk/pnp/web/modal/initialize#initializing-modal)
-
-:::
-
-While initializing the Web3Auth Modal, the `initModal()` function takes an object with `modalConfig`
-as input. This object helps you configure the different adapters available in the Web3Auth Modal.
-Further, the `modalConfig` object takes the parameter of `loginMethods` which helps you configure
-the social logins and their visibility in the modal.
-
-#### `initModal()`
-
-##### `modalConfig`
-
-
-
-#### Example
-
-
-
-## Auth Adapter
-
-Web3Auth's Social Logins and Email Login run using the Web3Auth Auth Flow. The whole login
-experience can also be whitelabeled using Auth Adapter settings. For this, you need to pass on the
-`whiteLabel` configuration parameter to the `adapterSettings` property of the
-[`auth-adapter`](/sdk/pnp/web/adapters/auth).
-
-:::tip
-
-Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on
-different configurations you can pass for customizations.
-
-:::
-
-
-
-
-### Example
-
-
-
-## Example
-
-The Web3Auth Plug and Play Modal offers a user-friendly interface that enables your dApp to connect
-with various login methods and adapters provided by Web3Auth. By whitelabeling the Login Modal, your
-dApp can maintain a consistent user experience. You can customize the theme, choose from 8+
-languages supported and provide your dApp name and brand logo, along with other options for detailed
-customization across all our offerings.
-
-
-
-## Arguments
-
-`uiConfig`
-
-You can pass the `uiConfig` parameters to `@web3auth/modal` to whitelabel your Web3Auth Login Modal.
-
-
-
-`WhiteLabelData`
-
-
-
-## Example
-
-```tsx
-import { Web3Auth } from "@web3auth/modal";
-import { CHAIN_NAMESPACES } from "@web3auth/base";
-
-const web3auth = new Web3Auth({
- // type uiConfig
- // focus-start
- uiConfig: {
- appName: "W3A",
- theme: {
- primary: "red",
- },
- mode: "dark",
- logoLight: "https://web3auth.io/images/web3auth-logo.svg",
- logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
- defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
- loginGridCol: 3,
- primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
- },
- // focus-end
- chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- web3AuthNetwork: "sapphire_mainnet",
-});
-```
-
-## uiConfig
-
-### appName
-
-
-
-### appLogo
-
-
-
-### theme
-
-
-
-### loginMethodsOrder
-
-
-
-### defaultLanguage
-
-#### en - English
-
-
-
-#### de - German
-
-
-
-#### ja - Japanese
-
-
-
-#### ko - Korean
-
-
-
-#### zh - Chinese (Mandarin)
-
-
-
-#### es - Spanish
-
-
-
-#### fr - French
-
-
-
-#### pt - Portuguese
-
-
-
-#### nl - Dutch
-
-
-
-### loginGridCol
-
-
-
-### primaryButton
-
-
-
-## More customization
-
-`initModal`
-
-### Disable few Social Login Methods
-
-```tsx
-import { Web3Auth } from "@web3auth/modal";
-import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
-
-const web3auth = new Web3Auth({
- chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- web3AuthNetwork: "sapphire_mainnet",
-});
-
-// focus-start
-await web3auth.initModal({
- modalConfig: {
- [WALLET_ADAPTERS.AUTH]: {
- label: "auth",
- loginMethods: {
- // Disable facebook and reddit
- facebook: {
- name: "facebook",
- showOnModal: false,
- },
- reddit: {
- name: "reddit",
- showOnModal: false,
- },
- },
- },
- },
-});
-// focus-end
-```
-
-### Disable Email or SMS Login Methods
-
-```tsx
-import { Web3Auth } from "@web3auth/modal";
-import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
-
-const web3auth = new Web3Auth({
- chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- web3AuthNetwork: "sapphire_mainnet",
-});
-
-// focus-start
-await web3auth.initModal({
- modalConfig: {
- [WALLET_ADAPTERS.AUTH]: {
- label: "auth",
- loginMethods: {
- // Disable email_passwordless and sms_passwordless
- email_passwordless: {
- name: "email_passwordless",
- showOnModal: false,
- },
- sms_passwordless: {
- name: "sms_passwordless",
- showOnModal: false,
- },
- },
- },
- },
-});
-// focus-end
-```
-
-### Disable External Wallet Options
-
-```tsx
-import { Web3Auth } from "@web3auth/modal";
-import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
-
-const web3auth = new Web3Auth({
- chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
- clientId:
- "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- web3AuthNetwork: "sapphire_mainnet",
-});
-
-// focus-start
-await web3auth.initModal({
- modalConfig: {
- // Disable Wallet Connect V2
- [WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
- label: "wallet_connect",
- showOnModal: false,
- },
- // Disable Metamask
- [WALLET_ADAPTERS.METAMASK]: {
- label: "metamask",
- showOnModal: false,
- },
- },
-});
-// focus-end
-```
diff --git a/docs/sdk/pnp/web/no-modal/account-abstraction.mdx b/docs/sdk/pnp/web/no-modal/account-abstraction.mdx
deleted file mode 100644
index 8932b3416..000000000
--- a/docs/sdk/pnp/web/no-modal/account-abstraction.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Account Abstraction
-sidebar_label: Account Abstraction
-description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth"
----
-
-import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
-import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
-import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx";
-import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
-import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
-import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
-import ConfigurePaymasterContext from "@site/src/common/sdk/pnp/web/_paymaster-context.mdx";
-import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
-import AANoModalSetup from "@site/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx";
-import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
-import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
-import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
-
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-
-
-
-## Installation
-
-
-
-## Configure
-
-
-
-Please note this is the important step for setting the Web3Auth account abstraction provider.
-
-- [Configure Smart Account provider](#configure-smart-account-provider)
-- [Configure Bundler](#configure-bundler)
-- [Configure Sponsored Paymaster](#sponsored-paymaster)
-- [Configure ERC-20 Paymaster](#erc-20-paymaster)
-
-## Configure Smart Account Provider
-
-
-
-## Configure Bundler
-
-
-
-## Configure Paymaster
-
-You can configure the paymaster of your choice to sponsor gas fees for your users, along with the
-paymaster context. The paymaster context lets you set additional parameters, such as choosing the
-token for ERC-20 paymasters, defining gas policies, and more.
-
-### Configure Paymaster Context
-
-
-### Sponsored Paymaster
-
-
-
-### ERC-20 Paymaster
-
-
-
-## Set up
-
-Once you have configured your AccountAbstractionProvider, you can now plug it in your Web3Auth Modal
-instance. If you are using the external wallets like MetaMask, Coinbase, etc, you can define whether
-you want to use the AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the
-`useAAWithExternalWallet` in `IWeb3AuthCoreOptions`.
-
-If you are setting `useAAWithExternalWallet` to `true`, it'll create a new Smart Account for your
-user, where the signer/creator of the Smart Account would be the external wallet.
-
-If you are setting `useAAWithExternalWallet` to `false`, it'll skip creating a new Smart Account,
-and directly use the external wallet to sign the transactions.
-
-### Configure Web3Auth Instance
-
-
-
-### Configure Signer
-
-
-
-## Smart Account Address
-
-
-
-## Send Transaction
-
-
-
-## Advanced Smart Account Operations
-
-To learn more about supported transaction methods, and how to perform batch transactions,
-[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider/#send-batch-transaction).
diff --git a/docs/sdk/pnp/web/no-modal/custom-authentication.mdx b/docs/sdk/pnp/web/no-modal/custom-authentication.mdx
deleted file mode 100644
index 25d1c1911..000000000
--- a/docs/sdk/pnp/web/no-modal/custom-authentication.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Custom Authentication with PnP Web No Modal SDK
-sidebar_label: Custom Authentication
-description: "Web3Auth PnP Web No Modal SDK - Custom Authentication | Documentation - Web3Auth"
----
-
-import ConnectTo from "@site/src/common/sdk/pnp/web/_connect-to.mdx";
-import ConnectToExample from "@site/src/common/sdk/pnp/web/_connect-to-example.mdx";
-import CustomAuthenticationCoreExample from "@site/src/common/sdk/pnp/web/_custom-authentication-core-example.mdx";
-import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options.mdx";
-import LoginConfig from "@site/src/common/sdk/pnp/web/_login-config.mdx";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-[Custom Authentication](/features/custom-authentication) is a way to authenticate users with your
-custom authentication service. For example, while authenticating with Google, you can use your own
-Google Client ID and Dashboard to authenticate users directly or use aggregator services like Auth0,
-Firebase, AWS Cognito etc. Additionally, you can make your own JWT token authentication system and
-pass the ID Token to Web3Auth to generate a private key for them.
-
-To enable this, you need to [Create a Verifier](/auth-provider-setup/verifiers) from the **Custom
-Authentication** tab of your project from the
-[Web3Auth Developer Dashboard](https://dashboard.web3auth.io) with your desired configuration.
-
-
-
-## Installing Auth Adapter
-
----
-
-Social logins in Web3Auth are enabled by the [`auth-adapter`](/sdk/pnp/web/adapters/auth). Natively,
-it is already present and preconfigured within the Plug and Play SDK, but for custom configurations,
-you need to install the adapter package.
-
-```bash npm2yarn
-npm install --save @web3auth/auth-adapter
-```
-
-## Configuring Auth Adapter
-
-While instantiating the Auth Adapter, you can pass some configuration objects to the constructor.
-One of these configurations is the `adapterSettings` configuration which enables you to make changes
-in the adapter, enabling you to do things like Whitelabeling and Custom Authentication among other
-things.
-
-:::tip
-
-Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on
-different configurations you can pass for customizations.
-
-:::
-
-#### `loginConfig`
-
-The `loginConfig` parameter of `adapterSettings` in `auth-adapter` contains the following
-properties:
-
-
-
-## Logging In
-
-While using the Web3Auth Plug and Play No Modal SDK, you have the option to use the `connectTo`
-function, which enables you to customize the login process according to the parameters you have for
-your custom authentication service.
-
-
-
-:::tip
-
-Know more about the `connectTo` function in the
-[`Usage SDK Reference`](/sdk/pnp/web/no-modal/usage#logging-in-the-user)
-
-:::
-
-:::important
-
-It is mandatory to pass the `idToken` parameter in the `extraLoginOptions` object when logging in
-through your [`Custom JWT Token`](/auth-provider-setup/byo-jwt-provider/).
-
-:::
-
-Further, to enable Custom Authentication, the `loginParams` parameter takes in another object called
-`extraLoginOptions` which contains the following properties:
-
-
-
-## Example
-
-Since we're using the `@web3auth/no-modal`, ie. the Plug and Play No Modal SDK, the `loginConfig`
-can include custom JWT-based authentication as well. This way, we can use any of our preferred login
-providers and further setup their configs while logging the user in and passing over the
-`extraLoginOptions` in the `connectTo` function.
-
-### Single Verifier
-
-
-
-
-
-### Aggregate Verifier
-
-```tsx
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- adapterSettings: {
- // focus-start
- loginConfig: {
- // Google login
- google: {
- verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here
- verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here
- typeOfLogin: "google", // Pass on the login provider of the verifier you've created
- clientId: "YOUR_GOOGLE_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID.
- },
- github: {
- verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here
- verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here
- typeOfLogin: "github", // Pass on the login provider of the verifier you've created
- clientId: "YOUR_GITHUB_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID.
- },
- },
- // focus-end
- },
- privateKeyProvider,
-});
-web3auth.configureAdapter(authAdapter);
-```
-
-```tsx
-// When user clicks Google button, use this to Login with Google
-const web3authProvider = await web3auth.connectTo("auth", {
- loginProvider: "google",
-});
-
-// When user clicks GitHub button, use this to Login with GitHub via Auth0
-const web3authProvider = await web3auth.connectTo("auth", {
- loginProvider: "github",
- extraLoginOptions: {
- domain: "YOUR_AUTH0_DOMAIN", // Pass the Auth0 Domain here, eg. https://web3auth.au.auth0.com
- // This corresponds to the field inside jwt which must be used to uniquely identify the user.
- verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD", // This is mapped b/w google and github logins.
- isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive, else remove this line
- },
-});
-```
diff --git a/docs/sdk/pnp/web/no-modal/examples.mdx b/docs/sdk/pnp/web/no-modal/examples.mdx
deleted file mode 100644
index 53603359c..000000000
--- a/docs/sdk/pnp/web/no-modal/examples.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Examples - PnP Web No Modal SDK
-sidebar_label: Examples
-description: "@web3auth/no-modal Examples | Documentation - Web3Auth"
-hide_table_of_contents: true
----
-
-import Examples from "@site/src/components/Examples";
-import { pnpNoModalExamples } from "@site/src/common/maps";
-
-
diff --git a/docs/sdk/pnp/web/no-modal/initialize.mdx b/docs/sdk/pnp/web/no-modal/initialize.mdx
deleted file mode 100644
index 36e3f531c..000000000
--- a/docs/sdk/pnp/web/no-modal/initialize.mdx
+++ /dev/null
@@ -1,257 +0,0 @@
----
-title: Initializing PnP Web No Modal SDK
-sidebar_label: Initialize
-description: "@web3auth/no-modal initialize | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ExampleCards from "@theme/ExampleCards";
-import { pnpNoModalExamples, QUICK_START } from "@site/src/common/maps";
-import WhiteLabelData from "@site/src/common/sdk/pnp/web/_ui-config.mdx";
-import UIConfigWhitelabelExample from "@site/src/common/sdk/pnp/web/_ui-config-whitelabel-example.mdx";
-import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
-import CustomAuthenticationCoreExample from "@site/src/common/sdk/pnp/web/_custom-authentication-core-example.mdx";
-import ExternalWalletAdapters from "@site/src/common/sdk/pnp/web/_external-wallet-adapters.mdx";
-import AuthAdapterIntro from "@site/src/common/sdk/pnp/web/_auth-adapter-intro.mdx";
-import PluginsIntro from "@site/src/common/sdk/pnp/web/_plugins-intro.mdx";
-import Web3AuthNoModalOptions from "@site/src/common/sdk/pnp/web/_web3authcore-options.mdx";
-
-After Installation, the next step to use Web3Auth is to Initialize the SDK.
-
-- [Instantiation of Web3AuthNoModal](#instantiating-web3authnomodal)
-- [Configuration of Adapters](#configuring-adapters)
-- [Configuration of Plugins](#configuring-plugins) _(optional)_
-- [Initialization of Web3Auth](#initializing-web3auth)
-
-Please note that these are the most critical steps where you need to pass on different parameters
-according to the preference of your project. Additionally, Whitelabeling, Multi Factor
-Authentication and Custom Authentication have to be configured within this step, if you wish to
-customize your Web3Auth Instance.
-
-## Instantiating Web3AuthNoModal
-
-#### Import the `Web3AuthNoModal` class from `@web3auth/no-modal`
-
-```javascript
-import { Web3AuthNoModal } from "@web3auth/no-modal";
-```
-
-#### Assign the `Web3AuthNoModal` class to a variable
-
-```javascript
-const web3auth = new Web3AuthNoModal(IWeb3AuthCoreOptions);
-```
-
-This Web3AuthNoModal constructor takes an object with `IWeb3AuthCoreOptions` as input.
-
-### Arguments
-
-#### `IWeb3AuthCoreOptions`
-
-
-
-### Adding a Custom Chain Configuration
-
-#### `chainConfig`
-
-
-
-:::tip
-
-Get the **Chain Config** for your preferred Blockchain from the
-[Connect Blockchain Reference](/connect-blockchain#reference-guides-for-blockchain-connections).
-
-:::
-
-### Adding a Private Key Provider
-
-#### `privateKeyProvider`
-
-`privateKeyProvider` parameter helps you to connect with various wallet SDKs. These are
-preconfigured RPC clients for different blockchains used to interact with the respective blockchain
-networks.
-
-:::note
-
-It's mandatory to provide `privateKeyProvider` for your corresponding chain namespace. To know more
-in-depth about providers, have a look at the [Providers reference](/sdk/pnp/web/providers).
-
-:::
-
-You can choose between the following providers based on your usecase.
-
-- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm)
-- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana)
-- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl)
-- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common)
-
-
-
-
-
-```ts
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthNoModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-```ts
-import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
-
-const privateKeyProvider = new SolanaPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthNoModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-```ts
-import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider";
-
-const privateKeyProvider = new XrplPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthNoModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-```ts
-import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
-
-const privateKeyProvider = new CommonPrivateKeyProvider({
- config: { chainConfig },
-});
-
-const web3auth = new Web3AuthNoModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- privateKeyProvider,
-});
-```
-
-
-
-
-
-### Whitelabeling
-
-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/no-modal/whitelabel).
-
-:::
-
-#### `WhiteLabelData`
-
-
-
-
-
-### Returns
-
-##### `Object`: The web3auth instance with all its methods and events.
-
-## Configuring Adapters
-
-An adapter in Web3Auth is a pluggable package that implements the `IAdapter` interface. Some, like
-`AuthAdapter`, extend the `BaseAdapter` class, which also implements `IAdapter`. Adapters can be
-plugged into or removed from the Web3Auth instance. After successful user login, each adapter
-exposes a provider to invoke RPC calls on the wallet and connected blockchain. You can configure and
-use any Web3Auth adapter when initializing Web3AuthNoModal.
-
-### Configuring Auth Adapter [Social Logins]
-
-
-
-##### Example
-
-Since we're using the `@web3auth/no-modal`, ie. the Plug and Play No Modal SDK, the `loginConfig`
-can include custom JWT-based authentication as well. This way, we can use any of our preferred login
-providers and further setup their configs while logging the user in and passing over the
-`extraLoginOptions` in the `connectTo` function. Read more about this in the
-[Custom Authentication Guide](/sdk/pnp/web/no-modal/custom-authentication).
-
-
-
-### Configuring External Wallet Adapters
-
-
-
-## Configuring Plugins
-
-:::info
-
-This step is optional. If you do not plan to use any plugins, you can skip this section.
-
-:::
-
-
-
-## Initializing Web3Auth
-
-#### `init()`
-
-The final step in the whole initialization process is the initialize the `Web3AuthNoModal` instance,
-ie. `web3auth` in our case.
-
-This is done by calling the `init` function of the `web3auth` instance we created above.
-
-```javascript
-await web3auth.init();
-```
-
-This is a simple function, that doesn't take any input, nor does return anything. It just makes sure
-that the `web3auth` instance is initialized and ready for the user to log in.
-
-:::note
-
-The Web3Auth No Modal React Hooks SDK doesn't require an additional step to init from v9 onwards,
-it's auto-inited.
-
-:::
-
-## Quick Starts
-
- obj.type === QUICK_START)} />
diff --git a/docs/sdk/pnp/web/no-modal/initiate-topup.mdx b/docs/sdk/pnp/web/no-modal/initiate-topup.mdx
deleted file mode 100644
index edcf2fb31..000000000
--- a/docs/sdk/pnp/web/no-modal/initiate-topup.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Topup your Wallet in PnP Web No Modal SDK
-sidebar_label: Top-up Wallet
-description: "Web3Auth PnP Web No Modal SDK - Topup your Wallet | Documentation - Web3Auth"
----
-
-import ShowCheckoutDoc from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup-doc.mdx";
-
-
diff --git a/docs/sdk/pnp/web/no-modal/install.mdx b/docs/sdk/pnp/web/no-modal/install.mdx
deleted file mode 100644
index 802136464..000000000
--- a/docs/sdk/pnp/web/no-modal/install.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: "Installing PnP Web No Modal SDK"
-sidebar_label: "Install"
-description: "Installing Web3Auth Plug and Play No Modal SDK | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-## [`@web3auth/no-modal`](https://npmjs.com/package/@web3auth/no-modal)
-
-```bash npm2yarn
-npm install --save @web3auth/no-modal
-```
-
-### Consider adding `@web3auth/base` to your project
-
-```bash npm2yarn
-npm install --save @web3auth/base
-```
-
-This package gives access to common types and interfaces for Web3Auth. This comes in handy by
-providing you a standard way of importing the values you need to work with the SDKs. We highly
-recommend using it while working with `typescript`.
-
-### Add a Provider to your project
-
-The `@web3auth/no-modal` package requires a private key provider to facilitate interaction with your
-preferred blockchain network. You can choose between the following providers based on your usecase.
-
-- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/pnp/web/providers/evm)
-- [Solana Private Key Provider for Solana Blockchain](/sdk/pnp/web/providers/solana)
-- [XRPL Private Key Provider for XRPL Blockchain](/sdk/pnp/web/providers/xrpl)
-- [Common Private Key Provider for Connecting to any Blockchain](/sdk/pnp/web/providers/common)
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/ethereum-provider
-```
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/solana-provider
-```
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/xrpl-provider
-```
-
-
-
-
-
-```bash npm2yarn
-npm install --save @web3auth/base-provider
-```
-
-
-
-
-
-## Troubleshooting
-
-### Bundler Issues: Missing Dependencies
-
-You might face issues mentioning that certain dependencies are missing within the browser
-environment. These are node dependencies that need to be polyfilled in your application, to enable
-Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
-building the app. We have created guides for different bundlers to help you with this issue:
-
-- Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
-- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
diff --git a/docs/sdk/pnp/web/no-modal/mfa.mdx b/docs/sdk/pnp/web/no-modal/mfa.mdx
deleted file mode 100644
index bfabd1b4e..000000000
--- a/docs/sdk/pnp/web/no-modal/mfa.mdx
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Multi Factor Authentication with PnP Web No Modal SDK
-sidebar_label: Multi Factor Authentication
-description:
- "Web3Auth PnP Web No Modal SDK - Multi Factor Authentication | Documentation - Web3Auth"
----
-
-import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx";
-import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx";
-import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx";
-
-At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an
-extra layer of protection that verifies your identity when accessing your account. To ensure
-ownership, you must provide two or more different backup factors. You have the option to choose from
-the device, social, backup factor (seed phrase), and password factors to guarantee access to your
-Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into
-three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can
-easily recover your account if you lose access to your original device or helps login into a new
-device.
-
-For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the
-MFA screen by setting the `mfaLevel` argument. You can enable or disable a backup factor and change
-their order. Currently, there are four values for `mfaLevel`:
-
-- `default`: presents the MFA screen every third login
-- `optional`: presents the MFA screen on every login, but you can skip it
-- `mandatory`: make it mandatory to set up MFA after login
-- `none`: skips the MFA setup screen
-
-:::caution Note
-
-If you are using default verifiers, your users may have set up MFA on other dApps that also use
-default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has
-enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
-
-:::
-
-
-
-## Installing Auth Adapter
-
-Social logins in Web3Auth are enabled by the [`auth-adapter`](/sdk/pnp/web/adapters/auth). Natively,
-it is already present and preconfigured within the Plug and Play SDK, but for custom configurations,
-you need to install the adapter package.
-
-```bash npm2yarn
-npm install --save @web3auth/auth-adapter
-```
-
-## Configuring Auth Adapter
-
-While instantiating the Auth Adapter, you can pass some configuration objects to the constructor.
-One of these configurations is the `loginSettings` configuration which enables you to make changes
-in the adapter, enabling add more settings to your login function using web3auth.
-
-:::tip
-
-Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on
-different configurations you can pass for customisations.
-
-:::
-
-### Login Settings
-
-#### `loginSettings`
-
-
-
-```tsx title="Usage"
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- loginSettings: {
- mfaLevel: "mandatory", // default, optional, mandatory, none
- },
-});
-```
-
-### Adapter Settings
-
-#### `adapterSettings`
-
-
-
-##### `mfaSettings`
-
-
-
-
-
-```tsx title="Usage"
-import { AuthAdapter } from "@web3auth/auth-adapter";
-
-const authAdapter = new AuthAdapter({
- loginSettings: {
- mfaLevel: "mandatory", // default, optional, mandatory, none
- },
- adapterSettings: {
- // SCALE and above plan only feature
- mfaSettings: {
- deviceShareFactor: {
- enable: true,
- priority: 1,
- mandatory: true, // at least two factors are mandatory
- },
- backUpShareFactor: {
- enable: true,
- priority: 2,
- mandatory: true, // at least two factors are mandatory
- },
- socialBackupFactor: {
- enable: true,
- priority: 3,
- mandatory: false,
- },
- passwordFactor: {
- enable: true,
- priority: 4,
- mandatory: false,
- },
- passkeysFactor: {
- enable: true,
- priority: 5,
- mandatory: false,
- },
- authenticatorFactor: {
- enable: true,
- priority: 6,
- mandatory: false,
- },
- },
- },
-});
-```
-
-:::note Note
-
-- At least two factors are mandatory when setting up the mfaSettings.
-- If you set `mandatory: true` for all factors, the user must set up all four factors.
-- If you set `mandatory: false` for all factors, the user can skip setting up MFA. But at least two
- factors are mandatory.
-- If you set `mandatory: true` for some factors and `mandatory: false` for others, the user must set
- up the mandatory factors and can skip the optional factors. But, the user must set up at least two
- factors.
-- The `priority` field is used to set the order of the factors. The factor with the lowest priority
- will be the first factor to be set up. The factor with the highest priority will be the last
- factor to be set up.
-
-:::
diff --git a/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx b/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx
deleted file mode 100644
index 3c79eece9..000000000
--- a/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx
+++ /dev/null
@@ -1,438 +0,0 @@
----
-title: "React Hooks for PnP No Modal SDK"
-sidebar_label: React Hooks
-description: " React Hooks for Web3Auth PnP Web No Modal SDK| Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-Web3Auth provides essential React hooks for Web3Auth No Modal SDK for managing authentication, chain
-configuration, and user interactions within your application. These hooks can be directly imported
-from the `@web3auth/no-modal-react-hooks` package. Here's an example of how to import them:
-
-```jsx
-import { useWeb3Auth } from "@web3auth/no-modal-react-hooks";
-```
-
-For more information on React hooks, refer to the
-[official React documentation](https://react.dev/learn/reusing-logic-with-custom-hooks).
-
-### Available Hooks
-
-- `useWeb3Auth`: Provides access to the Web3Auth context initialized via the `Web3AuthProvider`
- component.
-
-### Hook Context Interface
-
-
-
-
-
-| Parameter | Description |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `isConnected` | Indicates whether a user is currently logged in or not. |
-| `provider` | The current provider, or `null` if not connected. |
-| `userInfo` | Information about the logged-in user. |
-| `isMFAEnabled` | Indicates whether Multi-Factor Authentication (MFA) is enabled or not. |
-| `isInitialized` | Indicates whether Web3Auth has been initialized or not. |
-| `status` | The current status of Web3Auth. Can take the following values: `NOT_READY`, `READY`, `CONNECTING`, `CONNECTED`, `DISCONNECTED`, `ERRORED`. |
-| `enableMFA(params?)` | Enables Multi-Factor Authentication for the user. Returns a Promise. |
-| `logout(params?)` | Logs out the user, with an optional cleanup parameter. Returns a Promise. |
-| `addAndSwitchChain` | Adds and switches to a new blockchain. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. |
-| `addPlugin` | Adds a plugin to the Web3Auth instance. Takes a `plugin` of type `IPlugin` as a parameter. |
-| `getPlugin` | Retrieves a plugin by name. Takes `pluginName` of type `string` as parameter. Returns an `IPlugin` or `null`. |
-| `authenticateUser` | Retrieves the idToken for the logged-in user. Returns a Promise. |
-| `addChain` | Adds a new blockchain configuration. Takes `chainConfig` of type `CustomChainConfig` as a parameter. Returns a Promise. |
-| `switchChain` | Switches to a specified blockchain by chain ID. Takes `params` of type `{ chainId: string }` as a parameter. Returns a Promise. |
-
-
-
-
-
-```tsx
-interface IBaseWeb3AuthHookContext {
- /**
- * Indicates whether a user is currently logged in or not.
- */
- isConnected: boolean;
- /**
- * The current provider, or `null` if not connected.
- */
- provider: IProvider | null;
- /**
- * Information about the logged-in user.
- */
- userInfo: Partial | null;
- /**
- * Indicates whether Multi-Factor Authentication (MFA) is enabled or not.
- */
- isMFAEnabled: boolean;
- /**
- * Indicates whether Web3Auth has been initialized or not.
- */
- isInitialized: boolean;
- /**
- * The current status of the Web3Auth adapter.
- */
- status: ADAPTER_STATUS_TYPE | null;
- /**
- * Enables Multi-Factor Authentication for the user.
- * @param params - Optional login parameters.
- * @returns A Promise that resolves when the MFA is enabled.
- */
- enableMFA(params?: LoginParams): Promise;
- /**
- * Logs out the user, optionally performing cleanup.
- * @param params - Optional cleanup parameter.
- * @returns A Promise that resolves when the user is logged out.
- */
- logout(params?: { cleanup: boolean }): Promise;
- /**
- * Adds a new blockchain configuration and switches to it.
- * @param chainConfig - The configuration for the new blockchain.
- * @returns A Promise that resolves when the chain is added and switched to.
- */
- addAndSwitchChain(chainConfig: CustomChainConfig): Promise;
- /**
- * Adds a plugin to the Web3Auth instance.
- * @param plugin - The plugin to add.
- */
- addPlugin(plugin: IPlugin): void;
- /**
- * Retrieves a plugin by name.
- * @param pluginName The name of the plugin.
- * @returns The plugin instance or `null` if not found.
- */
- getPlugin(pluginName: string): IPlugin | null;
- /**
- * Retrieves the idToken for the logged-in user.
- * @returns A Promise that resolves with the authenticated user's information.
- */
- authenticateUser(): Promise;
- /**
- * Adds a new blockchain configuration.
- * @param chainConfig Configuration for the new blockchain.
- * @returns A Promise that resolves when the chain is added.
- */
- addChain(chainConfig: CustomChainConfig): Promise;
- /**
- * Switches to a specified blockchain by chain ID.
- * @param params Parameters for switching the chain.
- * @returns A Promise that resolves when the chain is switched.
- */
- switchChain(params: { chainId: string }): Promise;
-}
-```
-
-
-
-
-
-### Web3AuthProvider
-
-The `Web3AuthProvider` component wraps the main component and injects the Web3Auth-related context
-into it. It takes the following properties as its context:
-
-
-
-
-
-| Parameter | Description |
-| ----------------- | --------------------------------------------------------------------- |
-| `web3AuthOptions` | Configuration options for Web3Auth. |
-| `adapters` | An array of adapters for connecting to different blockchain networks. |
-| `plugins` | An array of plugins to add additional functionality to Web3Auth. |
-
-
-
-
-
-```tsx
-export interface Web3AuthProviderProps {
- config: Web3AuthContextConfig;
-}
-
-export type Web3AuthContextConfig = {
- web3AuthOptions: Web3AuthOptions;
- adapters?: IAdapter[];
- plugins?: IPlugin[];
-};
-
-export interface Web3AuthOptions extends IWeb3AuthCoreOptions {
- /**
- * Config for configuring modal ui display properties
- */
- uiConfig?: Omit;
- /**
- * Private key provider for your chain namespace
- */
- privateKeyProvider: IBaseProvider;
-}
-
-export interface IWeb3AuthCoreOptions {
- clientId: string;
- chainConfig?: CustomChainConfig;
- enableLogging?: boolean;
- storageKey?: "session" | "local";
- sessionTime?: number;
- web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
- useCoreKitKey?: boolean;
- uiConfig?: WhiteLabelData;
- privateKeyProvider?: IBaseProvider;
-}
-
-export interface UIConfig extends WhiteLabelData {
- /**
- * order of how login methods are shown
- *
- * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
- */
- loginMethodsOrder?: string[];
- /**
- * Z-index of the modal and iframe
- * @defaultValue 99998
- */
- modalZIndex?: string;
- /**
- * Whether to show errors on Web3Auth modal.
- *
- * @defaultValue `true`
- */
- displayErrorsOnModal?: boolean;
- /**
- * number of columns to display the Social Login buttons
- *
- * @defaultValue `3`
- */
- loginGridCol?: 2 | 3;
- /**
- * Decides which button will be the focus of the modal
- * For `socialLogin` the social icon will be colored
- * For other options like `emailLogin` and `externalLogin` the respective buttons will be coverted into a primary button
- *
- * @defaultValue `socialLogin`
- */
- primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
- adapterListener: SafeEventEmitter;
- /**
- * UX Mode for the auth adapter
- */
- uxMode?: UX_MODE_TYPE;
-}
-```
-
-
-
-
-
-:::info
-
-Please check out the [PnP No Modal SDK references](/sdk/pnp/web/no-modal/initialize#arguments) for
-interfaces for the inner parameters.
-
-:::
-
-### Shared Methods Descriptions
-
-Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
-users. Further, you can use the native provider given by Web3Auth to connect the users to the
-respective blockchain network.
-
-Natively, the instance of `Web3Auth` _(referred to as `web3auth` in our examples)_ returns the
-following functions:
-
-- **`init()`** - Initializes the Web3Auth instance.
-
- ```javascript
- await init();
- ```
-
- Returns:
-
- ```tsx
- init(): Promise;
- ```
-
-- **`connectTo(walletName, loginParams?)`** - Connect to a specific wallet adapter.
-
- ```javascript
- await connectTo(WALLET_ADAPTERS.AUTH, {
- loginProvider: "google",
- });
- ```
-
- Returns:
-
- ```tsx
- connectTo(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise;
- ```
-
- On successful login, the `connectTo` function returns an `IProvider` instance. You can use this
- provider to connect your user to the blockchain and make transactions.
-
-- **`provider()`** - Returns the native provider that can be used to make different blockchain
- transactions. Returns:
-
- ```js
- get provider(): IProvider | null;
- ```
-
-- **`connected()`** - Returns `true` or `false` depending on whether the web3auth instance is
- available or not. Returns:
-
- ```js
- get connected(): boolean;
- ```
-
-- **`getUserInfo()`** - Getting the User's Information.
-
- ```javascript
- const userInfo = await getUserInfo();
- ```
-
-- **`authenticateUser()`** - Getting the idToken from Web3Auth.
-
- ```javascript
- const idToken = await authenticateUser();
- ```
-
-- **`addChain()`** - Add chain config details to the connected adapter.
-
- ```javascript
- await addChain(chainConfig);
- ```
-
-- **`switchChain()`** - Switch chain as per chainId already added to chain config.
-
- ```javascript
- await switchChain({ chainId: "0x1" });
- ```
-
-- **`getAdapter()`** - Get the connected adapter instance.
-
- ```javascript
- const adapter = await getAdapter(adapterName);
- ```
-
-- **`configureAdapter()`** - Configure the adapter instance.
-
- ```javascript
- await configureAdapter(adapterConfig);
- ```
-
-- **`clearCache()`** - Clear the cache.
-
- ```javascript
- await clearCache();
- ```
-
-- **`addPlugin()`** - Add a plugin to Web3Auth.
-
- ```javascript
- await addPlugin(plugin);
- ```
-
-- **`logout()`** - Logging out the User.
- ```javascript
- await logout();
- ```
-
-### Usage
-
-```typescript title="App.tsx"
-import React from "react";
-import { Web3AuthProvider, useWeb3Auth } from "@web3auth/no-modal-react-hooks";
-import { web3AuthContextConfig } from "./web3AuthProviderProps";
-import { WALLET_ADAPTERS } from "@web3auth/base";
-
-const App = () => {
- const {
- init,
- connectTo,
- logout,
- isConnected,
- enableMFA,
- addAndSwitchChain,
- authenticateUser,
- addChain,
- switchChain,
- } = useWeb3Auth();
-
- React.useEffect(() => {
- const initialize = async () => {
- await init();
- };
- initialize();
- }, [init]);
-
- return (
-
-
-
- );
-};
-
-export default App;
-```
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/no-modal/no-modal.mdx b/docs/sdk/pnp/web/no-modal/no-modal.mdx
deleted file mode 100644
index 8d5ba4fd8..000000000
--- a/docs/sdk/pnp/web/no-modal/no-modal.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: "Web3Auth PnP Web No Modal SDK"
-sidebar_label: Overview
-description: "Web3Auth Plug and Play No Modal SDK | Documentation - Web3Auth"
----
-
-import ExampleCards from "@theme/ExampleCards";
-import { pnpNoModalExamples, QUICK_START } from "@site/src/common/maps";
-
-Web3Auth Plug and Play No Modal is the main SDK that consists of the core module of Web3Auth Plug
-and Play. This SDK gives you all the needed modules for implementing the Web3Auth features, giving
-you the flexibility of implementing your own UI to use all the functionalities. Since this package
-doesn't contain the UI Modal as compared to the [`@web3auth/modal`](/sdk/pnp/web/modal) package, the
-size of this package is smaller.
-
-## Requirements
-
-- This is a frontend SDK and can only run in a browser environment
-- Basic knowledge of JavaScipt
-- Supports all major JavaScript Frameworks, Libraries and Bundlers
-
-## Resources
-
-- [Quick Start](/quick-start?product=PNP&sdk=PNP_NO_MODAL&framework=REACT&stepIndex=0): Get Started
- with an easy to follow integration of Web3Auth
-
-- [Example Applications](./examples): Explore our example applications and try the SDK yourself.
-
-- [Troubleshooting](/troubleshooting): Find quick solutions to common issues faced by developers.
-
-- [Source Code](https://github.com/Web3Auth/web3auth-web/): Web3Auth is open sourced. You can find
- the source code on our GitHub repository.
-
-- [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community
- to get support from our team and other developers.
-
-## Quick Starts
-
- obj.type === QUICK_START)} />
diff --git a/docs/sdk/pnp/web/no-modal/show-wallet-connect.mdx b/docs/sdk/pnp/web/no-modal/show-wallet-connect.mdx
deleted file mode 100644
index 5595344f4..000000000
--- a/docs/sdk/pnp/web/no-modal/show-wallet-connect.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Interoperability with WalletConnect in PnP Web No Modal SDK
-sidebar_label: Show Wallet Connect Scanner
-description:
- "Web3Auth PnP Web No Modal SDK - Interoperability with WalletConnect | Documentation - Web3Auth"
----
-
-import ShowWCScannerDoc from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner-doc.mdx";
-
-
diff --git a/docs/sdk/pnp/web/no-modal/usage.mdx b/docs/sdk/pnp/web/no-modal/usage.mdx
deleted file mode 100644
index a1162b8c9..000000000
--- a/docs/sdk/pnp/web/no-modal/usage.mdx
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: Using PnP Web No Modal SDK
-sidebar_label: Usage
-description: "Web3Auth PnP Web No Modal SDK - Usage | Documentation - Web3Auth"
----
-
-import AddChain from "@site/src/common/sdk/pnp/web/_add-chain.mdx";
-import ConnectBlockchain from "@site/src/common/sdk/pnp/web/_connect-blockchain.mdx";
-import ConnectTo from "@site/src/common/sdk/pnp/web/_connect-to.mdx";
-import ConnectToExample from "@site/src/common/sdk/pnp/web/_connect-to-example.mdx";
-import Status from "@site/src/common/sdk/pnp/web/_status-method.mdx";
-import Provider from "@site/src/common/sdk/pnp/web/_provider-method.mdx";
-import ConnectedAdapterName from "@site/src/common/sdk/pnp/web/_connected-adapter-name-method.mdx";
-import Connected from "@site/src/common/sdk/pnp/web/_connected-method.mdx";
-import EnableMFA from "@site/src/common/sdk/pnp/web/_enable-mfa.mdx";
-import ManageMFA from "@site/src/common/sdk/pnp/web/_manage-mfa.mdx";
-import ExtraLoginOptions from "@site/src/common/sdk/pnp/web/_extra-login-options.mdx";
-import GetIdTokenInfo from "@site/src/common/sdk/pnp/web/_get-idtoken-info.mdx";
-import GetUserInfo from "@site/src/common/sdk/pnp/web/_get-user-info.mdx";
-import LogOut from "@site/src/common/sdk/pnp/web/_logout.mdx";
-import AuthLoginParams from "@site/src/common/sdk/pnp/web/_auth-login-params.mdx";
-import SwitchChain from "@site/src/common/sdk/pnp/web/_switch-chain.mdx";
-import WalletAdapters from "@site/src/common/sdk/pnp/web/_wallet-adapters.mdx";
-import InitiateTopUp from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx";
-import ShowWCScanner from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx";
-
-Once you've installed and successfully initialized `Web3AuthNoModal`, you can use it to authenticate
-your users. Further, you can use the native provider given by `Web3AuthNoModal` to connect the users
-to the respective blockchain network.
-
-Natively, the instance of `Web3AuthNoModal` _(referred to as `web3auth` in our examples)_ returns
-the following functions:
-
-- `connectTo()` - Logging in the User with the given Wallet Adapter and respective Login Parameters.
-- `getUserInfo()` - Getting the User's Information.
-- `enableMFA()` - Enable Multi Factor Authentication for the user.
-- `manageMFA()` - Redirect users to the Web3Auth Account Dashboard to manage their MFA settings.
-- `authenticateUser()` - Getting the idToken from Web3Auth.
-- `addChain()` - Add chain config details to the connected adapter.
-- `switchChain()` - Switch chain as per chainId already added to the chain config.
-- `logout()` - Logging out the User.
-- `getAdapter()` - Retrieve a specific wallet adapter by its name.
-- `configureAdapter()` - Configure a new or existing adapter.
-- `clearCache()` - Clear cached session information.
-
-Additionally, the following methods and properties are available to get or modify information about
-the current state of the instance:
-
-- `connected` - Returns `true` or `false` depending on whether the user is connected or not.
-- `status` - Returns the current status of the web3auth instance.
-- `provider` (getter/setter) - Returns or sets the currently connected provider to the web3auth
- instance.
-- `connectedAdapterName` - Returns the name of the currently connected adapter.
-
-You can also extend functionality by using the following plugin management functions:
-
-- `addPlugin()` - Add a plugin to extend the functionality of the Web3Auth instance.
-- `getPlugin()` - Retrieve an added plugin by name.
-
-Finally, with the Wallet Services Plugin, you can enable additional functionalities like:
-
-- `showWalletUI()` - Show Wallet UI Screen.
-- `initiateTopup()` - Initiate Topup for the user.
-- `showWalletConnectScanner()` - Show WalletConnect QR Code Scanner.
-
-## Logging in the User
-
-
-
-#### Returns
-
-```tsx
-connectTo(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise;
-```
-
-- On successful login, the `connectTo()` function returns a `IProvider` instance. This instance
- contains the respective provider corresponding to your selected blockchain. You can use this
- provider to connect your user to the blockchain and make transactions.
-
-- On unsuccessful login, this function will return a `null` value.
-
-### Usage
-
-
-
-:::tip
-
-You can use the `connectTo()` function to connect to the custom authentication verifiers you might
-have deployed on the Web3Auth Dashboard, as well as the default ones that Web3Auth provides. For the
-default verifiers, you don't need to provide any additional parameters, just pass on the login
-provider type.
-
-:::
-
-:::tip
-
-Read more about connecting your users with the selected blockchain in the
-[Providers SDK Reference](/sdk/pnp/web/providers).
-
-:::
-
-### Wallet Adapter Name
-
-#### `walletName`
-
-
-
-### Login Parameters
-
-#### `loginParams`
-
-The `loginParams` are specific for each and every function. Please refer to the
-[Adapters SDK Reference](/sdk/pnp/web/adapters) to know more about the login parameters specific to
-each wallet adapter.
-
-For `auth-adapter` which enables social logins, you can refer to the following `loginParams`.
-
-
-
-Further, for Custom Authentication, `ExtraLoginOptions` can be used to pass the standard OAuth login
-options.
-
-
-
-## Check if the user is connected
-
-
-
-## Check which adapter is connected
-
-
-
-## Get the connected provider
-
-
-
-## Know the current status of the instance
-
-
-
-## Get User's Information
-
-
-
-## Enable Multi Factor Authentication (MFA)
-
-
-
-## Manage Multi Factor Authentication (MFA)
-
-
-
-## Get idToken
-
-
-
-## Add Chain
-
-
-
-## Switch Chain
-
-
-
-## Logging out the User
-
-
-
-## Connecting to a Blockchain
-
-
-
-## Fetching the Connected Adapter
-
-
-
-## Wallet Services Plugin Methods
-
-You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet
-UI Screen, Wallet Connect Scanner, and initiating topup for the user.
-
-:::tip
-
-Learn more about the Wallet Services Plugin in the
-[Wallet Services SDK Reference](../wallet-services/).
-
-:::
-
-### Show WalletConnect Scanner
-
-You can use the `showWalletConnectScanner` function to show the Wallet Connect Scanner, and connect
-with dApps having Wallet Connect login option. This is useful for interoperability with dApps having
-Wallet Connect login option.
-[Learn more about `showWalletConnectScanner`](/docs/sdk/pnp/web/wallet-services/usage#connect-dapps-with-wallet-connect).
-
-### Fiat On Ramp
-
-You can use the `showCheckout` function to show the TopUp modal, allowing users to select their
-local currency and specify the token to top up their wallet.
-[Learn more about `showCheckout`](/docs/sdk/pnp/web/wallet-services/usage#fiat-on-ramp).
-
-### Embedded Wallet UI
-
-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
-
-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.
-[Learn more about transaction confirmation screens](/docs/sdk/pnp/web/wallet-services/usage#transaction-confirmation-screens).
diff --git a/docs/sdk/pnp/web/no-modal/whitelabel.mdx b/docs/sdk/pnp/web/no-modal/whitelabel.mdx
deleted file mode 100644
index 334399cfd..000000000
--- a/docs/sdk/pnp/web/no-modal/whitelabel.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Whitelabel PnP Web No Modal SDK
-sidebar_label: Whitelabel
-description: "Web3Auth PnP Web No Modal SDK - Whitelabel | Documentation - Web3Auth"
----
-
-import AuthWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_auth-whitelabel-config.mdx";
-import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
-import AuthWhiteLabelExample from "@site/src/common/sdk/pnp/web/_auth-whitelabel-example.mdx";
-import PluginConfig from "@site/src/common/sdk/pnp/web/_plugin-config.mdx";
-import PluginsExample from "@site/src/common/sdk/pnp/web/_plugins-example.mdx";
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-Web3Auth is fully whitelabelable with application branding to have a consistent user experience. All
-our SDKs support Whitelabeling, giving granular customization capability across all our offerings.
-The major benefit of the Plug and Play No Modal SDK is the flexibility in how you can make your own
-UI for triggering the login. Further, Whitelabeling enables you to customize the other aspects as
-well.
-
-
-
-### NEW: Whitelabeling via the Dashboard
-
-From version `8.5.0`, **Web3Auth's No Modal Plug and Play SDK** offers whitelabeling capabilities
-via the **Dashboard**. This enables developers to customize the logo, appName and translations to
-align with their application's branding and user experience requirements.
-
-- **Customize the Logo and App Name:** Modify the logo and application name to align with your
- application's branding.
-- **Configure Language and Translations:** Customize the language and translations within the
- authentication flow to cater to your target audience.
-
-
-
-Within the Web3Auth Plug and Play No Modal SDK, whitelabeling can happen in 2 different places,
-
-- [**Auth Adapter**](#auth-adapter): The redirect screens while logging in and constructing the key,
- can be customized according to your common as well. For this, you need to pass on the `whiteLabel`
- configuration parameter to the [`auth-adapter`](/sdk/pnp/web/adapters/auth).
-- [**uiConfig**](/sdk/pnp/web/no-modal/initialize#whitelabeling): The UI components can be
- customized using the `uiConfig` parameter while initializing the Web3AuthNoModal SDK.
-
-
-
-
-
-## Auth Adapter
-
-Web3Auth's Social Logins and Email Login run using the Auth Flow. The whole Auth user experience can
-also be whitelabeled using Auth Adapter settings. For this, you need to pass on the `whiteLabel`
-configuration parameter to the `adapterSettings` property of the
-[`auth-adapter`](/sdk/pnp/web/adapters/auth).
-
-:::tip
-
-Checkout the [`auth-adapter`](/sdk/pnp/web/adapters/auth) SDK Reference for more details on
-different configurations you can pass for customizations.
-
-:::
-
-### Example
-
-
-
-## uiConfig
-
-The UI components can be customized using the `uiConfig` parameter while initializing the
-Web3AuthNoModal SDK. The `uiConfig` parameter is a `WhiteLabelData` object which can be used to
-customize the UI components.
-
-### Example
-
-```tsx
-import { Web3AuthNoModal } from "@web3auth/no-modal";
-import { WhiteLabelData } from "@web3auth/base";
-
-// focus-start
-const uiConfig: WhiteLabelData = {
- appName: "My App",
- appURL: "https://example.com",
- logoLight: "https://example.com/logo-light.png",
- logoDark: "https://example.com/logo-dark.png",
- defaultLanguage: "en",
- mode: "light",
- useLogoLoader: true,
- theme: {
- primary: "#FF0000",
- secondary: "#00FF00",
- warning: "#FFA500",
- },
- tncLink: "https://example.com/terms",
- privacyPolicy: "https://example.com/privacy",
-};
-// focus-end
-
-const web3auth = new Web3AuthNoModal({
- clientId: "", // Get your Client ID from the Web3Auth Dashboard
- chainConfig,
- web3AuthNetwork: "sapphire_mainnet",
- privateKeyProvider,
- // focus-start
- uiConfig,
- // focus-end
-});
-```
diff --git a/docs/sdk/pnp/web/providers/aa-provider.mdx b/docs/sdk/pnp/web/providers/aa-provider.mdx
deleted file mode 100644
index 422beef6d..000000000
--- a/docs/sdk/pnp/web/providers/aa-provider.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Account Abstraction Provider
-sidebar_label: Account Abstraction Provider
-description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/providers/_aa-provider.mdx";
-
-
diff --git a/docs/sdk/pnp/web/providers/common.mdx b/docs/sdk/pnp/web/providers/common.mdx
deleted file mode 100644
index 2db229ba8..000000000
--- a/docs/sdk/pnp/web/providers/common.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Common Provider for PnP Web SDKs
-sidebar_label: Common Provider
-description: "Other Provider for Private Key | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/providers/_common.mdx";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/providers/evm.mdx b/docs/sdk/pnp/web/providers/evm.mdx
deleted file mode 100644
index 448ae433c..000000000
--- a/docs/sdk/pnp/web/providers/evm.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: EIP1193 (EVM) Private Key Provider for PnP Web SDKs
-sidebar_label: EVM Provider
-description: "EIP1193 Private Key Provider for EVM Compatible Chains | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/providers/_evm.mdx";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/providers/providers.mdx b/docs/sdk/pnp/web/providers/providers.mdx
deleted file mode 100644
index accce3681..000000000
--- a/docs/sdk/pnp/web/providers/providers.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Providers for PnP Web SDKs
-
-sidebar_label: Overview
-description: "Web3Auth Providers | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/providers/_providers.mdx";
-
-
diff --git a/docs/sdk/pnp/web/providers/solana.mdx b/docs/sdk/pnp/web/providers/solana.mdx
deleted file mode 100644
index 309a8736c..000000000
--- a/docs/sdk/pnp/web/providers/solana.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Solana Private Key Provider for PnP Web SDKs
-sidebar_label: Solana Provider
-description: "Solana Provider | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/providers/_solana.mdx";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/providers/xrpl.mdx b/docs/sdk/pnp/web/providers/xrpl.mdx
deleted file mode 100644
index ba07ae380..000000000
--- a/docs/sdk/pnp/web/providers/xrpl.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: XRPL Private Key Provider for PnP Web SDKs
-sidebar_label: XRPL Provider
-description: "XRPL Provider | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/providers/_xrpl.mdx";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/wagmi-connector.mdx b/docs/sdk/pnp/web/wagmi-connector.mdx
deleted file mode 100644
index 0ea59caac..000000000
--- a/docs/sdk/pnp/web/wagmi-connector.mdx
+++ /dev/null
@@ -1,311 +0,0 @@
----
-title: Wagmi Connector for Web3Auth PnP Web SDKs
-sidebar_label: Wagmi Connector
-description: Wagmi Connector for Web3Auth PnP Web SDKs | Documentation - Web3Auth
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx";
-import ExampleCards from "@theme/ExampleCards";
-import { examples } from "@site/src/common/maps";
-
-## [`@web3auth/web3auth-wagmi-connector`](https://npmjs.com/package/@web3auth/web3auth-wagmi-connector)
-
-**wagmi** is a collection of React Hooks containing everything you need to start working with
-Ethereum. `@web3auth/web3auth-wagmi-connector` is a connector for the popular
-[wagmi](https://github.com/tmm/wagmi) library to help you integrate web3auth plug and play packages.
-It works with both the `@web3auth/no-modal` as well as the `@web3auth/modal` packages.
-
-This package can be used to initialize a [wagmi client](https://wagmi.sh) that will seamlessly
-manage the interaction(wallet connection state and configuration, such as: auto-connection,
-connectors, and ethers providers) of your dApp with Web3Auth.
-
-:::tip DEMO
-
-Checkout the
-[Modal](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/wagmi-examples)
-Example Apps to see how wagmi works with Web3Auth.
-
-:::
-
-:::note
-
-This version of wagmi connector is made for `@wagmi/core` `v2.6.5`.
-
-:::
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/web3auth-wagmi-connector
-```
-
-## Initialization
-
-### Import the `Web3AuthConnector` class from `@web3auth/web3auth-wagmi-connector`
-
-```tsx
-import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
-```
-
-### Arguments
-
-#### `Web3AuthConnectorParams`
-
-
-
-
-
-| Parameter | Description |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `web3AuthInstance` | Pass the Web3Auth instance here. It's the mandatory field and accepts `IWeb3Auth` or `IWeb3AuthModal`. |
-| `loginParams?` | Login Parameters (only meant while using the `@web3auth/no-modal` package). It accepts `OpenloginLoginParams`. |
-| `modalConfig?` | Initialisation Parameters (only meant while using the `@web3auth/modal` package). It accepts `Record`. |
-
-
-
-
-
-```tsx
-export interface Web3AuthConnectorParams {
- web3AuthInstance: IWeb3Auth | IWeb3AuthModal;
- loginParams?: OpenloginLoginParams;
- modalConfig?: Record;
-}
-```
-
-
-
-
-
-##### `modalConfig`
-
-
-
-## Usage
-
-Since this package acts like a connector, it basically takes in your whole Web3Auth instance and
-makes it readable for the wagmi library. While connecting the web3auth web packages, you need to
-initialize the Web3Auth Instance as mentioned in the [modal docs](/sdk/pnp/web/modal/initialize) and
-[no-modal docs](/sdk/pnp/web/no-modal/initialize). You can configure this instance with all the
-options available in Web3Auth Modal package and set it up as you wish.
-
-### Modal SDK
-
-While all the parameters can be passed directly to the instance, the only parameters that remain
-during the initialisation remains (passed on to the `initModal()` function). You can pass these
-parameters to the `modalConfig` object in the `Web3AuthConnector` class.
-
-```tsx
-modalConfig: {
- [WALLET_ADAPTERS.AUTH]: {
- loginMethods: {
- google: {
- name: "google login",
- logoDark: "url to your custom logo which will shown in dark mode",
- },
- facebook: {...},
- },
- },
-}
-```
-
-#### Example
-
-### No Modal SDK
-
-While all the parameters can be passed directly to the instance, the only parameters that remain
-during the login remains (passed on to the `connectTo()` function). You can pass these parameters to
-the `loginParams` object in the `Web3AuthConnector` class.
-
-:::warning
-
-It is mandatory to pass `loginParams` object while using the connector with Web3Auth Core package.
-This is because the `connectTo()` function requires params to connect to the adapter/ social login
-desired by the user.
-
-:::
-
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'google',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'facebook',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: "jwt",
- extraLoginOptions: {
- id_token: "idToken", // in JWT Format
- verifierIdField: "sub", // same as your JWT Verifier ID
- }
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: "jwt",
- extraLoginOptions: {
- verifierIdField: "sub", // same as your JWT Verifier ID
- domain: "https://YOUR-APPLICATION-DOMAIN", // your Auth0 domain
- },
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'email_passwordless',
- extraLoginOptions: {
- login_hint: "hello@web3auth.io", // email to send the OTP to
- },
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'sms_passwordless',
- extraLoginOptions: {
- login_hint: "+65-XXXXXXX",
- }
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'reddit',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'discord',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'twitch',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'apple',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'github',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'linkedin',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'twitter',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'weibo',
-}
-```
-
-
-
-
-```tsx
-loginParams: {
- loginProvider: 'line',
-}
-```
-
-
-
-
-
-## Examples
-
-
diff --git a/docs/sdk/pnp/web/wallet-services/wallet-services-hooks.mdx b/docs/sdk/pnp/web/wallet-services/wallet-services-hooks.mdx
deleted file mode 100644
index ae904853e..000000000
--- a/docs/sdk/pnp/web/wallet-services/wallet-services-hooks.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "React Hooks for Wallet Services Plugin for PnP Web SDK"
-sidebar_label: React hooks
-description:
- "Web3Auth Wallet Services Plugin React Hooks for PnP Web SDK | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/wallet-services/_wallet-services-hooks.mdx";
-
-
diff --git a/docs/sdk/pnp/web/wallet-services/wallet-services.mdx b/docs/sdk/pnp/web/wallet-services/wallet-services.mdx
deleted file mode 100644
index 7c5eb70c3..000000000
--- a/docs/sdk/pnp/web/wallet-services/wallet-services.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Wallet Services Plugin for PnP Web SDK
-sidebar_label: Overview
-description: "Web3Auth - Wallet Services Plugin for PnP Web SDK | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/wallet-services/_wallet-services.mdx";
-
-
diff --git a/docs/sdk/pnp/web/web.mdx b/docs/sdk/pnp/web/web.mdx
deleted file mode 100644
index b63101765..000000000
--- a/docs/sdk/pnp/web/web.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Web3Auth PnP Web SDKs
-sidebar_label: Overview
-description: "Web3Auth PnP Web SDKs | Documentation - Web3Auth"
----
-
-In the Plug and Play product, we offer a modular package of Web3Auth which helps you connect the
-Social Logins (using Auth Adapter) alongside external wallet via a modular adapter interface. This
-helps you make Web3Auth, a one stop solution for all your authentication needs and get started
-quickly with your user onboarding journey. An adapter is just an extension/ connector of the
-underlying wallet to Web3Auth. This modular approach helps the package remain lightweight and easy
-to use, while providing you the flexibilty of using multiple underlying packages in an efficient
-way.
-
-For using Web3Auth in the web, you have two choices of SDKs to get started with.
-
-- **Web3Auth Plug and Play Modal SDK [`@web3auth/modal`](/sdk/pnp/web/modal/):** A simple and easy
- to use SDK that will give you a simple modular way of implementing Web3Auth directly within your
- application. You can use the pre-configured Web3Auth Modal UI and whitelabel it according to your
- needs.
-
-- **Web3Auth Plug and Play No Modal SDK [`@web3auth/no-modal`](/sdk/pnp/web/no-modal):** The core
- module implemeting all the Web3Auth features you need and giving you the flexibilty of using your
- own UI with the Web3Auth SDK working in the backend.
-
-## Web3Auth Plug and Play Modal SDK
-
-### [`@web3auth/modal`](/sdk/pnp/web/modal)
-
-This package provides main class for using default Web3Auth Modal. The package includes all of our
-packages and gives you a simple way of implementing Web3Auth within your interface. Additionally, it
-is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence, you can still call
-all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package.
-
-:::tip
-
-Head on to the [`@web3auth/modal` SDK Reference](/sdk/pnp/web/modal) section to get started.
-
-:::
-
-## Web3Auth Plug and Play No Modal SDK
-
-### [`@web3auth/no-modal`](/sdk/pnp/web/no-modal)
-
-This package provides the core logic for handling adapters within Web3auth. This package acts as a
-manager for all the wallet adapters we offer. You should use this package to build your custom login
-UI on top of Web3Auth. The SDK size for this is comparatively smaller than the Plug and Play Modal
-SDK, since it doesn't have the Web3Auth Modal UI within it.
-
-:::tip
-
-Head on to the [`web3auth/no-modal` SDK Reference](/sdk/pnp/web/no-modal) to get started.
-
-:::
-
-## Additional SDKs
-
-### Adapter packages
-
-Adapter acts as a connector between the Web3Auth and an underlying wallet provider. Web3Auth uses
-the default [`@web3auth/auth-adapter`](/sdk/pnp/web/adapters/auth) for social logins. For the rest
-of the external wallets, every adapter follows a common interface which is required by Web3Auth to
-communicate with the wallet.
-
-:::tip
-
-Checkout the [Adapters SDK Reference](/sdk/pnp/web/adapters) to learn more.
-
-Currently we have the following adapters available for utilisation:
-
-- [`@web3auth/auth-adapter`](/sdk/pnp/web/adapters/auth) _**- default** (Enables social logins)_
-- [`@web3auth/torus-evm-adapter`](/sdk/pnp/web/adapters/torus-evm)
-- [`@web3auth/torus-solana-adapter`](/sdk/pnp/web/adapters/torus-solana)
-- [`@web3auth/metamask-adapter`](/sdk/pnp/web/adapters/metamask)
-- [`@web3auth/phantom-adapter`](/sdk/pnp/web/adapters/phantom)
-- [`@web3auth/wallet-connect-v1-adapter`](/sdk/pnp/web/adapters/wallet-connect-v1)
-- [`@web3auth/coinbase-adapter`](/sdk/pnp/web/adapters/coinbase)
-- [`@web3auth/solflare-adapter`](/sdk/pnp/web/adapters/solflare)
-
-:::
-
-### wagmi Connector
-
-**wagmi** is a collection of React Hooks containing everything you need to start working with
-Ethereum. Web3Auth can be used with wagmi library to ease the integration process for a dApp using
-wagmi hooks.
-
-Simply use [`@web3auth/web3auth-wagmi-connector`](/sdk/pnp/web/wagmi-connector) which connects with
-both Modal and No Modal SDKs in your dApp to manage the interactions seamlessly.
-
-:::tip
-
-Head on to the [`@web3auth/web3auth-wagmi-connector`](/sdk/pnp/web/wagmi-connector) to get started.
-
-:::
-
-## Helper SDKs
-
-### Wallet Services
-
-Web3Auth Wallet Services offer modular, pluggable enhancements for your Web3Auth-integrated wallet,
-designed to elevate both functionality and user experience within your application. These services
-facilitate seamless integration, providing a comprehensive set of features without necessitating
-additional UI development. From sophisticated wallet functionality to user engagement tools and
-efficient transaction management, Web3Auth Wallet Services are tailored to meet the needs of modern
-day dApp experiences.
-
-:::tip
-
-Head on to the [`@web3auth/wallet-services-plugin`](/sdk/pnp/web/wallet-services) to get started.
-
-:::
-
-### Provider packages
-
-For making RPC calls within your dApp, Web3Auth exposes respective providers for different chains.
-This provider can be used to interact with the connected chain using exposed functions within the
-provider. Currently Web3Auth supports providers for both EVM and Solana chains. For other chains,
-one can easily get the private key from the Web3Auth SDK.
-
-:::tip
-
-Checkout the [Providers SDK Reference](/sdk/pnp/web/providers) to learn more.
-
-- [For EVM based Chains `@web3auth/ethereum-provider`](/sdk/pnp/web/providers/evm)
-- [For Solana Blockchain `@web3auth/solana-provider`](/sdk/pnp/web/providers/solana)
-- [Common Key Provider for other Blockchains `@web3auth/base-provider`](/sdk/pnp/web/providers/common)
-
-:::
-
-### Common Types and Interfaces
-
-#### [`@web3auth/base`](https://npmjs.com/package/@web3auth/base)
-
-This package gives access to common types and interfaces for Web3Auth. This comes in handy by
-providing you a standard way of importing the values you need to work with the SDKs. We highly
-recommend using it while working with Typescript.
diff --git a/docs/sdk/sdk.mdx b/docs/sdk/sdk.mdx
index f6b51ebcc..b81726904 100644
--- a/docs/sdk/sdk.mdx
+++ b/docs/sdk/sdk.mdx
@@ -2,7 +2,7 @@
title: Explore Web3Auth SDKs
hide_table_of_contents: true
sidebar_label: SDK Reference
-displayed_sidebar: sdk_pnp_web
+displayed_sidebar: sdk_pnp_react
image: "images/docs-meta-cards/sdk-reference-card.png"
description: "SDK Reference | Documentation - Web3Auth"
---
diff --git a/docs/sdk/sfa/sfa-android/initialize.mdx b/docs/sdk/sfa/sfa-android/initialize.mdx
deleted file mode 100644
index ab0e2152a..000000000
--- a/docs/sdk/sfa/sfa-android/initialize.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Initializing Single Factor Auth Android SDK
-sidebar_label: Initialize
-description: "Web3Auth Single Factor Auth Android SDK - Initialize | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-import Instantiation from "@site/src/common/sdk/sfa/android/_sfa-android-instantiation.mdx";
-import Initialization from "@site/src/common/sdk/sfa/android/_sfa-android-initialization.mdx";
-
-Once you have installed the Web3Auth SDK, the next crucial step is to initialize it. This step
-requires passing various parameters that align with your project preferences. It's important to note
-that the initialization process is critical to the successful use of Web3Auth.
-
-## Parameters
-
-In your activity, create a `SingleFactorAuth` instance with `Web3AuthOptions`. You can define the
-Web3Auth network, client id, and other parameters during initialization.
-
-| Parameter | Description |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `network` | The Web3auth network is to be used by the SDK. Supported values are `Web3AuthNetwork.SAPPHIRE_MAINNET`, `Web3AuthNetwork.SAPPHIRE_DEVNET` ,`Web3AuthNetwork.MAINNET`, `Web3AuthNetwork.TESTNET`, `Web3AuthNetwork.CYAN`, and `Web3AuthNetwork.AQUA` |
-| `clientId` | The clientId for your Web3Auth project. You can get it from [Web3Auth dashboard](https://dashboard.web3auth.io/). |
-| `sessionTime` | Specifies the session duration in seconds. By default, the value is set to 86400 seconds (1 day), with a maximum session duration of up to 30 days. |
-| `serverTimeOffset` | Specify a custom server time offset. The default value is 0. |
-| `storageServerUrl?` | Specifies the storage server URL. The default value is `https://session.web3auth.io`. |
-| `whiteLabel?` | You can pass the white labeling options for web3auth. It helps you define your brand app's custom UI, and branding for the Wallet Services feature. The recommended way to configure the `whiteLabel` is through the Web3Auth Dashboard. [Learn how to configure the `whiteLabel` via Web3Auth Dashboard](/docs/features/whitelabel). |
-| `redirectUri?` | URL that Web3Auth will redirect API responses upon successful `request` method call. Please note, that it's mandatory to configure the `redirectUri` if you are using the `request` method. |
-
-## Create Instance
-
-
-
-## Initialize
-
-To initialize the SDK, you can use the `initialize` method. This method helps you initialize the SDK
-with existing session. After successful initialization, you can use the
-[getSessionData](./usage/#get-session-data) method to check if the user is logged in or not.
-
-
diff --git a/docs/sdk/sfa/sfa-android/install.mdx b/docs/sdk/sfa/sfa-android/install.mdx
deleted file mode 100644
index 5d59e4c69..000000000
--- a/docs/sdk/sfa/sfa-android/install.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: "Installing Single Factor Auth Android SDK"
-sidebar_label: "Install"
-description: "Web3Auth Single Factor Auth Android SDK - Install | Documentation - Web3Auth"
----
-
-import Install from "@site/src/common/sdk/sfa/android/_sfa-android-install.mdx";
-
-## Add Web3Auth to Gradle
-
-
-
-:::info Latest-SDK
-
-Check the
-**[latest version of Web3Auth's SFA Android SDK](https://github.com/Web3Auth/single-factor-auth-android/releases)**
-and update accordingly.
-
-:::
-
-## Permissions
-
-Open your app's `AndroidManifest.xml` file and add the INTERNET permission.
-
-Please note, the `` element must be a direct child of the `` root element
-
-```xml
-// focus-next-line
-
-```
diff --git a/docs/sdk/sfa/sfa-flutter/initialize.mdx b/docs/sdk/sfa/sfa-flutter/initialize.mdx
deleted file mode 100644
index 8693c2524..000000000
--- a/docs/sdk/sfa/sfa-flutter/initialize.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Initializing Single Factor Auth Flutter SDK
-sidebar_label: Initialize
-description: "Web3Auth Single Factor Auth Flutter SDK - Initialize | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-import Initialization from "@site/src/common/sdk/sfa/flutter/_sfa-flutter-initialization.mdx";
-
-After installation, the next step to use Web3Auth SFA Flutter is to initialize the SDK and is
-achieved by `init` method. This step requires passing various parameters that align with your
-project preferences. It's important to note that the initialization process is critical to the
-successful use of Web3Auth SFA Flutter.
-
-## Parameters
-
-The `init` method requires a `Web3AuthOptions` object. Please note that these are the important
-parameters to configure the SDK.
-
-
-
-
-
-| Parameter | Description |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `network` | The Web3auth network to be used by the SDK. Supported values are `Web3AuthNetwork.sapphire_mainnet`, `Web3AuthNetwork.sapphire_devnet`,`Web3AuthNetwork.mainnet`, `Web3AuthNetwork.testnet`, `Web3AuthNetwork.cyan`, and `Web3AuthNetwork.aqua` |
-| `clientId` | The client id for your Web3Auth project. You can get it from [Web3Auth dashboard](https://dashboard.web3auth.io/). |
-| `sessionTime` | Specifies the session duration in seconds. By default, the value is set to 86400 seconds (1 day), with a maximum session duration of up to 30 days. |
-
-
-
-
-
-```dart
-class Web3AuthOptions {
- final Web3AuthNetwork network;
- final String clientId;
- final int sessionTime;
-
- Web3AuthOptions(
- {required this.network,
- required this.clientId,
- this.sessionTime = 86400});
-
- Map toJson() {
- return {
- 'network': network.name,
- 'clientId': clientId,
- 'sessionTime': sessionTime,
- };
- }
-}
-
-enum Web3AuthNetwork {
- mainnet,
- testnet,
- cyan,
- aqua,
- celeste,
- sapphire_testnet,
- sapphire_mainnet
-}
-```
-
-
-
-
-
-## Initialize Web3AuthFlutter
-
-To initialize the SDK, you can use the `init` method. Once, the SDK is initialized, you can use the
-`initialize` method to initialize the SDK with existing session. After successful initialization,
-you can use the `getSessionData` method to check if the user is logged in or not.
-
-Please note, the `initialize` method will throw an error if there is no active session present. You
-can swallow the error or handle it gracefully in your app.
-
-
diff --git a/docs/sdk/sfa/sfa-flutter/install.mdx b/docs/sdk/sfa/sfa-flutter/install.mdx
deleted file mode 100644
index 56b5becfb..000000000
--- a/docs/sdk/sfa/sfa-flutter/install.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: "Installing Single Factor Auth Flutter SDK"
-sidebar_label: "Install"
-description: "Web3Auth Single Factor Auth Flutter SDK - Install | Documentation - Web3Auth"
----
-
-import Pubspec from "@site/src/common/sdk/sfa/flutter/_sfa-flutter-pubspec-install.mdx";
-
-To install the [single_factor_auth_flutter](https://pub.dev/packages/single_factor_auth_flutter)
-package, you have two options. You can either manually add the package in the `pubspec.yaml` file,
-or you can use the `flutter pub add` command.
-
-Add `single_factor_auth_flutter` as a dependency to your `pubspec.yaml`.
-
-
-
-Add `single_factor_auth_flutter` using `flutter pub add` command.
-
-```sh
-flutter pub add single_factor_auth_flutter
-```
diff --git a/docs/sdk/sfa/sfa-flutter/usage.mdx b/docs/sdk/sfa/sfa-flutter/usage.mdx
deleted file mode 100644
index 2e468601e..000000000
--- a/docs/sdk/sfa/sfa-flutter/usage.mdx
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: "Using Single Factor Auth Flutter SDK"
-sidebar_label: "Usage"
-description: "Web3Auth Single Factor Auth Flutter SDK - Usage | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-import SessionManagement from "@site/src/common/sdk/sfa/flutter/_sfa-flutter-session-management.mdx";
-
-After successfully installing and initializing SingleFactorAuth, you can use it to authenticate your
-users and obtain their private and public keys.
-
-:::tip Note
-
-Web3Auth SFA Flutter SDK only works for users who have **not enabled MFA**. For MFA enabled users,
-you'll see an Error message.
-
-:::
-
-## Functionality Overview
-
-The SingleFactorAuth instance natively provides the following methods:
-
-| Method | Description |
-| ------------------------------------------ | ------------------------------------------------------------ |
-| [connect](#login-user) | Use to login user and retrieve private key pair. |
-| [logout](#logout-user) | Use to logout existing user. |
-| [connected](#check-users-logged-in-status) | Use to check whether the user is logged in or not. |
-| [getSessionData](#get-session-data) | This method helps to get the session data for valid session. |
-
-## Login User
-
-:::tip
-
-Please refer to the [Authentication](./authentication) section for more details on the setting up
-your verifier and other authentication parameters.
-
-:::
-
-To obtain a user's private key using the Web3Auth SFA Flutter SDK, you can call the `connect`
-method. The method accepts `LoginParams`, and returns `SFAKey`.
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The `verifier` parameter takes the name of the custom verifier from the Web3Auth Dashboard. This is a required field that must be a `String`. If you're using an aggregate verifier, make sure to pass the aggregate verifier name. |
-| `verifierId` | The `verifierID` takes the JWT verifier ID to be used for JWT/ID token verification. It can be an email, sub, or custom value available in the JWT token. |
-| `idToken` | The `idToken` accepts a JWT token obtained from the user's login provider. |
-| `subVerifierInfoArray?` | Sub verifier info. Usually used during the aggregate verifier. It takes `List` as a value. |
-
-
-
-
-
-```dart
-class LoginParams {
- final String verifier;
- final String verifierId;
- final String idToken;
- final String? aggregateVerifier;
-
- LoginParams({
- required this.verifier,
- required this.verifierId,
- required this.idToken,
- this.aggregateVerifier,
- });
-
- Map toJson() {
- return {
- 'verifier': verifier,
- 'verifierId': verifierId,
- 'idToken': idToken,
- 'aggregateVerifier': aggregateVerifier,
- };
- }
-}
-```
-
-
-
-
-### Usage
-
-
-
-
-```dart
-final loginParams = LoginParams(
- verifier: 'YOUR_VERIFIER_NAME',
- verifierId: 'YOUR_VERIFIER_ID',
- idToken: 'YOUR_ID_TOKEN',
-);
-
-try { final sessionData = await singleFactorAuthFlutter.connect(loginParams); } catch (e) { //
-Handle error }
-
-````
-
-
-
-```dart
-
-final subVerifierInfoArray = [
- TorusSubVerifierInfo(
- 'YOUR_SUB_VERIFIER_NAME',
- 'YOUR_ID_TOKEN',
- ),
-];
-
-final loginParams = LoginParams(
- verifier: 'YOUR_AGGREGATE_VERIFIER_NAME',
- verifierId: 'YOUR_VERIFIER_ID',
- idToken: 'YOUR_ID_TOKEN',
- subVerifierInfoArray: subVerifierInfoArray,
-);
-
-try {
- final sessionData = await singleFactorAuthFlutter.connect(loginParams);
-} catch (e) {
- // Handle error
-}
-````
-
-
-
-
-## Logout User
-
-To logout the current user, you can use the `logout` method. Please note, the method will not logout
-the user from the authentication provider, it'll only logout and invalidate the Web3Auth session.
-
-### Usage
-
-```dart
-try {
- await singleFactorAuthFlutter.logout();
- // Logged out successfully
-} catch (e) {
- // Handle error
-}
-```
-
-## Check User's Logged In Status
-
-You can use the `connected` method to check whether the user is logged in Web3Auth or not. Please
-note, you should call this method after the `initialize` method if you want to check the user's
-connection status for an existing session.
-
-### Usage
-
-```dart
-final isConnected = await singleFactorAuthFlutter.connected();
-```
-
-## Get Session Data
-
-We have included Session Management in this SDK, so calling the `getSessionData` will retrive the
-user's `SessionData` without re-logging in the user if a user has an active session. Otherwise, it
-will return `null`.
-
-:::tip
-
-Please note, you should use this method after the `initialize` method.
-
-:::
-
-### Usage
-
-
-
-### Response
-
-The `SessionData` has the following properties to retrive the relevant session information.
-
-| Name | Description |
-| --------------- | ------------------------------------------------------------------------- |
-| `privateKey` | Retrieves the user's private key. |
-| `publicAddress` | Retrieves the user's public address. |
-| `userInfo?` | Retrieves the user's information like email, name, verifier id, and more. |
-| `signatures?` | Retrieves the node's signatures that are returned for request. |
diff --git a/docs/sdk/sfa/sfa-ios/initialize.mdx b/docs/sdk/sfa/sfa-ios/initialize.mdx
deleted file mode 100644
index 0f4f4126a..000000000
--- a/docs/sdk/sfa/sfa-ios/initialize.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Initializing SFA Swift SDK
-sidebar_label: Initialize
-description: "Web3Auth SFA Swift SDK - Initialization | Documentation - Web3Auth"
----
-
-import Initialization from "@site/src/common/sdk/sfa/ios/_sfa-ios-initialization.mdx";
-
-After Installation, the next step to use Web3Auth is to create an instance, and initialize the SDK.
-Please note that these are the most critical steps where you need to pass on different parameters
-according to the preference of your project.
-
-## Parameters
-
-The `SingleFactoreAuth` constructor takes an object called `Web3AuthOptions` as input. The
-constructor parameters are listed below
-
-| Parameter | Description |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `clientId` | Your Web3Auth Client Id from [Web3Auth Dashboard](https://dashboard.web3auth.io/). |
-| `web3AuthNetwork` | The Web3auth network to be used by the SDK. Supported values are `.SAPPHIRE_MAINNET`, `.SAPPHIRE_DEVNET`, `.MAINNET`, `.TESTNET`, `.CYAN`, and `.AQUA` |
-| `sessionTime` | Specifies the session duration in seconds. By default, the value is set to 86400 seconds (1 day), with a maximum session duration of up to 30 days. |
-| `serverTimeOffset` | Specifies the server time offset in seconds. This parameter is used to adjust the server time to the local time. The default value is 0 seconds. |
-| `storageServerUrl?` | Specifies the storage server URL. The default value is `https://session.web3auth.io`. |
-| `whiteLabel?` | You can pass the white labeling options for Web3Auth. It helps you define your brand app's custom UI, and branding for the Wallet Services and request signature feature. The recommended way to configure the `whiteLabel` is through the Web3Auth Dashboard. [Learn how to configure the `whiteLabel` via Web3Auth Dashboard](/docs/features/whitelabel#new-whitelabeling-via-the-dashboard). |
-| `redirectUrl?` | URL that Web3Auth will redirect API responses upon successful `request` method call. Please note, that it's mandatory to configure the `redirectUrl` if you are using the `request` method. Redirect Url shoudl be your bundle identifier. |
-
-## Create instance
-
-
diff --git a/docs/sdk/sfa/sfa-ios/install.mdx b/docs/sdk/sfa/sfa-ios/install.mdx
deleted file mode 100644
index a3091593d..000000000
--- a/docs/sdk/sfa/sfa-ios/install.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: "Installing SFA Swift SDK"
-sidebar_label: "Install"
-description: "Installing Web3Auth SFA Swift SDK | Documentation - Web3Auth"
----
-
-import SPM from "@site/src/common/sdk/sfa/ios/_sfa-ios-spm.mdx";
-import Cocoapods from "@site/src/common/sdk/sfa/ios/_sfa-ios-cocoapods.mdx";
-
-## Swift Package Manager
-
-
-
-## Cocoapods
-
-
diff --git a/docs/sdk/sfa/sfa-ios/usage.mdx b/docs/sdk/sfa/sfa-ios/usage.mdx
deleted file mode 100644
index 506bf0229..000000000
--- a/docs/sdk/sfa/sfa-ios/usage.mdx
+++ /dev/null
@@ -1,326 +0,0 @@
----
-title: "Using Single Factor Auth Swift SDK"
-sidebar_label: "Usage"
-description: "Web3Auth Single Factor Auth Swift SDK - Usage | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-import SessionManagement from "@site/src/common/sdk/sfa/ios/_sfa-ios-session-management.mdx";
-
-After successfully installing and initializing SingleFactorAuth, you can use it to authenticate your
-users and obtain their private and public keys.
-
-:::tip NOTE
-
-Web3Auth SFA Swift SDK only works for users who have **not enabled MFA**. For MFA enabled users,
-you'll see an Error message.
-
-:::
-
-The SingleFactorAuth instance natively provides the following methods:
-
-| Method | Description |
-| ------------------------------------------ | ------------------------------------------------------------------- |
-| [connect](#login-user) | Use to login user and retrieve private key pair. |
-| [logout](#logout-user) | Use to logout existing user. |
-| [connected](#check-users-logged-in-status) | Use to check whether the user is logged in or not. |
-| [getSessionData](#get-session-data) | This method helps to get the session data for valid session. |
-| [showWalletUI](#show-wallet-ui) | Use to open templated the wallet UI in WebView. |
-| [request](#request-signature) | Use to open templated transaction screens for signing transactions. |
-
-## Login User
-
-:::tip
-
-Please refer to the [Authentication](./authentication) section for more details on the setting up
-your verifier and other authentication parameters.
-
-:::
-
-To obtain a user's private key using the Web3Auth SFA iOS SDK, you can call the `connect` method.
-The method accepts `LoginParams`, and returns `SessionData`.
-[Please checkout the SessionData response for more details](#response).
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | The `verifier` parameter takes the name of the custom verifier from the Web3Auth Dashboard. This is a required field that must be a `String`. If you're using an aggregate verifier, make sure to pass the aggregate verifier name. |
-| `verifierId` | The `verifierID` takes the JWT verifier ID to be used for JWT/ID token verification. It can be an email, sub, or custom value available in the JWT token. |
-| `idToken` | The `idToken` accepts a JWT token obtained from the user's login provider. |
-| `subVerifierInfoArray?` | Sub verifier info. Usually used during aggregate verifier. It takes `[TorusSubVerifierInfo]` as a value. |
-| `serverTimeOffset?` | Specifies the server time offset in seconds. |
-
-
-
-
-
-```swift
-public class LoginParams {
- public let verifier: String
- public let verifierId: String
- public let idToken: String
- public let subVerifierInfoArray: [TorusSubVerifierInfo]?
- public let serverTimeOffset: Int?
- public let fallbackUserInfo: UserInfo?
-
- public init(verifier: String, verifierId: String, idToken: String, subVerifierInfoArray: [TorusSubVerifierInfo]? = nil, serverTimeOffset: Int? = nil, fallbackUserInfo: UserInfo? = nil) {
- self.verifier = verifier
- self.verifierId = verifierId
- self.idToken = idToken
- self.subVerifierInfoArray = subVerifierInfoArray
- self.serverTimeOffset = serverTimeOffset
- self.fallbackUserInfo = fallbackUserInfo
- }
-}
-
-public struct TorusSubVerifierInfo {
- public var verifier: String
- public var idToken: String
-
- public init(verifier: String, idToken: String) {
- self.verifier = verifier
- self.idToken = idToken
- }
-}
-```
-
-
-
-
-### Usage
-
-```swift
-let loginParams = LoginParams(verifier: "YOUR_VERIFIER_NAME", verifierId: "YOUR_VERIFIER_ID", idToken: "YOUR_ID_TOKEN")
-do {
- let sfaKey = try await singleFactorAuth.connect(loginParams: loginParams)
-} catch {
- // Handle error
-}
-```
-
-## Logout User
-
-To logout the current user, you can use the `logout` method. Please note, the method will not logout
-the user from the authentication provider, it'll only logout and invalidate the Web3Auth session.
-
-### Usage
-
-```swift
-do {
- try await singleFactorAuth.logout()
-} catch {
- // Handle error
-}
-```
-
-## Check User's Logged In Status
-
-You can use the `connected` method to check whether the user is logged in Web3Auth or not. Please
-note, you should call this method after the `initialize` method if you want to check the user's
-connection status for an existing session.
-
-### Usage
-
-```swift
-let isConnected = singleFactorAuth.connected()
-```
-
-## Get Session Data
-
-We have included Session Management in this SDK, so calling the `getSessionData` will retrive the
-user's `SessionData` without re-logging in the user if a user has an active session. Otherwise, it
-will return `nil`.
-
-:::tip
-
-Please note, you should call this method after the `initialize` method.
-
-:::
-
-### Usage
-
-```swift
-let sessionData = singleFactorAuth.getSessionData()
-
-if(sessionData != nil) {
- // User is logged in
-} else {
- // User is not logged in
-}
-```
-
-### Response
-
-The `SessionData` has the following four properties to retrive the relevant session information.
-
-| Name | Description |
-| --------------- | ------------------------------------------------------------------------- |
-| `privateKey` | Retrieves the user's private key. |
-| `publicAddress` | Retrieves the user's public address. |
-| `userInfo` | Retrieves the user's information like email, name, verifier id, and more. |
-| `signatures` | Retrieves the node's signatures that are returned for request. |
-
-## Show Wallet UI
-
-The `showWalletUI` method launches a WebView which allows you to use the templated wallet UI
-services. The method takes `ChainConfig` as the required input. Wallet Services is currently only
-available for EVM chains.
-
-:::note
-
-Access to Wallet Services is gated. You can use this feature in `sapphire_devnet` for free. The
-minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production
-environment is the **Scale Plan**.
-
-:::
-
-
-
-### Parameters
-
-
-
-
-
-| Parameter | Description |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `chainNamespace` | Custom configuration for your preferred blockchain. As of now only EVM supported. Default value is `ChainNamespace.eip155`. |
-| `decimals?` | Number of decimals for the currency ticker. Default value is 18, and accepts `Int` as value. |
-| `blockExplorerUrl?` | Blockchain's explorer URL. (eg: `https://etherscan.io`) |
-| `chainId` | The chain id of the selected blockchain in hex string format. |
-| `displayName?` | Display Name for the chain. |
-| `logo?` | Logo for the selected `chainNamespace` & `chainId`. |
-| `rpcTarget` | RPC Target URL for the selected `chainNamespace` & `chainId`. |
-| `ticker?` | Default currency ticker of the network (e.g: `ETH`) |
-| `tickerName?` | Name for currency ticker (e.g: `Ethereum`) |
-
-
-
-
-
-```swift
-public enum ChainNamespace: String, Codable {
- case eip155
- case solana
-}
-
-public struct ChainConfig: Codable {
- public init(chainNamespace: ChainNamespace = ChainNamespace.eip155, decimals: Int? = 18, blockExplorerUrl: String? = nil, chainId: String, displayName: String? = nil, logo: String? = nil, rpcTarget: String, ticker: String? = nil, tickerName: String? = nil) {
- self.chainNamespace = chainNamespace
- self.decimals = decimals
- self.blockExplorerUrl = blockExplorerUrl
- self.chainId = chainId
- self.displayName = displayName
- self.logo = logo
- self.rpcTarget = rpcTarget
- self.ticker = ticker
- self.tickerName = tickerName
- }
-}
-```
-
-
-
-
-### Usage
-
-```swift
-do {
- try await web3Auth.showWalletUI(
- chainConfig: ChainConfig(
- chainId: "0xaa36a7",
- rpcTarget: "https://eth-sepolia.public.blastapi.io"
- )
- )
-} catch {
- // Handle error
-}
-```
-
-## Request signature
-
-The `request` method facilitates the use of templated transaction screens for signing transactions.
-The method will return [SignResponse](#signresponse). It can be used to sign transactions for any
-EVM chain and screens can be whitelabeled to your branding.
-
-Please check the list of
-[JSON RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/), noting that the request
-method currently supports only the signing methods.
-
-:::note
-
-Please note, to use the `request` method, you need to configure the `redirectUrl` in the
-[`Web3AuthOptions`](/docs/sdk/sfa/sfa-ios/initialize#parameters) while initializing the SDK.
-
-:::
-
-
-
-### Parameters
-
-| Parameter | Description |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `chainConfig` | Defines the chain to be used for signature. |
-| `method` | JSON RPC method name in `String`. Currently, the request method only supports the singing methods. |
-| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api/) to know more. |
-
-### Usage
-
-```swift
-do {
- var params = [Any]()
- // Message to be signed
- params.append("Hello, Web3Auth from iOS!")
- // User's EOA address
- params.append(address)
-
- // focus-start
- let response = try await web3Auth.request(
- chainConfig: ChainConfig(
- chainId: "0xaa36a7",
- rpcTarget: "https://eth-sepolia.public.blastapi.io"
- ),
- method: "personal_sign",
- requestParams: params
- )
- // focus-end
-
- if response!.success {
- print(response!.result!)
- } else {
- // Handle Error
- print(response!.error!)
- }
-
-} catch {
- print(error.localizedDescription)
- // Handle error
-}
-```
-
-### SignResponse
-
-| Name | Description |
-| --------- | ------------------------------------------------------------- |
-| `success` | Determines whether the request was successful or not. |
-| `result?` | Holds the signature for the request when `success` is `true`. |
-| `error?` | Holds the error for the request when `success` is `false`. |
diff --git a/docs/sdk/sfa/sfa-js/account-abstraction.mdx b/docs/sdk/sfa/sfa-js/account-abstraction.mdx
deleted file mode 100644
index 74219467d..000000000
--- a/docs/sdk/sfa/sfa-js/account-abstraction.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Account Abstraction
-sidebar_label: Account Abstraction
-description: "@web3auth/single-factor-auth Native Account Abstraction | Documentation - Web3Auth"
----
-
-import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
-import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
-import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-configuration.mdx";
-import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
-import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
-import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
-import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
-import AASFASetup from "@site/src/common/sdk/sfa/_aa-sfa-setup.mdx";
-import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
-import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
-import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
-
-import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
-
-
-
-
-## Installation
-
-
-
-## Configure
-
-
-
-Please note this is the important step for setting the Web3Auth account abstraction provider.
-
-- [Configure Smart Account provider](#configure-smart-account-provider)
-- [Configure Bundler](#configure-bundler)
-- [Configure Sponsored Paymaster](#sponsored-paymaster)
-- [Configure ERC-20 Paymaster](#erc-20-paymaster)
-
-## Configure Smart Account Provider
-
-
-
-## Configure Bundler
-
-
-
-## Configure Paymaster
-
-You can configure the paymaster of your choice to sponsor gas fees for your users, along with the
-paymaster context. The paymaster context lets you set additional parameters, such as choosing the
-token for ERC-20 paymasters, defining gas policies, and more.
-
-### Sponsored Paymaster
-
-
-
-### ERC-20 Paymaster
-
-
-
-## Set up
-
-### Configure Web3Auth Instance
-
-
-
-### Configure Signer
-
-
-
-## Smart Account Address
-
-
-
-## Send Transaction
-
-
-
-## Advanced Smart Account Operations
-
-To learn more about supported transaction methods, and how to perform batch transactions,
-[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider/#send-batch-transaction).
diff --git a/docs/sdk/sfa/sfa-js/initialize.mdx b/docs/sdk/sfa/sfa-js/initialize.mdx
deleted file mode 100644
index 6e900f0a1..000000000
--- a/docs/sdk/sfa/sfa-js/initialize.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: "Initializing Single Factor Auth JS SDK"
-sidebar_label: "Initialize"
-description: "Web3Auth Single Factor Auth JS SDK - Initialize | Documentation - Web3Auth"
----
-
-import InstantiatingProvider from "@site/src/common/sdk/sfa/_instantiating_provider.mdx";
-import SFAInstanceExample from "@site/src/common/sdk/sfa/_sfa_instance_example.mdx";
-import SFAInstanceReactNativeExample from "@site/src/common/sdk/sfa/_sfa_instance_example-react-native.mdx";
-import SFAInstanceNodeExample from "@site/src/common/sdk/sfa/_sfa_instance_example-node.mdx";
-import Web3AuthOptions from "@site/src/common/sdk/sfa/_web3auth_sfa_options.mdx";
-import ExampleCards from "@theme/ExampleCards";
-import {
- coreKitSfaWebExamples,
- coreKitSfaReactNativeExamples,
- coreKitSfaNodeExamples,
- QUICK_START,
-} from "@site/src/common/maps";
-
-After Installation, the next step to use Web3Auth Single Factor Auth JS SDK is to Initialize the
-SDK.
-
-However, the Initialization is a two-step process, ie.
-
-- [Instantiation of Web3Auth](#instantiating-web3auth)
-- [Initialization of Web3Auth](#initializing-web3auth)
-
-## Instantiating Web3Auth
-
-#### Import the `Web3Auth` class from `@web3auth/single-factor-auth` package.
-
-```tsx
-import { Web3Auth } from "@web3auth/single-factor-auth";
-```
-
-#### Assign the `Web3Auth` class to a variable
-
-```javascript
-const web3auth = new Web3Auth(Web3AuthOptions);
-```
-
-This Web3Auth constructor takes an object with `Web3AuthOptions` as input.
-
-### Arguments
-
-#### `Web3AuthOptions`
-
-
-
-### Instantiating Provider
-
-
-
-## Initializing Web3Auth
-
-#### `init()`
-
-To complete the initialization process, we need to initialize the `Web3Auth` instance, which we
-named `web3auth`. This is achieved by calling the `init()` function of the previously created
-`web3auth` instance.
-
-```javascript
-await web3auth.init();
-```
-
-## Usage
-
-### Web
-
-For Web, you need to simply pass the basic `Web3AuthOptions`, and the private key provider, and the
-SDK will handle the rest.
-
-
-
-### React Native
-
-While configuring the React Native Instance, you need to pass the `storage` option, and the `mode`
-of the SDK should be set to `react-native`.
-
-
-
-### Node JS
-
-
-
-For Node JS, you just need to set the `mode` of the SDK to `node`.
-
-## Quick Starts
-
- obj.type === QUICK_START)}
-/>
diff --git a/docs/sdk/sfa/sfa-js/initiate-topup.mdx b/docs/sdk/sfa/sfa-js/initiate-topup.mdx
deleted file mode 100644
index aa66e80ea..000000000
--- a/docs/sdk/sfa/sfa-js/initiate-topup.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Topup your Wallet in SFA JS SDK
-sidebar_label: Top-up Wallet
-description: "@web3auth/single-factor-auth Topup your Wallet | Documentation - Web3Auth"
----
-
-import ShowCheckoutDoc from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup-doc.mdx";
-
-
diff --git a/docs/sdk/sfa/sfa-js/install.mdx b/docs/sdk/sfa/sfa-js/install.mdx
deleted file mode 100644
index 886add296..000000000
--- a/docs/sdk/sfa/sfa-js/install.mdx
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: "Installing Single Factor Auth JS SDK"
-sidebar_label: "Install"
-description: "Web3Auth Single Factor Auth JS SDK - Install | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-import ExpoWarning from "@site/src/common/docs/_expo-warning.mdx";
-
-### [`@web3auth/single-factor-auth`](https://npmjs.com/package/@web3auth/single-factor-auth)
-
-```bash npm2yarn
-npm install --save @web3auth/single-factor-auth
-```
-
-## Add a Provider to your project
-
-The `@web3auth/single-factor-auth` package requires a private key provider to facilitate interaction
-with your preferred blockchain network. You can choose between the following providers based on your
-usecase.
-
-- [EIP1193 Private Key Provider for EVM Compatible Chains](/sdk/sfa/sfa-js/providers/evm)
-- [Solana Private Key Provider for Solana Blockchain](/sdk/sfa/sfa-js/providers/solana)
-- [XRPL Private Key Provider for XRPL Blockchain](/sdk/sfa/sfa-js/providers/xrpl)
-- [Common Private Key Provider for Connecting to any Blockchain](/sdk/sfa/sfa-js/providers/common)
-
-## Common Types and Interfaces
-
-### [`@web3auth/base`](https://npmjs.com/package/@web3auth/base)
-
-This package gives access to common types and interfaces for Web3Auth. This comes in handy by
-providing you with a standard way of importing the values you need to work with the SDKs. We highly
-recommend using it while working with `Typescript`.
-
-```bash npm2yarn
-npm install --save @web3auth/base
-```
-
-## Web - Bundler Configuration
-
-You may run into problems where certain dependencies are missing within the browser environment.
-These are node dependencies that need to be polyfilled in your application, to enable Web3Auth
-functionalities. Furthermore, your bundler needs to be reconfigured to use them while building the
-app. We have created guides for different bundlers to help you with this issue:
-
-- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
-- Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
-
-## React Native - Bare React Native Workflow
-
-Your Bare React Native app is entirely built on your machine. In this workflow, the developer has
-complete control, along with the complexity that comes with that. Configuration with `app.json` /
-`app.config.js` is mostly not supported in this context; instead, you will need to configure each
-native project directly with Swift/Kotlin native modules. Check out the
-[troubleshooting section](/sdk/pnp/react-native/install#troubleshooting) for fixing common issues.
-
-:::tip
-
-You can read more about different workflows in the
-[Expo documentation](https://docs.expo.dev/archive/managed-vs-bare/).
-
-:::
-
-### Adding a `Storage` Module
-
-We need to pass a `Storage` parameter to the SDK, which will be used for session management without
-storing the private keys of the user in the device. When using our SDK with a bare workflow React
-Native app, you have to install a `Storage` implementation provided by react-native.
-
-```bash npm2yarn
-npm install --save react-native-encrypted-storage
-```
-
-### Configuration
-
-After you have installed the files needed for your workflow, you'll have to configure the SDK with
-some additional steps to be able to use the SDK properly.
-
-For the bare workflow, you need to perform additional installation steps, alongside specific
-configurations for Android and iOS separately.
-
-
-
-
-
-- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
-
-```gradle title="android/build.gradle"
-buildToolsVersion = "31.0.0"
-minSdkVersion = 21
-# focus-next-line
-compileSdkVersion = 31
-# focus-next-line
-targetSdkVersion = 31
-```
-
-- Add the intent filter with `scheme` defined in your `AndroidManifest.xml`
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-
-
-
-
- # replace with your own scheme
- # focus-next-line
-
-
-```
-
-- SDK version 31 requires you to explicitly define `android:exported="true"` in
- `AndroidManifest.xml`, check whether it is correctly present or not.
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-
-```
-
-
-
-
-
-- Make sure that the minimum SDK compile version in `Podfile` is 14 or more.
-
-```Podfile title="ios/Podfile"
-platform :ios, '14'
-```
-
-- Install the Cocoa Pods within your project directory.
-
-```shell
-cd ios
-pod install
-```
-
-:::tip
-
-You may refer to **[these example apps](./examples)** and try it out yourself.
-
-:::
-
-
-
-
-## React Native - Expo Managed Workflow
-
-Your Expo app is built on your Expo's cloud, so you don't have control over the native modules used
-in the app. Developers build managed workflow apps using `expo-cli` on their computers and a
-development client on their mobile devices. Managed workflow apps typically use one or more Expo
-services, such as push notifications, builds, and updates.
-
-
-
-### Adding a `Storage` Module
-
-We need to pass a `Storage` parameter to the SDK, which will be used for session management without
-storing the private keys of the user in the device. When using our SDK with an Expo-based React
-Native app (aka managed workflow), you have to install the `expo-secure-store` package as a
-`Storage` implementation.
-
-```shell
-npx expo install expo-secure-store
-```
-
-### Configuration
-
-After you have installed the files needed for your workflow, you'll have to configure the SDK with
-some additional steps to be able to use the SDK properly.
-
-- Adding URL scheme to `app.json`
-
-To allow the Expo-based SDK to work with exported Expo Android apps, you need to add the designated
-scheme into `app.json`
-
-```json title="app.json"
-{
- "expo": {
- "scheme": "web3authexpoexample" // replace with your own scheme
- }
-}
-```
-
-:::tip
-
-You may refer to [these example apps](./examples) and try it out yourself.
-
-:::
-
-### Bundler Issues: Missing Dependencies
-
-You might face issues mentioning that certain dependencies are missing within the React Native
-environment. These are node dependencies that need to be polyfilled in your application, to enable
-Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
-building the app. Please check out our
-**[React Native Troubleshooting Guide](/troubleshooting/metro-issues)**
diff --git a/docs/sdk/sfa/sfa-js/passkeys-sfa.mdx b/docs/sdk/sfa/sfa-js/passkeys-sfa.mdx
deleted file mode 100644
index 79a73b0a3..000000000
--- a/docs/sdk/sfa/sfa-js/passkeys-sfa.mdx
+++ /dev/null
@@ -1,390 +0,0 @@
----
-title: Passkeys Plugin for SFA JS SDK
-sidebar_label: Passkeys Plugin
-description: "Web3Auth - Passkeys Plugin for SFA JS SDK | Documentation - Web3Auth"
----
-
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-### [`@web3auth/passkeys-sfa-plugin`](https://npmjs.com/package/@web3auth/passkeys-sfa-plugin)
-
-The Passkeys SFA Plugin allows your application to use passkeys for secure and easy authentication.
-This plugin integrates seamlessly with Web3Auth Single Factor Auth (SFA) Web SDK, enabling passkey
-registration, login, and management functionalities.
-
-:::note Note
-
-Passkeys SFA Plugin is designed for Web3Auth Single Factor Auth (SFA) Web SDK.
-
-:::
-
-## Installation
-
-```bash npm2yarn
-npm install --save @web3auth/passkeys-sfa-plugin
-```
-
-## Initialization
-
-Import the `PasskeysPlugin` **class** from `@web3auth/passkeys-sfa-plugin`.
-
-```javascript
-import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin";
-```
-
-#### Assign the `PasskeysPlugin` class to a variable
-
-After creating your Web3Auth SFA instance, you need to initialize the Passkeys Plugin and add it to
-the class for further usage.
-
-```javascript
-const passkeysPlugin = new PasskeysPlugin(options);
-```
-
-This constructor takes an object with `IPasskeysPluginOptions` as input.
-
-### Arguments
-
-While initializing the Passkeys plugin, you need to pass the following parameters to the
-constructor:
-
-
-
-
-
-| Parameter | Description |
-| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `rpID?` | Stands for relying party ID. Your app domain. If your app is hosted on "your.app.xyz", the RPID can be "your.app.xyz". |
-| `rpName?` | Stands for relying party name. Name of your app. We recommend setting it to the correctly capitalized name of your app. |
-| `buildEnv?` | Specifies the build environment to use: `production`, `staging`, `testing`, or `development`. |
-
-
-
-
-
-```tsx
-export interface IPasskeysPluginOptions {
- buildEnv?: BUILD_ENV_TYPE;
- /**
- * `rpID` should be your app domain.
- *
- * If your app is hosted on "your.app.xyz" the RPID can be "your.app.xyz" or "app.xyz".
- *
- * Be aware: if you create passkeys on "your.app.xyz", they won't be usable on other subdomains (e.g. "other.app.xyz").
- * So unless you have good reasons not to, use the top-level domain as the RPID.
- *
- * `rpID` will show up in the initial registration popup:
- *
- * @defaultValue tld
- */
- rpID?: string;
- /**
- * `rpName` doesn't show up in the popup so can be set to anything.
- *
- * We recommend setting it to the correctly capitalized name of your app,
- * in case browsers start showing it in their native UIs in the future.
- *
- * @defaultValue window.title || window.location.hostname
- */
- rpName?: string;
-}
-```
-
-
-
-
-
-#### Add the `passkeysPlugin` class to your Web3Auth SFA instance
-
-After initializing the `passkeysPlugin`, use the `addPlugin()` function to add it to your Web3Auth
-SFA instance.
-
-```javascript
-web3AuthInstance.addPlugin(passkeysPlugin);
-```
-
-### Example
-
-```javascript
-import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin";
-
-const passkeysPlugin = new PasskeysPlugin({
- rpID: "your.app.xyz",
- rpName: "Your App",
-});
-
-web3auth.addPlugin(passkeysPlugin); // Add the plugin to web3auth
-
-// Register a new passkey
-await passkeysPlugin.registerPasskey({ username: "user@example.com" });
-
-// Login with a passkey
-await passkeysPlugin.loginWithPasskey();
-
-// List all registered passkeys
-const passkeys = await passkeysPlugin.listAllPasskeys();
-console.log(passkeys);
-```
-
-:::note Note
-
-Here’s the refined version:
-
-First, users need to log in with their authentication provider. Once logged in, they can register a
-passkey. The next time they log in, they can seamlessly use the registered passkey with a
-passkey-enabled authentication device.
-
-:::
-
-## Using Passkeys SFA Plugin
-
-### `registerPasskey()`
-
-Registers a new passkey for the user.
-
-#### Parameters
-
-| Parameter | Description |
-| -------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `authenticatorAttachment?` | Option to restrict the type of authenticators that can be registered. |
-| `username?` | The passkey in the user device will be saved with this name. Default is `loginProvider\|verifierId.` |
-
-#### Usage
-
-```javascript
-await passkeysPlugin.registerPasskey({
- username: "user@example.com",
- authenticatorAttachment: "platform",
-});
-```
-
-### `loginWithPasskey()`
-
-Logs in the user with an existing passkey.
-
-#### Parameters
-
-| Parameter | Description |
-| ------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `authenticatorId?` | The ID of the specific authenticator you want to log in with, useful when multiple authenticators are set up. |
-
-#### Usage
-
-```javascript
-await passkeysPlugin.loginWithPasskey({
- authenticatorId: "authenticator_id",
-});
-```
-
-:::tip
-
-When you call `listAllPasskeys()`, the `credential_id` from the response is the authenticator ID
-that can be used for logging in with a specific passkey. This improves UX by reducing the number of
-prompts the user has to face when multiple authenticators are set up. Here’s a sample output for
-`listAllPasskeys()`:
-
-```json
-{
- "id": "123",
- // focus-next-line
- "credential_id": "abc123def456ghi789jkl012mno345pqr678stu901vwx234yz",
- "verifier_id": "verifier987zyx654wvu321tsr098qpo765nml432kji109gfe",
- "browser": "Chrome",
- "browser_version": "126.0.0.0",
- "transport": "hybrid,internal",
- "os": "macOS",
- "os_version": "12.5.1",
- "platform": "desktop",
- "provider_name": "Samsung Pass",
- "created_at": "2024-06-25T07:41:38.000Z",
- "updated_at": "2024-06-25T07:41:38.000Z"
-}
-```
-
-:::
-
-### `listAllPasskeys()`
-
-Lists all registered passkeys for the user.
-
-#### Usage
-
-```javascript
-const passkeys = await passkeysPlugin.listAllPasskeys();
-console.log(passkeys);
-```
-
-## Using with Web3Auth SFA
-
-:::note Note
-
-Below are two files, `App.tsx` and `utils.ts`, demonstrating the implementation of the Passkeys SFA
-Plugin. The `utils.ts` file is kept non-opinionated and can be configured according to your
-requirements for your users. Also, note that the passkeys flow is **only supported on browsers that
-support WebAuthn**. You need to check for browser support before registering or logging in with a
-passkey.
-
-:::
-
-
-
-
-
-```typescript
-import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, IProvider } from "@web3auth/base";
-import Web3Auth from "@web3auth/single-factor-auth";
-import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin";
-import { shouldSupportPasskey } from "./utils";
-
-const clientId = "Your_Web3Auth_Client_ID";
-
-const chainConfig = {
- chainId: "0x1", // Please use 0x1 for Mainnet
- rpcTarget: "https://rpc.ethereum.org",
- displayName: "Ethereum Mainnet",
- blockExplorerUrl: "https://etherscan.io/",
- ticker: "ETH",
- tickerName: "Ethereum",
- logo: "https://images.toruswallet.io/eth.svg",
-};
-
-const web3AuthOptions = {
- clientId,
- chainConfig: { ...chainConfig, chainNamespace: CHAIN_NAMESPACES.EIP155 },
- web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
-};
-
-const web3auth = new Web3Auth(web3AuthOptions);
-
-const passkeysPlugin = new PasskeysPlugin({
- rpID: "your.app.xyz",
- rpName: "Your App",
-});
-
-web3auth.addPlugin(passkeysPlugin); // Add the plugin to web3auth
-
-await web3auth.init();
-
-await web3auth.connect({
- verifier: "your_verifier_name", // Pass the verifier name created on the Web3Auth dashboard
- verifierId: "your_verifier_id", // Pass the verifierId received from the OAuth provider
- idToken: "id_token", // Pass the idToken received from the OAuth provider
-});
-
-const result = shouldSupportPasskey();
-
-if (!result.isBrowserSupported) {
- console.log("Browser not supported");
-} else {
- // Register a new passkey
- await passkeysPlugin.registerPasskey({ username: "user@example.com" });
-
- // Login with a passkey
- await passkeysPlugin.loginWithPasskey();
-
- // List all registered passkeys
- const passkeys = await passkeysPlugin.listAllPasskeys();
- console.log(passkeys);
-}
-```
-
-
-
-
-
-```typescript
-import bowser from "bowser";
-
-const PASSKEYS_ALLOWED_MAP = [
- bowser.OS_MAP.iOS,
- bowser.OS_MAP.MacOS,
- bowser.OS_MAP.Android,
- bowser.OS_MAP.Windows,
-];
-
-const getWindowsVersion = (osVersion: string) => {
- const windowsVersionRegex = /NT (\d+\.\d+)/;
- const match = osVersion.match(windowsVersionRegex);
- if (match) return parseInt(match[1], 10);
- return 0;
-};
-
-const checkIfOSIsSupported = (osName: string, osVersion: string) => {
- if (!PASSKEYS_ALLOWED_MAP.includes(osName)) return false;
- if (osName === bowser.OS_MAP.MacOS) return true;
- switch (osName) {
- case bowser.OS_MAP.iOS: {
- const version = parseInt(osVersion.split(".")[0], 10);
- return version >= 16;
- }
- case bowser.OS_MAP.Android: {
- const version = parseInt(osVersion.split(".")[0], 10);
- return version >= 9;
- }
- case bowser.OS_MAP.Windows: {
- const version = getWindowsVersion(osVersion);
- return version >= 10;
- }
- default:
- return false;
- }
-};
-
-export function shouldSupportPasskey(): {
- isBrowserSupported: boolean;
- isOsSupported: boolean;
- supported;
-
- Browser?: Record;
-} {
- const browser = bowser.getParser(navigator.userAgent);
- const osDetails = browser.parseOS();
- if (!osDetails) return { isBrowserSupported: false, isOsSupported: false };
- const osName = osDetails.name || "";
- const result = checkIfOSIsSupported(osName, osDetails.version || "");
- if (!result) return { isBrowserSupported: false, isOsSupported: false };
- const browserData: Record> = {
- iOS: {
- safari: ">=16",
- chrome: ">=108",
- },
- macOS: {
- safari: ">=16",
- chrome: ">=108",
- firefox: ">=122",
- },
- Android: {
- chrome: ">=108",
- },
- Windows: {
- edge: ">=108",
- chrome: ">=108",
- },
- };
- const isBrowserSupported = browser.satisfies({ ...browserData }) || false;
- return { isBrowserSupported, isOsSupported: true, supportedBrowser: browserData[osName] };
-}
-
-export function browserSupportsWebAuthn() {
- return (
- window?.PublicKeyCredential !== undefined && typeof window.PublicKeyCredential === "function"
- );
-}
-```
-
-
-
-
diff --git a/docs/sdk/sfa/sfa-js/show-wallet-connect.mdx b/docs/sdk/sfa/sfa-js/show-wallet-connect.mdx
deleted file mode 100644
index ed7183ce1..000000000
--- a/docs/sdk/sfa/sfa-js/show-wallet-connect.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Interoperability with WalletConnect in PnP Web Modal SDK
-sidebar_label: Show Wallet Connect Scanner
-description: "@web3auth/modal Interoperability with WalletConnect | Documentation - Web3Auth"
----
-
-import ShowWCScannerDoc from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner-doc.mdx";
-
-
diff --git a/docs/sdk/sfa/sfa-js/usage.mdx b/docs/sdk/sfa/sfa-js/usage.mdx
deleted file mode 100644
index fb6f6715f..000000000
--- a/docs/sdk/sfa/sfa-js/usage.mdx
+++ /dev/null
@@ -1,333 +0,0 @@
----
-title: "Usage of Single Factor Auth JS SDK"
-sidebar_label: "Usage"
-description: "Web3Auth Single Factor Auth JS SDK - Usage | Documentation - Web3Auth"
----
-
-import SFALoginParams from "@site/src/common/sdk/sfa/_sfa_login_params.mdx";
-import SFAWebCustomJWTExample from "@site/src/common/sdk/sfa/_sfa_web_custom_jwt_example.mdx";
-import SFAWebFirebaseJWTExample from "@site/src/common/sdk/sfa/_sfa_web_firebase_jwt_example.mdx";
-import TabItem from "@theme/TabItem";
-import Tabs from "@theme/Tabs";
-
-Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your
-users. Further, you can use the native provider given by Web3Auth to connect the users to the
-respective blockchain network.
-
-## Functionality Overview
-
-Natively, the instance of Web3Auth (called web3auth in our examples) has the following
-methods/getters:
-
-| Name | Description |
-| ------------------------------------------ | --------------------------------------------------------------------------------------- |
-| [connect](#logging-in-your-user) | Use this method to login a user to Web3Auth SFA JS SDK. |
-| [provider](#get-a-native-provider) | Returns the native provider that can be used to make different blockchain transactions. |
-| [sessionId](#get-sessionid) | Returns the sessionId of the user as a string. |
-| [authenticateUser](#authenticate-the-user) | Returns a promise of the `UserAuthInfo` object containing the `idToken` of the user. |
-| [addChain](#add-a-new-chain) | Add chain configuration to the web3auth instance. |
-| [switchChain](#switch-the-chain) | Switches the chainId to one of the added chainIds. |
-| [logout](#logging-out-the-user) | Log out the user from the web3auth instance. |
-
-## Logging in your User
-
-To log in a user using the Web3Auth SFA JS SDK, call the `connect` method. This method returns an
-`IProvider` instance upon successful authentication which can then be used to interact with various
-blockchain networks. For more details, [refer to the provider documentation](./providers/).
-
-:::tip
-
-Please refer to the [Authentication](./authentication) section for more details on the setting up
-your verifier and other authentication parameters.
-
-:::
-
-### LoginParams
-
-The method accepts `LoginParams` as an input.
-
-
-
-### TorusSubVerifierInfo
-
-
-
-
-
-| Name | Description |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `verifier` | Name of the verifier. It's a `string` mandatory parameter. |
-| `idToken` | A newly created `JWT Token` that has not already been sent to Web3Auth or a `Duplicate Token` error will be thrown. It's a `string` mandatory parameter. |
-
-
-
-
-
-```ts
-export interface TorusSubVerifierInfo {
- verifier: string;
- idToken: string;
-}
-```
-
-
-
-
-### Usage
-
-
-
-
-
-```js
-await web3auth.connect({
- // Get the verifier name from the Web3Auth Dashboard
- verifier: "YOUR_VERIFIER_NAME",
- // Pass the JWT token verification value selected for verifier.
- verifierId: "YOUR_VERIFIER_ID",
- // Pass your JWT token
- idToken: "YOUR_JWT_TOKEN",
-});
-```
-
-
-
-
-
-```js
-await web3auth.connect({
- // Get the aggregate verifier name from the Web3Auth Dashboard
- verifier: "YOUR_AGGREGATE_VERIFIER_NAME",
- // Pass the JWT token verification value selected for sub verifier.
- verifierId: "YOUR_VERIFIER_ID",
- // Pass your JWT token
- idToken: "YOUR_JWT_TOKEN",
- subVerifierInfoArray: [
- {
- // Get the sub verifier name from the Web3Auth Dashboard
- verifier: "YOUR_SUB_VERIFIER_NAME",
- // Pass the JWT token
- idToken: "YOUR_JWT_TOKEN",
- },
- ],
-});
-```
-
-
-
-
-
-## Get a native provider
-
-The method returns the provider instance that can be used to interact with different blockchain
-networks. Please note, if there's no active session, the method will return `null`.
-
-Please refer to the [provider documentation](./providers/) for more details.
-
-### Usage
-
-```js
-const provider = web3auth.provider;
-// Use the provider to interact with the blockchain
-```
-
-## Get sessionId
-
-The method returns the session id for the current active session as the string.
-
-### Usage
-
-```js
-const sessionId = web3auth.sessionId;
-```
-
-## Authenticate the user
-
-The method authenticates the connected user, and returns user auth info containing the Web3Auth JWT
-token. You can use the idToken for backend verification.
-
-### Usage
-
-```js
-const userAuthInfo = await web3auth.authenticateUser();
-```
-
-### Response
-
-```ts
-export type UserAuthInfo = {
- idToken: string;
-};
-```
-
-## Add a new chain
-
-To add a new chain to your Web3Auth provider instance you can use the `addChain` method.
-
-### Parameters
-
-The method accepts a `CustomChainConfig` object as an input.
-
-
-
-
-
-| Name | Description |
-| ------------------- | ------------------------------------------------------------------------------------------ |
-| `chainNamespace` | Namespace of the chain. It `ChainNamespaceType` type. |
-| `chainId` | The chain id of the network in Hex format. |
-| `rpcTarget` | RPC target URL for the chain. The RPC url is used to interact with the blockchain network. |
-| `wsTarget?` | Web socket target URL for the chain. |
-| `displayName?` | Display Name for the chain. |
-| `blockExplorerUrl?` | Blockchain explorer URL for the network. |
-| `ticker?` | Network's native currency ticker (e.g: ETH for Ethereum) |
-| `tickerName?` | Network's native currency name (e.g: `Ethereum`). |
-| `decimals?` | Network's native currency decimal precision (e.g: 18 for Ethereum). Default value is 18. |
-| `logo?` | Logo for the token. |
-| `isTestnet?` | Whether the network is testnet or not. |
-
-
-
-
-
-```ts
-export declare const ADAPTER_NAMESPACES: {
- readonly EIP155: "eip155";
- readonly SOLANA: "solana";
- readonly CASPER: "casper";
- readonly XRPL: "xrpl";
- readonly MULTICHAIN: "multichain";
-};
-
-declare type ChainNamespaceType = (typeof CHAIN_NAMESPACES)[keyof typeof CHAIN_NAMESPACES];
-export type CustomChainConfig = {
- chainNamespace: ChainNamespaceType;
- /**
- * The chain id of the chain
- */
- chainId: string;
- /**
- * RPC target Url for the chain
- */
- rpcTarget: string;
- /**
- * web socket target Url for the chain
- */
- wsTarget?: string;
- /**
- * Display Name for the chain
- */
- displayName?: string;
- /**
- * Url of the block explorer
- */
- blockExplorerUrl?: string;
- /**
- * Default currency ticker of the network (e.g: ETH)
- */
- ticker?: string;
- /**
- * Name for currency ticker (e.g: `Ethereum`)
- */
- tickerName?: string;
- /**
- * Number of decimals for the currency ticker (e.g: 18)
- */
- decimals?: number;
- /**
- * Logo for the token
- */
- logo?: string;
- /**
- * Whether the network is testnet or not
- */
- isTestnet?: boolean;
-};
-```
-
-
-
-
-
-## Switch the chain
-
-To switch the chain for the provider instance you need to call the `switchChain` method. Please make
-sure, you have first added the chain using the [addChain](#add-a-new-chain) method.
-
-### Parameters
-
-| Name | Description |
-| --------- | ---------------------------------------------------------------- |
-| `chainId` | The hex chain ID of the blockchain network you want to switch to |
-
-### Usage
-
-```ts
-// Switches the chain to the Polygon network
-await web3auth.switchChain({ chainId: "0x89" });
-```
-
-## Logging out the user
-
-To logout the user and clear the session, call the `logout` method. Please note, this method only
-clears the Web3Auth session, and doesn't clears the OAuth session.
-
-### Usage
-
-```ts
-await web3auth.logout();
-```
-
-## Wallet Services Plugin Methods
-
-You can use the Wallet Services Plugin to enable additional functionalities like showing the Wallet
-UI Screen, Wallet Connect Scanner, and initiating topup for the user.
-
-:::tip
-
-Learn more about the Wallet Services Plugin in the
-[Wallet Services SDK Reference](./wallet-services/).
-
-:::
-
-### Show WalletConnect Scanner
-
-You can use the `showWalletConnectScanner` function to show the Wallet Connect Scanner, and connect
-with dApps having Wallet Connect login option. This is useful for interoperability with dApps having
-Wallet Connect login option.
-[Learn more about `showWalletConnectScanner`](./wallet-services/usage#connect-dapps-with-wallet-connect).
-
-### Fiat On Ramp
-
-You can use the `showCheckout` function to show the TopUp modal, allowing users to select their
-local currency and specify the token to top up their wallet.
-[Learn more about `showCheckout`](./wallet-services/usage#fiat-on-ramp).
-
-### Embedded Wallet UI
-
-You can use the `showWalletUI` function to show the templated wallet UI services.
-[Learn more about `showWalletUI`](./wallet-services/usage#show-wallet-embedded-ui).
-
-### Transaction Confirmatons 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.
-[Learn more about transaction confirmation screens](./wallet-services/usage#transaction-confirmation-screens).
diff --git a/docs/sdk/sfa/sfa-js/wallet-services/usage.mdx b/docs/sdk/sfa/sfa-js/wallet-services/usage.mdx
deleted file mode 100644
index 7cf7e59a5..000000000
--- a/docs/sdk/sfa/sfa-js/wallet-services/usage.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Usage - Wallet Services Plugin
-sidebar_label: Usage
-description: "Usage - Wallet Services Plugin for PnP Web SDK | Documentation - Web3Auth"
----
-
-import Content from "@site/src/common/sdk/wallet-services/_usage.mdx";
-
-
diff --git a/docs/sdk/web/js/_ethereum-integration-snippets.mdx b/docs/sdk/web/js/_ethereum-integration-snippets.mdx
new file mode 100644
index 000000000..8b11ab673
--- /dev/null
+++ b/docs/sdk/web/js/_ethereum-integration-snippets.mdx
@@ -0,0 +1,839 @@
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+## Installation
+
+To interact with the blockchain, you can use either the [`viem`](https://viem.sh/) or
+[`ethers.js`](https://docs.ethers.io/v5/getting-started/) library with Web3Auth.
+
+
+
+
+```bash npm2yarn
+npm install --save viem
+```
+
+
+
+
+```bash npm2yarn
+npm install --save ethers
+```
+
+
+
+
+## Initializing Provider
+
+Using `eip155` as `chainNamespace` while initializing `web3auth` will provide an
+[`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) compatible provider as **`web3auth.provider`**
+after successful authentication.
+
+### Initializing and instantiating the Web3Auth SDK
+
+```tsx
+import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId,
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+};
+```
+
+## Getting the Web3Auth provider
+
+After initializing Web3Auth, the next step is to initialize the provider and use it for your
+operations.
+
+```tsx
+// Initialize for PnP Web SDK
+await web3auth.init();
+
+// Trigger the login
+await web3auth.connect();
+// await web3auth.connectTo(); // For custom flow
+
+// Get the provider
+const provider = web3auth.provider;
+
+// Continue using the `provider`
+```
+
+### Get Account and Balance
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+// For ethers v5
+// const signer = ethersProvider.getSigner();
+const signer = await ethersProvider.getSigner();
+
+// Get user's Ethereum public address
+const address = signer.getAddress();
+
+// Get user's balance in ether
+// For ethers v5
+// const balance = ethers.utils.formatEther(
+// await ethersProvider.getBalance(address) // Balance is in wei
+// );
+const balance = ethers.utils.formatEther(
+ await provider.getBalance(address), // Balance is in wei
+);
+```
+
+
+
+
+```tsx
+const publicClient = createPublicClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+const walletClient = createWalletClient({
+ chain: mainnet,
+ transport: custom(this.provider),
+});
+
+// Get user's Ethereum public address
+const address = await walletClient.getAddresses();
+
+// Get user's balance in ether
+const balance = await publicClient.getBalance({ address: address[0] });
+```
+
+
+
+
+
+### Send Transaction
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+const signer = await provider.getSigner();
+
+const destination = "0x7aFac68875d2841dc16F1730Fba43974060b907A";
+const amount = ethers.parseEther("1.0"); // Convert 1 ether to wei
+
+// Submit transaction to the blockchain
+const tx = await signer.sendTransaction({
+ to: destination,
+ value: amount,
+});
+
+// Wait for the transaction to be mined
+const receipt = await tx.wait();
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const publicClient = createPublicClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+const walletClient = createWalletClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+// data for the transaction
+const destination = "";
+const amount = parseEther("0.0001");
+const address = await this.getAccounts();
+
+const address = await walletClient.getAddresses();
+
+// Submit transaction to the blockchain
+const hash = await walletClient.sendTransaction({
+ account: address[0],
+ to: destination,
+ value: amount,
+});
+
+const receipt = await publicClient.waitForTransactionReceipt({ hash });
+```
+
+
+
+
+### Send Transaction
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+const signer = await provider.getSigner();
+
+const destination = "0x7aFac68875d2841dc16F1730Fba43974060b907A";
+const amount = ethers.parseEther("1.0"); // Convert 1 ether to wei
+
+// Submit transaction to the blockchain
+const tx = await signer.sendTransaction({
+ to: destination,
+ value: amount,
+});
+
+// Wait for the transaction to be mined
+const receipt = await tx.wait();
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const publicClient = createPublicClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+const walletClient = createWalletClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+// data for the transaction
+const destination = "";
+const amount = parseEther("0.0001");
+const address = await this.getAccounts();
+
+const address = await walletClient.getAddresses();
+
+// Submit transaction to the blockchain
+const hash = await walletClient.sendTransaction({
+ account: address[0],
+ to: destination,
+ value: amount,
+});
+
+const receipt = await publicClient.waitForTransactionReceipt({ hash });
+```
+
+
+
+
+### Sign Message
+
+#### Personal Sign
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const provider = new ethers.providers.Web3Provider(web3Auth.provider);
+
+const signer = await provider.getSigner();
+
+const originalMessage = "YOUR_MESSAGE";
+
+const signedMessage = await signer.signMessage(originalMessage);
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const publicClient = createPublicClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+const walletClient = createWalletClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+// data for signing
+const address = await walletClient.getAddresses();
+const originalMessage = "YOUR_MESSAGE";
+
+// Sign the message
+const hash = await walletClient.signMessage({
+ account: address[0],
+ message: originalMessage,
+});
+```
+
+
+
+
+### Sign Typed Data v4
+
+
+
+
+```tsx
+// SignTypedData in viem
+// https://viem.sh/docs/actions/wallet/signTypedData
+
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const walletClient = createWalletClient({
+ chain: mainnet,
+ transport: custom(this.provider),
+});
+
+const address = await walletClient.getAddresses();
+
+const signature = await walletClient.signTypedData({
+ account: address[0],
+ domain: {
+ name: "Ether Mail",
+ version: "1",
+ chainId: 1,
+ verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+ },
+ types: {
+ Person: [
+ { name: "name", type: "string" },
+ { name: "wallet", type: "address" },
+ ],
+ Mail: [
+ { name: "from", type: "Person" },
+ { name: "to", type: "Person" },
+ { name: "contents", type: "string" },
+ ],
+ },
+ primaryType: "Mail",
+ message: {
+ from: {
+ name: "Cow",
+ wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+ },
+ to: {
+ name: "Bob",
+ wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+ },
+ contents: "Hello, Bob!",
+ },
+});
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+const signer = await provider.getSigner();
+
+// Get user's Ethereum public address
+const fromAddress = await signer.getAddress();
+
+const originalMessage = JSON.stringify({
+ domain: {
+ // Defining the chain aka Sepolia testnet or Ethereum Main Net
+ chainId: 11155111,
+ // Give a user friendly name to the specific contract you are signing for.
+ name: "Ether Mail",
+ // If name isn't enough add verifying contract to make sure you are establishing contracts with the proper entity
+ verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+ // Just let's you know the latest version. Definitely make sure the field name is correct.
+ version: "1",
+ },
+
+ // Defining the message signing data content.
+ message: {
+ /*
+ - Anything you want. Just a JSON Blob that encodes the data you want to send
+ - No required fields
+ - This is DApp Specific
+ - Be as explicit as possible when building out the message schema.
+ */
+ contents: "Hello, Bob!",
+ attachedMoneyInEth: 4.2,
+ from: {
+ name: "Cow",
+ wallets: [
+ "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+ "0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF",
+ ],
+ },
+ to: [
+ {
+ name: "Bob",
+ wallets: [
+ "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+ "0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57",
+ "0xB0B0b0b0b0b0B000000000000000000000000000",
+ ],
+ },
+ ],
+ },
+ // Refers to the keys of the *types* object below.
+ primaryType: "Mail",
+ types: {
+ // TODO: Clarify if EIP712Domain refers to the domain the contract is hosted on
+ EIP712Domain: [
+ { name: "name", type: "string" },
+ { name: "version", type: "string" },
+ { name: "chainId", type: "uint256" },
+ { name: "verifyingContract", type: "address" },
+ ],
+ // Not an EIP712Domain definition
+ Group: [
+ { name: "name", type: "string" },
+ { name: "members", type: "Person[]" },
+ ],
+ // Refer to PrimaryType
+ Mail: [
+ { name: "from", type: "Person" },
+ { name: "to", type: "Person[]" },
+ { name: "contents", type: "string" },
+ ],
+ // Not an EIP712Domain definition
+ Person: [
+ { name: "name", type: "string" },
+ { name: "wallets", type: "address[]" },
+ ],
+ },
+});
+const params = [fromAddress, originalMessage];
+const method = "eth_signTypedData_v4";
+
+const signedMessage = await signer.provider.send(method, params);
+```
+
+
+
+
+### Smart Contract
+
+#### Solidity Contract
+
+In this example, we'll be demonstrating how to use Web3Auth with web3.js or ethers.js to interact
+with Solidity smart contracts. The simple Hello World contract allows anyone to read and write a
+message to it.
+
+```tsx
+// SPDX-License-Identifier: GPL-3.0
+pragma solidity >=0.7.0 <0.9.0;
+
+contract HelloWorld {
+
+ string public message;
+
+ constructor(string memory initMessage) {
+ message = initMessage;
+ }
+
+ function update(string memory newMessage) public {
+ message = newMessage;
+ }
+}
+```
+
+### Deploy Contract
+
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+const signer = provider.getSigner();
+
+const contractABI = [
+ { inputs: [{ internalType: "string", name: "initMessage", type: "string" }], stateMutability: "nonpayable", type: "constructor" },
+ { inputs: [], name: "message", outputs: [{ internalType: "string", name: "", type: "string" }], stateMutability: "view", type: "function" },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+const contractByteCode =
+ "60806040523480156200001157600080fd5b5060405162000bee38038062000bee8339818101604052810190620000379190620001e3565b80600090816200004891906200047f565b505062000566565b6000604051905090565b600080fd5b600080fd5b600080fd5b600080fd5b6000601f19601f8301169050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b620000b9826200006e565b810181811067ffffffffffffffff82111715620000db57620000da6200007f565b5b80604052505050565b6000620000f062000050565b9050620000fe8282620000ae565b919050565b600067ffffffffffffffff8211156200012157620001206200007f565b5b6200012c826200006e565b9050602081019050919050565b60005b83811015620001595780820151818401526020810190506200013c565b60008484015250505050565b60006200017c620001768462000103565b620000e4565b9050828152602081018484840111156200019b576200019a62000069565b5b620001a884828562000139565b509392505050565b600082601f830112620001c857620001c762000064565b5b8151620001da84826020860162000165565b91505092915050565b600060208284031215620001fc57620001fb6200005a565b5b600082015167ffffffffffffffff8111156200021d576200021c6200005f565b5b6200022b84828501620001b0565b91505092915050565b600081519050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602260045260246000fd5b600060028204905060018216806200028757607f821691505b6020821081036200029d576200029c6200023f565b5b50919050565b60008190508160005260206000209050919050565b60006020601f8301049050919050565b600082821b905092915050565b600060088302620003077fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff82620002c8565b620003138683620002c8565b95508019841693508086168417925050509392505050565b6000819050919050565b6000819050919050565b6000620003606200035a62000354846200032b565b62000335565b6200032b565b9050919050565b6000819050919050565b6200037c836200033f565b620003946200038b8262000367565b848454620002d5565b825550505050565b600090565b620003ab6200039c565b620003b881848462000371565b505050565b5b81811015620003e057620003d4600082620003a1565b600181019050620003be565b5050565b601f8211156200042f57620003f981620002a3565b6200040484620002b8565b8101602085101562000414578190505b6200042c6200042385620002b8565b830182620003bd565b50505b505050565b600082821c905092915050565b6000620004546000198460080262000434565b1980831691505092915050565b60006200046f838362000441565b9150826002028217905092915050565b6200048a8262000234565b67ffffffffffffffff811115620004a657620004a56200007f565b5b620004b282546200026e565b620004bf828285620003e4565b600060209050601f831160018114620004f75760008415620004e2578287015190505b620004ee858262000461565b8655506200055e565b601f1984166200050786620002a3565b60005b8281101562000531578489015182556001820191506020850194506020810190506200050a565b868310156200055157848901516200054d601f89168262000441565b8355505b6001600288020188555050505b505050505050565b61067880620005766000396000f3fe608060405234801561001057600080fd5b50600436106100365760003560e01c80633d7403a31461003b578063e21f37ce14610057575b600080fd5b61005560048036038101906100509190610270565b610075565b005b61005f610088565b60405161006c9190610338565b60405180910390f35b80600090816100849190610570565b5050565b6000805461009590610389565b80601f01602080910402602001604051908101604052809291908181526020018280546100c190610389565b801561010e5780601f106100e35761010080835404028352916020019161010e565b820191906000526020600020905b8154815290600101906020018083116100f157829003601f168201915b505050505081565b6000604051905090565b600080fd5b600080fd5b600080fd5b600080fd5b6000601f19601f8301169050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b61017d82610134565b810181811067ffffffffffffffff8211171561019c5761019b610145565b5b80604052505050565b60006101af610116565b90506101bb8282610174565b919050565b600067ffffffffffffffff8211156101db576101da610145565b5b6101e482610134565b9050602081019050919050565b82818337600083830152505050565b600061021361020e846101c0565b6101a5565b90508281526020810184848401111561022f5761022e61012f565b5b61023a8482856101f1565b509392505050565b600082601f8301126102575761025661012a565b5b8135610267848260208601610200565b91505092915050565b60006020828403121561028657610285610120565b5b600082013567ffffffffffffffff8111156102a4576102a3610125565b5b6102b084828501610242565b91505092915050565b600081519050919050565b600082825260208201905092915050565b60005b838110156102f35780820151818401526020810190506102d8565b60008484015250505050565b600061030a826102b9565b61031481856102c4565b93506103248185602086016102d5565b61032d81610134565b840191505092915050565b6000602082019050818103600083015261035281846102ff565b905092915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602260045260246000fd5b600060028204905060018216806103a157607f821691505b6020821081036103b4576103b361035a565b5b50919050565b60008190508160005260206000209050919050565b60006020601f8301049050919050565b600082821b905092915050565b60006008830261041c7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff826103df565b61042686836103df565b95508019841693508086168417925050509392505050565b6000819050919050565b6000819050919050565b600061046d6104686104638461043e565b610448565b61043e565b9050919050565b6000819050919050565b61048783610452565b61049b61049382610474565b8484546103ec565b825550505050565b600090565b6104b06104a3565b6104bb81848461047e565b505050565b5b818110156104df576104d46000826104a8565b6001810190506104c1565b5050565b601f821115610524576104f5816103ba565b6104fe846103cf565b8101602085101561050d578190505b610521610519856103cf565b8301826104c0565b50505b505050565b600082821c905092915050565b600061054760001984600802610529565b1980831691505092915050565b60006105608383610536565b9150826002028217905092915050565b610579826102b9565b67ffffffffffffffff81111561059257610591610145565b5b61059c8254610389565b6105a78282856104e3565b600060209050601f8311600181146105da57600084156105c8578287015190505b6105d28582610554565b86555061063a565b601f1984166105e8866103ba565b60005b82811015610610578489015182556001820191506020850194506020810190506105eb565b8683101561062d5784890151610629601f891682610536565b8355505b6001600288020188555050505b50505050505056fea2646970667358221220eecabaeaef849ff90aa73071525a5fa1972cd301476f7718a27010569d13051264736f6c63430008120033";
+
+const address = signer.getAddress();
+
+const contractFactory = new ContractFactory(JSON.parse(JSON.stringify(contractABI), contractByteCode, address);
+// Deploy contract with "Hello World!" in the constructor
+const contract = await contractFactory.deploy("Hello World!");
+
+// Wait for deployment to finish
+const receipt = await contract.deployed();
+
+const deployedContractAddress = receipt.contractAddress;
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+const publicClient = createPublicClient({
+ chain: this.getViewChain(),
+ transport: custom(this.provider),
+});
+
+const walletClient = createWalletClient({
+ chain: mainnet,
+ transport: custom(this.provider),
+});
+
+const contractABI = [
+ {
+ inputs: [{ internalType: "string", name: "initMessage", type: "string" }],
+ stateMutability: "nonpayable",
+ type: "constructor",
+ },
+ {
+ inputs: [],
+ name: "message",
+ outputs: [{ internalType: "string", name: "", type: "string" }],
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+const contractByteCode =
+ "60806040523480156200001157600080fd5b5060405162000bee38038062000bee8339818101604052810190620000379190620001e3565b80600090816200004891906200047f565b505062000566565b6000604051905090565b600080fd5b600080fd5b600080fd5b600080fd5b6000601f19601f8301169050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b620000b9826200006e565b810181811067ffffffffffffffff82111715620000db57620000da6200007f565b5b80604052505050565b6000620000f062000050565b9050620000fe8282620000ae565b919050565b600067ffffffffffffffff8211156200012157620001206200007f565b5b6200012c826200006e565b9050602081019050919050565b60005b83811015620001595780820151818401526020810190506200013c565b60008484015250505050565b60006200017c620001768462000103565b620000e4565b9050828152602081018484840111156200019b576200019a62000069565b5b620001a884828562000139565b509392505050565b600082601f830112620001c857620001c762000064565b5b8151620001da84826020860162000165565b91505092915050565b600060208284031215620001fc57620001fb6200005a565b5b600082015167ffffffffffffffff8111156200021d576200021c6200005f565b5b6200022b84828501620001b0565b91505092915050565b600081519050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602260045260246000fd5b600060028204905060018216806200028757607f821691505b6020821081036200029d576200029c6200023f565b5b50919050565b60008190508160005260206000209050919050565b60006020601f8301049050919050565b600082821b905092915050565b600060088302620003077fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff82620002c8565b620003138683620002c8565b95508019841693508086168417925050509392505050565b6000819050919050565b6000819050919050565b6000620003606200035a62000354846200032b565b62000335565b6200032b565b9050919050565b6000819050919050565b6200037c836200033f565b620003946200038b8262000367565b848454620002d5565b825550505050565b600090565b620003ab6200039c565b620003b881848462000371565b505050565b5b81811015620003e057620003d4600082620003a1565b600181019050620003be565b5050565b601f8211156200042f57620003f981620002a3565b6200040484620002b8565b8101602085101562000414578190505b6200042c6200042385620002b8565b830182620003bd565b50505b505050565b600082821c905092915050565b6000620004546000198460080262000434565b1980831691505092915050565b60006200046f838362000441565b9150826002028217905092915050565b6200048a8262000234565b67ffffffffffffffff811115620004a657620004a56200007f565b5b620004b282546200026e565b620004bf828285620003e4565b600060209050601f831160018114620004f75760008415620004e2578287015190505b620004ee858262000461565b8655506200055e565b601f1984166200050786620002a3565b60005b8281101562000531578489015182556001820191506020850194506020810190506200050a565b868310156200055157848901516200054d601f89168262000441565b8355505b6001600288020188555050505b505050505050565b61067880620005766000396000f3fe608060405234801561001057600080fd5b50600436106100365760003560e01c80633d7403a31461003b578063e21f37ce14610057575b600080fd5b61005560048036038101906100509190610270565b610075565b005b61005f610088565b60405161006c9190610338565b60405180910390f35b80600090816100849190610570565b5050565b6000805461009590610389565b80601f01602080910402602001604051908101604052809291908181526020018280546100c190610389565b801561010e5780601f106100e35761010080835404028352916020019161010e565b820191906000526020600020905b8154815290600101906020018083116100f157829003601f168201915b505050505081565b6000604051905090565b600080fd5b600080fd5b600080fd5b600080fd5b6000601f19601f8301169050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b61017d82610134565b810181811067ffffffffffffffff8211171561019c5761019b610145565b5b80604052505050565b60006101af610116565b90506101bb8282610174565b919050565b600067ffffffffffffffff8211156101db576101da610145565b5b6101e482610134565b9050602081019050919050565b82818337600083830152505050565b600061021361020e846101c0565b6101a5565b90508281526020810184848401111561022f5761022e61012f565b5b61023a8482856101f1565b509392505050565b600082601f8301126102575761025661012a565b5b8135610267848260208601610200565b91505092915050565b60006020828403121561028657610285610120565b5b600082013567ffffffffffffffff8111156102a4576102a3610125565b5b6102b084828501610242565b91505092915050565b600081519050919050565b600082825260208201905092915050565b60005b838110156102f35780820151818401526020810190506102d8565b60008484015250505050565b600061030a826102b9565b61031481856102c4565b93506103248185602086016102d5565b61032d81610134565b840191505092915050565b6000602082019050818103600083015261035281846102ff565b905092915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602260045260246000fd5b600060028204905060018216806103a157607f821691505b6020821081036103b4576103b361035a565b5b50919050565b60008190508160005260206000209050919050565b60006020601f8301049050919050565b600082821b905092915050565b60006008830261041c7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff826103df565b61042686836103df565b95508019841693508086168417925050509392505050565b6000819050919050565b6000819050919050565b600061046d6104686104638461043e565b610448565b61043e565b9050919050565b6000819050919050565b61048783610452565b61049b61049382610474565b8484546103ec565b825550505050565b600090565b6104b06104a3565b6104bb81848461047e565b505050565b5b818110156104df576104d46000826104a8565b6001810190506104c1565b5050565b601f821115610524576104f5816103ba565b6104fe846103cf565b8101602085101561050d578190505b610521610519856103cf565b8301826104c0565b50505b505050565b600082821c905092915050565b600061054760001984600802610529565b1980831691505092915050565b60006105608383610536565b9150826002028217905092915050565b610579826102b9565b67ffffffffffffffff81111561059257610591610145565b5b61059c8254610389565b6105a78282856104e3565b600060209050601f8311600181146105da57600084156105c8578287015190505b6105d28582610554565b86555061063a565b601f1984166105e8866103ba565b60005b82811015610610578489015182556001820191506020850194506020810190506105eb565b8683101561062d5784890151610629601f891682610536565b8355505b6001600288020188555050505b50505050505056fea2646970667358221220eecabaeaef849ff90aa73071525a5fa1972cd301476f7718a27010569d13051264736f6c63430008120033";
+
+const [account] = await walletClient.getAddresses();
+const hash = await walletClient.deployContract({
+ abi: this.contractABI,
+ account,
+ bytecode: this.contractByteCode,
+ args: ["Hello World!"],
+});
+
+const receipt = await publicClient.waitForTransactionReceipt({ hash });
+
+const deployedContractAddress = receipt.contractAddress;
+```
+
+
+
+
+### Read From Contract
+
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+const signer = await provider.getSigner();
+
+const contractABI = [
+ {
+ inputs: [{ internalType: "string", name: "initMessage", type: "string" }],
+ stateMutability: "nonpayable",
+ type: "constructor",
+ },
+ {
+ inputs: [],
+ name: "message",
+ outputs: [{ internalType: "string", name: "", type: "string" }],
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+const contractAddress = "0x04cA407965D60C2B39d892a1DFB1d1d9C30d0334";
+const contract = new ethers.Contract(
+ contractAddress,
+ JSON.parse(JSON.stringify(contractABI)),
+ signer,
+);
+
+// Read message from smart contract
+const message = await contract.message();
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const contractABI = [
+ {
+ inputs: [{ internalType: "string", name: "initMessage", type: "string" }],
+ stateMutability: "nonpayable",
+ type: "constructor",
+ },
+ {
+ inputs: [],
+ name: "message",
+ outputs: [{ internalType: "string", name: "", type: "string" }],
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+
+const publicClient = createPublicClient({
+ chain: mainnet, // for mainnet
+ transport: custom(this.provider),
+});
+
+const contractAddress = "0x8AA6820B3F197384874fAdb355361758258cb981"; // On Sepolia, replace with your contract address
+
+// Read message from smart contract
+const message = await publicClient.readContract({
+ address: contractAddress,
+ abi: contractABI,
+ functionName: "message",
+});
+```
+
+
+
+
+### Write to Contract
+
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
+
+const signer = await provider.getSigner();
+
+const contractABI = [
+ {
+ inputs: [{ internalType: "string", name: "initMessage", type: "string" }],
+ stateMutability: "nonpayable",
+ type: "constructor",
+ },
+ {
+ inputs: [],
+ name: "message",
+ outputs: [{ internalType: "string", name: "", type: "string" }],
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+const contractAddress = "0x04cA407965D60C2B39d892a1DFB1d1d9C30d0334";
+const contract = new ethers.Contract(
+ contractAddress,
+ JSON.parse(JSON.stringify(contractABI)),
+ signer,
+);
+
+// Send transaction to smart contract to update message
+const tx = await contract.update("NEW_MESSAGE");
+
+// Wait for transaction to finish
+const receipt = await tx.wait();
+```
+
+
+
+
+```tsx
+/*
+ Use code from the above Initializing Provider here
+*/
+
+const contractABI = [
+ {
+ inputs: [{ internalType: "string", name: "initMessage", type: "string" }],
+ stateMutability: "nonpayable",
+ type: "constructor",
+ },
+ {
+ inputs: [],
+ name: "message",
+ outputs: [{ internalType: "string", name: "", type: "string" }],
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+];
+const publicClient = createPublicClient({
+ chain: mainnet,
+ transport: custom(this.provider),
+});
+
+const walletClient = createWalletClient({
+ chain: mainnet,
+ transport: custom(this.provider),
+});
+
+const contractAddress = "0x8AA6820B3F197384874fAdb355361758258cb981"; // On Sepolia, replace with your contract address
+address = await walletClient.getAddresses();
+
+// Submit transaction to the blockchain
+const hash = await walletClient.writeContract({
+ account: address[0],
+ address: contractAddress,
+ abi: JSON.parse(JSON.stringify(contractABI)),
+ functionName: "update",
+ args: ["NEW_MESSAGE"],
+});
+
+// Send transaction to smart contract to update message
+const receipt = await publicClient.waitForTransactionReceipt({ hash });
+```
+
+
+
+
+### Fetch User's Private Key
+
+`eth_private_key` is used to fetch the private key of the logged in user. It is only available for
+`in-app` adapters like `auth`.
+
+```tsx
+//Assuming user is already logged in.
+async getPrivateKey() {
+ const privateKey = await web3auth.provider.request({
+ method: "eth_private_key"
+ });
+ //Do something with privateKey
+}
+```
diff --git a/docs/sdk/web/js/advanced/advanced.mdx b/docs/sdk/web/js/advanced/advanced.mdx
new file mode 100644
index 000000000..46c3716a4
--- /dev/null
+++ b/docs/sdk/web/js/advanced/advanced.mdx
@@ -0,0 +1,57 @@
+---
+title: Advanced Configuration
+sidebar_label: Overview
+description: "@web3auth/modal Advanced Configuration | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import Web3AuthOptions from "@site/src/common/sdk/pnp/web/_web3auth-options.mdx";
+import AdvancedConfigOptions from "@site/src/common/sdk/pnp/web/_advanced-config-options.mdx";
+
+# Advanced Configuration
+
+The Web3Auth SDK provides extensive configuration options that allow you to customize authentication
+flows, UI appearance, blockchain integrations, and security features to meet your application's
+specific requirements.
+
+## Configuration Structure
+
+When setting up Web3Auth, you'll pass in the options to the constructor. This consists of:
+
+```tsx
+import { Component } from "@angular/core";
+import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+// focus-start
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+ // Core and advanced options go here
+});
+// focus-end
+
+@Component({
+ selector: "app-root",
+ templateUrl: "./app.component.html",
+ styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+
+ async ngOnInit() {
+ const init = async () => {
+ // focus-next-line
+ await web3auth.init();
+ };
+
+ init();
+ }
+ ...
+}
+```
+
+### `Web3AuthOptions`
+
+
+
+
diff --git a/docs/sdk/web/js/advanced/custom-authentication.mdx b/docs/sdk/web/js/advanced/custom-authentication.mdx
new file mode 100644
index 000000000..547cd51bc
--- /dev/null
+++ b/docs/sdk/web/js/advanced/custom-authentication.mdx
@@ -0,0 +1,756 @@
+---
+title: Custom Authentication
+sidebar_label: Custom Authentication
+description: "@web3auth/modal Custom Authentication | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Custom Authentication is a way to authenticate users with your custom authentication service. For
+example, while authenticating with Google, you can use your own Google Client ID to authenticate
+users directly.
+
+**This feature, with MFA turned off, can even make Web3Auth invisible to the end user.**
+
+
+
+## Getting an Auth Connection ID
+
+:::info prerequisite
+
+To enable this, you need to [Create a Connection](/dashboard/configure-connections) from the
+**Authentication** tab of your project from the
+[Web3Auth Developer Dashboard](https://dashboard.web3auth.io) with your desired configuration.
+
+:::
+
+To configure a connection, you need to provide the particular details of the connection into our
+Web3Auth Dashboard. This enables us to map a `authConnectionId` with your connection details. This
+`authConnectionId` helps us to identify the connection details while initializing the SDK. You can
+configure multiple connections for the same project, and you can also update the connection details
+anytime.
+
+:::tip
+
+Visit the [Auth Provider Setup](/auth-provider-setup) page to learn more about to setup the
+different configurations available for each connection.
+
+:::
+
+## Modal Custom Authentication
+
+The basic custom authentication is available directly in the modal. You can configure each of the
+auth providers in the modal to direct to your `authConnectionId`.
+
+:::note
+
+You can only configure implicit login via modal, for JWT based logins, you need to create your own
+UI and use the `connectTo` function.
+
+:::
+
+For the modal custom authentication, you need to pass the `modalConfig` object to the
+`Web3AuthOptions` object within the constructor.
+
+> **Read more about the `modalConfig` object in the [Whitelabel](./whitelabel) section.**
+
+### Usage
+
+
+
+
+```ts
+import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ authConnectionId: "w3a-google-demo",
+ },
+ facebook: {
+ name: "facebook login",
+ authConnectionId: "w3a-facebook-demo",
+ },
+ discord: {
+ name: "discord login",
+ authConnectionId: "w3a-discord-demo",
+ },
+ twitch: {
+ name: "twitch login",
+ authConnectionId: "w3a-twitch-demo",
+ },
+ twitter: {
+ name: "twitter login",
+ // it will hide the twitter option from the Web3Auth modal.
+ showOnModal: false,
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ // setting it to false will hide all social login methods from modal.
+ showOnModal: true,
+ },
+ },
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
+
+
+
+
+```ts
+import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ authConnectionId: "w3a-google",
+ groupedAuthConnectionId: "aggregate-sapphire",
+ },
+ facebook: {
+ name: "facebook login",
+ authConnectionId: "w3a-facebook",
+ groupedAuthConnectionId: "aggregate-sapphire",
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email-passwordless",
+ groupedAuthConnectionId: "aggregate-sapphire",
+ },
+ },
+ },
+ },
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
+
+
+
+
+## Advanced Custom Authentication
+
+The more advanced custom authentication is available via the `connectTo` function. This allows you
+to any service you want and tie it to your Web3Auth Integration. **This method allows you to make
+Web3Auth totally invisible to your end users and have a fully whitelabeled experience all across.**
+
+You can utilise this function to enable multiple types of connections like:
+
+- Implicit Login Connections
+- JWT Login Connections
+- Grouped Auth Connections
+
+
+ `connectTo` Function Reference
+
+```ts
+connectTo(
+ connector: T,
+ params?: LoginParamMap[T]
+): Promise;
+
+export type LoginParamMap = {
+ [WALLET_CONNECTORS.AUTH]: Partial;
+ ...
+};
+```
+
+#### `AuthLoginParams`
+
+
+
+
+| Parameter | Description |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `loginHint?` | Helps pass over the login hint to the auth provider. This is used especially for `email_passwordless` & `sms_passwordless` logins. |
+| `idToken?` | Pass over the JWT ID Token directly to Web3Auth for JWT authentication. |
+| `authConnection?` | The auth provider to use for login (e.g., "google", "facebook"). |
+| `authConnectionId?` | The ID configured in your Web3Auth Dashboard for the connection. |
+| `groupedAuthConnectionId?` | The grouped auth connection ID to be used for login. |
+| `extraLoginOptions?` | Custom OAuth options (e.g., login_hint, domain, etc.). |
+
+
+
+
+ ```tsx
+ export type AuthLoginParams = LoginParams & {
+ loginHint?: string;
+ idToken?: string;
+ };
+ export type LoginParams = {
+ /**
+ * 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.
+ */
+ appState?: string;
+ /**
+ * The auth connection to be used for login.
+ */
+ authConnection: AUTH_CONNECTION_TYPE | CUSTOM_AUTH_CONNECTION_TYPE;
+ /**
+ * The auth connection id to be used for login.
+ */
+ authConnectionId?: string;
+ /**
+ * The grouped auth connection id to be used for login.
+ */
+ groupedAuthConnectionId?: string;
+ /**
+ * 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
+ *
+ * Defaults to `none`
+ * @defaultValue `none`
+ */
+ mfaLevel?: MfaLevelType;
+ /**
+ * This option is for internal use only in torus wallet and has no effect
+ * on user's login on other dapps.
+ *
+ * Defaults to false
+ * @defaultValue false
+ * @internal
+ */
+ getWalletKey?: boolean;
+ /**
+ * extraLoginOptions 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
+ */
+ extraLoginOptions?: ExtraLoginOptions;
+ /**
+ * 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
+ */
+ dappShare?: string;
+ /**
+ * 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`.
+ *
+ *
+ * @defaultValue secp256k1
+ */
+ curve?: SUPPORTED_KEY_CURVES_TYPE;
+ /**
+ * Allows the dapp to set a custom redirect url for the manage mfa flow.
+ *
+ */
+ dappUrl?: string;
+};
+ ```
+
+
+
+#### Auth Connection Types
+
+```ts
+export const AUTH_CONNECTION = {
+ GOOGLE: "google",
+ TWITTER: "twitter",
+ FACEBOOK: "facebook",
+ DISCORD: "discord",
+ FARCASTER: "farcaster",
+ APPLE: "apple",
+ GITHUB: "github",
+ REDDIT: "reddit",
+ LINE: "line",
+ KAKAO: "kakao",
+ LINKEDIN: "linkedin",
+ TWITCH: "twitch",
+ TELEGRAM: "telegram",
+ WECHAT: "wechat",
+ EMAIL_PASSWORDLESS: "email_passwordless",
+ SMS_PASSWORDLESS: "sms_passwordless",
+ CUSTOM: "custom",
+};
+```
+
+#### Advanced Options (`extraLoginOptions`)
+
+For custom integrations (like Auth0, AWS Cognito), you can provide additional options:
+
+
+
+
+| Parameter | Description |
+| ----------------------- | ----------------------------------------------------------- |
+| `isUserIdCaseSensitive` | Whether the user id field is case sensitive [Default: true] |
+| `domain` | Auth provider domain (e.g., "example.auth0.com") |
+| `client_id` | Client ID from your auth provider |
+| `scope` | OAuth scopes (e.g., "email profile openid") |
+| `response_type` | Response type for OAuth flow |
+| `login_hint` | Pre-fill user identifier |
+
+
+
+ ```ts
+ export type ExtraLoginOptions = Auth0ClientOptions;
+
+ export interface Auth0ClientOptions extends BaseLoginOptions {
+ /**
+ * Your Auth0 account domain such as `'example.auth0.com'`,
+ * `'example.eu.auth0.com'` or , `'example.mycompany.com'`
+ * (when using [custom domains](https://auth0.com/docs/custom-domains))
+ */
+ domain?: string;
+ /**
+ * The Client ID found on your Application settings page
+ */
+ client_id?: string;
+ /**
+ * The field in jwt token which maps to user id
+ */
+ userIdField?: string;
+ /**
+ * Whether the user id field is case sensitive
+ * @defaultValue true
+ */
+ isUserIdCaseSensitive?: boolean;
+ id_token?: string;
+ access_token?: string;
+ /**
+ * The route for user info endpoint. This will be padded to domain
+ * @defaultValue userinfo
+ * */
+ user_info_route?: string;
+ /**
+ * The flow type for email_passwordless login
+ */
+ flow_type?: EMAIL_FLOW_TYPE;
+ }
+ ```
+
+
+
+
+
+
+### Implicit logins
+
+Implicit logins are the easiest way to authenticate users with your custom authentication services.
+Web3Auth currently supports implicit logins for the following providers directly:
+
+- Google
+- Facebook
+- Discord
+- Twitch
+- Auth0 (Custom)
+
+In addition to these you can also use any other provider like Auth0, AWS Cognito, Azure AD, etc. by
+providing the particular details of their login within the `extraLoginOptions` object within the
+`connectTo` function.
+
+#### Usage
+
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ authConnectionId: "w3a-google-demo",
+});
+```
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.FACEBOOK,
+ authConnectionId: "w3a-facebook-demo",
+});
+```
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.DISCORD,
+ authConnectionId: "w3a-discord-demo",
+});
+```
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.TWITCH,
+ authConnectionId: "w3a-twitch-demo",
+});
+```
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-auth0-demo",
+ extraLoginOptions: {
+ connection: "google-oauth2",
+ },
+});
+```
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-auth0-demo",
+});
+```
+
+
+```ts
+// web3auth instance already initialized
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-cognito-demo",
+ extraLoginOptions: {
+ clientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
+ domain: "https://shahbaz-web3auth.auth.ap-south-1.amazoncognito.com",
+ verifierIdField: "email",
+ response_type: "token",
+ scope: "email profile openid",
+ },
+});
+```
+
+
+
+### JWT Login
+
+JWT Login is a way to authenticate users with your custom authentication services. With this method,
+Web3Auth just takes into account the `idToken` passed over to the `connectTo` function and uses it
+to authenticate the user. You can utilise this method with any authentication service that is OAuth
+2.0 Compatible.
+
+:::warning
+
+If you have not configured on the dashboard, whether you user id is case sensitive or not, then you
+need to pass the `isUserIdCaseSensitive` option to the `extraLoginOptions`.
+
+:::
+
+#### Usage
+
+
+
+
+```ts
+const loginWithGoogle = async (response: CredentialResponse) => {
+ const idToken = response.credential;
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnectionId: "w3a-google-demo",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+};
+
+...
+
+ {
+ console.log("Login Failed");
+ }}
+ useOneTap
+/>
+```
+
+
+
+
+```ts
+const { getIdTokenClaims, loginWithPopup } = useAuth0();
+
+const loginWithAuth0 = async () => {
+ try {
+ await loginWithPopup();
+
+ const idToken = (await getIdTokenClaims())?.__raw.toString();
+ if (!idToken) {
+ throw new Error("No id token found");
+ }
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnectionId: "w3a-auth0-demo",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+ } catch (err) {
+ console.error(err);
+ }
+};
+```
+
+
+
+
+```ts
+const loginWithFirebaseGithub = async () => {
+ try {
+ const app = initializeApp(firebaseConfig);
+ const auth = getAuth(app);
+ const githubProvider = new GithubAuthProvider();
+
+ const result = await signInWithPopup(auth, githubProvider);
+
+ const idToken = await result.user.getIdToken(true);
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnectionId: "w3a-firebase-demo",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+ } catch (error) {
+ console.error("Firebase authentication error:", error);
+ }
+};
+```
+
+
+
+
+```ts
+const getIdToken = async () => {
+ // Get ID Token from server
+ const res = await fetch("http://localhost:8080/api/token", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const data = await res.json();
+ return data?.token;
+};
+
+const loginWithJWT = async () => {
+ try {
+ const idToken = await getIdToken();
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-node-demo",
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+ } catch (err) {
+ console.error(err);
+ }
+};
+```
+
+
+
+
+### Grouped Auth Connections
+
+Grouped Auth Connections allows you to group multiple auth connections together and use them as a
+single connection. This is useful when you want to authenticate the user with multiple providers and
+require the same user wallet address to be generated.
+
+For example, you can group Google & Email Passwordless providers together and use them as a single
+connection. Now, if your user logs in with Google Auth or even with Email Passwordless using the
+same email, they will get the same wallet address.
+
+:::info Prerequisites
+
+You need to configure a grouped connection, by combining your single connections in the Web3Auth
+Dashboard before using this feature.
+
+:::
+
+
+
+
+```ts
+const loginWithGoogle = async () => {
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-google",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ });
+ // focus-end
+};
+
+const loginWithAuth0Google = async () => {
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-a0-google",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ extraLoginOptions: {
+ connection: "google-oauth2",
+ },
+ });
+ // focus-end
+};
+
+const loginWithAuth0GitHub = async () => {
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-a0-github",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ extraLoginOptions: {
+ connection: "github",
+ },
+ });
+ // focus-end
+};
+```
+
+
+
+
+```ts
+const loginWithGoogle = async (response: CredentialResponse) => {
+ const idToken = response.credential;
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-google",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ verifierIdField: "email",
+ },
+ });
+ // focus-end
+};
+
+const loginWithAuth0 = async () => {
+ try {
+ await loginWithPopup();
+ const idToken = (await getIdTokenClaims())?.__raw.toString();
+ if (!idToken) {
+ throw new Error("No id token found");
+ }
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-a0-github",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ verifierIdField: "email",
+ },
+ });
+ // focus-end
+ } catch (err) {
+ console.error(err);
+ }
+};
+```
+
+
+
+
+```ts
+const loginWithGoogle = async () => {
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-google",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ });
+ // focus-end
+};
+
+const loginWithFirebaseGithub = async () => {
+ const app = initializeApp(firebaseConfig);
+ const auth = getAuth(app);
+ const githubProvider = new GithubAuthProvider();
+
+ const result = await signInWithPopup(auth, githubProvider);
+
+ const idToken = await result.user.getIdToken(true);
+
+ // focus-start
+ await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-firebase",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+};
+```
+
+
+
diff --git a/docs/sdk/web/js/advanced/mfa.mdx b/docs/sdk/web/js/advanced/mfa.mdx
new file mode 100644
index 000000000..0de84ecdc
--- /dev/null
+++ b/docs/sdk/web/js/advanced/mfa.mdx
@@ -0,0 +1,183 @@
+---
+title: Multi Factor Authentication
+sidebar_label: Multi Factor Authentication
+description: "@web3auth/modal Multi Factor Authentication | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx";
+import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx";
+import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx";
+
+Web3Auth supports Multi-Factor Authentication (MFA) for enhanced security. MFA requires two or more
+factors—such as device, social, seed phrase, or password—to access your account and recover it if
+needed. When a recovery factor is set up, MFA is enabled and your key is split into three shares,
+using Web3Auth MPC for secure, self-custodial storage.
+
+
+
+:::caution
+
+If you are using default verifiers, your users may have set up MFA on other dApps that also use
+default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has
+enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
+
+:::
+
+## MFA Configuration Options
+
+There are two ways to configure MFA in your application:
+
+1. **Using the `mfaLevel` setting**: Controls the frequency of the MFA setup request screen.
+2. **Using the `mfaSettings` setting**: Provides granular control over each factor, with their
+ priority level, enable/disable status, and mandatory/optional settings.
+
+## `mfaLevel`
+
+The `mfaLevel` setting allows you to control when and how the MFA setup screen appears to users.
+
+```tsx
+mfaLevel?: MfaLevelType;
+```
+
+### MFA Level Types
+
+| Level | Value | Description |
+| ----------- | ----------- | -------------------------------------------------- |
+| `DEFAULT` | "default" | MFA screen appears every 10th login |
+| `OPTIONAL` | "optional" | MFA screen appears every login, but can be skipped |
+| `MANDATORY` | "mandatory" | MFA setup is required after login |
+| `NONE` | "none" | MFA setup is skipped entirely |
+
+### Type Definition
+
+```tsx
+export type MfaLevelType = (typeof MFA_LEVELS)[keyof typeof MFA_LEVELS];
+export declare const MFA_LEVELS: {
+ readonly DEFAULT: "default";
+ readonly OPTIONAL: "optional";
+ readonly MANDATORY: "mandatory";
+ readonly NONE: "none";
+};
+```
+
+### Usage
+
+```ts
+import { WALLET_CONNECTORS, AUTH_CONNECTION, MFA_LEVELS } from "@web3auth/modal";
+
+await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ authConnectionId: "w3a-google-demo",
+ // focus-next-line
+ mfaLevel: MFA_LEVELS.MANDATORY,
+});
+```
+
+## `mfaSettings`
+
+
+
+The `mfaSettings` option provides granular control over each individual MFA factor.
+
+```tsx
+mfaSettings?: MfaSettings;
+```
+
+### MFA Factors
+
+| Factor | Key | Description |
+| --------------- | --------------------- | ------------------------------------ |
+| `DEVICE` | "deviceShareFactor" | Device-based authentication |
+| `BACKUP_SHARE` | "backUpShareFactor" | Backup share (typically seed phrase) |
+| `SOCIAL_BACKUP` | "socialBackupFactor" | Social account backup |
+| `PASSWORD` | "passwordFactor" | Password-based authentication |
+| `PASSKEYS` | "passkeysFactor" | WebAuthn passkeys support |
+| `AUTHENTICATOR` | "authenticatorFactor" | Authenticator app (TOTP) |
+
+### MFA Settings Properties
+
+| Property | Type | Description |
+| ----------- | ------- | ------------------------------------------------------ |
+| `enable` | boolean | Whether this factor is enabled |
+| `priority` | number | Order in which factors are presented (lower = earlier) |
+| `mandatory` | boolean | Whether this factor is required |
+
+### Type Definitions
+
+```tsx
+export type MfaSettings = Partial>;
+export type MFA_FACTOR_TYPE = (typeof MFA_FACTOR)[keyof typeof MFA_FACTOR];
+export declare const MFA_FACTOR: {
+ readonly DEVICE: "deviceShareFactor";
+ readonly BACKUP_SHARE: "backUpShareFactor";
+ readonly SOCIAL_BACKUP: "socialBackupFactor";
+ readonly PASSWORD: "passwordFactor";
+ readonly PASSKEYS: "passkeysFactor";
+ readonly AUTHENTICATOR: "authenticatorFactor";
+};
+export type MFA_SETTINGS = {
+ enable: boolean;
+ priority?: number;
+ mandatory?: boolean;
+};
+```
+
+### Important Rules
+
+- At least two factors must be enabled when setting up MFA
+- If you set `mandatory: true` for all factors, the user must set up all enabled factors
+- If you set `mandatory: false` for all factors, the user can skip setting up MFA, but at least two
+ factors are still required
+- If you set `mandatory: true` for some factors and `mandatory: false` for others, the user must set
+ up the mandatory factors and can optionally set up the others
+- The `priority` field determines the order of setup - lower priority values appear first
+
+### Usage
+
+```ts
+import { Web3Auth, MFA_FACTOR, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ mfaSettings: {
+ [MFA_FACTOR.DEVICE]: {
+ enable: true,
+ priority: 1,
+ mandatory: true, // at least two factors are mandatory
+ },
+ [MFA_FACTOR.BACKUP_SHARE]: {
+ enable: true,
+ priority: 2,
+ mandatory: true, // at least two factors are mandatory
+ },
+ [MFA_FACTOR.SOCIAL_BACKUP]: {
+ enable: true,
+ priority: 3,
+ mandatory: false,
+ },
+ [MFA_FACTOR.PASSWORD]: {
+ enable: true,
+ priority: 4,
+ mandatory: false,
+ },
+ [MFA_FACTOR.PASSKEYS]: {
+ enable: true,
+ priority: 5,
+ mandatory: false,
+ },
+ [MFA_FACTOR.AUTHENTICATOR]: {
+ enable: true,
+ priority: 6,
+ mandatory: false,
+ },
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
diff --git a/docs/sdk/web/js/advanced/smart-accounts.mdx b/docs/sdk/web/js/advanced/smart-accounts.mdx
new file mode 100644
index 000000000..ed03148e5
--- /dev/null
+++ b/docs/sdk/web/js/advanced/smart-accounts.mdx
@@ -0,0 +1,384 @@
+---
+title: Smart Accounts
+sidebar_label: Smart Accounts
+description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
+import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
+import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
+
+# Smart Accounts
+
+Effortlessly create and manage smart accounts for your users with just a few lines of code, using
+our Smart Account feature. Smart accounts offer enhanced control and programmability, enabling
+powerful features that traditional wallets can't provide.
+
+**Key features of Smart Accounts include:**
+
+- **Gas Abstraction:** Cover transaction fees for users, or allow users to pay for their own
+ transactions using ERC-20 tokens.
+- **Batch Transactions:** Perform multiple transactions in a single call.
+- **Automated Transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH
+ hits a specific price.
+- **Custom Spending Limits:** Allow users to set tailored spending limits.
+
+> For more information about ERC-4337 and its components,
+> [check out our detailed blog post](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337).
+
+Our smart account integration streamlines your setup, allowing you to create and manage smart
+accounts using your favorite libraries like Viem, Ethers, and Wagmi. You don't need to rely on
+third-party packages to effortlessly create ERC-4337 compatible Smart Contract Wallets (SCWs),
+giving users the ability to perform batch transactions and efficiently manage gas sponsorship.
+
+
+## Enabling Smart Accounts
+
+:::info prerequisite
+
+To enable this feature, you need to configure Smart Accounts from your project in the
+[Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+### Dashboard Configuration
+
+To enable Smart Accounts, navigate to the Smart Accounts section in the Web3Auth dashboard, and
+enable the "Set up Smart Accounts" toggle. Web3Auth currently supports
+[MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount)
+as a Smart Account provider.
+
+
+
+#### Wallet Configuration
+
+Once Smart Accounts are enabled, you can customize the wallet configurations:
+
+- **All supported wallets (default):** Allows users to create Smart Accounts using both embedded and
+ external wallets.
+- **Embedded wallets only:** Restricts Smart Account creation to only embedded wallets.
+
+#### Configure Bundler & Paymaster
+
+A bundler aggregates UserOperations and submits them on-chain via the global EntryPoint contract. To
+configure the bundler:
+
+
+
+1. Navigate to the `Bundler & Paymaster` tab within the `Smart Accounts` section
+2. Add the bundler URL for each supported chain
+3. Add the paymaster URL for each supported chain
+
+:::info
+
+Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster,
+refer to the SDK Configuration section below.
+
+:::
+
+### SDK Configuration [Optional]
+
+While the dashboard provides a convenient way to configure Smart Accounts, the SDK offers greater
+flexibility by allowing you to override these settings.
+
+### Basic Configuration
+
+To enable Smart Accounts in your application, add the `accountAbstractionConfig` to your Web3Auth
+options:
+
+```ts
+import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+ // focus-start
+ accountAbstractionConfig: {
+ smartAccountType: "metamask",
+ chains: [
+ {
+ chainId: "0x1",
+ bundlerConfig: {
+ url: "YOUR_BUNDLER_URL",
+ },
+ },
+ ],
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
+
+### Advanced Configuration: Override Paymaster Context
+
+You can override the paymaster context defined in the dashboard for specific chains. This is
+particularly useful when your paymaster requires custom settings or parameters.
+
+```ts
+import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+ // focus-start
+ accountAbstractionConfig: {
+ smartAccountType: "metamask",
+ chains: [
+ {
+ chainId: "0x1",
+ bundlerConfig: {
+ url: "YOUR_BUNDLER_URL",
+ // This is just an example of how you can configure the paymaster context.
+ // Please refer to the documentation of the paymaster you are using
+ // to understand the required parameters.
+ paymasterContext: {
+ token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
+ sponsorshipPolicyId: "sp_my_policy_id",
+ },
+ },
+ },
+ ],
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
+
+:::info
+
+The paymaster context must be manually configured for each chain that needs to be supported.
+
+:::
+
+## Using Smart Accounts
+
+### Configure Signer
+
+
+
+### Get Smart Account Address
+
+
+
+### Send Transaction
+
+
+
+### Sign Transaction
+
+You can sign a transaction without immediately sending it. For the user's first transaction, the
+`UserOperation` calldata will automatically include the deployment data needed to create the Smart
+Account on-chain.
+
+:::info
+
+Wagmi doesn't have hooks for signing transactions yet.
+
+:::
+
+
+
+
+
+```tsx
+// Convert 1 ether to WEI format
+const amount = parseEther("1");
+
+const signature = await signer.signTransaction({
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+});
+```
+
+
+
+
+```tsx
+// Convert 1 ether to WEI format
+const amount = parseEther("1");
+const addresses = await walletClient.getAddresses();
+
+const request = await walletClient.prepareTransactionRequest({
+ account: addresses[0],
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+});
+
+const signature = await walletClient.signTransaction(request as any);
+```
+
+
+
+
+### Sign Message
+
+Smart Accounts support message signing following the EIP-1271 standard for signature verification,
+using the `isValidSignature` method defined in the smart contract wallet instead of the `ecrecover`
+function used by EOAs.
+
+
+
+
+
+```tsx
+import { useSignMessage } from "wagmi";
+const { data: signature, signMessage } = useSignMessage();
+
+const message = "YOUR_MESSAGE";
+
+signMessage({ message });
+
+// Use signature as needed
+```
+
+
+
+
+```tsx
+const originalMessage = "YOUR_MESSAGE";
+
+// Sign the message
+const signedMessage = await signer.signMessage(originalMessage);
+```
+
+
+
+
+```tsx
+const originalMessage = "YOUR_MESSAGE";
+
+const addresses = await walletClient.getAddresses();
+
+const signedMessage = await walletClient.signMessage({
+ account: address[0],
+ message: originalMessage,
+});
+```
+
+
+
+
+### Send Batch Transaction
+
+One of the key advantages of Smart Accounts is the ability to execute multiple operations in a
+single transaction. For example, instead of requiring separate transactions for token approval and
+then swapping, both operations can be combined into a single UserOperation.
+
+To perform batch transactions, you must use the `BundlerClient` provided by Web3Auth:
+
+```ts
+// Use your Web3Auth instance
+const accountAbstractionProvider = web3auth.accountAbstractionProvider;
+// Use the same accountAbstractionProvider we created earlier.
+const bundlerClient = accountAbstractionProvider.bundlerClient!;
+const smartAccount = accountAbstractionProvider.smartAccount!;
+
+// 0.00001 ETH in WEI format
+const amount = 10000000000000n;
+
+const userOpHash = await bundlerClient.sendUserOperation({
+ account: smartAccount,
+ calls: [
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ ],
+});
+
+// Retrieve user operation receipt
+const receipt = await bundlerClient.waitForUserOperationReceipt({
+ hash: userOpHash,
+});
+
+const transactionHash = receipt.receipt.transactionHash;
+```
+
+:::info
+
+When calling `sendUserOperation`, it returns a UserOperation hash, not the transaction hash. To get
+the final transaction details, use `waitForUserOperationReceipt`.
+
+:::
+
+### Send Transaction Using ERC-20 Paymaster
+
+You can use ERC-20 tokens to pay for transaction fees instead of the native token (e.g., ETH). This
+requires approving the token for use by the paymaster:
+
+```ts
+// Use your Web3Auth instance
+const accountAbstractionProvider = web3auth.accountAbstractionProvider;
+
+// Use the same accountAbstractionProvider we created earlier.
+const bundlerClient = accountAbstractionProvider.bundlerClient!;
+const smartAccount = accountAbstractionProvider.smartAccount!;
+
+// Pimlico's ERC-20 Paymaster address
+const pimlicoPaymasterAddress = "0x0000000000000039cd5e8aE05257CE51C473ddd1";
+
+// USDC address on Ethereum Sepolia
+const usdcAddress = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238";
+
+// 0.00001 ETH in WEI format
+const amount = 10000000000000n;
+
+// 10 USDC in WEI format. Since USDC has 6 decimals, 10 * 10^6
+const approvalAmount = 10000000n;
+
+const userOpHash = await bundlerClient.sendUserOperation({
+ account: smartAccount,
+ calls: [
+ // Approve USDC on Sepolia chain for Pimlico's ERC 20 Paymaster
+ {
+ to: usdcAddress,
+ abi: parseAbi(["function approve(address,uint)"]),
+ functionName: "approve",
+ args: [pimlicoPaymasterAddress, approvalAmount],
+ },
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ ],
+});
+
+// Retrieve user operation receipt
+const receipt = await bundlerClient.waitForUserOperationReceipt({
+ hash: userOpHash,
+});
+
+const transactionHash = receipt.receipt.transactionHash;
+```
diff --git a/docs/sdk/web/js/advanced/wallet-services.mdx b/docs/sdk/web/js/advanced/wallet-services.mdx
new file mode 100644
index 000000000..82e345755
--- /dev/null
+++ b/docs/sdk/web/js/advanced/wallet-services.mdx
@@ -0,0 +1,267 @@
+---
+title: Wallet Services
+sidebar_label: Wallet Services
+description: "@web3auth/modal Wallet Services | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx";
+import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Web3Auth Wallet Services provides a comprehensive suite of wallet functionality including Fiat on
+Ramp, Swaps, and Wallet UI Interoperability with WalletConnect. These services enhance your
+application by offering a complete wallet experience without building these features from scratch.
+
+:::tip
+
+All these configurations can be directly accessed and managed through the Web3Auth dashboard. Manual
+configuration in the SDK is optional and provided here for reference purposes.
+
+:::
+
+
+
+## `walletServicesConfig`
+
+The `walletServicesConfig` option allows you to customize the wallet services experience for your
+users.
+
+```tsx
+walletServicesConfig?: WalletServicesConfig;
+```
+
+### Configuration Options
+
+
+
+
+| Property | Type | Description |
+| ---------------------- | -------------------------- | ----------------------------------------------- |
+| `confirmationStrategy` | CONFIRMATION_STRATEGY_TYPE | How to display confirmation screens |
+| `modalZIndex` | number | Z-index for modal windows |
+| `enableKeyExport` | boolean | Enable private key export functionality |
+| `whiteLabel` | Object | Customization options for the widget appearance |
+
+#### Confirmation Strategy Options
+
+| Strategy | Description |
+| -------------- | -------------------------------------------------------------- |
+| `default` | Uses auto-approve by default, modal for WalletConnect requests |
+| `modal` | Always uses modal for confirmations |
+| `auto-approve` | Automatically approves transactions without confirmation |
+
+#### WhiteLabel Options
+
+| Property | Type | Description |
+| ------------------- | -------------------- | ----------------------------------------- |
+| `showWidgetButton` | boolean | Whether to show the widget button |
+| `buttonPosition` | BUTTON_POSITION_TYPE | Position of the widget button on the page |
+| `hideNftDisplay` | boolean | Hide NFT display in the wallet |
+| `hideTokenDisplay` | boolean | Hide token display in the wallet |
+| `hideTransfers` | boolean | Hide transfer functionality |
+| `hideTopup` | boolean | Hide top-up (fiat on-ramp) functionality |
+| `hideReceive` | boolean | Hide receive address functionality |
+| `hideSwap` | boolean | Hide token swap functionality |
+| `hideShowAllTokens` | boolean | Hide the "show all tokens" option |
+| `hideWalletConnect` | boolean | Hide WalletConnect integration |
+| `defaultPortfolio` | "token" \| "nft" | Default portfolio view |
+
+#### Button Position Options
+
+| Position | Description |
+| -------------- | ------------------------------- |
+| `bottom-left` | Bottom left corner of the page |
+| `top-left` | Top left corner of the page |
+| `bottom-right` | Bottom right corner of the page |
+| `top-right` | Top right corner of the page |
+
+
+
+
+
+```tsx
+export type WalletServicesConfig = Omit<
+ WsEmbedParams,
+ | "buildEnv"
+ | "enableLogging"
+ | "chainId"
+ | "chains"
+ | "confirmationStrategy"
+ | "accountAbstractionConfig"
+> & {
+ /**
+ * Determines how to show confirmation screens
+ * @defaultValue default
+ *
+ * default & auto-approve
+ * - use auto-approve as default
+ * - if wallet connect request use modal
+ *
+ * modal
+ * - use modal always
+ */
+ confirmationStrategy?: Exclude;
+ modalZIndex?: number;
+};
+
+export interface WsEmbedParams {
+ /**
+ * Supported chains
+ */
+ chains: ProviderConfig[];
+ /**
+ * Chain to connect with
+ */
+ chainId: string;
+ /**
+ * Build Environment of WsEmbed.
+ *
+ * production uses https://wallet.web3auth.io,
+ *
+ * staging uses https://staging-wallet.web3auth.io,
+ *
+ * testing uses https://develop-wallet.web3auth.io (latest internal build)
+ *
+ * development uses http://localhost:4050 (expects wallet-services-frontend to be run locally),
+ *
+ * @defaultValue production
+ */
+ buildEnv?: WS_EMBED_BUILD_ENV_TYPE;
+ /**
+ * Enables or disables logging.
+ *
+ * Defaults to false in prod and true in other environments
+ */
+ enableLogging?: boolean;
+ /**
+ * url of widget to load
+ *
+ * Defaults to true
+ * @defaultValue true
+ */
+ walletUrls?: Partial>;
+ /**
+ * Determines how to show confirmation screens
+ * @defaultValue default
+ *
+ * default & popup
+ * - use popop as default
+ * - if wallet connect request use modal
+ *
+ * modal
+ * - use modal always
+ *
+ * auto-approve
+ * - does not work on embed. will use default
+ */
+ confirmationStrategy?: CONFIRMATION_STRATEGY_TYPE;
+ /**
+ * Enable and configure account abstraction
+ */
+ accountAbstractionConfig?: AccountAbstractionMultiChainConfig;
+ /**
+ * Enable private key export
+ *
+ * Defaults to false
+ * @defaultValue false
+ */
+ enableKeyExport?: boolean;
+ /**
+ * Allows you to customize the look & feel of the widget
+ */
+ whiteLabel?: {
+ /**
+ * whether to show/hide ws-embed widget.
+ *
+ * Defaults to true
+ * @defaultValue true
+ */
+ showWidgetButton?: boolean;
+ /**
+ * Determines where the wsEmbed widget is visible on the page.
+ * @defaultValue bottom-left
+ */
+ buttonPosition?: BUTTON_POSITION_TYPE;
+ hideNftDisplay?: boolean;
+ hideTokenDisplay?: boolean;
+ hideTransfers?: boolean;
+ hideTopup?: boolean;
+ hideReceive?: boolean;
+ hideSwap?: boolean;
+ hideShowAllTokens?: boolean;
+ hideWalletConnect?: boolean;
+ defaultPortfolio?: "token" | "nft";
+ } & WhiteLabelData;
+}
+
+export declare const CONFIRMATION_STRATEGY: {
+ readonly POPUP: "popup";
+ readonly MODAL: "modal";
+ readonly AUTO_APPROVE: "auto-approve";
+ readonly DEFAULT: "default";
+};
+export type CONFIRMATION_STRATEGY_TYPE =
+ (typeof CONFIRMATION_STRATEGY)[keyof typeof CONFIRMATION_STRATEGY];
+
+export type AccountAbstractionMultiChainConfig = {
+ smartAccountType?: SmartAccountType;
+ chains?: {
+ chainId: string;
+ bundlerConfig: BundlerConfig;
+ paymasterConfig?: PaymasterConfig;
+ smartAccountConfig?: SmartAccountConfig;
+ }[];
+};
+
+export declare const BUTTON_POSITION: {
+ readonly BOTTOM_LEFT: "bottom-left";
+ readonly TOP_LEFT: "top-left";
+ readonly BOTTOM_RIGHT: "bottom-right";
+ readonly TOP_RIGHT: "top-right";
+};
+export type BUTTON_POSITION_TYPE = (typeof BUTTON_POSITION)[keyof typeof BUTTON_POSITION];
+```
+
+
+
+
+## Usage
+
+```ts
+import {
+ Web3Auth,
+ BUTTON_POSITION,
+ CONFIRMATION_STRATEGY,
+ WEB3AUTH_NETWORK,
+} from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ walletServicesConfig: {
+ confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
+ modalZIndex: 99999,
+ enableKeyExport: false,
+ whiteLabel: {
+ showWidgetButton: true,
+ buttonPosition: BUTTON_POSITION.BOTTOM_RIGHT,
+ hideNftDisplay: false,
+ hideTokenDisplay: false,
+ hideTransfers: false,
+ hideTopup: false,
+ hideReceive: false,
+ hideSwap: false,
+ hideShowAllTokens: false,
+ hideWalletConnect: false,
+ defaultPortfolio: "token",
+ },
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
diff --git a/docs/sdk/web/js/advanced/whitelabel.mdx b/docs/sdk/web/js/advanced/whitelabel.mdx
new file mode 100644
index 000000000..a11d27211
--- /dev/null
+++ b/docs/sdk/web/js/advanced/whitelabel.mdx
@@ -0,0 +1,266 @@
+---
+title: Whitelabel
+sidebar_label: Whitelabel
+description: "Whitelabel Web3Auth | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Web3Auth allows complete whitelabeling with application branding for a consistent user experience.
+You can customize three different aspects:
+
+- **UI elements**: Customize the appearance of modals and components
+- **Branding**: Apply your brand colors, logos, and themes
+- **Translations**: Localize the interface for your users
+
+:::info
+
+All of these settings can be easily managed directly from the Web3Auth Dashboard. Once you update
+your branding, or UI preferences there, the changes will automatically apply to your integration. As
+this is the recommended approach, we will not cover basic customization via the SDK here. Instead,
+this guide focuses on advanced customization options available through the SDK.
+
+:::
+
+
+
+## Customizing the Web3Auth Modal
+
+While basic modal appearance can be configured directly on the dashboard, the following advanced
+options provide even greater control through the `modalConfig` property.
+
+### `modalConfig`
+
+The `modalConfig` option in the constructor lets you configure the modal UI and customize
+authentication:
+
+```ts
+modalConfig?: ConnectorsModalConfig;
+
+export interface ConnectorsModalConfig {
+ connectors?: Partial>;
+ hideWalletDiscovery?: boolean;
+}
+
+export type WALLET_CONNECTOR_TYPE = (typeof WALLET_CONNECTORS)[keyof typeof WALLET_CONNECTORS];
+
+export interface ModalConfig extends Omit {
+ loginMethods?: LoginMethodConfig;
+}
+```
+
+### `LoginMethodConfig`
+
+The `LoginMethodConfig` interface provides extensive customization options for each authentication
+method:
+
+
+
+
+| Property | Type | Description |
+| ------------------------- | ---------------------- | ------------------------------------------------------------------------------------ |
+| `name` | `string` | Custom display name (defaults to auth app's default if not provided) |
+| `description` | `string` | Button description (renders as full-length button if provided; otherwise as an icon) |
+| `logoHover` | `string` | Logo shown on mouse hover (defaults to auth app's default) |
+| `logoLight` | `string` | Logo for dark theme/background (defaults to auth app's default) |
+| `logoDark` | `string` | Logo for light theme/background (defaults to auth app's default) |
+| `mainOption` | `boolean` | Whether to show login button on the main list |
+| `showOnModal` | `boolean` | Controls visibility of the login button on modal |
+| `authConnectionId` | `string` | Auth connection ID of the provider |
+| `groupedAuthConnectionId` | `string` | Grouped auth connection ID of the provider |
+| `extraLoginOptions` | `ExtraLoginOptions` | Additional parameters for social login |
+| `authConnection` | `AUTH_CONNECTION_TYPE` | Auth connection type (useful for customizing login buttons with custom connectors) |
+| `isDefault` | `boolean` | Whether it's the default connector _(internal)_ |
+
+
+
+
+
+```ts
+export type LoginMethodConfig = Partial<
+ Record<
+ AUTH_CONNECTION_TYPE,
+ {
+ /**
+ * Display Name. If not provided, we use the default for auth app
+ */
+ name?: string;
+ /**
+ * Description for button. If provided, it renders as a full length button. else, icon button
+ */
+ description?: string;
+ /**
+ * Logo to be shown on mouse hover. If not provided, we use the default for auth app
+ */
+ logoHover?: string;
+ /**
+ * Logo to be shown on dark background (dark theme). If not provided, we use the default for auth app
+ */
+ logoLight?: string;
+ /**
+ * Logo to be shown on light background (light theme). If not provided, we use the default for auth app
+ */
+ logoDark?: string;
+ /**
+ * Show login button on the main list
+ */
+ mainOption?: boolean;
+ /**
+ * Whether to show the login button on modal or not
+ */
+ showOnModal?: boolean;
+ /**
+ * Auth connection id of the provider.
+ */
+ authConnectionId?: string;
+ /**
+ * Grouped auth connection id of the provider.
+ */
+ groupedAuthConnectionId?: string;
+ /**
+ * ExtraLoginOption params to be used for social login.
+ */
+ extraLoginOptions?: ExtraLoginOptions;
+ /**
+ * Auth connection type of the auth connector.
+ * Can be different from the original key.
+ *
+ * Example: This helps in customizing the google login button with auth0 custom connector.
+ */
+ authConnection?: AUTH_CONNECTION_TYPE;
+ /**
+ * Whether is it default connector.
+ *
+ * @internal
+ */
+ isDefault?: boolean;
+ }
+ >
+>;
+```
+
+
+
+
+## Common Customization Examples
+
+### Disabling Specific Social Login Methods
+
+Web3Auth provides the following social login methods:
+
+```tsx
+export declare const AUTH_CONNECTION: {
+ readonly GOOGLE: "google";
+ readonly TWITTER: "twitter";
+ readonly FACEBOOK: "facebook";
+ readonly DISCORD: "discord";
+ readonly FARCASTER: "farcaster";
+ readonly APPLE: "apple";
+ readonly GITHUB: "github";
+ readonly REDDIT: "reddit";
+ readonly LINE: "line";
+ readonly KAKAO: "kakao";
+ readonly LINKEDIN: "linkedin";
+ readonly TWITCH: "twitch";
+ readonly TELEGRAM: "telegram";
+ readonly WECHAT: "wechat";
+ readonly EMAIL_PASSWORDLESS: "email_passwordless";
+ readonly SMS_PASSWORDLESS: "sms_passwordless";
+ readonly CUSTOM: "custom";
+ readonly PASSKEYS: "passkeys";
+ readonly AUTHENTICATOR: "authenticator";
+};
+```
+
+To disable specific login methods, set `showOnModal` to `false` for the corresponding auth
+connection:
+
+```ts
+import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ // Disable Facebook and Reddit
+ facebook: {
+ name: "facebook",
+ showOnModal: false,
+ },
+ reddit: {
+ name: "reddit",
+ showOnModal: false,
+ },
+ },
+ // Setting to false will hide all social login methods from modal
+ showOnModal: true,
+ },
+ },
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
+
+### Enhancing Email and SMS Login Experience
+
+By specifying a custom `authConnectionId` for email or SMS login methods, you can ensure the entire
+authentication flow takes place seamlessly within the modal, eliminating the need for external
+popups.
+
+:::info
+
+In the default setup, users are redirected to a separate popup to enter their email or phone number
+for security purposes. However, with a custom `authConnectionId`, this input step is securely
+embedded directly inside the modal, providing a smoother and more integrated user experience.
+
+:::
+
+```ts
+import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ },
+ },
+ },
+ // focus-end
+});
+
+// Initialize web3auth
+await web3auth.init();
+```
+
+## Creating a Fully Custom UI
+
+For complete control over the authentication interface, you can bypass the Web3Auth modal entirely
+and use the `connectTo` function. This allows you to create custom buttons that connect directly to
+specific auth providers.
+
+See the [Custom Authentication](./custom-authentication) section for detailed implementation
+instructions.
diff --git a/docs/sdk/web/js/ethereum-integration.mdx b/docs/sdk/web/js/ethereum-integration.mdx
new file mode 100644
index 000000000..de1cad942
--- /dev/null
+++ b/docs/sdk/web/js/ethereum-integration.mdx
@@ -0,0 +1,19 @@
+---
+title: Ethereum Integration with Web3Auth JS SDK
+sidebar_label: Ethereum Integration
+description: "@web3auth/modal Ethereum Integration with Web3Auth JS SDK | Documentation - Web3Auth"
+---
+
+import EthereumIntegration from "./_ethereum-integration-snippets.mdx";
+
+While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
+provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
+This provider can be used with libraries like
+[`ethers.js`](https://docs.ethers.io/v5/getting-started/) & [`viem`](https://viem.sh/) etc. to make
+[Ethereum](https://ethereum.org) calls like getting the user's `account`, fetching `balance`,
+`sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have
+highlighted a few examples to get you started.
+
+## Integration
+
+
diff --git a/docs/sdk/web/js/events.mdx b/docs/sdk/web/js/events.mdx
new file mode 100644
index 000000000..0e023b2d6
--- /dev/null
+++ b/docs/sdk/web/js/events.mdx
@@ -0,0 +1,245 @@
+---
+title: Web3Auth Events & Status
+sidebar_label: SDK Events
+description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
+
+# Web3Auth Events & Status
+
+This page documents the key properties and lifecycle events available from a Web3Auth instance.
+These allow you to track the connection status, react to changes, and build responsive user
+experiences.
+
+## `connected`
+
+Returns `true` if a wallet is connected, otherwise `false`.
+
+#### Interface
+
+```ts
+get connected(): boolean;
+```
+
+#### Usage
+
+```js
+const isConnected = web3auth.connected;
+```
+
+## `provider`
+
+Returns the current provider instance if connected.
+
+#### Interface
+
+```ts
+get provider(): IProvider | null;
+```
+
+#### Usage
+
+```js
+const provider = web3auth.provider;
+```
+
+## `connectedConnectorName`
+
+Name of the currently connected wallet connector, or `null` if not connected.
+
+#### Interface
+
+```ts
+connectedConnectorName: WALLET_CONNECTOR_TYPE | null;
+```
+
+##### `WALLET_CONNECTOR_TYPE`
+
+
+
+
+| Event | Description |
+| ------------------- | ---------------------------- |
+| `AUTH` | Web3Auth connector. |
+| `WALLET_CONNECT_V2` | Wallet Connect V2 connector. |
+| `COINBASE` | Coinbase connector. |
+| `METAMASK` | Metamask connector. |
+
+
+
+
+```ts
+export type WALLET_CONNECTOR_TYPE = (typeof WALLET_CONNECTORS)[keyof typeof WALLET_CONNECTORS];
+export declare const WALLET_CONNECTORS: {
+ readonly AUTH: "auth";
+ readonly WALLET_CONNECT_V2: "wallet-connect-v2";
+ readonly COINBASE: "coinbase";
+ readonly METAMASK: "metamask";
+};
+```
+
+
+
+
+#### Usage
+
+```js
+const connectorName = web3auth.connectedConnectorName;
+```
+
+## `status`
+
+Current status of the Web3Auth instance. Emits status change events.
+
+#### Interface
+
+```ts
+status: CONNECTOR_STATUS_TYPE;
+```
+
+##### `CONNECTOR_STATUS_TYPE`
+
+
+
+
+| Event | Description |
+| --------------- | --------------------------------------------------------------- |
+| `NOT_READY` | Triggered when the connector is not ready. |
+| `READY` | Triggered when the connector is ready. |
+| `CONNECTING` | Triggered when a connection is being established. |
+| `CONNECTED` | Triggered when a wallet is successfully connected. |
+| `DISCONNECTING` | Triggered when the wallet is in the process of disconnecting. |
+| `DISCONNECTED` | Triggered when the wallet is disconnected. |
+| `ERRORED` | Triggered when an error occurs during the connection lifecycle. |
+
+
+
+
+```ts
+export type CONNECTOR_STATUS_TYPE = (typeof CONNECTOR_STATUS)[keyof typeof CONNECTOR_STATUS];
+export declare const CONNECTOR_STATUS: {
+ readonly NOT_READY: "not_ready";
+ readonly READY: "ready";
+ readonly CONNECTING: "connecting";
+ readonly CONNECTED: "connected";
+ readonly DISCONNECTING: "disconnecting";
+ readonly DISCONNECTED: "disconnected";
+ readonly ERRORED: "errored";
+};
+```
+
+
+
+
+#### Usage
+
+```js
+const status = web3auth.status;
+```
+
+## `currentChain`
+
+Returns the current chain configuration if connected.
+
+#### Interface
+
+```ts
+get currentChain(): CustomChainConfig | undefined;
+```
+
+#### `chainConfig`
+
+
+
+#### Usage
+
+```js
+const chain = web3auth.currentChain;
+```
+
+## `connectedConnector`
+
+Returns the connector instance for the connected wallet, or `null`.
+
+#### Interface
+
+```ts
+get connectedConnector(): IConnector | null;
+```
+
+#### Usage
+
+```js
+const connector = web3auth.connectedConnector;
+```
+
+## `accountAbstractionProvider`
+
+Returns the account abstraction provider if available.
+
+#### Interface
+
+```ts
+get accountAbstractionProvider(): AccountAbstractionProvider | null;
+```
+
+#### Usage
+
+```js
+const aaProvider = web3auth.accountAbstractionProvider;
+```
+
+## `getConnector`
+
+Returns a connector instance for a given connector name and chain namespace.
+
+#### Interface
+
+```ts
+getConnector(connectorName: WALLET_CONNECTOR_TYPE, chainNamespace?: ChainNamespaceType): IConnector | null;
+
+export type WALLET_CONNECTOR_TYPE = (typeof WALLET_CONNECTORS)[keyof typeof WALLET_CONNECTORS];
+export declare const WALLET_CONNECTORS: {
+ readonly AUTH: "auth";
+ readonly WALLET_CONNECT_V2: "wallet-connect-v2";
+ readonly COINBASE: "coinbase";
+ readonly METAMASK: "metamask";
+};
+export type ChainNamespaceType = (typeof CHAIN_NAMESPACES)[keyof typeof CHAIN_NAMESPACES];
+```
+
+#### Usage
+
+```js
+const connector = web3auth.getConnector("WALLET_CONNECT_V2", "eip155");
+```
+
+## `getPlugin`
+
+Returns a plugin instance by name, or `null` if not found.
+
+#### Interface
+
+```ts
+getPlugin(name: string): IPlugin | null;
+
+export interface IPlugin extends SafeEventEmitter {
+ name: string;
+ status: PLUGIN_STATUS_TYPE;
+ SUPPORTED_CONNECTORS: WALLET_CONNECTOR_TYPE[];
+ pluginNamespace: PluginNamespace;
+ initWithWeb3Auth(web3auth: IWeb3AuthCore, whiteLabel?: WhiteLabelData): Promise;
+ connect(): Promise;
+ disconnect(): Promise;
+ cleanup(): Promise;
+}
+```
+
+#### Usage
+
+```js
+const plugin = web3auth.getPlugin("walletServices");
+```
diff --git a/docs/sdk/web/js/examples.mdx b/docs/sdk/web/js/examples.mdx
new file mode 100644
index 000000000..6e1809d6c
--- /dev/null
+++ b/docs/sdk/web/js/examples.mdx
@@ -0,0 +1,11 @@
+---
+title: Examples - PnP Web Modal SDK
+sidebar_label: Examples
+description: "@web3auth/modal Examples | Documentation - Web3Auth"
+hide_table_of_contents: true
+---
+
+import Examples from "@site/src/components/Examples";
+import { webExamples } from "@site/src/common/maps";
+
+
diff --git a/docs/sdk/web/js/functions/connect.mdx b/docs/sdk/web/js/functions/connect.mdx
new file mode 100644
index 000000000..29b7d6403
--- /dev/null
+++ b/docs/sdk/web/js/functions/connect.mdx
@@ -0,0 +1,119 @@
+---
+title: connect & connectTo
+sidebar_label: connect & connectTo
+description: "@web3auth/modal Connect Functions | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+Functions to connect users to Web3Auth in the browser.
+
+### Import
+
+```javascript
+import { Web3Auth } from "@web3auth/modal";
+```
+
+### Choosing the Right Connection Method
+
+You can connect users to Web3Auth in two main ways, depending on your application's needs:
+
+- **Use `connect()`** when you want to display the default Web3Auth modal. This is ideal if you want
+ to provide users with a pre-built, user-friendly interface where they can choose from all
+ available login options (social logins, wallets, etc.) with minimal setup.
+
+- **Use `connectTo(connector, params)`** when you want to build a fully custom login experience.
+ This method lets you bypass the Web3Auth modal and connect directly to a specific wallet connector
+ (such as Google, Facebook, or a particular wallet). Choose this if you want to design your own UI
+ for login options, or if you want to restrict users to a specific authentication method. This
+ method also allows you to use JWT based login configurations.
+
+**Summary:**
+
+- Use `connect()` for the standard modal experience.
+- Use `connectTo()` for custom UIs or direct connection to a specific login method.
+
+### Usage
+
+
+
+
+
+:::info
+
+This is the most common way to connect to Web3Auth. It opens the Web3Auth modal UI, allowing users
+to select from available login options.
+
+:::
+
+```javascript
+// Initialize Web3Auth first
+const web3auth = new Web3Auth({
+ // Your configuration options
+});
+
+await web3auth.init();
+
+// Show the modal and connect
+const provider = await web3auth.connect();
+```
+
+
+
+
+
+:::info
+
+This method allows you to build your own custom connection UI. It bypasses the Web3Auth modal UI,
+allowing you to create your own custom UI for login options. This can be useful if you want to hide
+Web3Auth from your end users.
+
+:::
+
+```javascript
+import { WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal";
+
+// Initialize Web3Auth first
+const web3auth = new Web3Auth({
+ // Your configuration options
+});
+
+await web3auth.init();
+
+// Connect directly to Google
+const provider = await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.GOOGLE,
+});
+```
+
+
+
+
+
+### Return Types
+
+```tsx
+connect(): Promise;
+connectTo(connector: T, params?: LoginParamMap[T]): Promise;
+```
+
+#### Return Values
+
+- **IProvider | null**
+ - On successful login, returns an `IProvider` instance containing the respective provider
+ corresponding to your selected blockchain.
+ - On unsuccessful login, returns `null`.
+
+:::tip
+
+Read more about connecting your users with the selected blockchain in the
+[Providers SDK Reference](/sdk/web/react).
+
+:::
diff --git a/docs/sdk/web/js/functions/enableMFA.mdx b/docs/sdk/web/js/functions/enableMFA.mdx
new file mode 100644
index 000000000..61647b4a0
--- /dev/null
+++ b/docs/sdk/web/js/functions/enableMFA.mdx
@@ -0,0 +1,36 @@
+---
+title: enableMFA
+sidebar_label: enableMFA
+description: "@web3auth/modal Function enableMFA | Documentation - Web3Auth"
+---
+
+Function to enable Multi-Factor Authentication (MFA) for users with Web3Auth.
+
+ge
+
+```javascript
+try {
+ await web3auth.enableMFA();
+ console.log("MFA setup process initiated");
+} catch (error) {
+ console.error("Error enabling MFA:", error);
+}
+```
+
+### Interface
+
+```ts
+enableMFA(loginParams?: T): Promise;
+```
+
+#### loginParams
+
+Optional parameters for the login process when setting up MFA.
+
+#### Return Value
+
+`Promise`
+
+A promise that resolves when the MFA setup process has been initiated. This function will trigger a
+redirect to the MFA setup page, where the user will be asked to login again and set up the MFA
+methods according to the configuration set in the Web3Auth instance.
diff --git a/docs/sdk/web/js/functions/functions.mdx b/docs/sdk/web/js/functions/functions.mdx
new file mode 100644
index 000000000..54faa603f
--- /dev/null
+++ b/docs/sdk/web/js/functions/functions.mdx
@@ -0,0 +1,58 @@
+---
+title: Using PnP Web Modal SDK
+sidebar_label: Overview
+description: "@web3auth/modal Functions | Documentation - Web3Auth"
+---
+
+Web3Auth provides a comprehensive set of functions to handle authentication, user management, and
+blockchain interactions in your applications. These functions allow you to implement features like
+user login, multi-factor authentication, chain switching, and wallet services with minimal effort.
+Each function is designed to handle a specific aspect of Web3Auth functionality, making it easy to
+integrate into your projects.
+
+## List of Functions
+
+:::tip
+
+For detailed usage, configuration options, and code examples, refer to the dedicated documentation
+page for each function.
+
+:::
+
+### Authentication Functions
+
+| Function Name | Description |
+| ------------- | ------------------------------------------- |
+| `connect()` | Displays the Modal and logs in the user. |
+| `logout()` | Logs out the user from the current session. |
+
+### User Management Functions
+
+| Function Name | Description |
+| -------------------- | ----------------------------------------------------------- |
+| `getUserInfo()` | Retrieves the authenticated user's information. |
+| `getIdentityToken()` | Gets the idToken from Web3Auth for authentication purposes. |
+
+### Security Functions
+
+| Function Name | Description |
+| ------------- | ---------------------------------------------------------------------------------- |
+| `enableMFA()` | Enables Multi-Factor Authentication for the user. |
+| `manageMFA()` | Redirects the user to manage their MFA settings in the Web3Auth Account Dashboard. |
+
+### Blockchain Functions
+
+| Function Name | Description |
+| --------------- | ---------------------------------------------------------------------------------------- |
+| `addChain()` | Adds chain configuration details to the connected adapter. |
+| `switchChain()` | Switches to a different blockchain network as per chainId already added to chain config. |
+
+### Wallet Services Plugin Functions
+
+| Function Name | Description |
+| ------------------------------- | --------------------------------------------- |
+| `showCheckout()` | Initiates cryptocurrency top-up for the user. |
+| `showWalletConnectScanner()` | Displays the WalletConnect QR Code Scanner. |
+| `showWalletUI()` | Shows the Embedded Wallet UI. |
+| `showSwap()` | Displays the Swap UI for token exchanges. |
+| `showTransactionConfirmation()` | Shows the Transaction Confirmation UI. |
diff --git a/docs/sdk/web/js/functions/getIdentityToken.mdx b/docs/sdk/web/js/functions/getIdentityToken.mdx
new file mode 100644
index 000000000..36b49e112
--- /dev/null
+++ b/docs/sdk/web/js/functions/getIdentityToken.mdx
@@ -0,0 +1,181 @@
+---
+title: getIdentityToken
+sidebar_label: getIdentityToken
+description: "@web3auth/modal getIdentityToken | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+Function to retrieve the identity token from Web3Auth.
+
+:::note
+
+This function will only return information based on the connected adapter. These details are not
+stored anywhere and are fetched from the adapter during the connection and remain in the session.
+
+:::
+
+### Usage
+
+```ts
+// Later in your code:
+try {
+ const idToken = await web3auth.getIdentityToken();
+ console.log(idToken);
+} catch (error) {
+ console.error("Error authenticating user:", error);
+}
+```
+
+### Return Type
+
+```typescript
+getIdentityToken(): Promise
+
+type UserAuthInfo = { idToken: string };
+```
+
+### Response Format
+
+The `idToken` is a JWT that can be decoded to get user information.
+
+
+
+
+
+
+
+
+
+| Parameter | Type | Description |
+| ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `iat` | `number` | The "iat" (issued at) claim identifies the time at which the JWT was issued. |
+| `aud` | `string` | The "aud" (audience) claim identifies the recipients that the JWT is intended for. (Here, it's the dapp `client_id`) |
+| `iss` | `string` | The "iss" (issuer) claim identifies who issued the JWT. (Here, it's Web3Auth `https://api.openlogin.com/`) |
+| `email` | `string` | The email address of the user (optional) |
+| `name` | `string` | The name of the user (optional) |
+| `profileImage` | `string` | The profile image of the user (optional) |
+| `verifier` | `string` | Web3auth's verifier used while user login |
+| `verifierId` | `string` | Unique user id given by OAuth login provider |
+| `aggregateVerifier` | `string` | Name of the verifier if you are using a single id verifier (aggregateVerifier) (optional) |
+| `exp` | `number` | The "exp" (expiration time) claim identifies the expiration time on or after which the _JWT MUST NOT be accepted for processing_. |
+| `wallets` | `array` | list of wallets for which this token is issued:
`curve` "secp256k1" (default) or "ed25519" You can specify which curve you want use for the encoded public key in the login parameters
`type` "web3auth_key" incase of social logins
`public_key` compressed public key derived based on the specified curve
|
+
+
+
+
+
+`getIdentityToken(): Promise`
+
+```tsx
+export type UserAuthInfo = { idToken: string };
+```
+
+
+
+
+
+#### Sample Response
+
+```json
+{
+ "iat": 1655835494,
+ "aud": "BCtbnOamqh0cJFEUYA0NB5YkvBECZ3HLZsKfvSRBvew2EiiKW3UxpyQASSR0artjQkiUOCHeZ_ZeygXpYpxZjOs",
+ "iss": "https://api.openlogin.com/",
+ "email": "xyz@xyz.com",
+ "name": "John Doe",
+ "profileImage": "https://lh3.googleusercontent.com/a/AATXAJx3lnGmHiM4K97uLo9Rb0AxOceH-dQCBSRqGbck=s96-c",
+ "verifier": "torus",
+ "verifierId": "xyz@xyz.com",
+ "aggregateVerifier": "tkey-google-lrc",
+ "exp": 1655921894,
+ "wallets": [
+ {
+ "public_key": "035143318b83eb5d31611f8c03582ab1200494f66f5e11a67c34f5581f48c1b70b",
+ "type": "web3auth_key",
+ "curve": "secp256k1"
+ }
+ ]
+}
+```
+
+
+
+
+
+
+
+
+
+| Parameter | Type | Description |
+| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `iat` | `number` | The "iat" (issued at) claim identifies the time at which the JWT was issued. |
+| `aud` | `string` | The "audience" claim identifies the recipients that the JWT is intended for. (Here, it's `website's url`) |
+| `iss` | `string` | The "issuer" claim identifies who issued the JWT. Here, issuer could be `torus-evm`, `torus-solana`, `metamask`, `phantom`, `walletconnect-v1`, `coinbase`, `solflare` |
+| `wallets` | `array` | list of wallets for which this token is issued:
`address` : Wallet public address
`type` Network Type such as "ethereum", "solana" or "starkware" incase of external wallets
|
+
+
+
+
+
+`getIdentityToken(): Promise`
+
+```tsx
+export type UserAuthInfo = { idToken: string };
+```
+
+
+
+
+
+#### Sample Response
+
+```json
+{
+ "iat": 1661158877,
+ "issuer": "",
+ "audience": "https://requesting.website",
+ "wallets": [
+ {
+ "address": "0x809d4310d578649d8539e718030ee11e603ee8f3",
+ "type": "ethereum"
+ }
+ ],
+ "exp": 1661245277
+}
+```
+
+
+
+
+
+### Error Handling
+
+```javascript
+try {
+ const userInfo = await web3auth.getIdentityToken();
+ // Use the token
+} catch (error) {
+ // Handle errors (e.g., user not connected, network issues)
+ console.error("Authentication failed:", error);
+}
+```
diff --git a/docs/sdk/web/js/functions/getUserInfo.mdx b/docs/sdk/web/js/functions/getUserInfo.mdx
new file mode 100644
index 000000000..3ab6b99ed
--- /dev/null
+++ b/docs/sdk/web/js/functions/getUserInfo.mdx
@@ -0,0 +1,111 @@
+---
+title: getUserInfo
+sidebar_label: getUserInfo
+description: "@web3auth/modal Function getUserInfo | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+Function to retrieve information about the connected user.
+
+:::note
+
+This function will only return information based on the connected adapter. These details are not
+stored anywhere and are fetched from the adapter during the connection and remain in the session.
+
+:::
+
+### Usage
+
+```javascript
+// After successful login
+const userInfo = await web3auth.getUserInfo();
+console.log(userInfo);
+```
+
+### Return Type
+
+
+
+
+
+| Property | Type | Description |
+| ------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `email` | string | Email of the user. |
+| `name` | string | Name of the user. |
+| `profileImage` | string | Profile image of the user. |
+| `aggregateVerifier` | string | Aggregate verifier of the user. |
+| `verifier` | string | Verifier of the user. |
+| `verifierId` | string | Verifier ID of the user. |
+| `typeOfLogin` | string | Type of login provider. |
+| `dappShare` | string | Dapp share of the user. |
+| `idToken` | string | Token issued by Web3Auth. |
+| `oAuthIdToken` | string | Token issued by OAuth provider. Will be available only if you are using custom verifiers. |
+| `oAuthAccessToken` | string | Access Token issued by OAuth provider. Will be available only if you are using custom verifiers. |
+| `appState` | string | App state of the user. |
+| `touchIDPreference` | string | Touch ID preference of the user. |
+| `isMfaEnabled` | boolean | Whether Multi Factor Authentication is enabled for the user. |
+
+
+
+
+
+```typescript
+getUserInfo(): Promise>;
+
+type AuthUserInfo = {
+ email?: string;
+ name?: string;
+ profileImage?: string;
+ aggregateVerifier?: string;
+ verifier: string;
+ verifierId: string;
+ typeOfLogin: LOGIN_PROVIDER_TYPE | CUSTOM_LOGIN_PROVIDER_TYPE;
+ dappShare?: string;
+ /**
+ * Token issued by Web3Auth.
+ */
+ idToken?: string;
+ /**
+ * Token issued by OAuth provider. Will be available only if you are using
+ * custom verifiers.
+ */
+ oAuthIdToken?: string;
+ /**
+ * Access Token issued by OAuth provider. Will be available only if you are using
+ * custom verifiers.
+ */
+ oAuthAccessToken?: string;
+ appState?: string;
+ touchIDPreference?: string;
+ isMfaEnabled?: boolean;
+};
+```
+
+
+
+
+### Sample Response
+
+```json
+{
+ "email": "john@gmail.com",
+ "name": "John Dash",
+ "profileImage": "https://lh3.googleusercontent.com/a/Ajjjsdsmdjmnm...",
+ "aggregateVerifier": "tkey-google-lrc",
+ "verifier": "torus",
+ "verifierId": "john@gmail.com",
+ "typeOfLogin": "google",
+ "dappShare": "<24 words seed phrase>", // will be sent only incase of custom verifiers
+ "idToken": "",
+ "oAuthIdToken": "", // will be sent only incase of custom verifiers
+ "oAuthAccessToken": "" // will be sent only incase of custom verifiers
+}
+```
diff --git a/docs/sdk/web/js/functions/logout.mdx b/docs/sdk/web/js/functions/logout.mdx
new file mode 100644
index 000000000..732c8c57e
--- /dev/null
+++ b/docs/sdk/web/js/functions/logout.mdx
@@ -0,0 +1,39 @@
+---
+title: logout
+sidebar_label: logout
+description: "@web3auth/modal Usage | Documentation - Web3Auth"
+---
+
+Function to disconnect from Web3Auth.
+
+### Usage
+
+```tsx
+function LogoutButton() {
+ const handleLogout = async () => {
+ try {
+ await web3auth.logout();
+ console.log("Logged out successfully");
+ } catch (error) {
+ console.error("Error logging out:", error);
+ }
+ };
+
+ return ;
+}
+```
+
+### Function Signature
+
+```tsx
+logout(options?: { cleanup: boolean }): Promise;
+```
+
+#### Parameters
+
+- **options** (optional)
+- **cleanup** (`boolean`): Whether to remove all user data during logout.
+
+#### Return Value
+
+Promise that resolves when the user is successfully logged out.
diff --git a/docs/sdk/web/js/functions/manageMFA.mdx b/docs/sdk/web/js/functions/manageMFA.mdx
new file mode 100644
index 000000000..5be6b8409
--- /dev/null
+++ b/docs/sdk/web/js/functions/manageMFA.mdx
@@ -0,0 +1,38 @@
+---
+title: Using PnP Web Modal SDK
+sidebar_label: Usage
+description: "@web3auth/modal Usage | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+#### `manageMFA()`
+
+You can redirect users to the Web3Auth Account Dashboard to manage their MFA settings by calling the
+`manageMFA()` function. This method ensures that identity details are injected into the dashboard
+internally for custom verifier-based dApps. In order to see what's present on the account dashboard,
+please refer to the [Account Dashboard](/features/account-dashboard).
+
+```javascript
+await web3auth.manageMFA();
+```
+
+#### Interface
+
+```typescript
+manageMFA(loginParams?: T): Promise;
+```
+
+- **`loginParams`** (optional): Optional parameters to include during the MFA management process.
+- **Returns**: A `Promise` indicating successful redirection to the Account Dashboard.
+
+:::tip
+
+If MFA is not already enabled, the `manageMFA()` method will throw an error. Ensure you use
+`enableMFA()` before calling `manageMFA()`.
+
+If your dApp uses default verifiers, users can directly log in to the Account Dashboard to manage
+MFA. For custom verifier-based dApps, the `manageMFA()` method must be used.
+
+:::
diff --git a/docs/sdk/web/js/functions/showCheckout.mdx b/docs/sdk/web/js/functions/showCheckout.mdx
new file mode 100644
index 000000000..72709f382
--- /dev/null
+++ b/docs/sdk/web/js/functions/showCheckout.mdx
@@ -0,0 +1,38 @@
+---
+title: showCheckout
+sidebar_label: showCheckout
+description: "@web3auth/modal showCheckout Function | Documentation - Web3Auth"
+---
+
+Function to show the cryptocurrency checkout modal, allowing users to select their local currency
+and specify the token to top up their wallet.
+
+:::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 Web3Auth Sapphire
+Devnet network for free.
+
+:::
+
+### Usage
+
+```ts
+await web3auth.showCheckout({
+ show: true,
+}); // Opens the TopUp modal
+```
+
+### Parameters
+
+| Name | Description |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `receiveWalletAddress?` | Specifies the recipient's address. By default, it is set to the currently connected address. |
+| `tokenList?` | Specifies the tokens to display in the list. By default, all tokens are shown. Use the ticker name to specify which tokens to display, such as `[USDC, USDT, ETH]`. Please checkout the coverage details for [full list of supported networks and tokens](/docs/features/topup#network-coverage). |
+| `fiatList?` | Specifies the available fiat currencies enabled for purchase. Use the currency acronym to define which fiat currencies to display, such as `[USD, SGD, INR, JPY]`. Please checkout the coverage details for [full list of supported currencies](/docs/features/topup#country-and-payment-method-coverage). |
+| `show` | Determines whether the checkout UI is displayed. This can be used to programmatically control its visibility. |
+
+### Supported Cryptocurrency
+
+To checkout the supported cryptocurrency and networks,
+[please checkout the coverage documentation](/docs/features/topup#coverage).
diff --git a/docs/sdk/web/js/functions/showSwap.mdx b/docs/sdk/web/js/functions/showSwap.mdx
new file mode 100644
index 000000000..338b1b3fd
--- /dev/null
+++ b/docs/sdk/web/js/functions/showSwap.mdx
@@ -0,0 +1,33 @@
+---
+title: showSwap
+sidebar_label: showSwap
+description: "@web3auth/modal showSwap Function | Documentation - Web3Auth"
+---
+
+Function to open the Swap interface using the Wallet Services Plugin.
+
+### Usage
+
+```ts
+await web3auth.showSwap({
+ show: true,
+}); // Opens the Swap Modal
+```
+
+### Parameters
+
+| Name | Type | Description |
+| ------------ | --------- | ------------------------------------------------------------------------------------------------------------ |
+| `show` | `boolean` | Controls whether the Swap UI is visible. Set to `true` to display the Swap interface, or `false` to hide it. |
+| `fromToken?` | `string` | Specifies the token being swapped from. Optional field. |
+| `toToken?` | `string` | Specifies the token being swapped to. Optional field. |
+| `fromValue?` | `string` | The amount of the `fromToken` to be swapped. Optional field. |
+| `toAddress?` | `string` | The recipient's address for the `toToken`. Optional field. |
+
+### Return Type
+
+```ts
+Promise;
+```
+
+The function returns a Promise that resolves when the swap modal is successfully displayed.
diff --git a/docs/sdk/web/js/functions/showWalletConnectScanner.mdx b/docs/sdk/web/js/functions/showWalletConnectScanner.mdx
new file mode 100644
index 000000000..9169821b8
--- /dev/null
+++ b/docs/sdk/web/js/functions/showWalletConnectScanner.mdx
@@ -0,0 +1,46 @@
+---
+title: showWalletConnectScanner
+sidebar_label: showWalletConnectScanner
+description: "@web3auth/modal showWalletConnectScanner | Documentation - Web3Auth"
+---
+
+Function to show the WalletConnect QR scanner using the Wallet Services Plugin.
+
+### Usage
+
+```ts
+import { Web3Auth } from "@web3auth/modal";
+
+// After initializing and logging in with Web3Auth
+async function openWalletConnectScanner() {
+ try {
+ await web3auth.showWalletConnectScanner({
+ show: true,
+ });
+ } catch (error) {
+ console.error("Error opening WalletConnect scanner:", error);
+ }
+}
+```
+
+### Parameters
+
+```ts
+interface ShowWalletConnectScannerParams {
+ show: boolean;
+}
+```
+
+#### show
+
+`boolean`
+
+Determines whether the Wallet Connect UI is displayed. This can be used to programmatically control
+its visibility.
+
+### Return Type
+
+`Promise`
+
+The function returns a promise that resolves when the WalletConnect scanner has been displayed or
+hidden.
diff --git a/docs/sdk/web/js/functions/showWalletUI.mdx b/docs/sdk/web/js/functions/showWalletUI.mdx
new file mode 100644
index 000000000..a337d47e5
--- /dev/null
+++ b/docs/sdk/web/js/functions/showWalletUI.mdx
@@ -0,0 +1,38 @@
+---
+title: showWalletUI
+sidebar_label: showWalletUI
+description: "@web3auth/modal showWalletUI | Documentation - Web3Auth"
+---
+
+Function to show the templated wallet UI services modal using the Wallet Services Plugin.
+
+### Usage
+
+```javascript
+// Open the Wallet UI modal
+await web3auth.showWalletUi({
+ show: true,
+});
+```
+
+### Parameters
+
+```javascript
+interface ShowWalletUIParams {
+ show: boolean;
+ path?: string;
+}
+```
+
+#### show
+
+`boolean`
+
+Determines whether the wallet UI is displayed. This can be used to programmatically control its
+visibility.
+
+#### path
+
+`string?` (optional)
+
+Specifies the path for the wallet services.
diff --git a/docs/sdk/web/js/functions/switchChain.mdx b/docs/sdk/web/js/functions/switchChain.mdx
new file mode 100644
index 000000000..ee4944c80
--- /dev/null
+++ b/docs/sdk/web/js/functions/switchChain.mdx
@@ -0,0 +1,70 @@
+---
+title: switchChain
+sidebar_label: switchChain
+description: "@web3auth/modal Usage | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+Function to switch blockchain networks with Web3Auth.
+
+## Usage
+
+```javascript
+await web3auth.switchChain({ chainId: "0xaa36a7" });
+```
+
+## Parameters
+
+
+
+
+
+| Parameter | Description | Type | Required |
+| --------------------- | ---------------------------------------------------------------- | ------ | -------- |
+| `{ chainId: string }` | chainId of the chain to switch to, e.g `{ chainId: "0xaa36a7" }` | Object | Yes |
+
+
+
+
+
+```tsx
+async switchChain(params: { chainId: string }): Promise {
+ if (this.status !== ADAPTER_STATUS.CONNECTED || !this.connectedAdapterName) throw WalletLoginError.notConnectedError(`No wallet is connected`);
+ return this.walletAdapters[this.connectedAdapterName].switchChain(params);
+}
+```
+
+
+
+
+
+## Example
+
+```javascript title="switchChain.js"
+// Initialize Web3Auth first
+// ...
+
+// Switch to Sepolia Testnet
+try {
+ await web3auth.switchChain({ chainId: "0xaa36a7" });
+ console.log("Successfully switched to Sepolia Testnet");
+} catch (error) {
+ console.error("Error switching chain:", error);
+}
+
+// Later, switch to Ethereum Mainnet
+try {
+ await web3auth.switchChain({ chainId: "0x1" });
+ console.log("Successfully switched to Ethereum Mainnet");
+} catch (error) {
+ console.error("Error switching chain:", error);
+}
+```
diff --git a/docs/sdk/web/js/js.mdx b/docs/sdk/web/js/js.mdx
new file mode 100644
index 000000000..eae420645
--- /dev/null
+++ b/docs/sdk/web/js/js.mdx
@@ -0,0 +1,185 @@
+---
+title: Getting Started with Web3Auth SDK
+sidebar_label: Getting Started
+description: "Web3Auth PnP Web SDK | Documentation - Web3Auth"
+---
+
+import ExampleCards from "@theme/ExampleCards";
+import { webExamples, QUICK_START } from "@site/src/common/maps";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import SdkTroubleshootingIntro from "@site/src/common/sdk/pnp/web/_sdk-troubleshooting-intro.mdx";
+
+## Overview
+
+Web3Auth Plug and Play (PnP) provides a seamless authentication experience for web applications with
+social logins, external wallets, and more. Using our JavaScript SDK, you can easily connect users to
+their preferred wallets and manage authentication state.
+
+## Requirements
+
+- This is a frontend SDK and must be used in a browser environment.
+- Basic knowledge of JavaScript.
+
+## Installation
+
+Install the Web3Auth Modal SDK using npm or yarn:
+
+```bash npm2yarn
+npm install --save @web3auth/modal
+```
+
+## Setup
+
+:::info
+
+Prerequisites Before you start, make sure you have registered on the
+[**Web3Auth Dashboard**](https://dashboard.web3auth.io/) and have set up your project. You can look
+into the [Dashboard Setup](/dashboard) guide to learn more.
+
+:::
+
+### 1. Configuration
+
+Create an instance of Web3Auth containing the basic needed configuration. These configuration will
+contain your Web3Auth Client ID and Network details from the
+[Web3Auth Dashboard](https://dashboard.web3auth.io/).
+
+```javascript
+import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+});
+```
+
+### 2. Initialize Web3Auth
+
+Initialize the Web3Auth instance before using any authentication methods:
+
+```javascript
+await web3auth.init();
+```
+
+## Advanced Configuration
+
+The Web3Auth Modal SDK offers a rich set of advanced configuration options:
+
+- **[Smart Accounts](./advanced/smart-accounts)**: Configure account abstraction parameters.
+- **[Custom Authentication](./advanced/custom-authentication)**: Define authentication methods.
+- **[Whitelabeling & UI Customization](./advanced/whitelabel)**: Personalize the modal's appearance.
+- **[Multi-Factor Authentication (MFA)](./advanced/mfa)**: Set up and manage MFA.
+- **[Wallet Services](./advanced/wallet-services)**: Integrate additional wallet services.
+
+:::tip
+
+Head over to the [**Advanced Configuration**](./advanced) section to learn more about each
+configuration option.
+
+:::
+
+## Blockchain Integration
+
+Web3Auth is blockchain agnostic, enabling integration with any blockchain network. Out of the box,
+Web3Auth offers robust support for both **Solana** and **Ethereum**, each with dedicated provider
+methods.
+
+### Solana Integration
+
+To interact with Solana networks, you can get the provider from Web3Auth and use it with Solana
+libraries:
+
+```javascript
+await web3auth.connect();
+// Use with a Solana library
+const solanaWallet = new SolanaWallet(web3auth.provider);
+```
+
+### Ethereum Integration
+
+For Ethereum integration, you can get the provider and use it with ethers or viem:
+
+```javascript
+await web3auth.connect();
+// Use with ethers.js
+const ethProvider = new ethers.BrowserProvider(web3auth.provider);
+// OR
+// Use with viem
+const walletClient = createWalletClient({
+ chain: getViewChain(web3auth.provider),
+ transport: custom(web3auth.provider),
+});
+```
+
+
+
+
+
+```javascript
+import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+});
+```
+
+
+
+
+
+```javascript
+import { Web3Auth, WEB3AUTH_NETWORK, WALLET_CONNECTORS, MFA_LEVELS } from "@web3auth/modal";
+
+const web3auth = new Web3Auth({
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ // logoDark: "url to your custom logo which will shown in dark mode",
+ },
+ facebook: {
+ name: "facebook login",
+ showOnModal: false, // hides the facebook option
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ showOnModal: true,
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ showOnModal: true,
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ showOnModal: true, // set to false to hide all social login methods
+ },
+ },
+ hideWalletDiscovery: true, // set to true to hide external wallets discovery
+ },
+ mfaLevel: MFA_LEVELS.MANDATORY,
+});
+```
+
+
+
+
+
+
+
+## Quick Starts
+
+ obj.type === QUICK_START)} />
diff --git a/docs/sdk/web/react/_ethereum-hooks-snippets.mdx b/docs/sdk/web/react/_ethereum-hooks-snippets.mdx
new file mode 100644
index 000000000..0fff10451
--- /dev/null
+++ b/docs/sdk/web/react/_ethereum-hooks-snippets.mdx
@@ -0,0 +1,151 @@
+You need to install the `wagmi` and `@tanstack/react-query` packages and use the **Web3Auth
+implementation of `WagmiProvider`** for configuration.
+
+:::info
+
+The Web3Auth implementation of `WagmiProvider` is a custom implementation that is used to integrate
+with the Web3Auth Modal SDK. It is a wrapper around the `WagmiProvider` that makes it compatible.
+
+With this implementation, you can use the Wagmi hooks, however **no external connectors are
+supported**. Web3Auth provides a whole suite of connectors which you can use directly for a better
+experience with external wallets.
+
+:::
+
+```bash npm2yarn
+npm install wagmi @tanstack/react-query
+```
+
+```tsx title="main.tsx"
+import "./index.css";
+
+import ReactDOM from "react-dom/client";
+import { Web3AuthProvider } from "@web3auth/modal/react";
+import web3AuthContextConfig from "./web3authContext";
+// focus-start
+import { WagmiProvider } from "@web3auth/modal/react/wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+// focus-end
+
+import App from "./App";
+
+// focus-next-line
+const queryClient = new QueryClient();
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+
+ {/* focus-start */}
+
+
+
+
+
+ {/* focus-end */}
+ ,
+);
+```
+
+:::info
+
+Wagmi provides a comprehensive set of React hooks for Ethereum and EVM-compatible chains. Web3Auth
+integrates seamlessly with Wagmi, so you can use hooks like `useAccount`, `useBalance`,
+`useSendTransaction`, and more, out of the box.
+
+:::
+
+Below are some examples of using Wagmi hooks in your dApp after Web3Auth and Wagmi are set up. You
+can note these functions work directly with Wagmi. Once you have set up Wagmi with Web3Auth, you can
+use any Wagmi hook as you would in a standard Wagmi application.
+
+### Get Account Balance
+
+```tsx
+import { useAccount, useBalance } from "wagmi";
+import { formatUnits } from "viem";
+
+export function Balance() {
+ const { address } = useAccount();
+ const { data, isLoading, error } = useBalance({ address });
+
+ return (
+
+ );
+}
+```
diff --git a/docs/sdk/web/react/hooks/useWalletConnectScanner.mdx b/docs/sdk/web/react/hooks/useWalletConnectScanner.mdx
new file mode 100644
index 000000000..f3c84af16
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWalletConnectScanner.mdx
@@ -0,0 +1,55 @@
+---
+title: useWalletConnectScanner
+sidebar_label: useWalletConnectScanner
+description: "@web3auth/modal React Hooks useWalletConnectScanner | Documentation - Web3Auth"
+---
+
+Hook to show the WalletConnect QR scanner using the Wallet Services Plugin.
+
+### Import
+
+```tsx
+import { useWalletConnectScanner } from "@web3auth/modal/react";
+```
+
+### Usage
+
+```tsx
+import { useWalletConnectScanner } from "@web3auth/modal/react";
+
+function WalletConnectScannerButton() {
+ const { showWalletConnectScanner, loading, error } = useWalletConnectScanner();
+
+ return (
+
+ {error &&
{error.message}
}
+ );
+}
+```
+
+### Return Type
+
+```tsx
+import { type IUseWalletConnectScanner } from "@web3auth/modal/react";
+```
+
+#### loading
+
+`boolean`
+
+Whether the scanner opening process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the scanner opening process.
+
+#### showWalletConnectScanner
+
+`(showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise`
+
+Function to show the WalletConnect QR scanner. Accepts optional parameters for customizing the
+scanner behavior.
diff --git a/docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx b/docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx
new file mode 100644
index 000000000..e915fde36
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx
@@ -0,0 +1,72 @@
+---
+title: useWalletServicesPlugin
+sidebar_label: useWalletServicesPlugin
+description: "@web3auth/modal React Hooks useWalletServicesPlugin | Documentation - Web3Auth"
+---
+
+Hook to access the Wallet Services Plugin context, enabling wallet-related features such as
+WalletConnect, Checkout, Swap, and Wallet UI.
+
+### Import
+
+```tsx
+import { useWalletServicesPlugin } from "@web3auth/modal/react";
+```
+
+### Usage
+
+```tsx
+import { useWalletServicesPlugin } from "@web3auth/modal/react";
+
+function WalletServicesExample() {
+ const { isPluginConnected, showWalletConnectScanner, showCheckout, showWalletUI } =
+ useWalletServicesPlugin();
+
+ return (
+ <>
+
+
+
+
+ );
+}
+```
+
+### Return Type
+
+```tsx
+import { type IWalletServicesContext } from "@web3auth/modal/react";
+```
+
+#### isPluginConnected
+
+`boolean`
+
+Whether the Wallet Services Plugin is connected and ready to use.
+
+#### showWalletConnectScanner
+
+`(showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise`
+
+Shows the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner
+behavior.
+
+#### showCheckout
+
+`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise`
+
+Shows the TopUp modal for fiat-to-crypto checkout. Accepts optional parameters for customizing the
+checkout experience.
+
+#### showWalletUI
+
+`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise`
+
+Shows the Wallet Services modal UI. Accepts optional parameters for customizing the wallet UI
+experience.
diff --git a/docs/sdk/web/react/hooks/useWalletUI.mdx b/docs/sdk/web/react/hooks/useWalletUI.mdx
new file mode 100644
index 000000000..9b1f8d4f9
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWalletUI.mdx
@@ -0,0 +1,55 @@
+---
+title: useWalletUI
+sidebar_label: useWalletUI
+description: "@web3auth/modal React Hooks useWalletUI | Documentation - Web3Auth"
+---
+
+Hook to show the Wallet Services UI modal using the Wallet Services Plugin.
+
+### Import
+
+```tsx
+import { useWalletUI } from "@web3auth/modal/react";
+```
+
+### Usage
+
+```tsx
+import { useWalletUI } from "@web3auth/modal/react";
+
+function WalletUIButton() {
+ const { showWalletUI, loading, error } = useWalletUI();
+
+ return (
+
+ {error &&
{error.message}
}
+ );
+}
+```
+
+### Return Type
+
+```tsx
+import { type IUseWalletUI } from "@web3auth/modal/react";
+```
+
+#### loading
+
+`boolean`
+
+Whether the Wallet UI opening process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the Wallet UI opening process.
+
+#### showWalletUI
+
+`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise`
+
+Function to show the Wallet Services modal UI. Accepts optional parameters for customizing the
+wallet UI experience.
diff --git a/docs/sdk/web/react/hooks/useWeb3Auth.mdx b/docs/sdk/web/react/hooks/useWeb3Auth.mdx
new file mode 100644
index 000000000..daf43290a
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWeb3Auth.mdx
@@ -0,0 +1,98 @@
+---
+title: useWeb3Auth
+sidebar_label: useWeb3Auth
+description: "@web3auth/modal React Hooks useWeb3Auth | Documentation - Web3Auth"
+---
+
+Hook to access the Web3Auth context.
+
+### Import
+
+```tsx
+import { useWeb3Auth } from "@web3auth/modal/react";
+```
+
+### Usage
+
+```tsx
+import { useWeb3Auth } from "@web3auth/modal/react";
+
+function App() {
+ const { web3Auth, isConnected, isInitializing, provider, status, initError } = useWeb3Auth();
+
+ if (isConnected) {
+ // User is connected
+ console.log("Connected with provider:", provider);
+ }
+ if (isInitializing) {
+ // Web3Auth is initializing
+ console.log("Web3Auth is initializing");
+ }
+ if (provider) {
+ // Web3Auth provider is connected
+ console.log("Web3Auth provider is connected");
+ }
+ if (status) {
+ // Web3Auth status
+ console.log("Web3Auth status:", status);
+ }
+ if (initError) {
+ // Web3Auth initialization error
+ console.log("Web3Auth initialization error:", initError);
+ }
+}
+```
+
+### Return Type
+
+```tsx
+import { type IUseWeb3Auth } from "@web3auth/modal/react";
+```
+
+#### initError
+
+`Error | null`
+
+Error that occurred during Web3Auth initialization.
+
+#### isConnected
+
+`boolean`
+
+Whether the user is connected to Web3Auth.
+
+#### isInitialized
+
+`boolean`
+
+Whether Web3Auth has completed initialization.
+
+#### isInitializing
+
+`boolean`
+
+Whether Web3Auth is currently initializing.
+
+#### provider
+
+`IProvider | null`
+
+Connected provider from Web3Auth.
+
+#### status
+
+`string`
+
+Current status of the Web3Auth connection.
+
+#### web3Auth
+
+`Web3Auth`
+
+The Web3Auth instance.
+
+#### getPlugin
+
+`(pluginName: PLUGIN_NAME) => IPlugin | null`
+
+Helper function to get a plugin by name.
diff --git a/docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx b/docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx
new file mode 100644
index 000000000..97d8f371b
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx
@@ -0,0 +1,151 @@
+---
+title: useWeb3AuthConnect
+sidebar_label: useWeb3AuthConnect
+description: "@web3auth/modal React Hooks useWeb3AuthConnect | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+Hook to connect to Web3Auth.
+
+### Import
+
+```tsx
+import { useWeb3AuthConnect } from "@web3auth/modal/react";
+```
+
+### Choosing the Right Connection Method
+
+You can connect users to Web3Auth in two main ways, depending on your application's needs:
+
+- **Use `connect()`** when you want to display the default Web3Auth modal. This is ideal if you want
+ to provide users with a pre-built, user-friendly interface where they can choose from all
+ available login options (social logins, wallets, etc.) with minimal setup.
+
+- **Use `connectTo(connector, params)`** when you want to build a fully custom login experience.
+ This method lets you bypass the Web3Auth modal and connect directly to a specific wallet connector
+ (such as Google, Facebook, or a particular wallet). Choose this if you want to design your own UI
+ for login options, or if you want to restrict users to a specific authentication method. This
+ method also allows you to use JWT based login configurations.
+
+**Summary:**
+
+- Use `connect()` for the standard modal experience.
+- Use `connectTo()` for custom UIs or direct connection to a specific login method.
+
+### Usage
+
+
+
+
+
+:::info
+
+This is the most common way to connect to Web3Auth. It opens the Web3Auth modal UI, allowing users
+to select from available login options.
+
+:::
+
+```tsx
+import { useWeb3AuthConnect } from "@web3auth/modal/react";
+
+function ConnectButton() {
+ const { connect, loading, isConnected, error } = useWeb3AuthConnect();
+
+ return (
+
+ {error &&
{error.message}
}
+ );
+}
+```
+
+
+
+
+
+:::info
+
+This method allows you to build your own custom connection UI. It bypasses the Web3Auth modal UI,
+allowing you to create your own custom UI for login options. This can be useful if you want to hide
+Web3Auth from your end users.
+
+:::
+
+```tsx
+import { useWeb3AuthConnect } from "@web3auth/modal/react";
+import { WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal";
+
+function CustomConnectors() {
+ const { connectTo, loading, isConnected, error } = useWeb3AuthConnect();
+
+ const loginWithGoogle = () => {
+ connectTo(WALLET_CONNECTORS.AUTH, { authConnection: AUTH_CONNECTION.GOOGLE });
+ };
+
+ return (
+
+
+ {error &&
{error.message}
}
+
+ );
+}
+```
+
+
+
+
+
+### Return Type
+
+```tsx
+import { type IUseWeb3AuthConnect } from "@web3auth/modal/react";
+```
+
+#### isConnected
+
+`boolean`
+
+Whether the user is connected to Web3Auth.
+
+#### loading
+
+`boolean`
+
+Whether the connection process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the connection process.
+
+#### connectorName
+
+`WALLET_CONNECTOR_TYPE | null`
+
+Name of the connected connector.
+
+#### connect
+
+`() => Promise`
+
+Function to initiate the connection process. Opens the Web3Auth modal UI.
+
+#### connectTo
+
+`(connector: T, params?: LoginParamMap[T]) => Promise`
+
+Function to connect directly to a specific wallet connector. This bypasses the Web3Auth modal UI,
+allowing you to build custom interfaces. This method also allows you to use JWT based login
+configurations.
diff --git a/docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx b/docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx
new file mode 100644
index 000000000..1878891a9
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx
@@ -0,0 +1,55 @@
+---
+title: useWeb3AuthDisconnect
+sidebar_label: useWeb3AuthDisconnect
+description: "@web3auth/modal React Hooks useWeb3AuthDisconnect | Documentation - Web3Auth"
+---
+
+Hook to disconnect from Web3Auth.
+
+### Import
+
+```tsx
+import { useWeb3AuthDisconnect } from "@web3auth/modal/react";
+```
+
+### Usage
+
+```tsx
+import { useWeb3AuthDisconnect } from "@web3auth/modal/react";
+
+function DisconnectButton() {
+ const { disconnect, loading, error } = useWeb3AuthDisconnect();
+
+ return (
+
+ {error &&
{error.message}
}
+ );
+}
+```
+
+### Return Type
+
+```tsx
+import { type IUseWeb3AuthDisconnect } from "@web3auth/modal/react";
+```
+
+#### loading
+
+`boolean`
+
+Whether the disconnection process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the disconnection process.
+
+#### disconnect
+
+`(options?: { cleanup: boolean }) => Promise`
+
+Function to initiate the disconnection process. Optional `cleanup` parameter controls whether to
+remove all user data.
diff --git a/docs/sdk/web/react/hooks/useWeb3AuthUser.mdx b/docs/sdk/web/react/hooks/useWeb3AuthUser.mdx
new file mode 100644
index 000000000..dbec1c35f
--- /dev/null
+++ b/docs/sdk/web/react/hooks/useWeb3AuthUser.mdx
@@ -0,0 +1,72 @@
+---
+title: useWeb3AuthUser
+sidebar_label: useWeb3AuthUser
+description: "@web3auth/modal React Hooks useWeb3AuthUser | Documentation - Web3Auth"
+---
+
+Hook to fetch and manage the current Web3Auth user information.
+
+### Import
+
+```tsx
+import { useWeb3AuthUser } from "@web3auth/modal/react";
+```
+
+### Usage
+
+```tsx
+import { useWeb3AuthUser } from "@web3auth/modal/react";
+
+function UserInfo() {
+ const { userInfo, loading, error, isMFAEnabled, getUserInfo } = useWeb3AuthUser();
+
+ if (loading) return
Loading user info...
;
+ if (error) return
Error: {error.message}
;
+ if (!userInfo) return
No user info available.
;
+
+ return (
+
+
{JSON.stringify(userInfo, null, 2)}
+
MFA Enabled: {isMFAEnabled ? "Yes" : "No"}
+
+
+ {error &&
{error.message}
}
+ );
+}
+```
+
+### Return Type
+
+```tsx
+import { type IUseWeb3AuthUser } from "@web3auth/modal/react";
+```
+
+#### loading
+
+`boolean`
+
+Whether the user info fetching process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the user info fetching process.
+
+#### userInfo
+
+`Partial | null`
+
+The current user's information, or null if not available.
+
+#### isMFAEnabled
+
+`boolean`
+
+Whether Multi-Factor Authentication (MFA) is enabled for the user.
+
+#### getUserInfo
+
+`() => Promise | null>`
+
+Function to fetch the latest user information from Web3Auth.
diff --git a/docs/sdk/web/react/react.mdx b/docs/sdk/web/react/react.mdx
new file mode 100644
index 000000000..5a2f0a4d2
--- /dev/null
+++ b/docs/sdk/web/react/react.mdx
@@ -0,0 +1,211 @@
+---
+title: Getting Started with Web3Auth React SDK
+sidebar_label: Getting Started
+description: "Web3Auth PnP Web SDK for React | Documentation - Web3Auth"
+---
+
+import ExampleCards from "@theme/ExampleCards";
+import { webExamples, QUICK_START } from "@site/src/common/maps";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import SdkTroubleshootingIntro from "@site/src/common/sdk/pnp/web/_sdk-troubleshooting-intro.mdx";
+
+## Overview
+
+Web3Auth Plug and Play (PnP) provides a seamless authentication experience for React applications
+with social logins, external wallets, and more. Using our React Hooks, you can easily connect users
+to their preferred wallets and manage authentication state.
+
+## Requirements
+
+- This is a frontend SDK and must be used in a browser environment.
+- Basic knowledge of JavaScript and React.
+
+## Installation
+
+Install the Web3Auth Modal SDK using npm or yarn:
+
+```bash npm2yarn
+npm install --save @web3auth/modal
+```
+
+## Setup
+
+:::info
+
+Prerequisites Before you start, make sure you have registered on the
+[**Web3Auth Dashboard**](https://dashboard.web3auth.io/) and have set up your project. You can look
+into the [Dashboard Setup](/dashboard) guide to learn more.
+
+:::
+
+### 1. Configuration
+
+Create a configuration file for Web3Auth. This file will contain your Web3Auth Client ID and Network
+details from the [Web3Auth Dashboard](https://dashboard.web3auth.io/).
+
+```tsx title="web3authContext.tsx"
+import { type Web3AuthContextConfig } from "@web3auth/modal/react";
+import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+
+export default web3AuthContextConfig;
+```
+
+### 2. Setup Web3Auth Provider
+
+In your main entry file (generally `index.tsx` or `main.tsx`), import the `Web3AuthProvider`
+component and wrap your application with it:
+
+```tsx title="main.tsx"
+import "./index.css";
+
+import ReactDOM from "react-dom/client";
+// focus-start
+import { Web3AuthProvider } from "@web3auth/modal/react";
+import web3AuthContextConfig from "./web3authContext";
+// focus-end
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ // focus-start
+
+
+ ,
+ // focus-end
+);
+```
+
+## Advanced Configuration
+
+The Web3Auth Modal SDK offers a rich set of advanced configuration options:
+
+- **[Smart Accounts](./advanced/smart-accounts)**: Configure account abstraction parameters.
+- **[Custom Authentication](./advanced/custom-authentication)**: Define authentication methods.
+- **[Whitelabeling & UI Customization](./advanced/whitelabel)**: Personalize the modal's appearance.
+- **[Multi-Factor Authentication (MFA)](./advanced/mfa)**: Set up and manage MFA.
+- **[Wallet Services](./advanced/wallet-services)**: Integrate additional wallet services.
+
+:::tip
+
+Head over to the [**Advanced Configuration**](./advanced) section to learn more about each
+configuration option.
+
+:::
+
+## Blockchain Integration
+
+Web3Auth is blockchain agnostic, enabling integration with any blockchain network. Out of the box,
+Web3Auth offers robust support for both **Solana** and **Ethereum**, each with dedicated React
+hooks.
+
+### Solana Integration
+
+Solana hooks are included natively within the `@web3auth/modal` package. No additional setup is
+required—simply use the provided hooks to interact with Solana networks.
+
+For detailed usage and examples, visit the [**Solana Hooks**](./solana-hooks) section.
+
+### Ethereum Integration
+
+Ethereum hooks are provided through the popular `wagmi` library, which works seamlessly with
+Web3Auth. This allows you to leverage a wide range of Ethereum hooks for account management,
+transactions, and more.
+
+For implementation details and examples, refer to the [**Ethereum Hooks**](./ethereum-hooks)
+section.
+
+
+
+
+
+```ts
+import { type Web3AuthContextConfig } from "@web3auth/modal/react";
+import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+```
+
+
+
+
+
+```ts
+import { type Web3AuthContextConfig } from "@web3auth/modal/react";
+import {
+ WALLET_CONNECTORS,
+ WEB3AUTH_NETWORK,
+ MFA_LEVELS,
+ type Web3AuthOptions,
+} from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ // logoDark: "url to your custom logo which will shown in dark mode",
+ },
+ facebook: {
+ name: "facebook login",
+ showOnModal: false, // hides the facebook option
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ showOnModal: true,
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ showOnModal: true,
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ showOnModal: true, // set to false to hide all social login methods
+ },
+ },
+ hideWalletDiscovery: true, // set to true to hide external wallets discovery
+ },
+ mfaLevel: MFA_LEVELS.MANDATORY,
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+```
+
+
+
+
+
+
+
+## Quick Starts
+
+ obj.type === QUICK_START)} />
diff --git a/docs/sdk/web/react/solana-hooks/solana-hooks.mdx b/docs/sdk/web/react/solana-hooks/solana-hooks.mdx
new file mode 100644
index 000000000..4a2247310
--- /dev/null
+++ b/docs/sdk/web/react/solana-hooks/solana-hooks.mdx
@@ -0,0 +1,26 @@
+---
+title: React Hooks for Solana
+sidebar_label: Overview
+description: "@web3auth/modal Solana React Hooks | Documentation - Web3Auth"
+---
+
+Web3Auth provides a set of React hooks for basic Solana wallet operations. These hooks are designed
+to simplify common Solana interactions in your React app.
+
+:::info
+
+For advanced Solana features, you should use
+[`@solana/web3.js`](https://solana-labs.github.io/solana-web3.js/) on top of the hooks provided.
+
+:::
+
+## Solana Hooks
+
+| Hook Name | Description |
+| --------------------------- | -------------------------------------------- |
+| `useSignAndSendTransaction` | Sign and send a Solana transaction. |
+| `useSignMessage` | Sign a message with the Solana wallet. |
+| `useSignTransaction` | Sign a Solana transaction (without sending). |
+| `useSolanaWallet` | Access Solana wallet state and utilities. |
+
+Further code and advanced usage should be implemented using Solana's web3.js library as needed.
diff --git a/docs/sdk/web/react/solana-hooks/useSignAndSendTransaction.mdx b/docs/sdk/web/react/solana-hooks/useSignAndSendTransaction.mdx
new file mode 100644
index 000000000..bb7bde892
--- /dev/null
+++ b/docs/sdk/web/react/solana-hooks/useSignAndSendTransaction.mdx
@@ -0,0 +1,144 @@
+---
+title: useSignAndSendTransaction
+sidebar_label: useSignAndSendTransaction
+description: "@web3auth/modal React Hook useSignAndSendTransaction | Documentation - Web3Auth"
+---
+
+Hook to sign and send a Solana transaction using the connected Solana wallet from Web3Auth.
+
+### Import
+
+```tsx
+import { useSignAndSendTransaction } from "@web3auth/modal/react/solana";
+```
+
+### Usage
+
+```tsx
+import { useSignAndSendTransaction } from "@web3auth/modal/react/solana";
+import { TransactionOrVersionedTransaction } from "@web3auth/modal";
+
+function SignAndSendTransactionButton({
+ transaction,
+}: {
+ transaction: TransactionOrVersionedTransaction;
+}) {
+ const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction();
+
+ const handleSignAndSend = async () => {
+ try {
+ const signature = await signAndSendTransaction(transaction);
+ // Do something with signature
+ } catch (e) {
+ // Handle error
+ }
+ };
+
+ return (
+
+
+ {error &&
Error: {error.message}
}
+ {data &&
Signature: {data}
}
+
+ );
+}
+```
+
+### Return Type
+
+```ts
+export type IUseSignAndSendTransaction = {
+ loading: boolean;
+ error: Web3AuthError | null;
+ data: string | null;
+ signAndSendTransaction: (transaction: TransactionOrVersionedTransaction) => Promise;
+};
+```
+
+#### loading
+
+`boolean`
+
+Indicates if the transaction signing and sending is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error object if signing or sending fails, otherwise null.
+
+#### data
+
+`string | null`
+
+The transaction signature as a string, or null if not signed yet.
+
+#### signAndSendTransaction
+
+`(transaction: TransactionOrVersionedTransaction) => Promise`
+
+Function to sign and send a transaction. Returns the transaction signature as a string.
+
+## Example
+
+```tsx title="sendVersionedTransaction.tsx"
+import { FormEvent } from "react";
+import { useSolanaWallet, useSignAndSendTransaction } from "@web3auth/modal/react/solana";
+import {
+ LAMPORTS_PER_SOL,
+ PublicKey,
+ SystemProgram,
+ TransactionMessage,
+ VersionedTransaction,
+} from "@solana/web3.js";
+
+export function SendVersionedTransaction() {
+ const {
+ data: hash,
+ error,
+ loading: isPending,
+ signAndSendTransaction,
+ } = useSignAndSendTransaction();
+ const { accounts, connection } = useSolanaWallet();
+
+ async function submit(e: FormEvent) {
+ e.preventDefault();
+ const formData = new FormData(e.target as HTMLFormElement);
+ const to = formData.get("address") as string;
+ const value = formData.get("value") as string;
+
+ const block = await connection!.getLatestBlockhash();
+ const TransactionInstruction = SystemProgram.transfer({
+ fromPubkey: new PublicKey(accounts![0]),
+ toPubkey: new PublicKey(to),
+ lamports: Number(value) * LAMPORTS_PER_SOL,
+ });
+
+ const transactionMessage = new TransactionMessage({
+ recentBlockhash: block.blockhash,
+ instructions: [TransactionInstruction],
+ payerKey: new PublicKey(accounts![0]),
+ });
+
+ const transaction = new VersionedTransaction(transactionMessage.compileToV0Message());
+ signAndSendTransaction(transaction);
+ }
+
+ return (
+
+ );
+}
+```
diff --git a/docs/sdk/web/vue/_ethereum-composables-snippets.mdx b/docs/sdk/web/vue/_ethereum-composables-snippets.mdx
new file mode 100644
index 000000000..a3cba1185
--- /dev/null
+++ b/docs/sdk/web/vue/_ethereum-composables-snippets.mdx
@@ -0,0 +1,172 @@
+You need to install the `wagmi` & `@tanstack/vue-query` packages and use the **Web3Auth
+implementation of `WagmiProvider`** for configuration.
+
+:::info
+
+The Web3Auth implementation of `WagmiProvider` is a custom implementation that is used to integrate
+with the Web3Auth Modal SDK. It is a wrapper around the `WagmiProvider` that makes it compatible.
+
+With this implementation, you can use the Wagmi composables, however **no external connectors are
+supported**. Web3Auth provides a whole suite of connectors which you can use directly for a better
+experience with external wallets.
+
+:::
+
+```bash
+npm install wagmi @tanstack/vue-query
+```
+
+Update your `main.ts` to use the Vue Query plugin **only if you are using Wagmi**:
+
+```ts title="main.ts"
+// focus-next-line
+import { VueQueryPlugin } from "@tanstack/vue-query";
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./style.css";
+
+// focus-next-line
+createApp(App).use(VueQueryPlugin).mount("#app");
+```
+
+Then, in your `App.vue`, wrap your app with both providers:
+
+```html title="App.vue"
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::info
+
+Wagmi provides a comprehensive set of composables for Ethereum and EVM-compatible chains in Vue.
+Web3Auth integrates seamlessly with Wagmi, so you can use composables like `useAccount`,
+`useBalance`, `useSendTransaction`, and more, out of the box.
+
+:::
+
+Below are some examples of using Wagmi composables in your dApp after Web3Auth and Wagmi are set up.
+You can note these functions work directly with Wagmi. Once you have set up Wagmi with Web3Auth, you
+can use any Wagmi composable as you would in a standard Wagmi application.
+
+### Get Account Balance
+
+```html
+
+
+
+
+
+```
diff --git a/docs/sdk/web/vue/advanced/advanced.mdx b/docs/sdk/web/vue/advanced/advanced.mdx
new file mode 100644
index 000000000..4cb187588
--- /dev/null
+++ b/docs/sdk/web/vue/advanced/advanced.mdx
@@ -0,0 +1,44 @@
+---
+title: Advanced Configuration
+sidebar_label: Overview
+description: "@web3auth/modal Advanced Configuration | Documentation - Web3Auth"
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import Web3AuthOptions from "@site/src/common/sdk/pnp/web/_web3auth-options.mdx";
+import AdvancedConfigOptions from "@site/src/common/sdk/pnp/web/_advanced-config-options.mdx";
+
+# Advanced Configuration
+
+The Web3Auth SDK provides extensive configuration options that allow you to customize authentication
+flows, UI appearance, blockchain integrations, and security features to meet your application's
+specific requirements.
+
+## Configuration Structure
+
+When setting up Web3Auth, you'll create a configuration object that is passed to the
+`Web3AuthProvider`. This consists of:
+
+```tsx title="web3authContext.tsx"
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+
+// focus-start
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+ // Core and advanced options go here
+};
+// focus-end
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+```
+
+### `Web3AuthOptions`
+
+
+
+
diff --git a/docs/sdk/web/vue/advanced/custom-authentication.mdx b/docs/sdk/web/vue/advanced/custom-authentication.mdx
new file mode 100644
index 000000000..10bbbaa83
--- /dev/null
+++ b/docs/sdk/web/vue/advanced/custom-authentication.mdx
@@ -0,0 +1,767 @@
+---
+title: Custom Authentication
+sidebar_label: Custom Authentication
+description: "@web3auth/modal Custom Authentication | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Custom Authentication is a way to authenticate users with your custom authentication service. For
+example, while authenticating with Google, you can use your own Google Client ID to authenticate
+users directly.
+
+**This feature, with MFA turned off, can even make Web3Auth invisible to the end user.**
+
+
+
+## Getting an Auth Connection ID
+
+:::info prerequisite
+
+To enable this, you need to [Create a Connection](/dashboard/configure-connections) from the
+**Authentication** tab of your project from the
+[Web3Auth Developer Dashboard](https://dashboard.web3auth.io) with your desired configuration.
+
+:::
+
+To configure a connection, you need to provide the particular details of the connection into our
+Web3Auth Dashboard. This enables us to map a `authConnectionId` with your connection details. This
+`authConnectionId` helps us to identify the connection details while initializing the SDK. You can
+configure multiple connections for the same project, and you can also update the connection details
+anytime.
+
+:::tip
+
+Visit the [Auth Provider Setup](/auth-provider-setup) page to learn more about to setup the
+different configurations available for each connection.
+
+:::
+
+## Modal Custom Authentication
+
+The basic custom authentication is available directly in the modal. You can configure each of the
+auth providers in the modal to direct to your `authConnectionId`.
+
+:::note
+
+You can only configure implicit login via modal, for JWT based logins, you need to create your own
+UI and use the `connectTo` function.
+
+:::
+
+For the modal custom authentication, you need to pass the `modalConfig` object to the
+`Web3AuthOptions` object within the constructor.
+
+> **Read more about the `modalConfig` object in the [Whitelabel](./whitelabel) section.**
+
+### Usage
+
+
+
+
+```ts title="web3authContext.ts"
+import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions: {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ authConnectionId: "w3a-google-demo",
+ },
+ facebook: {
+ name: "facebook login",
+ authConnectionId: "w3a-facebook-demo",
+ },
+ discord: {
+ name: "discord login",
+ authConnectionId: "w3a-discord-demo",
+ },
+ twitch: {
+ name: "twitch login",
+ authConnectionId: "w3a-twitch-demo",
+ },
+ twitter: {
+ name: "twitter login",
+ // it will hide the twitter option from the Web3Auth modal.
+ showOnModal: false,
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ // setting it to false will hide all social login methods from modal.
+ showOnModal: true,
+ },
+ },
+ },
+ // focus-end
+ },
+};
+
+export default web3AuthContextConfig;
+```
+
+
+
+
+```ts title="web3authContext.ts"
+import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions: {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ authConnectionId: "w3a-google",
+ groupedAuthConnectionId: "aggregate-sapphire",
+ },
+ facebook: {
+ name: "facebook login",
+ authConnectionId: "w3a-facebook",
+ groupedAuthConnectionId: "aggregate-sapphire",
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email-passwordless",
+ groupedAuthConnectionId: "aggregate-sapphire",
+ },
+ },
+ },
+ },
+ },
+ // focus-end
+ },
+};
+
+export default web3AuthContextConfig;
+```
+
+
+
+
+## Advanced Custom Authentication
+
+The more advanced custom authentication is available via the `connectTo` function. This allows you
+to any service you want and tie it to your Web3Auth Integration. **This method allows you to make
+Web3Auth totally invisible to your end users and have a fully whitelabeled experience all across.**
+
+You can utilise this function to enable multiple types of connections like:
+
+- Implicit Login Connections
+- JWT Login Connections
+- Grouped Auth Connections
+
+
+ `connectTo` Function Reference
+
+```ts
+connectTo(
+ connector: T,
+ params?: LoginParamMap[T]
+): Promise;
+
+export type LoginParamMap = {
+ [WALLET_CONNECTORS.AUTH]: Partial;
+ ...
+};
+```
+
+#### `AuthLoginParams`
+
+
+
+
+| Parameter | Description |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `loginHint?` | Helps pass over the login hint to the auth provider. This is used especially for `email_passwordless` & `sms_passwordless` logins. |
+| `idToken?` | Pass over the JWT ID Token directly to Web3Auth for JWT authentication. |
+| `authConnection?` | The auth provider to use for login (e.g., "google", "facebook"). |
+| `authConnectionId?` | The ID configured in your Web3Auth Dashboard for the connection. |
+| `groupedAuthConnectionId?` | The grouped auth connection ID to be used for login. |
+| `extraLoginOptions?` | Custom OAuth options (e.g., login_hint, domain, etc.). |
+
+
+
+
+ ```ts
+ export type AuthLoginParams = LoginParams & {
+ loginHint?: string;
+ idToken?: string;
+ };
+ export type LoginParams = {
+ /**
+ * 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.
+ */
+ appState?: string;
+ /**
+ * The auth connection to be used for login.
+ */
+ authConnection: AUTH_CONNECTION_TYPE | CUSTOM_AUTH_CONNECTION_TYPE;
+ /**
+ * The auth connection id to be used for login.
+ */
+ authConnectionId?: string;
+ /**
+ * The grouped auth connection id to be used for login.
+ */
+ groupedAuthConnectionId?: string;
+ /**
+ * 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
+ *
+ * Defaults to `none`
+ * @defaultValue `none`
+ */
+ mfaLevel?: MfaLevelType;
+ /**
+ * This option is for internal use only in torus wallet and has no effect
+ * on user's login on other dapps.
+ *
+ * Defaults to false
+ * @defaultValue false
+ * @internal
+ */
+ getWalletKey?: boolean;
+ /**
+ * extraLoginOptions 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
+ */
+ extraLoginOptions?: ExtraLoginOptions;
+ /**
+ * 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
+ */
+ dappShare?: string;
+ /**
+ * 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`.
+ *
+ *
+ * @defaultValue secp256k1
+ */
+ curve?: SUPPORTED_KEY_CURVES_TYPE;
+ /**
+ * Allows the dapp to set a custom redirect url for the manage mfa flow.
+ *
+ */
+ dappUrl?: string;
+};
+ ```
+
+
+
+#### Auth Connection Types
+
+```ts
+export const AUTH_CONNECTION = {
+ GOOGLE: "google",
+ TWITTER: "twitter",
+ FACEBOOK: "facebook",
+ DISCORD: "discord",
+ FARCASTER: "farcaster",
+ APPLE: "apple",
+ GITHUB: "github",
+ REDDIT: "reddit",
+ LINE: "line",
+ KAKAO: "kakao",
+ LINKEDIN: "linkedin",
+ TWITCH: "twitch",
+ TELEGRAM: "telegram",
+ WECHAT: "wechat",
+ EMAIL_PASSWORDLESS: "email_passwordless",
+ SMS_PASSWORDLESS: "sms_passwordless",
+ CUSTOM: "custom",
+};
+```
+
+#### Advanced Options (`extraLoginOptions`)
+
+For custom integrations (like Auth0, AWS Cognito), you can provide additional options:
+
+
+
+
+| Parameter | Description |
+| ----------------------- | ----------------------------------------------------------- |
+| `isUserIdCaseSensitive` | Whether the user id field is case sensitive [Default: true] |
+| `domain` | Auth provider domain (e.g., "example.auth0.com") |
+| `client_id` | Client ID from your auth provider |
+| `scope` | OAuth scopes (e.g., "email profile openid") |
+| `response_type` | Response type for OAuth flow |
+| `login_hint` | Pre-fill user identifier |
+
+
+
+ ```ts
+ export type ExtraLoginOptions = Auth0ClientOptions;
+
+ export interface Auth0ClientOptions extends BaseLoginOptions {
+ /**
+ * Your Auth0 account domain such as `'example.auth0.com'`,
+ * `'example.eu.auth0.com'` or , `'example.mycompany.com'`
+ * (when using [custom domains](https://auth0.com/docs/custom-domains))
+ */
+ domain?: string;
+ /**
+ * The Client ID found on your Application settings page
+ */
+ client_id?: string;
+ /**
+ * The field in jwt token which maps to user id
+ */
+ userIdField?: string;
+ /**
+ * Whether the user id field is case sensitive
+ * @defaultValue true
+ */
+ isUserIdCaseSensitive?: boolean;
+ id_token?: string;
+ access_token?: string;
+ /**
+ * The route for user info endpoint. This will be padded to domain
+ * @defaultValue userinfo
+ * */
+ user_info_route?: string;
+ /**
+ * The flow type for email_passwordless login
+ */
+ flow_type?: EMAIL_FLOW_TYPE;
+ }
+ ```
+
+
+
+
+
+
+### Implicit logins
+
+Implicit logins are the easiest way to authenticate users with your custom authentication services.
+Web3Auth currently supports implicit logins for the following providers directly:
+
+- Google
+- Facebook
+- Discord
+- Twitch
+- Auth0 (Custom)
+
+In addition to these you can also use any other provider like Auth0, AWS Cognito, Azure AD, etc. by
+providing the particular details of their login within the `extraLoginOptions` object within the
+`connectTo` function.
+
+#### Usage
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ authConnectionId: "w3a-google-demo",
+});
+```
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.FACEBOOK,
+ authConnectionId: "w3a-facebook-demo",
+});
+```
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.DISCORD,
+ authConnectionId: "w3a-discord-demo",
+});
+```
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.TWITCH,
+ authConnectionId: "w3a-twitch-demo",
+});
+```
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-auth0-demo",
+ extraLoginOptions: {
+ connection: "google-oauth2",
+ },
+});
+```
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-auth0-demo",
+});
+```
+
+
+
+```ts
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-cognito-demo",
+ extraLoginOptions: {
+ clientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
+ domain: "https://shahbaz-web3auth.auth.ap-south-1.amazoncognito.com",
+ verifierIdField: "email",
+ response_type: "token",
+ scope: "email profile openid",
+ },
+});
+```
+
+
+
+
+### JWT Login
+
+JWT Login is a way to authenticate users with your custom authentication services. With this method,
+Web3Auth just takes into account the `idToken` passed over to the `connectTo` function and uses it
+to authenticate the user. You can utilise this method with any authentication service that is OAuth
+2.0 Compatible.
+
+:::warning
+
+If you have not configured on the dashboard, whether you user id is case sensitive or not, then you
+need to pass the `isUserIdCaseSensitive` option to the `extraLoginOptions`.
+
+:::
+
+#### Usage
+
+
+
+
+```ts
+const loginWithGoogle = async (idToken: string) => {
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnectionId: "w3a-google-demo",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+};
+```
+
+
+
+
+```html
+
+
+
+
+
+```
+
+
+
+
+```ts
+const loginWithFirebaseGithub = async () => {
+ try {
+ const app = initializeApp(firebaseConfig);
+ const auth = getAuth(app);
+ const githubProvider = new GithubAuthProvider();
+
+ const result = await signInWithPopup(auth, githubProvider);
+
+ const idToken = await result.user.getIdToken(true);
+
+ // focus-start
+ connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnectionId: "w3a-firebase-demo",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+ } catch (error) {
+ console.error("Firebase authentication error:", error);
+ }
+};
+```
+
+
+
+
+```ts
+const getIdToken = async () => {
+ // Get ID Token from server
+ const res = await fetch("http://localhost:8080/api/token", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const data = await res.json();
+ return data?.token;
+};
+
+const loginWithJWT = async () => {
+ try {
+ const idToken = await getIdToken();
+
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ authConnectionId: "w3a-node-demo",
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+ } catch (err) {
+ console.error(err);
+ }
+};
+```
+
+
+
+
+### Grouped Auth Connections
+
+Grouped Auth Connections allows you to group multiple auth connections together and use them as a
+single connection. This is useful when you want to authenticate the user with multiple providers and
+require the same user wallet address to be generated.
+
+For example, you can group Google & Email Passwordless providers together and use them as a single
+connection. Now, if your user logs in with Google Auth or even with Email Passwordless using the
+same email, they will get the same wallet address.
+
+:::info Prerequisites
+
+You need to configure a grouped connection, by combining your single connections in the Web3Auth
+Dashboard before using this feature.
+
+:::
+
+
+
+
+```ts
+const loginWithGoogle = async () => {
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-google",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ });
+ // focus-end
+};
+
+const loginWithAuth0Google = async () => {
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-a0-google",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ extraLoginOptions: {
+ connection: "google-oauth2",
+ },
+ });
+ // focus-end
+};
+
+const loginWithAuth0GitHub = async () => {
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-a0-github",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ extraLoginOptions: {
+ connection: "github",
+ },
+ });
+ // focus-end
+};
+```
+
+
+
+
+```ts
+import { Auth0Client } from "@auth0/auth0-spa-js";
+
+const { connectTo } = useWeb3AuthConnect();
+
+const loginWithGoogle = async (idToken: string) => {
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-google",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ verifierIdField: "email",
+ },
+ });
+ // focus-end
+};
+
+const auth0Client = new Auth0Client({
+ domain: "YOUR_AUTH0_DOMAIN",
+ clientId: "YOUR_AUTH0_CLIENT_ID",
+ authorizationParams: {
+ redirect_uri: window.location.origin,
+ },
+});
+
+const loginWithAuth0 = async () => {
+ try {
+ await auth0Client.loginWithPopup();
+ const idToken = (await getIdTokenClaims())?.__raw.toString();
+ if (!idToken) {
+ throw new Error("No id token found");
+ }
+
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-a0-github",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ verifierIdField: "email",
+ },
+ });
+ // focus-end
+ } catch (err) {
+ console.error(err);
+ }
+};
+```
+
+
+
+
+```ts
+const loginWithGoogle = async () => {
+ // focus-start
+ await connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-google",
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ });
+ // focus-end
+};
+
+const loginWithFirebaseGithub = async () => {
+ const app = initializeApp(firebaseConfig);
+ const auth = getAuth(app);
+ const githubProvider = new GithubAuthProvider();
+
+ const result = await signInWithPopup(auth, githubProvider);
+
+ const idToken = await result.user.getIdToken(true);
+
+ // focus-start
+ connectTo(WALLET_CONNECTORS.AUTH, {
+ groupedAuthConnectionId: "aggregate-sapphire",
+ authConnectionId: "w3a-firebase",
+ authConnection: AUTH_CONNECTION.CUSTOM,
+ idToken,
+ extraLoginOptions: {
+ isUserIdCaseSensitive: false,
+ },
+ });
+ // focus-end
+};
+```
+
+
+
diff --git a/docs/sdk/web/vue/advanced/mfa.mdx b/docs/sdk/web/vue/advanced/mfa.mdx
new file mode 100644
index 000000000..86ded29c9
--- /dev/null
+++ b/docs/sdk/web/vue/advanced/mfa.mdx
@@ -0,0 +1,189 @@
+---
+title: Multi Factor Authentication
+sidebar_label: Multi Factor Authentication
+description: "@web3auth/modal Multi Factor Authentication | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx";
+import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx";
+import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx";
+
+Web3Auth supports Multi-Factor Authentication (MFA) for enhanced security. MFA requires two or more
+factors—such as device, social, seed phrase, or password—to access your account and recover it if
+needed. When a recovery factor is set up, MFA is enabled and your key is split into three shares,
+using Web3Auth MPC for secure, self-custodial storage.
+
+
+
+:::caution
+
+If you are using default verifiers, your users may have set up MFA on other dApps that also use
+default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has
+enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
+
+:::
+
+## MFA Configuration Options
+
+There are two ways to configure MFA in your application:
+
+1. **Using the `mfaLevel` setting**: Controls the frequency of the MFA setup request screen.
+2. **Using the `mfaSettings` setting**: Provides granular control over each factor, with their
+ priority level, enable/disable status, and mandatory/optional settings.
+
+## `mfaLevel`
+
+The `mfaLevel` setting allows you to control when and how the MFA setup screen appears to users.
+
+```tsx
+mfaLevel?: MfaLevelType;
+```
+
+### MFA Level Types
+
+| Level | Value | Description |
+| ----------- | ----------- | -------------------------------------------------- |
+| `DEFAULT` | "default" | MFA screen appears every 10th login |
+| `OPTIONAL` | "optional" | MFA screen appears every login, but can be skipped |
+| `MANDATORY` | "mandatory" | MFA setup is required after login |
+| `NONE` | "none" | MFA setup is skipped entirely |
+
+### Type Definition
+
+```tsx
+export type MfaLevelType = (typeof MFA_LEVELS)[keyof typeof MFA_LEVELS];
+export declare const MFA_LEVELS: {
+ readonly DEFAULT: "default";
+ readonly OPTIONAL: "optional";
+ readonly MANDATORY: "mandatory";
+ readonly NONE: "none";
+};
+```
+
+### Usage Examples
+
+### Usage
+
+```tsx
+import { WALLET_CONNECTORS, AUTH_CONNECTION, MFA_LEVELS } from "@web3auth/modal";
+
+await connectTo(WALLET_CONNECTORS.AUTH, {
+ authConnection: AUTH_CONNECTION.GOOGLE,
+ authConnectionId: "w3a-google-demo",
+ // focus-next-line
+ mfaLevel: MFA_LEVELS.MANDATORY,
+});
+```
+
+## `mfaSettings`
+
+
+
+The `mfaSettings` option provides granular control over each individual MFA factor.
+
+```tsx
+mfaSettings?: MfaSettings;
+```
+
+### MFA Factors
+
+| Factor | Key | Description |
+| --------------- | --------------------- | ------------------------------------ |
+| `DEVICE` | "deviceShareFactor" | Device-based authentication |
+| `BACKUP_SHARE` | "backUpShareFactor" | Backup share (typically seed phrase) |
+| `SOCIAL_BACKUP` | "socialBackupFactor" | Social account backup |
+| `PASSWORD` | "passwordFactor" | Password-based authentication |
+| `PASSKEYS` | "passkeysFactor" | WebAuthn passkeys support |
+| `AUTHENTICATOR` | "authenticatorFactor" | Authenticator app (TOTP) |
+
+### MFA Settings Properties
+
+| Property | Type | Description |
+| ----------- | ------- | ------------------------------------------------------ |
+| `enable` | boolean | Whether this factor is enabled |
+| `priority` | number | Order in which factors are presented (lower = earlier) |
+| `mandatory` | boolean | Whether this factor is required |
+
+### Type Definitions
+
+```tsx
+export type MfaSettings = Partial>;
+export type MFA_FACTOR_TYPE = (typeof MFA_FACTOR)[keyof typeof MFA_FACTOR];
+export declare const MFA_FACTOR: {
+ readonly DEVICE: "deviceShareFactor";
+ readonly BACKUP_SHARE: "backUpShareFactor";
+ readonly SOCIAL_BACKUP: "socialBackupFactor";
+ readonly PASSWORD: "passwordFactor";
+ readonly PASSKEYS: "passkeysFactor";
+ readonly AUTHENTICATOR: "authenticatorFactor";
+};
+export type MFA_SETTINGS = {
+ enable: boolean;
+ priority?: number;
+ mandatory?: boolean;
+};
+```
+
+### Important Rules
+
+- At least two factors must be enabled when setting up MFA
+- If you set `mandatory: true` for all factors, the user must set up all enabled factors
+- If you set `mandatory: false` for all factors, the user can skip setting up MFA, but at least two
+ factors are still required
+- If you set `mandatory: true` for some factors and `mandatory: false` for others, the user must set
+ up the mandatory factors and can optionally set up the others
+- The `priority` field determines the order of setup - lower priority values appear first
+
+### Usage
+
+```ts title="web3authContext.ts"
+import { MFA_FACTOR, WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ mfaSettings: {
+ [MFA_FACTOR.DEVICE]: {
+ enable: true,
+ priority: 1,
+ mandatory: true, // at least two factors are mandatory
+ },
+ [MFA_FACTOR.BACKUP_SHARE]: {
+ enable: true,
+ priority: 2,
+ mandatory: true, // at least two factors are mandatory
+ },
+ [MFA_FACTOR.SOCIAL_BACKUP]: {
+ enable: true,
+ priority: 3,
+ mandatory: false,
+ },
+ [MFA_FACTOR.PASSWORD]: {
+ enable: true,
+ priority: 4,
+ mandatory: false,
+ },
+ [MFA_FACTOR.PASSKEYS]: {
+ enable: true,
+ priority: 5,
+ mandatory: false,
+ },
+ [MFA_FACTOR.AUTHENTICATOR]: {
+ enable: true,
+ priority: 6,
+ mandatory: false,
+ },
+ },
+ // focus-end
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+
+export default web3AuthContextConfig;
+```
diff --git a/docs/sdk/web/vue/advanced/smart-accounts.mdx b/docs/sdk/web/vue/advanced/smart-accounts.mdx
new file mode 100644
index 000000000..e8654f6f6
--- /dev/null
+++ b/docs/sdk/web/vue/advanced/smart-accounts.mdx
@@ -0,0 +1,414 @@
+---
+title: Smart Accounts
+sidebar_label: Smart Accounts
+description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
+import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
+import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
+
+# Smart Accounts
+
+Effortlessly create and manage smart accounts for your users with just a few lines of code, using
+our Smart Account feature. Smart accounts offer enhanced control and programmability, enabling
+powerful features that traditional wallets can't provide.
+
+**Key features of Smart Accounts include:**
+
+- **Gas Abstraction:** Cover transaction fees for users, or allow users to pay for their own
+ transactions using ERC-20 tokens.
+- **Batch Transactions:** Perform multiple transactions in a single call.
+- **Automated Transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH
+ hits a specific price.
+- **Custom Spending Limits:** Allow users to set tailored spending limits.
+
+> For more information about ERC-4337 and its components,
+> [check out our detailed blog post](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337).
+
+Our smart account integration streamlines your setup, allowing you to create and manage smart
+accounts using your favorite libraries like Viem, Ethers, and Wagmi. You don't need to rely on
+third-party packages to effortlessly create ERC-4337 compatible Smart Contract Wallets (SCWs),
+giving users the ability to perform batch transactions and efficiently manage gas sponsorship.
+
+
+## Enabling Smart Accounts
+
+:::info prerequisite
+
+To enable this feature, you need to configure Smart Accounts from your project in the
+[Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+
+:::
+
+### Dashboard Configuration
+
+To enable Smart Accounts, navigate to the Smart Accounts section in the Web3Auth dashboard, and
+enable the "Set up Smart Accounts" toggle. Web3Auth currently supports
+[MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount)
+as a Smart Account provider.
+
+
+
+#### Wallet Configuration
+
+Once Smart Accounts are enabled, you can customize the wallet configurations:
+
+- **All supported wallets (default):** Allows users to create Smart Accounts using both embedded and
+ external wallets.
+- **Embedded wallets only:** Restricts Smart Account creation to only embedded wallets.
+
+#### Configure Bundler & Paymaster
+
+A bundler aggregates UserOperations and submits them on-chain via the global EntryPoint contract. To
+configure the bundler:
+
+
+
+1. Navigate to the `Bundler & Paymaster` tab within the `Smart Accounts` section
+2. Add the bundler URL for each supported chain
+3. Add the paymaster URL for each supported chain
+
+:::info
+
+Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster,
+refer to the SDK Configuration section below.
+
+:::
+
+### SDK Configuration [Optional]
+
+While the dashboard provides a convenient way to configure Smart Accounts, the SDK offers greater
+flexibility by allowing you to override these settings.
+
+### Basic Configuration
+
+To enable Smart Accounts in your application, add the `accountAbstractionConfig` to your Web3Auth
+options:
+
+```ts
+import { WEB3AUTH_NETWORK, Web3AuthOptions } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+ // focus-start
+ accountAbstractionConfig: {
+ smartAccountType: "metamask",
+ chains: [
+ {
+ chainId: "0x1",
+ bundlerConfig: {
+ url: "YOUR_BUNDLER_URL",
+ },
+ },
+ ],
+ },
+ // focus-end
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+
+export default web3AuthContextConfig;
+```
+
+### Advanced Configuration: Override Paymaster Context
+
+You can override the paymaster context defined in the dashboard for specific chains. This is
+particularly useful when your paymaster requires custom settings or parameters.
+
+```ts
+import { WEB3AUTH_NETWORK, Web3AuthOptions } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+ // focus-start
+ accountAbstractionConfig: {
+ smartAccountType: "metamask",
+ chains: [
+ {
+ chainId: "0x1",
+ bundlerConfig: {
+ url: "YOUR_BUNDLER_URL",
+ // This is just an example of how you can configure the paymaster context.
+ // Please refer to the documentation of the paymaster you are using
+ // to understand the required parameters.
+ paymasterContext: {
+ token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
+ sponsorshipPolicyId: "sp_my_policy_id",
+ },
+ },
+ },
+ ],
+ },
+ // focus-end
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+
+export default web3AuthContextConfig;
+```
+
+:::info
+
+The paymaster context must be manually configured for each chain that needs to be supported.
+
+:::
+
+## Using Smart Accounts
+
+### Configure Signer
+
+
+
+### Get Smart Account Address
+
+
+
+### Send Transaction
+
+
+
+### Sign Transaction
+
+You can sign a transaction without immediately sending it. For the user's first transaction, the
+`UserOperation` calldata will automatically include the deployment data needed to create the Smart
+Account on-chain.
+
+:::info
+
+Wagmi doesn't have hooks for signing transactions yet.
+
+:::
+
+
+
+
+
+```tsx
+// Convert 1 ether to WEI format
+const amount = parseEther("1");
+
+const signature = await signer.signTransaction({
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+});
+```
+
+
+
+
+```tsx
+// Convert 1 ether to WEI format
+const amount = parseEther("1");
+const addresses = await walletClient.getAddresses();
+
+const request = await walletClient.prepareTransactionRequest({
+ account: addresses[0],
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+});
+
+const signature = await walletClient.signTransaction(request as any);
+```
+
+
+
+
+### Sign Message
+
+Smart Accounts support message signing following the EIP-1271 standard for signature verification,
+using the `isValidSignature` method defined in the smart contract wallet instead of the `ecrecover`
+function used by EOAs.
+
+
+
+
+
+```html
+
+
+
+
+
+
+
+
+
Signature:
+
{{ data }}
+
+
+
+
Error:
+
{{ error.message }}
+
+
+
+```
+
+
+
+
+```tsx
+const originalMessage = "YOUR_MESSAGE";
+
+// Sign the message
+const signedMessage = await signer.signMessage(originalMessage);
+```
+
+
+
+
+```tsx
+const originalMessage = "YOUR_MESSAGE";
+
+const addresses = await walletClient.getAddresses();
+
+const signedMessage = await walletClient.signMessage({
+ account: address[0],
+ message: originalMessage,
+});
+```
+
+
+
+
+### Send Batch Transaction
+
+One of the key advantages of Smart Accounts is the ability to execute multiple operations in a
+single transaction. For example, instead of requiring separate transactions for token approval and
+then swapping, both operations can be combined into a single UserOperation.
+
+To perform batch transactions, you must use the `BundlerClient` provided by Web3Auth:
+
+```ts
+// Use your Web3Auth instance
+const accountAbstractionProvider = web3auth.accountAbstractionProvider;
+// Use the same accountAbstractionProvider we created earlier.
+const bundlerClient = accountAbstractionProvider.bundlerClient!;
+const smartAccount = accountAbstractionProvider.smartAccount!;
+
+// 0.00001 ETH in WEI format
+const amount = 10000000000000n;
+
+const userOpHash = await bundlerClient.sendUserOperation({
+ account: smartAccount,
+ calls: [
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ ],
+});
+
+// Retrieve user operation receipt
+const receipt = await bundlerClient.waitForUserOperationReceipt({
+ hash: userOpHash,
+});
+
+const transactionHash = receipt.receipt.transactionHash;
+```
+
+:::info
+
+When calling `sendUserOperation`, it returns a UserOperation hash, not the transaction hash. To get
+the final transaction details, use `waitForUserOperationReceipt`.
+
+:::
+
+### Send Transaction Using ERC-20 Paymaster
+
+You can use ERC-20 tokens to pay for transaction fees instead of the native token (e.g., ETH). This
+requires approving the token for use by the paymaster:
+
+```ts
+// Use your Web3Auth instance
+const accountAbstractionProvider = web3auth.accountAbstractionProvider;
+
+// Use the same accountAbstractionProvider we created earlier.
+const bundlerClient = accountAbstractionProvider.bundlerClient!;
+const smartAccount = accountAbstractionProvider.smartAccount!;
+
+// Pimlico's ERC-20 Paymaster address
+const pimlicoPaymasterAddress = "0x0000000000000039cd5e8aE05257CE51C473ddd1";
+
+// USDC address on Ethereum Sepolia
+const usdcAddress = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238";
+
+// 0.00001 ETH in WEI format
+const amount = 10000000000000n;
+
+// 10 USDC in WEI format. Since USDC has 6 decimals, 10 * 10^6
+const approvalAmount = 10000000n;
+
+const userOpHash = await bundlerClient.sendUserOperation({
+ account: smartAccount,
+ calls: [
+ // Approve USDC on Sepolia chain for Pimlico's ERC 20 Paymaster
+ {
+ to: usdcAddress,
+ abi: parseAbi(["function approve(address,uint)"]),
+ functionName: "approve",
+ args: [pimlicoPaymasterAddress, approvalAmount],
+ },
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ {
+ to: "DESTINATION_ADDRESS",
+ value: amount,
+ data: "0x",
+ },
+ ],
+});
+
+// Retrieve user operation receipt
+const receipt = await bundlerClient.waitForUserOperationReceipt({
+ hash: userOpHash,
+});
+
+const transactionHash = receipt.receipt.transactionHash;
+```
diff --git a/docs/sdk/web/vue/advanced/wallet-services.mdx b/docs/sdk/web/vue/advanced/wallet-services.mdx
new file mode 100644
index 000000000..ba0f3769e
--- /dev/null
+++ b/docs/sdk/web/vue/advanced/wallet-services.mdx
@@ -0,0 +1,271 @@
+---
+title: Wallet Services
+sidebar_label: Wallet Services
+description: "@web3auth/modal Wallet Services | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import AuthAdapterSettings from "@site/src/common/sdk/pnp/web/_auth-adapter-settings.mdx";
+import AuthLoginSettings from "@site/src/common/sdk/pnp/web/_auth-login-settings.mdx";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Web3Auth Wallet Services provides a comprehensive suite of wallet functionality including Fiat on
+Ramp, Swaps, and Wallet UI Interoperability with WalletConnect. These services enhance your
+application by offering a complete wallet experience without building these features from scratch.
+
+:::tip
+
+All these configurations can be directly accessed and managed through the Web3Auth dashboard. Manual
+configuration in the SDK is optional and provided here for reference purposes.
+
+:::
+
+
+
+## `walletServicesConfig`
+
+The `walletServicesConfig` option allows you to customize the wallet services experience for your
+users.
+
+```tsx
+walletServicesConfig?: WalletServicesConfig;
+```
+
+### Configuration Options
+
+
+
+
+| Property | Type | Description |
+| ---------------------- | -------------------------- | ----------------------------------------------- |
+| `confirmationStrategy` | CONFIRMATION_STRATEGY_TYPE | How to display confirmation screens |
+| `modalZIndex` | number | Z-index for modal windows |
+| `enableKeyExport` | boolean | Enable private key export functionality |
+| `whiteLabel` | Object | Customization options for the widget appearance |
+
+#### Confirmation Strategy Options
+
+| Strategy | Description |
+| -------------- | -------------------------------------------------------------- |
+| `default` | Uses auto-approve by default, modal for WalletConnect requests |
+| `modal` | Always uses modal for confirmations |
+| `auto-approve` | Automatically approves transactions without confirmation |
+
+#### WhiteLabel Options
+
+| Property | Type | Description |
+| ------------------- | -------------------- | ----------------------------------------- |
+| `showWidgetButton` | boolean | Whether to show the widget button |
+| `buttonPosition` | BUTTON_POSITION_TYPE | Position of the widget button on the page |
+| `hideNftDisplay` | boolean | Hide NFT display in the wallet |
+| `hideTokenDisplay` | boolean | Hide token display in the wallet |
+| `hideTransfers` | boolean | Hide transfer functionality |
+| `hideTopup` | boolean | Hide top-up (fiat on-ramp) functionality |
+| `hideReceive` | boolean | Hide receive address functionality |
+| `hideSwap` | boolean | Hide token swap functionality |
+| `hideShowAllTokens` | boolean | Hide the "show all tokens" option |
+| `hideWalletConnect` | boolean | Hide WalletConnect integration |
+| `defaultPortfolio` | "token" \| "nft" | Default portfolio view |
+
+#### Button Position Options
+
+| Position | Description |
+| -------------- | ------------------------------- |
+| `bottom-left` | Bottom left corner of the page |
+| `top-left` | Top left corner of the page |
+| `bottom-right` | Bottom right corner of the page |
+| `top-right` | Top right corner of the page |
+
+
+
+
+
+```tsx
+export type WalletServicesConfig = Omit<
+ WsEmbedParams,
+ | "buildEnv"
+ | "enableLogging"
+ | "chainId"
+ | "chains"
+ | "confirmationStrategy"
+ | "accountAbstractionConfig"
+> & {
+ /**
+ * Determines how to show confirmation screens
+ * @defaultValue default
+ *
+ * default & auto-approve
+ * - use auto-approve as default
+ * - if wallet connect request use modal
+ *
+ * modal
+ * - use modal always
+ */
+ confirmationStrategy?: Exclude;
+ modalZIndex?: number;
+};
+
+export interface WsEmbedParams {
+ /**
+ * Supported chains
+ */
+ chains: ProviderConfig[];
+ /**
+ * Chain to connect with
+ */
+ chainId: string;
+ /**
+ * Build Environment of WsEmbed.
+ *
+ * production uses https://wallet.web3auth.io,
+ *
+ * staging uses https://staging-wallet.web3auth.io,
+ *
+ * testing uses https://develop-wallet.web3auth.io (latest internal build)
+ *
+ * development uses http://localhost:4050 (expects wallet-services-frontend to be run locally),
+ *
+ * @defaultValue production
+ */
+ buildEnv?: WS_EMBED_BUILD_ENV_TYPE;
+ /**
+ * Enables or disables logging.
+ *
+ * Defaults to false in prod and true in other environments
+ */
+ enableLogging?: boolean;
+ /**
+ * url of widget to load
+ *
+ * Defaults to true
+ * @defaultValue true
+ */
+ walletUrls?: Partial>;
+ /**
+ * Determines how to show confirmation screens
+ * @defaultValue default
+ *
+ * default & popup
+ * - use popop as default
+ * - if wallet connect request use modal
+ *
+ * modal
+ * - use modal always
+ *
+ * auto-approve
+ * - does not work on embed. will use default
+ */
+ confirmationStrategy?: CONFIRMATION_STRATEGY_TYPE;
+ /**
+ * Enable and configure account abstraction
+ */
+ accountAbstractionConfig?: AccountAbstractionMultiChainConfig;
+ /**
+ * Enable private key export
+ *
+ * Defaults to false
+ * @defaultValue false
+ */
+ enableKeyExport?: boolean;
+ /**
+ * Allows you to customize the look & feel of the widget
+ */
+ whiteLabel?: {
+ /**
+ * whether to show/hide ws-embed widget.
+ *
+ * Defaults to true
+ * @defaultValue true
+ */
+ showWidgetButton?: boolean;
+ /**
+ * Determines where the wsEmbed widget is visible on the page.
+ * @defaultValue bottom-left
+ */
+ buttonPosition?: BUTTON_POSITION_TYPE;
+ hideNftDisplay?: boolean;
+ hideTokenDisplay?: boolean;
+ hideTransfers?: boolean;
+ hideTopup?: boolean;
+ hideReceive?: boolean;
+ hideSwap?: boolean;
+ hideShowAllTokens?: boolean;
+ hideWalletConnect?: boolean;
+ defaultPortfolio?: "token" | "nft";
+ } & WhiteLabelData;
+}
+
+export declare const CONFIRMATION_STRATEGY: {
+ readonly POPUP: "popup";
+ readonly MODAL: "modal";
+ readonly AUTO_APPROVE: "auto-approve";
+ readonly DEFAULT: "default";
+};
+export type CONFIRMATION_STRATEGY_TYPE =
+ (typeof CONFIRMATION_STRATEGY)[keyof typeof CONFIRMATION_STRATEGY];
+
+export type AccountAbstractionMultiChainConfig = {
+ smartAccountType?: SmartAccountType;
+ chains?: {
+ chainId: string;
+ bundlerConfig: BundlerConfig;
+ paymasterConfig?: PaymasterConfig;
+ smartAccountConfig?: SmartAccountConfig;
+ }[];
+};
+
+export declare const BUTTON_POSITION: {
+ readonly BOTTOM_LEFT: "bottom-left";
+ readonly TOP_LEFT: "top-left";
+ readonly BOTTOM_RIGHT: "bottom-right";
+ readonly TOP_RIGHT: "top-right";
+};
+export type BUTTON_POSITION_TYPE = (typeof BUTTON_POSITION)[keyof typeof BUTTON_POSITION];
+```
+
+
+
+
+## Usage
+
+```ts title="web3authContext.ts"
+import {
+ BUTTON_POSITION,
+ CONFIRMATION_STRATEGY,
+ WEB3AUTH_NETWORK,
+ type Web3AuthOptions,
+} from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ walletServicesConfig: {
+ confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
+ modalZIndex: 99999,
+ enableKeyExport: false,
+ whiteLabel: {
+ showWidgetButton: true,
+ buttonPosition: BUTTON_POSITION.BOTTOM_RIGHT,
+ hideNftDisplay: false,
+ hideTokenDisplay: false,
+ hideTransfers: false,
+ hideTopup: false,
+ hideReceive: false,
+ hideSwap: false,
+ hideShowAllTokens: false,
+ hideWalletConnect: false,
+ defaultPortfolio: "token",
+ },
+ },
+ // focus-end
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+
+export default web3AuthContextConfig;
+```
diff --git a/docs/sdk/web/vue/advanced/whitelabel.mdx b/docs/sdk/web/vue/advanced/whitelabel.mdx
new file mode 100644
index 000000000..e5b733d38
--- /dev/null
+++ b/docs/sdk/web/vue/advanced/whitelabel.mdx
@@ -0,0 +1,270 @@
+---
+title: Whitelabel
+sidebar_label: Whitelabel
+description: "Whitelabel Web3Auth | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
+
+Web3Auth allows complete whitelabeling with application branding for a consistent user experience.
+You can customize three different aspects:
+
+- **UI elements**: Customize the appearance of modals and components
+- **Branding**: Apply your brand colors, logos, and themes
+- **Translations**: Localize the interface for your users
+
+:::info
+
+All of these settings can be easily managed directly from the Web3Auth Dashboard. Once you update
+your branding, or UI preferences there, the changes will automatically apply to your integration. As
+this is the recommended approach, we will not cover basic customization via the SDK here. Instead,
+this guide focuses on advanced customization options available through the SDK.
+
+:::
+
+
+
+## Customizing the Web3Auth Modal
+
+While basic modal appearance can be configured directly on the dashboard, the following advanced
+options provide even greater control through the `modalConfig` property.
+
+### `modalConfig`
+
+The `modalConfig` option in the constructor lets you configure the modal UI and customize
+authentication:
+
+```ts
+modalConfig?: ConnectorsModalConfig;
+
+export interface ConnectorsModalConfig {
+ connectors?: Partial>;
+ hideWalletDiscovery?: boolean;
+}
+
+export type WALLET_CONNECTOR_TYPE = (typeof WALLET_CONNECTORS)[keyof typeof WALLET_CONNECTORS];
+
+export interface ModalConfig extends Omit {
+ loginMethods?: LoginMethodConfig;
+}
+```
+
+### `LoginMethodConfig`
+
+The `LoginMethodConfig` interface provides extensive customization options for each authentication
+method:
+
+
+
+
+| Property | Type | Description |
+| ------------------------- | ---------------------- | ------------------------------------------------------------------------------------ |
+| `name` | `string` | Custom display name (defaults to auth app's default if not provided) |
+| `description` | `string` | Button description (renders as full-length button if provided; otherwise as an icon) |
+| `logoHover` | `string` | Logo shown on mouse hover (defaults to auth app's default) |
+| `logoLight` | `string` | Logo for dark theme/background (defaults to auth app's default) |
+| `logoDark` | `string` | Logo for light theme/background (defaults to auth app's default) |
+| `mainOption` | `boolean` | Whether to show login button on the main list |
+| `showOnModal` | `boolean` | Controls visibility of the login button on modal |
+| `authConnectionId` | `string` | Auth connection ID of the provider |
+| `groupedAuthConnectionId` | `string` | Grouped auth connection ID of the provider |
+| `extraLoginOptions` | `ExtraLoginOptions` | Additional parameters for social login |
+| `authConnection` | `AUTH_CONNECTION_TYPE` | Auth connection type (useful for customizing login buttons with custom connectors) |
+| `isDefault` | `boolean` | Whether it's the default connector _(internal)_ |
+
+
+
+
+
+```ts
+export type LoginMethodConfig = Partial<
+ Record<
+ AUTH_CONNECTION_TYPE,
+ {
+ /**
+ * Display Name. If not provided, we use the default for auth app
+ */
+ name?: string;
+ /**
+ * Description for button. If provided, it renders as a full length button. else, icon button
+ */
+ description?: string;
+ /**
+ * Logo to be shown on mouse hover. If not provided, we use the default for auth app
+ */
+ logoHover?: string;
+ /**
+ * Logo to be shown on dark background (dark theme). If not provided, we use the default for auth app
+ */
+ logoLight?: string;
+ /**
+ * Logo to be shown on light background (light theme). If not provided, we use the default for auth app
+ */
+ logoDark?: string;
+ /**
+ * Show login button on the main list
+ */
+ mainOption?: boolean;
+ /**
+ * Whether to show the login button on modal or not
+ */
+ showOnModal?: boolean;
+ /**
+ * Auth connection id of the provider.
+ */
+ authConnectionId?: string;
+ /**
+ * Grouped auth connection id of the provider.
+ */
+ groupedAuthConnectionId?: string;
+ /**
+ * ExtraLoginOption params to be used for social login.
+ */
+ extraLoginOptions?: ExtraLoginOptions;
+ /**
+ * Auth connection type of the auth connector.
+ * Can be different from the original key.
+ *
+ * Example: This helps in customizing the google login button with auth0 custom connector.
+ */
+ authConnection?: AUTH_CONNECTION_TYPE;
+ /**
+ * Whether is it default connector.
+ *
+ * @internal
+ */
+ isDefault?: boolean;
+ }
+ >
+>;
+```
+
+
+
+
+## Common Customization Examples
+
+### Disabling Specific Social Login Methods
+
+Web3Auth provides the following social login methods:
+
+```tsx
+export declare const AUTH_CONNECTION: {
+ readonly GOOGLE: "google";
+ readonly TWITTER: "twitter";
+ readonly FACEBOOK: "facebook";
+ readonly DISCORD: "discord";
+ readonly FARCASTER: "farcaster";
+ readonly APPLE: "apple";
+ readonly GITHUB: "github";
+ readonly REDDIT: "reddit";
+ readonly LINE: "line";
+ readonly KAKAO: "kakao";
+ readonly LINKEDIN: "linkedin";
+ readonly TWITCH: "twitch";
+ readonly TELEGRAM: "telegram";
+ readonly WECHAT: "wechat";
+ readonly EMAIL_PASSWORDLESS: "email_passwordless";
+ readonly SMS_PASSWORDLESS: "sms_passwordless";
+ readonly CUSTOM: "custom";
+ readonly PASSKEYS: "passkeys";
+ readonly AUTHENTICATOR: "authenticator";
+};
+```
+
+To disable specific login methods, set `showOnModal` to `false` for the corresponding auth
+connection:
+
+```ts title="web3AuthContextConfig.ts"
+import { AUTH_CONNECTION, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions: {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ // Disable Facebook and Reddit
+ facebook: {
+ name: "facebook",
+ showOnModal: false,
+ },
+ reddit: {
+ name: "reddit",
+ showOnModal: false,
+ },
+ },
+ // Setting to false will hide all social login methods from modal
+ showOnModal: true,
+ },
+ },
+ },
+ // focus-end
+ },
+};
+
+export default web3AuthContextConfig;
+```
+
+### Enhancing Email and SMS Login Experience
+
+By specifying a custom `authConnectionId` for email or SMS login methods, you can ensure the entire
+authentication flow takes place seamlessly within the modal, eliminating the need for external
+popups.
+
+:::info
+
+In the default setup, users are redirected to a separate popup to enter their email or phone number
+for security purposes. However, with a custom `authConnectionId`, this input step is securely
+embedded directly inside the modal, providing a smoother and more integrated user experience.
+
+:::
+
+```ts title="web3AuthContextConfig.ts"
+import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions: {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ // focus-start
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ email_passwordless: {
+ name: "email passwordless login",
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ },
+ },
+ },
+ // focus-end
+ },
+};
+
+export default web3AuthContextConfig;
+```
+
+## Creating a Fully Custom UI
+
+For complete control over the authentication interface, you can bypass the Web3Auth modal entirely
+and use the `connectTo` function. This allows you to create custom buttons that connect directly to
+specific auth providers.
+
+See the [Custom Authentication](./custom-authentication) section for detailed implementation
+instructions.
diff --git a/docs/sdk/web/vue/composables/composables.mdx b/docs/sdk/web/vue/composables/composables.mdx
new file mode 100644
index 000000000..0144b5110
--- /dev/null
+++ b/docs/sdk/web/vue/composables/composables.mdx
@@ -0,0 +1,63 @@
+---
+title: Vue Composables for Web3Auth Modal
+sidebar_label: Overview
+description: "@web3auth/modal Vue Composables | Documentation - Web3Auth"
+---
+
+Web3Auth offers a comprehensive suite of Vue composables to streamline integration and state
+management within your Vue applications. These composables abstract away common authentication and
+wallet operations, enabling you to implement Web3Auth features with minimal boilerplate. Each
+composable is focused on a specific aspect of Web3Auth functionality, making it easy to implement
+authentication, wallet operations, and blockchain interactions in your Vue projects.
+
+## List of Vue Composables
+
+:::tip
+
+For detailed usage, configuration options, and code examples, refer to the dedicated documentation
+page for each composable.
+
+:::
+
+### Web3Auth Composables
+
+| Composable Name | Description |
+| --------------- | ----------------------------------------------------------------- |
+| `useWeb3Auth` | Core composable for Web3Auth initialization and state management. |
+
+### Authentication Composables
+
+| Composable Name | Description |
+| ----------------------- | -------------------------------------- |
+| `useWeb3AuthConnect` | Handles Web3Auth connection processes. |
+| `useWeb3AuthDisconnect` | Manages disconnection from Web3Auth. |
+
+### Identity Composables
+
+| Composable Name | Description |
+| ------------------ | -------------------------------------------------------- |
+| `useIdentityToken` | Retrieves and manages identity tokens. |
+| `useWeb3AuthUser` | Provides access to the authenticated user's information. |
+
+### Blockchain Composables
+
+| Composable Name | Description |
+| ---------------- | ------------------------------------------------------- |
+| `useSwitchChain` | Allows switching between different blockchain networks. |
+
+### MFA Composables
+
+| Composable Name | Description |
+| --------------- | ---------------------------------------------------------------- |
+| `useEnableMFA` | Enables Multi-Factor Authentication (MFA) for enhanced security. |
+| `useManageMFA` | Provides functionality to manage MFA settings. |
+
+### Wallet Services Plugin Composables
+
+| Composable Name | Description |
+| ------------------------- | --------------------------------------------------- |
+| `useWalletConnectScanner` | Integrates WalletConnect scanner functionality. |
+| `useWalletUI` | Manages wallet UI components and user interactions. |
+| `useCheckout` | Facilitates cryptocurrency checkout processes. |
+| `useSwap` | Enables token swapping capabilities. |
+| `useWalletServicesPlugin` | Provides access to wallet service plugins. |
diff --git a/docs/sdk/web/vue/composables/useCheckout.mdx b/docs/sdk/web/vue/composables/useCheckout.mdx
new file mode 100644
index 000000000..436f72de4
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useCheckout.mdx
@@ -0,0 +1,55 @@
+---
+title: useCheckout
+sidebar_label: useCheckout
+description: "@web3auth/modal Vue Composable useCheckout | Documentation - Web3Auth"
+---
+
+Composable to show the cryptocurrency checkout modal using Wallet Services Plugin.
+
+### Import
+
+```ts
+import { useCheckout } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
Error: {{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import { type IUseCheckout } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the checkout process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the checkout process.
+
+#### showCheckout
+
+`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise`
+
+Function to initiate the checkout modal. Optional `showCheckoutParams` can be passed to customize
+the modal.
diff --git a/docs/sdk/web/vue/composables/useEnableMFA.mdx b/docs/sdk/web/vue/composables/useEnableMFA.mdx
new file mode 100644
index 000000000..67896035c
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useEnableMFA.mdx
@@ -0,0 +1,55 @@
+---
+title: useEnableMFA
+sidebar_label: useEnableMFA
+description: "@web3auth/modal Vue Composable useEnableMFA | Documentation - Web3Auth"
+---
+
+Composable to enable Multi-Factor Authentication (MFA) using Web3Auth in Vue.
+
+### Import
+
+```ts
+import { useEnableMFA } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import type { UseEnableMFA } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`Ref`
+
+Whether the MFA enabling process is in progress.
+
+#### error
+
+`Ref`
+
+Error that occurred during the MFA enabling process.
+
+#### enableMFA
+
+`(params?: T) => Promise`
+
+Function to initiate the MFA enabling process. Accepts optional parameters depending on the MFA
+method or configuration required by your implementation.
diff --git a/docs/sdk/web/vue/composables/useIdentityToken.mdx b/docs/sdk/web/vue/composables/useIdentityToken.mdx
new file mode 100644
index 000000000..13cf63a96
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useIdentityToken.mdx
@@ -0,0 +1,63 @@
+---
+title: useIdentityToken
+sidebar_label: useIdentityToken
+description: "@web3auth/modal Vue Composable useIdentityToken | Documentation - Web3Auth"
+---
+
+Composable to retrieve and manage the identity token from Web3Auth in Vue.
+
+### Import
+
+```ts
+import { useIdentityToken } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
+
Token: {{ token }}
+
Error: {{ error.message }}
+
+
+```
+
+### Return Type
+
+```ts
+import type { IUseIdentityToken } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`Ref`
+
+Whether the authentication process is in progress.
+
+#### error
+
+`Ref`
+
+Error that occurred during the authentication process.
+
+#### token
+
+`Ref`
+
+The identity token returned after successful authentication.
+
+#### getIdentityToken
+
+`() => Promise`
+
+Function to initiate the authentication process and retrieve the identity token.
diff --git a/docs/sdk/web/vue/composables/useManageMFA.mdx b/docs/sdk/web/vue/composables/useManageMFA.mdx
new file mode 100644
index 000000000..249a86a0f
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useManageMFA.mdx
@@ -0,0 +1,57 @@
+---
+title: useManageMFA
+sidebar_label: useManageMFA
+description: "@web3auth/modal Vue Composables useManageMFA | Documentation - Web3Auth"
+---
+
+Hook to manage Multi-Factor Authentication (MFA) using Web3Auth. This composable provides a
+convenient way to trigger MFA management actions, such as updating or configuring MFA settings for
+the user.
+
+### Import
+
+```ts
+import { useManageMFA } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import type { IUseManageMFA } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the MFA management process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the MFA management process.
+
+#### manageMFA
+
+`(params?: T) => Promise`
+
+Function to initiate the MFA management process. Accepts optional parameters depending on the MFA
+action or configuration required by your implementation.
diff --git a/docs/sdk/web/vue/composables/useSwap.mdx b/docs/sdk/web/vue/composables/useSwap.mdx
new file mode 100644
index 000000000..b5b93c63f
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useSwap.mdx
@@ -0,0 +1,54 @@
+---
+title: useSwap
+sidebar_label: useSwap
+description: "@web3auth/modal Vue Composables useSwap | Documentation - Web3Auth"
+---
+
+Hook to open the Swap interface using the Wallet Services Plugin.
+
+### Import
+
+```ts
+import { useSwap } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
Error: {{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import { type IUseSwap } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the swap interface is being opened.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred while opening the swap interface.
+
+#### showSwap
+
+`(showSwapParams?: BaseEmbedControllerState["showSwap"]) => Promise`
+
+Function to open the swap interface. Accepts optional parameters for customizing the swap view.
diff --git a/docs/sdk/web/vue/composables/useSwitchChain.mdx b/docs/sdk/web/vue/composables/useSwitchChain.mdx
new file mode 100644
index 000000000..e186aef3d
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useSwitchChain.mdx
@@ -0,0 +1,87 @@
+---
+title: useSwitchChain
+sidebar_label: useSwitchChain
+description: "@web3auth/modal Vue Composables useSwitchChain | Documentation - Web3Auth"
+---
+
+Composable to switch blockchain networks with Web3Auth in Vue.
+
+### Import
+
+```ts
+import { useSwitchChain } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
Error: {{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import { type IUseSwitchChain } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the chain switching process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the chain switching process.
+
+#### switchChain
+
+`(chainId: string) => Promise`
+
+Function to initiate the chain switch. Pass the target `chainId` as a string (e.g., "0x1" for
+Ethereum Mainnet).
+
+## Example
+
+```html title="switchChain.vue"
+
+
+
+
+
Switch Chain
+
Connected to {{ currentChainName }}
+
+
{{ error.message }}
+
+
+```
diff --git a/docs/sdk/web/vue/composables/useWalletConnectScanner.mdx b/docs/sdk/web/vue/composables/useWalletConnectScanner.mdx
new file mode 100644
index 000000000..f2297559e
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWalletConnectScanner.mdx
@@ -0,0 +1,55 @@
+---
+title: useWalletConnectScanner
+sidebar_label: useWalletConnectScanner
+description: "@web3auth/modal Vue Composable useWalletConnectScanner | Documentation - Web3Auth"
+---
+
+Composable to show the WalletConnect QR scanner using the Wallet Services Plugin in Vue.
+
+### Import
+
+```ts
+import { useWalletConnectScanner } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import type { IUseWalletConnectScanner } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the scanner opening process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the scanner opening process.
+
+#### showWalletConnectScanner
+
+`(showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise`
+
+Function to show the WalletConnect QR scanner. Accepts optional parameters for customizing the
+scanner behavior.
diff --git a/docs/sdk/web/vue/composables/useWalletServicesPlugin.mdx b/docs/sdk/web/vue/composables/useWalletServicesPlugin.mdx
new file mode 100644
index 000000000..c781129c0
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWalletServicesPlugin.mdx
@@ -0,0 +1,66 @@
+---
+title: useWalletServicesPlugin
+sidebar_label: useWalletServicesPlugin
+description: "@web3auth/modal Vue Composables useWalletServicesPlugin | Documentation - Web3Auth"
+---
+
+Hook to access the Wallet Services Plugin context, enabling wallet-related features such as
+WalletConnect, Checkout, Swap, and Wallet UI.
+
+### Import
+
+```ts
+import { useWalletServicesPlugin } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
+
+
+```
+
+### Return Type
+
+```ts
+import type { IWalletServicesContext } from "@web3auth/modal/vue";
+```
+
+#### isPluginConnected
+
+`boolean`
+
+Whether the Wallet Services Plugin is connected and ready to use.
+
+#### showWalletConnectScanner
+
+`(showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise`
+
+Shows the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner
+behavior.
+
+#### showCheckout
+
+`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise`
+
+Shows the TopUp modal for fiat-to-crypto checkout. Accepts optional parameters for customizing the
+checkout experience.
+
+#### showWalletUI
+
+`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise`
+
+Shows the Wallet Services modal UI. Accepts optional parameters for customizing the wallet UI
+experience.
diff --git a/docs/sdk/web/vue/composables/useWalletUI.mdx b/docs/sdk/web/vue/composables/useWalletUI.mdx
new file mode 100644
index 000000000..795f0f8da
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWalletUI.mdx
@@ -0,0 +1,55 @@
+---
+title: useWalletUI
+sidebar_label: useWalletUI
+description: "@web3auth/modal Vue Composables useWalletUI | Documentation - Web3Auth"
+---
+
+Hook to show the Wallet Services UI modal using the Wallet Services Plugin.
+
+### Import
+
+```ts
+import { useWalletUI } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import type { IUseWalletUI } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the Wallet UI opening process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the Wallet UI opening process.
+
+#### showWalletUI
+
+`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise`
+
+Function to show the Wallet Services modal UI. Accepts optional parameters for customizing the
+wallet UI experience.
diff --git a/docs/sdk/web/vue/composables/useWeb3Auth.mdx b/docs/sdk/web/vue/composables/useWeb3Auth.mdx
new file mode 100644
index 000000000..341c5276d
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWeb3Auth.mdx
@@ -0,0 +1,100 @@
+---
+title: useWeb3Auth
+sidebar_label: useWeb3Auth
+description: "@web3auth/modal/vue Composable useWeb3Auth | Documentation - Web3Auth"
+---
+
+Composable to access the Web3Auth context in Vue.
+
+### Import
+
+```ts
+import { useWeb3Auth } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+```
+
+### Return Type
+
+```ts
+import type { IUseWeb3Auth } from "@web3auth/modal/vue";
+```
+
+#### initError
+
+`Ref`
+
+Error that occurred during Web3Auth initialization.
+
+#### isConnected
+
+`Ref`
+
+Whether the user is connected to Web3Auth.
+
+#### isInitialized
+
+`Ref`
+
+Whether Web3Auth has completed initialization.
+
+#### isInitializing
+
+`Ref`
+
+Whether Web3Auth is currently initializing.
+
+#### provider
+
+`Ref`
+
+Connected provider from Web3Auth.
+
+#### status
+
+`Ref`
+
+Current status of the Web3Auth connection.
+
+#### web3Auth
+
+`Ref`
+
+The Web3Auth instance.
+
+#### getPlugin
+
+`(pluginName: PLUGIN_NAME) => IPlugin | null`
+
+Helper function to get a plugin by name.
diff --git a/docs/sdk/web/vue/composables/useWeb3AuthConnect.mdx b/docs/sdk/web/vue/composables/useWeb3AuthConnect.mdx
new file mode 100644
index 000000000..69aa11820
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWeb3AuthConnect.mdx
@@ -0,0 +1,149 @@
+---
+title: useWeb3AuthConnect
+sidebar_label: useWeb3AuthConnect
+description: "@web3auth/modal Vue Composable useWeb3AuthConnect | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+Composable to connect to Web3Auth in Vue.
+
+### Import
+
+```ts
+import { useWeb3AuthConnect } from "@web3auth/modal/vue";
+```
+
+### Choosing the Right Connection Method
+
+You can connect users to Web3Auth in two main ways, depending on your application's needs:
+
+- **Use `connect()`** when you want to display the default Web3Auth modal. This is ideal if you want
+ to provide users with a pre-built, user-friendly interface where they can choose from all
+ available login options (social logins, wallets, etc.) with minimal setup.
+
+- **Use `connectTo(connector, params)`** when you want to build a fully custom login experience.
+ This method lets you bypass the Web3Auth modal and connect directly to a specific wallet connector
+ (such as Google, Facebook, or a particular wallet). Choose this if you want to design your own UI
+ for login options, or if you want to restrict users to a specific authentication method. This
+ method also allows you to use JWT based login configurations.
+
+**Summary:**
+
+- Use `connect()` for the standard modal experience.
+- Use `connectTo()` for custom UIs or direct connection to a specific login method.
+
+### Usage
+
+
+
+
+
+:::info
+
+This is the most common way to connect to Web3Auth. It opens the Web3Auth modal UI, allowing users
+to select from available login options.
+
+:::
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+
+
+
+
+:::info
+
+This method allows you to build your own custom connection UI. It bypasses the Web3Auth modal UI,
+allowing you to create your own custom UI for login options. This can be useful if you want to hide
+Web3Auth from your end users.
+
+:::
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+
+
+
+
+### Return Type
+
+```ts
+import type { IUseWeb3AuthConnect } from "@web3auth/modal/vue";
+```
+
+#### isConnected
+
+`boolean`
+
+Whether the user is connected to Web3Auth.
+
+#### loading
+
+`boolean`
+
+Whether the connection process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the connection process.
+
+#### connectorName
+
+`WALLET_CONNECTOR_TYPE | null`
+
+Name of the connected connector.
+
+#### connect
+
+`() => Promise`
+
+Function to initiate the connection process. Opens the Web3Auth modal UI.
+
+#### connectTo
+
+`(connector: T, params?: LoginParamMap[T]) => Promise`
+
+Function to connect directly to a specific wallet connector. This bypasses the Web3Auth modal UI,
+allowing you to build custom interfaces. This method also allows you to use JWT based login
+configurations.
diff --git a/docs/sdk/web/vue/composables/useWeb3AuthDisconnect.mdx b/docs/sdk/web/vue/composables/useWeb3AuthDisconnect.mdx
new file mode 100644
index 000000000..aab61e977
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWeb3AuthDisconnect.mdx
@@ -0,0 +1,55 @@
+---
+title: useWeb3AuthDisconnect
+sidebar_label: useWeb3AuthDisconnect
+description: "@web3auth/modal Vue Composables useWeb3AuthDisconnect | Documentation - Web3Auth"
+---
+
+Hook to disconnect from Web3Auth.
+
+### Import
+
+```ts
+import { useWeb3AuthDisconnect } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
{{ error.message }}
+
+```
+
+### Return Type
+
+```ts
+import type { IUseWeb3AuthDisconnect } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`Ref`
+
+Whether the disconnection process is in progress.
+
+#### error
+
+`Ref`
+
+Error that occurred during the disconnection process.
+
+#### disconnect
+
+`(options?: { cleanup: boolean }) => Promise`
+
+Function to initiate the disconnection process. Optional `cleanup` parameter controls whether to
+remove all user data.
diff --git a/docs/sdk/web/vue/composables/useWeb3AuthUser.mdx b/docs/sdk/web/vue/composables/useWeb3AuthUser.mdx
new file mode 100644
index 000000000..b4767ebb0
--- /dev/null
+++ b/docs/sdk/web/vue/composables/useWeb3AuthUser.mdx
@@ -0,0 +1,70 @@
+---
+title: useWeb3AuthUser
+sidebar_label: useWeb3AuthUser
+description: "@web3auth/modal/vue Composable useWeb3AuthUser | Documentation - Web3Auth"
+---
+
+Composable to fetch and manage the current Web3Auth user information in Vue.
+
+### Import
+
+```ts
+import { useWeb3AuthUser } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
Loading user info...
+
Error: {{ error.message }}
+
No user info available.
+
+
{{ JSON.stringify(userInfo, null, 2) }}
+
MFA Enabled: {{ isMFAEnabled ? "Yes" : "No" }}
+
+
+
+```
+
+### Return Type
+
+```ts
+import type { IUseWeb3AuthUser } from "@web3auth/modal/vue";
+```
+
+#### loading
+
+`boolean`
+
+Whether the user info fetching process is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error that occurred during the user info fetching process.
+
+#### userInfo
+
+`Partial | null`
+
+The current user's information, or null if not available.
+
+#### isMFAEnabled
+
+`boolean`
+
+Whether Multi-Factor Authentication (MFA) is enabled for the user.
+
+#### getUserInfo
+
+`() => Promise | null>`
+
+Function to fetch the latest user information from Web3Auth.
diff --git a/docs/sdk/web/vue/ethereum-composables.mdx b/docs/sdk/web/vue/ethereum-composables.mdx
new file mode 100644
index 000000000..171332ae8
--- /dev/null
+++ b/docs/sdk/web/vue/ethereum-composables.mdx
@@ -0,0 +1,16 @@
+---
+title: Vue Composables for Ethereum (via Wagmi)
+sidebar_label: Ethereum Composables
+description: "@web3auth/modal Ethereum Vue Composables | Documentation - Web3Auth"
+---
+
+import VueWagmiIntegration from "../../../sdk/web/vue/_ethereum-composables-snippets.mdx";
+
+Web3Auth supports composable-based Ethereum wallet operations in Vue via [Wagmi](https://wagmi.sh/).
+Once you have set up Wagmi using the Web3Auth Modal SDK (see the
+[Setup guide](./setup#wagmi-integration)), you can use all Wagmi composables directly in your
+application—no additional wrappers or configuration are needed beyond the initial setup.
+
+## Wagmi Integration
+
+
diff --git a/docs/sdk/web/vue/examples.mdx b/docs/sdk/web/vue/examples.mdx
new file mode 100644
index 000000000..6e1809d6c
--- /dev/null
+++ b/docs/sdk/web/vue/examples.mdx
@@ -0,0 +1,11 @@
+---
+title: Examples - PnP Web Modal SDK
+sidebar_label: Examples
+description: "@web3auth/modal Examples | Documentation - Web3Auth"
+hide_table_of_contents: true
+---
+
+import Examples from "@site/src/components/Examples";
+import { webExamples } from "@site/src/common/maps";
+
+
diff --git a/docs/sdk/web/vue/solana-composables/solana-composables.mdx b/docs/sdk/web/vue/solana-composables/solana-composables.mdx
new file mode 100644
index 000000000..6c59c91e2
--- /dev/null
+++ b/docs/sdk/web/vue/solana-composables/solana-composables.mdx
@@ -0,0 +1,27 @@
+---
+title: Vue Composables for Solana
+sidebar_label: Overview
+description: "@web3auth/modal Solana Vue Composables | Documentation - Web3Auth"
+---
+
+Web3Auth provides a set of Vue composables for basic Solana wallet operations. These composables are
+designed to simplify common Solana interactions in your Vue app.
+
+:::info
+
+For advanced Solana features, you should use
+[`@solana/web3.js`](https://solana-labs.github.io/solana-web3.js/) on top of the composables
+provided.
+
+:::
+
+## Solana Composables
+
+| Composable Name | Description |
+| --------------------------- | -------------------------------------------- |
+| `useSignAndSendTransaction` | Sign and send a Solana transaction. |
+| `useSignMessage` | Sign a message with the Solana wallet. |
+| `useSignTransaction` | Sign a Solana transaction (without sending). |
+| `useSolanaWallet` | Access Solana wallet state and utilities. |
+
+Further code and advanced usage should be implemented using Solana's web3.js library as needed.
diff --git a/docs/sdk/web/vue/solana-composables/useSignAndSendTransaction.mdx b/docs/sdk/web/vue/solana-composables/useSignAndSendTransaction.mdx
new file mode 100644
index 000000000..408e2d40b
--- /dev/null
+++ b/docs/sdk/web/vue/solana-composables/useSignAndSendTransaction.mdx
@@ -0,0 +1,151 @@
+---
+title: useSignAndSendTransaction
+sidebar_label: useSignAndSendTransaction
+description: "@web3auth/modal Vue Composable useSignAndSendTransaction | Documentation - Web3Auth"
+---
+
+Composable to sign and send a Solana transaction using the connected Solana wallet from Web3Auth in
+Vue.
+
+### Import
+
+```ts
+import { useSignAndSendTransaction } from "@web3auth/modal/vue/solana";
+```
+
+### Usage
+
+```html
+
+
+
+
+
+
Error: {{ error.message }}
+
Signature: {{ data }}
+
+
+```
+
+### Return Type
+
+```ts
+export type IUseSignAndSendTransaction = {
+ loading: boolean;
+ error: Web3AuthError | null;
+ data: string | null;
+ signAndSendTransaction: (transaction: TransactionOrVersionedTransaction) => Promise;
+};
+```
+
+#### loading
+
+`boolean`
+
+Indicates if the transaction signing and sending is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error object if signing or sending fails, otherwise null.
+
+#### data
+
+`string | null`
+
+The transaction signature as a string, or null if not signed yet.
+
+#### signAndSendTransaction
+
+`(transaction: TransactionOrVersionedTransaction) => Promise`
+
+Function to sign and send a transaction. Returns the transaction signature as a string.
+
+## Example
+
+```html title="SendVersionedTransaction.vue"
+
+
+
+
+
Send Versioned Transaction
+
+
Transaction Hash: {{ hash }}
+
Error: {{ error.message }}
+
+
+```
diff --git a/docs/sdk/web/vue/solana-composables/useSignMessage.mdx b/docs/sdk/web/vue/solana-composables/useSignMessage.mdx
new file mode 100644
index 000000000..7e7de2604
--- /dev/null
+++ b/docs/sdk/web/vue/solana-composables/useSignMessage.mdx
@@ -0,0 +1,109 @@
+---
+title: useSignMessage
+sidebar_label: useSignMessage
+description: "@web3auth/modal Vue Composable useSignMessage | Documentation - Web3Auth"
+---
+
+Composable to sign a message using the connected Solana wallet from Web3Auth in Vue.
+
+### Import
+
+```ts
+import { useSignMessage } from "@web3auth/modal/vue/solana";
+```
+
+### Usage
+
+```html
+
+
+
+
+
+
+
Error: {{ error.message }}
+
Signature: {{ data }}
+
+
+```
+
+### Return Type
+
+```ts
+export type IUseSignMessage = {
+ loading: boolean;
+ error: Web3AuthError | null;
+ data: string | null;
+ signMessage: (message: string) => Promise;
+};
+```
+
+#### loading
+
+`boolean`
+
+Indicates if the message signing is in progress.
+
+#### error
+
+`Web3AuthError | null`
+
+Error object if signing fails, otherwise null.
+
+#### data
+
+`string | null`
+
+The signature as a string, or null if not signed yet.
+
+#### signMessage
+
+`(message: string) => Promise`
+
+Function to sign a message. Returns the signature as a string.
+
+## Example
+
+```html title="SignMessage.vue"
+
+
+
+
+
Sign Message
+
+
Message Hash: {{ hash }}
+
Error: {{ error.message }}
+
+
+```
diff --git a/docs/sdk/web/vue/solana-composables/useSignTransaction.mdx b/docs/sdk/web/vue/solana-composables/useSignTransaction.mdx
new file mode 100644
index 000000000..92027476d
--- /dev/null
+++ b/docs/sdk/web/vue/solana-composables/useSignTransaction.mdx
@@ -0,0 +1,140 @@
+---
+title: useSignTransaction
+sidebar_label: useSignTransaction
+description: "@web3auth/modal Vue Composable useSignTransaction | Documentation - Web3Auth"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+Composable to sign a Solana transaction using the connected wallet from Web3Auth.
+
+### Import
+
+```ts
+import { useSignTransaction } from "@web3auth/modal/vue/solana";
+```
+
+### Usage
+
+```html
+
+
+
+
+
+
Error: {{ error.message }}
+
Signed Transaction: {{ data }}
+
+
+```
+
+### Return Type
+
+```ts
+export type IUseSignTransaction = {
+ loading: Ref;
+ error: Ref;
+ data: Ref;
+ signTransaction: (transaction: TransactionOrVersionedTransaction) => Promise;
+};
+```
+
+#### loading
+
+`Ref`
+
+Indicates if the transaction signing is in progress.
+
+#### error
+
+`Ref`
+
+Error object if signing fails, otherwise null.
+
+#### data
+
+`Ref`
+
+The signed transaction as a string, or null if not signed yet.
+
+#### signTransaction
+
+`(transaction: TransactionOrVersionedTransaction) => Promise`
+
+Function to sign a Solana transaction. Returns the signed transaction as a string.
+
+## Example
+
+```html
+
+
+
+
+
+
Sign Transaction
+
+
Signed Transaction: {{ signedTransaction }}
+
Error: {{ error.message }}
+
+
+
+```
diff --git a/docs/sdk/web/vue/solana-composables/useSolanaWallet.mdx b/docs/sdk/web/vue/solana-composables/useSolanaWallet.mdx
new file mode 100644
index 000000000..6a903c00d
--- /dev/null
+++ b/docs/sdk/web/vue/solana-composables/useSolanaWallet.mdx
@@ -0,0 +1,125 @@
+---
+title: useSolanaWallet
+sidebar_label: useSolanaWallet
+description: "@web3auth/modal Vue Composables useSolanaWallet | Documentation - Web3Auth"
+---
+
+Composable to retrieve and manage Solana wallet, accounts, and connection from Web3Auth in Vue.
+
+### Import
+
+```ts
+import { useSolanaWallet } from "@web3auth/modal/vue";
+```
+
+### Usage
+
+```html
+
+
+
+
+
Accounts: {{ accounts?.length ? accounts.join(", ") : "No accounts" }}
+
+```
+
+### Return Type
+
+```ts
+import type { IUseSolanaWallet } from "@web3auth/modal/vue";
+```
+
+#### accounts
+
+`string[] | null`
+
+The list of Solana account addresses, or null if not available.
+
+#### solanaWallet
+
+`SolanaWallet | null`
+
+The SolanaWallet instance for interacting with the Solana blockchain, or null if not available.
+
+#### connection
+
+`Connection | null`
+
+The Solana Connection instance for making RPC calls, or null if not available.
+
+### Example: Fetching SOL Balance
+
+```html title="getBalance.vue"
+
+
+
+
+
Balance
+
+ {{ balance / LAMPORTS_PER_SOL }} SOL
+
+
Loading...
+
Error: {{ error }}
+
+
+
+```
diff --git a/docs/sdk/web/vue/vue.mdx b/docs/sdk/web/vue/vue.mdx
new file mode 100644
index 000000000..5b1fa34eb
--- /dev/null
+++ b/docs/sdk/web/vue/vue.mdx
@@ -0,0 +1,211 @@
+---
+title: Getting Started with Web3Auth Vue SDK
+sidebar_label: Getting Started
+description: "Web3Auth PnP Web SDK for Vue | Documentation - Web3Auth"
+---
+
+import ExampleCards from "@theme/ExampleCards";
+import { webExamples, QUICK_START } from "@site/src/common/maps";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import SdkTroubleshootingIntro from "@site/src/common/sdk/pnp/web/_sdk-troubleshooting-intro.mdx";
+
+## Overview
+
+Web3Auth Plug and Play (PnP) provides a seamless authentication experience for Vue applications with
+social logins, external wallets, and more. Using our Vue Composables, you can easily connect users
+to their preferred wallets and manage authentication state.
+
+## Requirements
+
+- This is a frontend SDK and must be used in a browser environment.
+- Basic knowledge of JavaScript and Vue.
+
+## Installation
+
+Install the Web3Auth Modal SDK using npm or yarn:
+
+```bash npm2yarn
+npm install --save @web3auth/modal
+```
+
+## Setup
+
+:::info
+
+Prerequisites Before you start, make sure you have registered on the
+[**Web3Auth Dashboard**](https://dashboard.web3auth.io/) and have set up your project. You can look
+into the [Dashboard Setup](/dashboard) guide to learn more.
+
+:::
+
+### 1. Configuration
+
+Create a configuration file for Web3Auth. This file will contain your Web3Auth Client ID and Network
+details from the [Web3Auth Dashboard](https://dashboard.web3auth.io/).
+
+```ts title="web3authContext.ts"
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+
+export default web3AuthContextConfig;
+```
+
+### 2. Setup Web3Auth Provider
+
+In your main component (e.g. `App.vue`), import the `Web3AuthProvider` component and wrap your
+application with it:
+
+```html title="App.vue"
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Advanced Configuration
+
+The Web3Auth Modal SDK offers a rich set of advanced configuration options:
+
+- **[Smart Accounts](./advanced/smart-accounts)**: Configure account abstraction parameters.
+- **[Custom Authentication](./advanced/custom-authentication)**: Define authentication methods.
+- **[Whitelabeling & UI Customization](./advanced/whitelabel)**: Personalize the modal's appearance.
+- **[Multi-Factor Authentication (MFA)](./advanced/mfa)**: Set up and manage MFA.
+- **[Wallet Services](./advanced/wallet-services)**: Integrate additional wallet services.
+
+:::tip
+
+Head over to the [**Advanced Configuration**](./advanced) section to learn more about each
+configuration option.
+
+:::
+
+## Blockchain Integration
+
+Web3Auth is blockchain agnostic, enabling integration with any blockchain network. Out of the box,
+Web3Auth offers robust support for both **Solana** and **Ethereum**, each with dedicated Vue
+composables.
+
+### Solana Integration
+
+Solana composables are included natively within the `@web3auth/modal` package. No additional setup
+is required—simply use the provided composables to interact with Solana networks.
+
+For detailed usage and examples, visit the [**Solana Composables**](./solana-composables) section.
+
+### Ethereum Integration
+
+Ethereum composables are provided through the popular `wagmi` library, which works seamlessly with
+Web3Auth. This allows you to leverage a wide range of Ethereum composables for account management,
+transactions, and more.
+
+For implementation details and examples, refer to the
+[**Ethereum Composables**](./ethereum-composables) section.
+
+
+
+
+
+```ts
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+```
+
+
+
+
+
+```ts
+import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
+import {
+ WALLET_CONNECTORS,
+ WEB3AUTH_NETWORK,
+ MFA_LEVELS,
+ type Web3AuthOptions,
+} from "@web3auth/modal";
+
+const web3AuthOptions: Web3AuthOptions = {
+ clientId: "YOUR_CLIENT_ID",
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ modalConfig: {
+ connectors: {
+ [WALLET_CONNECTORS.AUTH]: {
+ label: "auth",
+ loginMethods: {
+ google: {
+ name: "google login",
+ // logoDark: "url to your custom logo which will shown in dark mode",
+ },
+ facebook: {
+ name: "facebook login",
+ showOnModal: false, // hides the facebook option
+ },
+ email_passwordless: {
+ name: "email passwordless login",
+ showOnModal: true,
+ authConnectionId: "w3a-email_passwordless-demo",
+ },
+ sms_passwordless: {
+ name: "sms passwordless login",
+ showOnModal: true,
+ authConnectionId: "w3a-sms_passwordless-demo",
+ },
+ },
+ showOnModal: true, // set to false to hide all social login methods
+ },
+ },
+ hideWalletDiscovery: true, // set to true to hide external wallets discovery
+ },
+ mfaLevel: MFA_LEVELS.MANDATORY,
+};
+
+const web3AuthContextConfig: Web3AuthContextConfig = {
+ web3AuthOptions,
+};
+```
+
+
+
+
+
+
+
+## Quick Starts
+
+ obj.type === QUICK_START)} />
diff --git a/docs/sdk/web/web.mdx b/docs/sdk/web/web.mdx
new file mode 100644
index 000000000..384c7c468
--- /dev/null
+++ b/docs/sdk/web/web.mdx
@@ -0,0 +1,13 @@
+---
+title: Explore Web3Auth Web SDKs
+hide_table_of_contents: true
+sidebar_label: Web SDKs
+displayed_sidebar: sdk_pnp_react
+image: "images/docs-meta-cards/sdk-reference-card.png"
+description: "Web SDKs | Documentation - Web3Auth"
+---
+
+import { pnpweb } from "@site/src/components/SDKReferenceCards";
+import Tiles from "@theme/Tiles";
+
+{pnpweb}
diff --git a/docs/troubleshooting/different-private-key.mdx b/docs/troubleshooting/different-private-key.mdx
index f98c15883..7396354e1 100644
--- a/docs/troubleshooting/different-private-key.mdx
+++ b/docs/troubleshooting/different-private-key.mdx
@@ -1,7 +1,7 @@
---
title: Different Private Keys/ Wallet Address across Integrations
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: Different Private Keys
description: "Different Private Keys across Integrations | Documentation - Web3Auth"
---
@@ -17,7 +17,7 @@ to verify the JWT token.
:::tip
-To know more about creating verifiers, please refer to [here](/auth-provider-setup/verifiers).
+To know more about creating verifiers, please refer to [here](/authentication).
:::
@@ -38,8 +38,8 @@ key for your user.
:::tip
-Refer to the docs [here](/auth-provider-setup/aggregate-verifier) to know more about creating an
-aggregate verifier.
+Refer to the docs [here](/authentication/group-connections) to know more about creating an aggregate
+verifier.
:::
@@ -59,8 +59,7 @@ building everything from scratch.
:::tip
-To get a client ID for your project, please refer to
-[here](/dashboard-setup/projects-and-analytics).
+To get a client ID for your project, please refer to [here](/dashboard).
:::
@@ -86,10 +85,11 @@ is set up and how the keys are generated. At large, we can consider 3 different
Products:
- Plug and Play SDKs: Includes the Plug and Play SDKs across various platforms. The accounts here
- are generated from the Single Factor Auth SDKs, however, the keys are different because of the
- subkey generation logic. Keys here change according to the verifier and client ID selected.
+ are generated from the Single Factor Auth Mobile SDKs, however, the keys are different because of
+ the subkey generation logic. Keys here change according to the verifier and client ID selected.
-- Single Factor Auth SDKs: Contain the base key generation logic according to the verifier selected.
+- Single Factor Auth Mobile SDKs: Contain the base key generation logic according to the verifier
+ selected.
- MPC Core Kit SDKs: Includes the MPC Core Kit SDKs across various platforms. The accounts here are
generated using TSS (Threshold Signature Scheme) and are different from the other products.
@@ -119,10 +119,10 @@ the new integration.
##### To Single Factor Auth (SFA) SDKs
-If you're migrating to SFA SDKs, you can directly use the SDK with the same Client ID, alongside
-authentication and verifier details. Additionally, by setting the `usePnPKey` flag to `true`, you
-can get the same key as the Plug and Play SDKs. However, if a user has enabled MFA, they will not be
-able to use the SFA SDKs.
+If you're migrating to SFA Mobile SDKs, you can directly use the SDK with the same Client ID,
+alongside authentication and verifier details. Additionally, by setting the `usePnPKey` flag to
+`true`, you can get the same key as the Plug and Play SDKs. However, if a user has enabled MFA, they
+will not be able to use the SFA Mobile SDKs.
##### To tKey JS SDK
@@ -140,8 +140,8 @@ subkey(PRIVATE_KEY.padStart(64, "0"), Buffer.from(CLIENT_ID, "base64"));
:::info Pre-planning Migrations
-If you're looking to use Single Factor Auth SDKs in the future, planning the use Plug and Play SDKs
-right now, make sure:
+If you're looking to use Single Factor Auth Mobile SDKs in the future, planning the use Plug and
+Play SDKs right now, make sure:
- You're using Custom Authentication with your own login verifiers.
- Set the `useCoreKitKey` flag to `true`
@@ -153,4 +153,4 @@ right now, make sure:
This migration typically occurs when developers want to leverage the prebuilt UI/UX of the Plug and
Play SDKs for user MFA. Use the same verifier details from your Single Factor Auth integration in
the custom authentication feature of Plug and Play. Set the `useCoreKitKey` flag to `true` to use
-the same private key as the Single Factor Auth SDKs.
+the same private key as the Single Factor Auth Mobile SDKs.
diff --git a/docs/troubleshooting/error-429.mdx b/docs/troubleshooting/error-429.mdx
index 100798d43..f3b17468c 100644
--- a/docs/troubleshooting/error-429.mdx
+++ b/docs/troubleshooting/error-429.mdx
@@ -1,8 +1,8 @@
---
title: Error 429 (Infura RPC Endpoint)
image: "images/docs-meta-cards/troubleshoot-card.png"
-
-description: "Error 429 - Infira RPC Endpoint | Documentation - Web3Auth"
+sidebar_label: Error 429 (RPC Issue)
+description: "Error 429 - Infura RPC Endpoint | Documentation - Web3Auth"
---
import Error429 from "@site/static/images/error-429.png";
diff --git a/docs/troubleshooting/jwt-errors.mdx b/docs/troubleshooting/jwt-errors.mdx
index 2d7744651..4b403b76f 100644
--- a/docs/troubleshooting/jwt-errors.mdx
+++ b/docs/troubleshooting/jwt-errors.mdx
@@ -1,7 +1,7 @@
---
title: JWT Errors
image: "images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: JWT Errors
description: "JWT Errors | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/metro-issues-mpc.mdx b/docs/troubleshooting/metro-issues-mpc.mdx
index fe2563dda..8653c2fa0 100644
--- a/docs/troubleshooting/metro-issues-mpc.mdx
+++ b/docs/troubleshooting/metro-issues-mpc.mdx
@@ -1,7 +1,7 @@
---
-title: Bundler Polyfill Issues [MPC] - React Native Metro
+title: Bundler Polyfill Issues [MPC Core Kit] - React Native Metro
image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: React Native Metro Polyfill Issues [MPC Core Kit]
description: "Bundler Polyfill Issues - React Native Metro | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/metro-issues.mdx b/docs/troubleshooting/metro-issues.mdx
index 8b6335a5c..2731a14d9 100644
--- a/docs/troubleshooting/metro-issues.mdx
+++ b/docs/troubleshooting/metro-issues.mdx
@@ -1,7 +1,7 @@
---
title: Bundler Polyfill Issues - React Native Metro
image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: React Native Metro Polyfill Issues
description: "Bundler Polyfill Issues - React Native Metro | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/nuxt-issues.mdx b/docs/troubleshooting/nuxt-issues.mdx
index 614a3b458..257fafaed 100644
--- a/docs/troubleshooting/nuxt-issues.mdx
+++ b/docs/troubleshooting/nuxt-issues.mdx
@@ -1,7 +1,7 @@
---
title: Bundler Polyfill Issues - Nuxt
image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: Nuxt Polyfill Issues
description: "Bundler Polyfill Issues - Nuxt | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/popup-blocked-issue.mdx b/docs/troubleshooting/popup-blocked-issue.mdx
index 1a85da7a5..055749b60 100644
--- a/docs/troubleshooting/popup-blocked-issue.mdx
+++ b/docs/troubleshooting/popup-blocked-issue.mdx
@@ -1,7 +1,7 @@
---
title: Popup Blocked Issue
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: Popup Blocked Issue
description: "Popup blocked issue | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/sdk-errors-warnings.mdx b/docs/troubleshooting/sdk-errors-warnings.mdx
index ecac820bc..b92f15969 100644
--- a/docs/troubleshooting/sdk-errors-warnings.mdx
+++ b/docs/troubleshooting/sdk-errors-warnings.mdx
@@ -1,7 +1,7 @@
---
title: SDK Errors & Warnings
image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: SDK Errors & Warnings
description: "SDK Errors & Warnings | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/supported-browsers.mdx b/docs/troubleshooting/supported-browsers.mdx
index f716ecb11..92f848cc0 100644
--- a/docs/troubleshooting/supported-browsers.mdx
+++ b/docs/troubleshooting/supported-browsers.mdx
@@ -1,7 +1,7 @@
---
title: Supported Browsers List
image: "images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: Supported Browsers List
description: "Supported Browsers List | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/svelte-issues.mdx b/docs/troubleshooting/svelte-issues.mdx
index 862cea4a4..2f379c6a2 100644
--- a/docs/troubleshooting/svelte-issues.mdx
+++ b/docs/troubleshooting/svelte-issues.mdx
@@ -1,7 +1,7 @@
---
title: Bundler Polyfill Issues - Svelte with Vite
image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: Svelte with Vite Polyfill Issues
description: "Bundler Polyfill Issues - Svelte with Vite | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/vite-issues.mdx b/docs/troubleshooting/vite-issues.mdx
index e47cf8501..9131cff7a 100644
--- a/docs/troubleshooting/vite-issues.mdx
+++ b/docs/troubleshooting/vite-issues.mdx
@@ -1,7 +1,7 @@
---
title: Bundler Polyfill Issues - Vite
image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: Vite Polyfill Issues
description: "Bundler Polyfill Issues - Vite | Documentation - Web3Auth"
---
diff --git a/docs/troubleshooting/webpack-issues.mdx b/docs/troubleshooting/webpack-issues.mdx
index fa3571be0..cccf10ae3 100644
--- a/docs/troubleshooting/webpack-issues.mdx
+++ b/docs/troubleshooting/webpack-issues.mdx
@@ -1,7 +1,7 @@
---
title: Bundler Polyfill Issues - Webpack 5
image: "images/docs-meta-cards/troubleshoot-card.png"
-
+sidebar_label: Webpack 5 Polyfill Issues
description: "Bundler Polyfill Issues - Webpack 5 | Documentation - Web3Auth"
---
diff --git a/docs/what-is-web3auth.mdx b/docs/what-is-web3auth.mdx
index 533cc644b..fc5c2ac93 100644
--- a/docs/what-is-web3auth.mdx
+++ b/docs/what-is-web3auth.mdx
@@ -1,7 +1,7 @@
---
title: What is Web3Auth?
image: "images/docs-meta-cards/documentation-card.png"
-
+sidebar_label: What is Web3Auth?
description: "What is Web3Auth | Documentation - Web3Auth"
---
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 8fd751811..7cb9e8e0f 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -250,50 +250,11 @@ const config: Config = {
"@docusaurus/plugin-client-redirects",
{
redirects: [
- {
- from: "/examples/productionexamples",
- to: "/examples",
- },
{
from: "/get-started",
to: "/quick-start",
},
- {
- from: "/developing-with-web3auth/understand-sdk",
- to: "/quick-start",
- },
- {
- from: "/developing-with-web3auth/",
- to: "/quick-start",
- },
- {
- from: "/sdk/web/modal/wagmi-connector",
- to: "/sdk/pnp/web/wagmi-connector",
- },
- {
- from: "/sdk/web/no-modal/wagmi-connector",
- to: "/sdk/pnp/web/wagmi-connector",
- },
- {
- from: "/sdk/web/choosesdk/",
- to: "/sdk/pnp/web/",
- },
- {
- from: "/sdk/android/setting-up",
- to: "/sdk/pnp/android/",
- },
- {
- from: "/sdk/ios/setting-up",
- to: "/sdk/pnp/ios/",
- },
- {
- from: "/sdk/flutter/setting-up",
- to: "/sdk/pnp/flutter/",
- },
- {
- from: "/product/wallet-ecosystems",
- to: "/features/ecosystem-wallets",
- },
+
{
from: "/features/blockchain-agnostic",
to: "/features/compatible-blockchains",
@@ -302,209 +263,50 @@ const config: Config = {
from: "/features/wallet-aggregation",
to: "/features/external-wallets",
},
+
{
- from: "/sdk/react-native/choose-workflows",
- to: "/sdk/pnp/react-native/",
- },
- {
- from: "/sdk/web/customauth",
- to: "/sdk/pnp/web/no-modal/custom-authentication",
- },
- {
- from: "/overview/what-is-web3auth",
- to: "/what-is-web3auth",
- },
- {
- from: "/overview/how-web3auth-works",
- to: "/how-web3auth-works",
- },
- {
- from: "/overview/key-management/",
- to: "/infrastructure/",
- },
- {
- from: "/overview/key-management/technical-architecture/",
- to: "/infrastructure/",
- },
- {
- from: "/infrastructure/key-management",
- to: "/infrastructure/",
- },
- {
- from: "/infrastructure/technical-architecture/",
- to: "/infrastructure/",
+ from: "/developer-dashboard/",
+ to: "/dashboard/",
},
{
- from: "/developer-dashboard/",
- to: "/dashboard-setup/",
+ from: "/dashboard-setup/",
+ to: "/dashboard/",
},
{
from: "/developer-dashboard/get-client-id",
- to: "/dashboard-setup/projects-and-analytics",
+ to: "/dashboard/",
},
{
from: "/developer-dashboard/enable-interoperability",
- to: "/dashboard-setup/enable-interoperability",
+ to: "/dashboard/",
},
{
from: "/developer-dashboard/setup-custom-authentication",
- to: "/dashboard-setup/setup-custom-authentication",
+ to: "/dashboard/configure-connections",
},
{
from: "/developer-dashboard/billing-and-user-stats",
- to: "/dashboard-setup/billing-and-usage",
+ to: "/dashboard/create-new-project",
},
{
from: "/customauth",
- to: "/auth-provider-setup/",
- },
- {
- from: "/customauth/verifiers",
- to: "/auth-provider-setup/verifiers",
- },
- {
- from: "/sdk/web/modal/multi-factor-authentication",
- to: "/sdk/pnp/web/modal/mfa",
+ to: "/authentication/",
},
{
- from: "/sdk/web/core/multi-factor-authentication",
- to: "/sdk/pnp/web/no-modal/mfa",
+ from: "/auth-provider-setup/",
+ to: "/authentication/",
},
{
- from: "/sdk/web/web3auth/multi-factor-authentication",
- to: "/sdk/pnp/web/modal/mfa",
+ from: "/customauth/verifiers",
+ to: "/authentication/",
},
{
from: "/troubleshooting/different-wallet-address-issue",
to: "/troubleshooting/different-private-key",
},
{
- from: "/connect-blockchain/polygon/",
- to: "/connect-blockchain/evm/polygon/",
- },
- {
- from: "/connect-blockchain/base/",
- to: "/connect-blockchain/evm/base/",
- },
- {
- from: "/connect-blockchain/bnb/",
- to: "/connect-blockchain/evm/bnb/",
- },
- {
- from: "/connect-blockchain/avalanche/",
- to: "/connect-blockchain/evm/avalanche/",
- },
- {
- from: "/connect-blockchain/arbitrum/",
- to: "/connect-blockchain/evm/arbitrum/",
- },
- {
- from: "/connect-blockchain/optimism/",
- to: "/connect-blockchain/evm/optimism/",
- },
- {
- from: "/connect-blockchain/cronos/",
- to: "/connect-blockchain/evm/cronos/",
- },
- {
- from: "/connect-blockchain/harmony/",
- to: "/connect-blockchain/evm/harmony/",
- },
- {
- from: "/connect-blockchain/celo/",
- to: "/connect-blockchain/evm/celo/",
- },
- {
- from: "/connect-blockchain/moonbeam/",
- to: "/connect-blockchain/evm/moonbeam/",
- },
- {
- from: "/connect-blockchain/moonriver/",
- to: "/connect-blockchain/evm/moonriver/",
- },
- {
- from: "/connect-blockchain/klaytn/",
- to: "/connect-blockchain/evm/klaytn/",
- },
- {
- from: "/connect-blockchain/flare/",
- to: "/connect-blockchain/evm/flare/",
- },
- {
- from: "/connect-blockchain/songbird/",
- to: "/connect-blockchain/evm/songbird/",
- },
- {
- from: "/connect-blockchain/skale/",
- to: "/connect-blockchain/evm/skale/",
- },
- {
- from: "/connect-blockcahin/tron/",
- to: "/connect-blockchain/evm/tron/web",
- },
- {
- from: "/connect-blockchain/starkex",
- to: "/connect-blockchain/other/starkex",
- },
- {
- from: "/connect-blockchain/starknet",
- to: "/connect-blockchain/other/starknet",
- },
- {
- from: "/connect-blockchain/tezos",
- to: "/connect-blockchain/other/tezos",
- },
- {
- from: "/connect-blockchain/algorand",
- to: "/connect-blockchain/other/algorand",
- },
- {
- from: "/connect-blockchain/immutablex",
- to: "/connect-blockchain/other/immutablex",
- },
- {
- from: "/connect-blockchain/aptos",
- to: "/connect-blockchain/other/aptos",
- },
- {
- from: "/connect-blockchain/cosmos",
- to: "/connect-blockchain/other/cosmos",
- },
- {
- from: "/connect-blockchain/other/near",
- to: "/connect-blockchain/near/",
- },
- {
- from: "/connect-blockchain/polkadot",
- to: "/connect-blockchain/other/polkadot",
- },
- {
- from: "/connect-blockchain/polymesh",
- to: "/connect-blockchain/other/polymesh",
- },
- {
- from: "/connect-blockchain/sui",
- to: "/connect-blockchain/other/sui",
- },
- {
- from: "/user-flow",
- to: "/features/mfa",
- },
- {
- from: "/features/smart-accounts",
- to: "/features/account-abstraction",
- },
- {
- from: "/features/nft-services",
- to: "/features/nft-minting",
- },
- {
- from: "/pnp/features/connect-external-wallets",
- to: "/features/external-wallets",
- },
- {
- from: "/pnp/features/dapp-share",
- to: "/features/mfa",
+ to: "/features/smart-accounts",
+ from: "/features/account-abstraction",
},
{
from: "/pnp/going-live",
@@ -516,11 +318,11 @@ const config: Config = {
},
{
from: "/auth-provider-setup/federated-identity-providers",
- to: "/auth-provider-setup/authentication-service-providers/auth0-service-provider",
+ to: "/authentication/custom-connections/auth0",
},
{
from: "/auth-provider-setup/byo-jwt-providers",
- to: "/auth-provider-setup/byo-jwt-provider/",
+ to: "/authentication/custom-connections/custom-jwt",
},
{
from: "/product/product-fit",
@@ -534,14 +336,6 @@ const config: Config = {
from: "/product-fit/pnp-vs-core-kit",
to: "/product-fit",
},
- {
- from: "/product-fit/partner-products",
- to: "/features/ecosystem-wallets",
- },
- {
- from: "/product-fit/enterprise",
- to: "/features/ecosystem-wallets",
- },
{
from: "/product-fit/web3auth-for-wallets",
to: "/product/#web3auth-for-wallets",
@@ -563,8 +357,6 @@ const config: Config = {
// Only create redirects if the path matches certain patterns
if (
existingPath.includes("/sdk/") ||
- existingPath.includes("/sdk/sfa/sfa-js/") ||
- existingPath.includes("/sdk/mpc-core-kit/mpc-core-kit-js/") ||
existingPath.includes("/guides/") ||
existingPath.includes("/features/") ||
existingPath.includes("/product/")
@@ -572,29 +364,20 @@ const config: Config = {
return [
existingPath.replace("/sdk", "/api-reference"),
existingPath.replace("/sdk", "/sdk-reference"),
- existingPath.replace("/sdk/sfa/sfa-js/", "/sdk/sfa/sfa-web/"),
existingPath.replace(
"/sdk/mpc-core-kit/mpc-core-kit-js/",
"/sdk/core-kit/mpc-core-kit/",
),
+ existingPath.replace("/sdk/pnp/web/", "/sdk/web/"),
+ existingPath.replace("/sdk/pnp/android/", "/sdk/mobile/pnp/android/"),
+ existingPath.replace("/sdk/pnp/ios/", "/sdk/mobile/pnp/ios/"),
+ existingPath.replace("/sdk/pnp/flutter/", "/sdk/mobile/pnp/flutter/"),
+ existingPath.replace("/sdk/pnp/react-native/", "/sdk/mobile/pnp/react-native/"),
+ existingPath.replace("/sdk/sfa/sfa-android/", "/sdk/mobile/sfa/android/"),
+ existingPath.replace("/sdk/sfa/sfa-ios/", "/sdk/mobile/sfa/ios/"),
+ existingPath.replace("/sdk/sfa/sfa-flutter/", "/sdk/mobile/sfa/flutter/"),
+ existingPath.replace("/sdk/sfa/sfa-react-native/", "/sdk/mobile/sfa/react-native/"),
existingPath.replace("/guides/", "/content-hub/guides/"),
- existingPath.replace("/sdk/pnp/web/providers/", "/sdk/providers/"),
- existingPath.replace("/sdk/pnp/web/wallet-services/", "/sdk/wallet-services/"),
- existingPath.replace("/features/whitelabel", "/pnp/features/whitelabel/"),
- existingPath.replace("/sdk/web/no-modal", "/sdk/web/core"),
- existingPath.replace("/sdk/web/no-modal", "/sdk/web/customloginui"),
- existingPath.replace("/sdk/web/modal", "/sdk/web/web3auth"),
- existingPath.replace("/sdk/web/modal", "/sdk/web/plugnplay"),
- existingPath.replace("/product/core-kit", "/core-kit/"),
- existingPath.replace("/product/pnp", "/pnp/"),
- existingPath.replace(
- "/connect-blockchain/evm/astar-zkyoto/",
- "/connect-blockchain/evm/zkyoto/",
- ),
- existingPath.replace(
- "/connect-blockchain/evm/astar-zkevm/",
- "/connect-blockchain/evm/zkevm/",
- ),
].filter((redirect) => redirect !== existingPath); // Remove any redirects that point to the same path
}
return []; // Return empty array for paths that don't need redirects
diff --git a/package-lock.json b/package-lock.json
index 70c5d7692..69a9c5ca1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
"lodash": "^4.17.21",
"parse-numeric-range": "^1.3.0",
"prism-react-renderer": "^2.3.1",
+ "prismjs": "^1.30.0",
"react": "^18.3.1",
"react-bookmark": "^0.8.2",
"react-dom": "^18.3.1",
@@ -25235,9 +25236,9 @@
}
},
"node_modules/prismjs": {
- "version": "1.29.0",
- "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
- "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+ "version": "1.30.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+ "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
"license": "MIT",
"engines": {
"node": ">=6"
diff --git a/package.json b/package.json
index d86e8fba6..4c3d2ec28 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"lodash": "^4.17.21",
"parse-numeric-range": "^1.3.0",
"prism-react-renderer": "^2.3.1",
+ "prismjs": "^1.30.0",
"react": "^18.3.1",
"react-bookmark": "^0.8.2",
"react-dom": "^18.3.1",
diff --git a/sidebars.ts b/sidebars.ts
index b94be981a..2bf573832 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -1,7 +1,8 @@
import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
import {
- web,
+ reactJS,
+ vue,
android,
ios,
reactnative,
@@ -11,92 +12,167 @@ import {
js,
} from "./src/common/SDKOptions";
-import { getPnPVersion, getSFAVersion, getMPCCoreKitVersion } from "./src/common/versions";
+import {
+ getPnPVersion,
+ getSFAVersion,
+ getMPCCoreKitVersion,
+ pnpWebVersion,
+} from "./src/common/versions";
+
+function webTopNavButton(selectedSDK: string): string {
+ const baseUrl = process.env.REACT_APP_BASE_URL || "/docs/";
+
+ var webSDKs = {
+ [reactJS]: `${baseUrl}sdk/web/react`,
+ [vue]: `${baseUrl}sdk/web/vue`,
+ [js]: `${baseUrl}sdk/web/js`,
+ };
+ if (webSDKs.hasOwnProperty(selectedSDK)) {
+ delete webSDKs[selectedSDK];
+ }
+ var sdkNames = Object.keys(webSDKs);
+ var sdkLinks = Object.values(webSDKs);
+ var sdkVersion = pnpWebVersion;
+
+ return `
+