Merge pull request #655 from Web3Auth/docs-restructure

Docs restructure

.gitignore

@@ -20,3 +20,5 @@ yarn-debug.log*
 yarn-error.log*
 .env
 .integrationBuilderCache
+
+yarn.lock

.prettierrc.json

@@ -1,6 +1,6 @@
 {
   "proseWrap": "always",
-  "printWidth": 150,
+  "printWidth": 100,
   "singleQuote": false,
   "semi": true
 }

.vscode/settings.json

@@ -5,7 +5,6 @@
   "files.insertFinalNewline": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   // "editor.formatOnSave": true,
-
   // Misc
   "javascript.suggestionActions.enabled": false,
   "cSpell.words": [
@@ -32,9 +31,23 @@
   ],
   "editor.formatOnSave": true,
   "eslint.options": {
-    "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
+    "extensions": [
+      ".js",
+      ".jsx",
+      ".md",
+      ".mdx",
+      ".ts",
+      ".tsx"
+    ]
   },
-  "eslint.validate": ["markdown", "mdx", "javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "eslint.validate": [
+    "markdown",
+    "mdx",
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
   "[mdx]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -46,5 +59,8 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

docs/README.mdx

@@ -12,12 +12,31 @@ import HelpCards from "@site/src/components/HelpCards";
 import HomeQuickStartBanner from "@site/src/components/HomeQuickStartBanner";
 import IntegrationBuilderBanner from "@site/src/components/IntegrationBuilderBanner";
 import ResourcesCards from "@site/src/components/ResourcesCards";
-// import SDKReferenceCards from "@site/src/components/SDKReferenceCards";
+import ProductCards from "@site/src/components/ProductCards";
 import SEO from "@site/src/components/SEO";
 
 <SEO />
+
+# Web3Auth Documentation
+
+#### Simplifying User Onboarding with Scalable, Secure, Non-Custodial Wallet Management
+
 <HomeQuickStartBanner />
-{/* <SDKReferenceCards /> */}
+
+# Discover Our Solutions
+
+Our extensive product suite covers everything from pre-onboarding to post-onboarding and authentication, enabling you to craft a seamless end-to-end
+experience for your Web3 dApp.
+
+<ProductCards />
+
+# Resources
+
+Our comprehensive array of guides, reference materials, and examples is designed to assist you at every step of your Web3Auth integration. Explore the
+nuances of web3 authentication and craft a tailored integration that meets your specific needs.
+
 <ResourcesCards />
-<IntegrationBuilderBanner />
+
+# Need Help?
+
 <HelpCards />

docs/auth-provider-setup/aggregate-verifier.mdx

@@ -1,7 +1,7 @@
 ---
 title: Creating Aggregate Verifier on the Web3Auth Dashboard
 sidebar_label: Aggregate Verifier
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "Creating Aggregate Verifier on the Web3Auth Dashboard | Documentation - Web3Auth"
 image: "images/docs-meta-cards/documentation-card.png"
 ---
@@ -60,7 +60,6 @@ import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
 // get it from https://dashboard.web3auth.io by creating a Plug n Play project.
 
-
 const chainConfig = {
   chainNamespace: "eip155",
   chainId: "0x1",
@@ -69,7 +68,7 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

docs/auth-provider-setup/auth-provider-setup.mdx

@@ -1,38 +1,55 @@
 ---
 title: Auth Provider Setup
+sidebar_label: Overview
 image: "images/docs-meta-cards/documentation-card.png"
-displayed_sidebar: docs
+displayed_sidebar: resources
 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";
 
-Auth Provider setup refers to the capability of creating a **verifier**(_a way to do custom authentication_) with Web3Auth. By default, Web3Auth comes
-with a set of default verifiers that you can use out of the box.
+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 pivotal role in ensuring secure and seamless authentication by leveraging the Web3Auth Auth Network nodes and a dedicated blockchain.
 
-:::info Caveat with Default Verifiers
+## Understanding Verifiers
 
-- **Migration from Default Verifiers to Custom Verifiers is not possible.**
-- The default verifier is not suitable for all use cases. For example, if you are using a custom JWT provider, you will need to use the
-  [`Web3Auth Plug and Play No Modal SDK`](/sdk/pnp/web/no-modal/), since the Web3Auth Modal will only help you configure the social logins present
-  within the Modal UI.
-- **Aggregation of the default verifier is not possible.** For example, if you want to aggregate Google and Email Passwordless, or any two/more social
-  providers, you will need to create an Aggregate Verifier, which is not possible if you start with:
-  - a Default Verifier
-  - or, Social Login Providers
-  - or, Custom Providers
+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.
+
+:::tip
+
+Head over to the [Verifiers](./verifiers.mdx) section to understand how to create a custom verifier for your application.
 
 :::
 
+## Setting Up Your Auth Provider
+
+Integrating an OAuth provider with Web3Auth involves a few key steps, from selecting your provider to configuring the verifier and integrating it into
+your application. Here's a broad overview of the process:
+
+1. **Select an OAuth Provider:** Choose an OAuth provider supported by Web3Auth, such as Google, Facebook, Twitter, or any other provider that fits
+   your application's requirements.
+
+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.
+
+3. **Deploy to the Web3Auth Blockchain:** Once your verifier is configured, it's deployed to the Web3Auth blockchain. 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.
+
+4. **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
 
 <SocialTiles />
 
-### Federated / Identity Providers
+### Authentication Service Providers
 
 <FederatedTiles />
 

docs/auth-provider-setup/federated-identity-providers.mdx → docs/auth-provider-setup/authentication-service-providers.mdx

@@ -1,20 +1,24 @@
 ---
-title: Federated / Identity Providers
-displayed_sidebar: docs
-description: "Federated / Identity Providers | Documentation - Web3Auth"
+title: Authentication Service Providers
+displayed_sidebar: resources
+description: "Authentication Service Providers | Documentation - Web3Auth"
 image: "images/docs-meta-cards/documentation-card.png"
 ---
 
 import SetupAWSCognitoVerifier from "@site/src/common/guides/_setup-aws-cognito-verifier.mdx";
 import SetupFirebaseVerifier from "@site/src/common/guides/_setup-firebase-verifier.mdx";
 
-Federated / Identity providers enable you to use some implicit and authorization code grants. You could also use social providers on top of Federated
-/ Identity providers to select other Social providers (e.g.: Twitter, Apple, GitHub, LinkedIn, WeChat etc.) that are not natively supported by us.
-Note: This will require you to register an app with the Federated / Identity Providers.
+Authentication Service Providers enable you to use some implicit and authorization code grants. You could also use social providers on top of
+Federated / Identity providers to select other Social providers (e.g.: Twitter, Apple, GitHub, LinkedIn, WeChat etc.) that are not natively supported
+by us. Note: This will require you to register an app with the Authentication Service Providers.
 
-## Auth0
+This guide will help you to set up the following Authentication Service Providers:
+
+- [Auth0](#auth0)
+- [AWS Cognito](#aws-cognito)
+- [Firebase](#firebase)
 
-### Set up Auth0 Verifier
+## Auth0
 
 1. Create an Auth0 verifier by choosing `Social Login Providers` and selecting `Auth0` from the **Login Provider** dropdown.
    ![Auth0 - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/create-auth0-verifier.png)
@@ -42,8 +46,6 @@ Check out the [**Auth0 guide**](/guides/auth0) to learn more about how to set up
 
 ## AWS Cognito
 
-### Set up AWS Cognito Verifier
-
 <SetupAWSCognitoVerifier />
 
 :::info Guide
@@ -54,8 +56,6 @@ Check out the [** AWS Cognito guide**](/guides/cognito) to learn more about how
 
 ## Firebase
 
-### Setup Firebase Verifier
-
 <SetupFirebaseVerifier />
 
 :::info Guide

docs/auth-provider-setup/byo-jwt-providers.mdx → docs/auth-provider-setup/byo-jwt-provider.mdx

@@ -1,7 +1,7 @@
 ---
-title: Bring your own custom JWT Providers
-displayed_sidebar: docs
-description: "Bring your own custom JWT Providers | Documentation - Web3Auth"
+title: Bring your own custom JWT Provider
+displayed_sidebar: resources
+description: "Bring your own custom JWT Provider | Documentation - Web3Auth"
 image: "images/docs-meta-cards/documentation-card.png"
 ---
 
@@ -197,10 +197,9 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
-
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
 
 const web3auth = new Web3AuthNoModal({
@@ -210,7 +209,6 @@ const web3auth = new Web3AuthNoModal({
   useCoreKitKey: false,
 });
 
-
 const openloginAdapter = new OpenloginAdapter({
   adapterSettings: {
     uxMode: "redirect", // redirect or popup
@@ -284,7 +282,7 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
@@ -378,12 +376,11 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-   logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
 
-
 const web3auth = new Web3AuthNoModal({
   clientId: "", // Web3Auth Client ID
   web3AuthNetwork: "saphhire_mainnet",

docs/auth-provider-setup/social-providers/apple.mdx

@@ -2,7 +2,7 @@
 title: Apple Social Login with Web3Auth
 sidebar_label: Apple
 
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "Apple Social Login with Web3Auth | Documentation - Web3Auth"
 ---
 
@@ -46,7 +46,7 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

docs/auth-provider-setup/social-providers/baidu.mdx

@@ -1,7 +1,7 @@
 ---
 title: Baidu Login with Web3Auth
 sidebar_label: Baidu
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "Baidu Login with Web3Auth | Documentation - Web3Auth"
 ---
 
@@ -45,12 +45,11 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
 
-
 const web3auth = new Web3AuthNoModal({
   clientId,
   web3AuthNetwork: "sapphire_mainnet",

docs/auth-provider-setup/social-providers/bitbucket.mdx

@@ -1,7 +1,7 @@
 ---
 title: Bitbucket Login with Web3Auth
 sidebar_label: Bitbucket
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "Bitbucket Login with Web3Auth | Documentation - Web3Auth"
 ---
 
@@ -45,7 +45,7 @@ const chainConfig = {
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
   tickerName: "Ethereum",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

docs/auth-provider-setup/social-providers/discord.mdx

@@ -2,7 +2,7 @@
 title: Discord Social Login with Web3Auth
 sidebar_label: Discord
 
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "Discord Social Login with Web3Auth | Documentation - Web3Auth"
 ---
 

docs/auth-provider-setup/social-providers/facebook.mdx

@@ -2,7 +2,7 @@
 title: Facebook Social Login with Web3Auth
 sidebar_label: Facebook
 
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth"
 ---
 

docs/auth-provider-setup/social-providers/github.mdx

@@ -2,7 +2,7 @@
 title: GitHub Social Login with Web3Auth
 sidebar_label: GitHub
 
-displayed_sidebar: docs
+displayed_sidebar: resources
 description: "GitHub Social Login with Web3Auth | Documentation - Web3Auth"
 ---
 
@@ -38,15 +38,14 @@ import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
 // get it from https://dashboard.web3auth.io by creating a project.
 
-
 const chainConfig = {
   chainNamespace: "eip155",
   chainId: "0x1",
   rpcTarget: "https://rpc.ankr.com/eth",
   displayName: "Ethereum Mainnet",
   blockExplorerUrl: "https://etherscan.io",
   ticker: "ETH",
-  logo: "https://images.toruswallet.io/ethereum.svg"
+  logo: "https://images.toruswallet.io/ethereum.svg",
 };
 
 const privateKeyProvider = new EthereumPrivateKeyProvider({