temp

Author: yashovardhan

docs/authentication/advanced/mfa.mdx

@@ -5,6 +5,8 @@ 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,
@@ -19,34 +21,113 @@ mechanisms, supporting both traditional (Web2) and decentralized (Web3) identity
 Web3Auth supports a wide range of authentication options, enabling developers to meet the needs of
 diverse user bases and platform requirements.
 
-### Email or SMS Login
+### Native Email & SMS Login
 
-Provides passwordless login via one-time passcodes (OTP) sent to the user’s
+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,
-WalletConnect, Phantom, and others. Developers can select which wallets to display via the Web3Auth
-Dashboard, providing tailored options based on user preference or regional relevance.
+[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:
 
-- [Google](/authentication/social-logins/google)
-- [Apple](/authentication/social-logins/oauth/#login-with-apple)
-- [Twitter (X)](/authentication/social-logins/oauth/#login-with-x)
-- [Facebook](/authentication/social-logins/facebook)
-- [Discord](/authentication/social-logins/discord)
-- [Twitch](/authentication/social-logins/twitch)
-- [GitHub](/authentication/social-logins/oauth/#login-with-github)
-- [Farcaster](/authentication/social-logins/oauth/#login-with-farcaster)
-- and [more](/authentication/social-logins/oauth).
+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",
+      },
+    ],
+  },
+];
+
+<Tiles tileGroups={SocialLoginSetup} />
 
 Social login simplifies onboarding by reducing friction and improving usability—particularly in
 consumer-facing applications.
@@ -56,10 +137,40 @@ consumer-facing applications.
 Web3Auth allows integration with any existing JWT-based authentication system. This includes OpenID
 Connect (OIDC) and OAuth 2.0 compliant identity providers such as:
 
-- [Auth0](/authentication/custom-connections/auth0)
-- [Firebase Authentication](/authentication/custom-connections/firebase)
-- [AWS Cognito](/authentication/custom-connections/aws-cognito)
-- [Custom JWT providers](/authentication/custom-connections/custom-jwt)
+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",
+      },
+    ],
+  },
+];
+
+<Tiles tileGroups={JWTLoginSetup} />
 
 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.

docs/authentication/authentication.mdx

@@ -13,12 +13,31 @@ seamlessly using a one-time passcode (OTP) sent to their email address or phone
 passwordless authentication simplifies the onboarding process, removes friction for end users, and
 expands accessibility—especially in regions where social login options may be limited.
 
+<div style={{ display: "flex", margin: "20px 0", justifyContent: "center" }}>
+  <img
+    src={EmailPasswordlessOnboarding}
+    alt="Email Passwordless Onboarding"
+    style={{
+      maxWidth: "600px",
+      border: "1px solid #eaeaea",
+      borderRadius: "8px",
+      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+    }}
+  />
+</div>
+
+## 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).
 
-<div style={{ display: "flex", margin: "20px 0" }}>
+> By default, Web3Auth uses its own pre-configured credentials for email login.
+
+:::
+
+<div style={{ display: "flex", margin: "20px 0", justifyContent: "center" }}>
   <img
     src={EmailPasswordlessToggle}
     alt="Email Passwordless Toggle"
@@ -30,12 +49,6 @@ section in the [Web3Auth Dashboard](https://dashboard.web3auth.io).
   />
 </div>
 
-> By default, Web3Auth uses its own pre-configured credentials for email login.
-
-:::
-
-## Set Up a Custom Email Connection
-
 For enhanced control and branding, developers are encouraged to configure a custom email connection.
 Follow these steps:
 
@@ -45,7 +58,7 @@ Follow these steps:
 4. Enter your custom `Auth Connection ID`.
 5. Click `Add Connection` to complete the setup.
 
-<div style={{ display: "flex", margin: "20px 0" }}>
+<div style={{ display: "flex", margin: "20px 0", justifyContent: "center" }}>
   <img
     src={EmailPasswordlessAddConnection}
     alt="Email Passwordless Add Connection"
@@ -59,19 +72,6 @@ Follow these steps:
 
 ## Usage
 
-<div style={{ display: "flex", margin: "20px 0" }}>
-  <img
-    src={EmailPasswordlessOnboarding}
-    alt="Email Passwordless Onboarding"
-    style={{
-      maxWidth: "600px",
-      border: "1px solid #eaeaea",
-      borderRadius: "8px",
-      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
-    }}
-  />
-</div>
-
 ```tsx title="web3authContext.tsx"
 import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
 import { type Web3AuthContextConfig } from "@web3auth/modal/react";

docs/authentication/basic-logins/email-passwordless.mdx

@@ -12,11 +12,15 @@ seamlessly using a one-time passcode (OTP) sent to their email address or phone
 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).
 
+:::
+
 <div style={{ display: "flex", margin: "20px 0" }}>
   <img
     src={ExternalWalletsToggle}
@@ -29,14 +33,16 @@ Connections section in the [Web3Auth Dashboard](https://dashboard.web3auth.io).
   />
 </div>
 
-:::
-
-## Enable External Wallets
-
 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.
 
 <div style={{ display: "flex", margin: "20px 0" }}>