Add social logins provider docs

embedded-wallets/authentication/README.mdx

@@ -50,13 +50,13 @@ export const SocialLoginSetup = [
         key: 'apple',
         title: 'Apple',
         icon: 'logo-apple.png',
-        path: 'social-logins/oauth/#log-in-with-apple',
+        path: 'social-logins/apple',
       },
       {
         key: 'twitter',
-        title: 'Twitter (X)',
+        title: 'X',
         icon: 'logo-twitter.png',
-        path: 'social-logins/oauth/#log-in-with-x',
+        path: 'social-logins/x',
       },
       {
         key: 'facebook',
@@ -80,43 +80,49 @@ export const SocialLoginSetup = [
         key: 'github',
         title: 'GitHub',
         icon: 'logo-github.png',
-        path: 'social-logins/oauth/#log-in-with-github',
+        path: 'social-logins/github',
       },
       {
         key: 'farcaster',
         title: 'Farcaster',
         icon: 'logo-farcaster.png',
-        path: 'social-logins/oauth/#log-in-with-farcaster',
+        path: 'social-logins/farcaster',
       },
       {
         key: 'reddit',
         title: 'Reddit',
         icon: 'logo-reddit.png',
-        path: 'social-logins/oauth/#log-in-with-reddit',
+        path: 'social-logins/reddit',
       },
       {
         key: 'kakao',
         title: 'Kakao',
         icon: 'logo-kakao.png',
-        path: 'social-logins/oauth/#log-in-with-kakao',
+        path: 'social-logins/kakao',
       },
       {
         key: 'linkedin',
         title: 'LinkedIn',
         icon: 'logo-linkedin.png',
-        path: 'social-logins/oauth/#log-in-with-linkedin',
+        path: 'social-logins/linkedin',
       },
       {
         key: 'line',
         title: 'Line',
         icon: 'logo-line.png',
-        path: 'social-logins/oauth/#log-in-with-line',
+        path: 'social-logins/line',
       },
       {
         key: 'wechat',
         title: 'WeChat',
         icon: 'logo-wechat.png',
-        path: 'social-logins/oauth/#log-in-with-wechat',
+        path: 'social-logins/wechat',
+      },
+      {
+        key: 'telegram',
+        title: 'Telegram',
+        icon: 'logo-telegram.svg',
+        path: 'social-logins/telegram',
       },
     ],
   },

embedded-wallets/authentication/basic-logins/email-passwordless.mdx

@@ -1,81 +1,120 @@
 ---
-title: Email passwordless Login with Embedded Wallets
+title: Email passwordless with Embedded Wallets
 sidebar_label: Email passwordless
-description: 'Email Passwordless Login with Embedded Wallets | Embedded Wallets'
+description: Configure default or custom email OTP sign-in with MetaMask Embedded Wallets.
 ---
 
-import EmailPasswordlessToggle from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-toggle.png'
 import EmailPasswordlessAddConnection from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-add-connection.png'
 import EmailPasswordlessOnboarding from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-onboarding.png'
+import EmailPasswordlessToggle from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-toggle.png'
+
+Email passwordless sends a one-time passcode (OTP) or magic link to the user's email address.
+Choose the default connection for the quickest setup, or create a custom connection when you want
+the email field and OTP to stay inside the
+[modal](../../sdk/react/advanced/whitelabel.mdx)
+instead of a popup.
+
+<img className="docImg" src={EmailPasswordlessOnboarding} alt="Email passwordless onboarding" />
 
-Embedded Wallets provides built-in support for email and SMS-based authentication, allowing users to sign in without repeating the full flow 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.
+## Default email passwordless
 
-<img className="docImg" src={EmailPasswordlessOnboarding} alt="Email Passwordless Onboarding" />
+The default connection uses the email OTP service managed by Embedded Wallets.
+Enable **Email Passwordless** and the SDK reads it from the dashboard.
+You don't add an Auth Connection ID.
 
-## Set up a custom email connection
+### Caveats
 
-:::success Enable on dashboard
+- With the modal, the user enters their email address and OTP in a **popup**, not in the modal
+  itself.
+- The default connection and a custom email connection are separate connections, so they produce
+  different wallet addresses for the same person unless you link them with a
+  [group connection](../group-connections.mdx).
 
-To use this feature, developers must first enable **Email Passwordless** from the Social Connections section in the [dashboard](https://developer.metamask.io).
+### Configure the default connection
 
-By default, Web3Auth uses its own pre-configured credentials for email login.
+1. Open your project in the [MetaMask Developer Dashboard](https://developer.metamask.io).
+2. Select **Social Connections**.
+3. Enable **Email Passwordless**.
+
+<img
+  className="docImg"
+  src={EmailPasswordlessToggle}
+  alt="Email Passwordless in the Social Connections settings"
+/>
+
+## Custom email passwordless
+
+A custom email connection on the dashboard is only an identifier.
+You don't paste SMTP credentials, an OAuth client ID, or a JWT JWKS URL.
+You create the connection, copy the **Auth Connection ID**, and pass that ID in your SDK
+configuration.
+
+:::note Login stays in the modal
+
+Default email login opens a popup so the user can enter their address and OTP.
+When you attach your Auth Connection ID to `email_passwordless` in `modalConfig.loginMethods`, that
+input stays inside the modal.
 
 :::
 
-<img className="docImg" src={EmailPasswordlessToggle} alt="Email Passwordless Toggle" />
+:::caution Preserve wallet addresses
+
+Decide between the default and a custom connection before you onboard users.
+Moving from the default email connection to a custom email connection changes every user's wallet
+address unless both connections are in a
+[group connection](../group-connections.mdx) with matching user identifiers.
 
-For enhanced control and branding, developers are encouraged to configure a custom email connection. Follow these steps:
+:::
+
+### Create the connection
 
-1. Visit the [dashboard](https://developer.metamask.io).
-2. Navigate 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.
+1. Open **Social Connections** in the [MetaMask Developer Dashboard](https://developer.metamask.io).
+2. Select the settings icon next to **Email Passwordless**.
+3. Enter an **Auth Connection ID**.
+4. Select **Add Connection**.
 
 <img
   className="docImg"
   src={EmailPasswordlessAddConnection}
-  alt="Email Passwordless Add Connection"
+  alt="Add a custom email passwordless connection"
 />
 
-## 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_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
-    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
-        },
-      },
-    },
-  },
-}
+There are no other fields.
+If you already issue email OTPs from your own backend, use a
+[custom JWT connection](../custom-connections/custom-jwt.mdx) instead of this dashboard identifier.
+
+## Group email connections
+
+A [group connection](../group-connections.mdx) gives the same person one wallet address across
+several login methods, for example email passwordless and Google.
+
+Default email and a custom email connection are separate.
+They produce different wallet addresses unless you group them and every connection in the group
+uses the same JWT user identifier (`email`).
+
+Pass both the child connection ID and grouped connection ID when you bypass the modal:
 
-export default web3AuthContextConfig
+```tsx
+await connectTo(WALLET_CONNECTORS.AUTH, {
+  authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
+  authConnectionId: '<EMAIL_AUTH_CONNECTION_ID>',
+  groupedAuthConnectionId: '<GROUPED_AUTH_CONNECTION_ID>',
+  extraLoginOptions: {
+    login_hint: 'user@example.com',
+  },
+})
 ```
 
+## Usage examples
+
+Use `login_hint` for the email address when you call `connectTo`.
+For the modal, pass the Auth Connection ID in `loginMethods` so the flow stays in the modal.
+
+<PasswordlessLoginExamples method="email" />
+
 ## Troubleshooting
 
-If OTP or magic link emails do not arrive, the recipient may have unsubscribed from Embedded
-Wallets transactional email.
+If OTP or magic link emails do not arrive, the recipient may have unsubscribed from Embedded Wallets
+transactional email.
 See [Email OTP or magic link not received](/embedded-wallets/troubleshooting/email-otp-not-received/)
 for the resubscribe form and other checks.
-
-## Next steps
-
-Follow our [quickstart](/quickstart/?product=EMBEDDED_WALLETS&walletAggregatorOnly=NO&framework=REACT&stepIndex=0) to set up the basic flow.