-3. Ensure you save your changes.
-
-4. Copy the **Client ID** from here. We will use this in the Embedded Wallets dashboard.
+3. Save your changes and copy the **Client ID**.
-## Step 2: Create a Discord connection
-
-:::success Enable on dashboard
+4. In the MetaMask Developer Dashboard, open **Social Connections**, select the settings icon next
+ to **Discord**, and enter an **Auth Connection ID** and the **Discord Client ID**.
-To use this feature, enable `Discord` from the Social Connections section in the [dashboard](https://developer.metamask.io).
+
+### Configure the default connection
-4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.
- - https://auth.web3auth.io/auth
-
- 
+1. Open your project in the [MetaMask Developer Dashboard](https://developer.metamask.io).
+2. Select **Social Connections**.
+3. Enable **Facebook**.
-5. Obtain the "App ID" and "App Secret" from the **Settings > Basic** screen.
+
+The SDK reads the connection from the dashboard.
+You don't need to add Facebook credentials to your SDK configuration.
-## Step 2: Create a Facebook connection
+## Custom Facebook sign-in
-:::success Enable on Dashboard
+Use a custom connection when the Facebook authorization belongs to your dapp or an identity platform
+you control.
+You can register a Facebook App ID and App Secret on the social connection, or run Facebook through
+Auth0, Firebase, Amazon Cognito, or your own backend.
-To use this feature, enable `Facebook` from the Social Connections section in the [dashboard](https://developer.metamask.io).
+:::caution Preserve wallet addresses
-By default, Web3Auth uses its own pre-configured credentials for Facebook login.
+Decide between the default and a custom connection before you onboard users.
+Moving from the default Facebook connection to a custom Facebook, Auth0, Firebase, Amazon Cognito,
+or JWT connection changes every user's wallet address unless both connections are in a
+[group connection](../group-connections.mdx) with matching user identifiers.
:::
-
-:::tip
+3. Add `https://auth.web3auth.io/auth` as a Valid OAuth Redirect URI.
-Follow our [quickstart](/quickstart/?product=EMBEDDED_WALLETS&walletAggregatorOnly=NO&framework=REACT&stepIndex=0) to set up the basic flow.
+
-:::
+4. Copy the App ID and App Secret from **Settings > Basic**.
-### Implicit login with Facebook
+
-
-3. Obtain the OAuth Client ID from the [App on the Google Developer dashboard](https://console.developers.google.com/)
+3. Copy the OAuth client ID from the
+ [Google Cloud console](https://console.developers.google.com/).
+4. In the MetaMask Developer Dashboard, open **Social Connections**, select the settings icon next
+ to **Google**, and enter an **Auth Connection ID** and the **Google Client ID**.
-## Step 2: Create a Google connection
+
-
- {error &&
- )
-}
-```
-
-### Log in with Farcaster
-
-Ensure that you enable Farcaster 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 loginWithFarcaster = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.FARCASTER,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with Apple
-
-Ensure that you enable Apple 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 loginWithApple = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.APPLE,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with GitHub
-
-Ensure that you enable GitHub 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 loginWithGitHub = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.GITHUB,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with Reddit
-
-Ensure that you enable Reddit 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 loginWithReddit = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.REDDIT,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with Line
-
-Ensure that you enable Line 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 loginWithLine = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.LINE,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with Kakao
-
-Ensure that you enable Kakao 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 loginWithKakao = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.KAKAO,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with LinkedIn
-
-Ensure that you enable LinkedIn 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 loginWithLinkedIn = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.LINKEDIN,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
-
-### Log in with WeChat
-
-Ensure that you enable WeChat 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 loginWithWechat = async () => {
- await connectTo(WALLET_CONNECTORS.AUTH, {
- // focus-next-line
- authConnection: AUTH_CONNECTION.WECHAT,
- })
- }
-
- return (
- {error.message}
}
-
-
- {error &&
- )
-}
-```
diff --git a/embedded-wallets/authentication/social-logins/reddit.mdx b/embedded-wallets/authentication/social-logins/reddit.mdx
new file mode 100644
index 00000000000..f07a50f207f
--- /dev/null
+++ b/embedded-wallets/authentication/social-logins/reddit.mdx
@@ -0,0 +1,118 @@
+---
+title: Reddit sign-in with Embedded Wallets
+sidebar_label: Reddit
+description: Configure default or custom Reddit sign-in with MetaMask Embedded Wallets.
+---
+
+import SocialConnections from '@site/static/img/embedded-wallets/dev-dashboard/authentication-social-connections.png'
+
+[Reddit OAuth](https://github.com/reddit-archive/reddit/wiki/OAuth2) lets users authenticate with a
+Reddit account.
+Choose the default connection for the quickest setup, or configure a custom connection when you
+need your own Reddit app, consent screen, or identity provider.
+
+## Default Reddit sign-in
+
+The default connection uses the Reddit OAuth credentials managed by Embedded Wallets.
+You don't need a Reddit developer application.
+
+### Caveats
+
+- The Reddit consent screen identifies the OAuth application managed by Embedded Wallets, not your
+ dapp.
+- You can't change the Reddit application configuration, such as its scopes or branding, because you
+ don't own the credentials.
+- The default connection and a custom 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).
+
+### Configure the default connection
+
+1. Open your project in the [MetaMask Developer Dashboard](https://developer.metamask.io).
+2. Select **Social Connections**.
+3. Enable **Reddit**.
+
+{error.message}
}
- 
-3. After creation of your Twitch app, click **Manage**.
+3. Open **Manage** on the application and copy the **Client ID**.
-4. Obtain the **Client ID**.
-
-## Step 2: Create a Twitch connection
-
-:::success Enable on dashboard
-
-To use this feature, enable `Twitch` from the Social Connections section in the [dashboard](https://developer.metamask.io).
+4. In the MetaMask Developer Dashboard, open **Social Connections**, select the settings icon next
+ to **Twitch**, and enter an **Auth Connection ID** and the **Twitch Client ID**.
-By default, Web3Auth uses its own pre-configured credentials for Twitch login.
+Default implicit flow
+
+ Pass the user's {label} as login_hint. The default connection opens a popup for
+ the OTP step.
+
Custom connection in the modal
+
+ Add the Auth Connection ID from the dashboard to loginMethods. The email or
+ phone field and OTP stay inside the modal instead of a popup.
+
Custom implicit flow
+
+ When you bypass the modal, pass the same Auth Connection ID together with{' '}
+ login_hint.
+
+ Configure the custom social connection in Blueprint by following the{' '} + + Unreal Engine custom authentication guide + + . +
+ ) + default: + return null + } +} + +function auth0Implicit(platform: SocialLoginPlatform, auth0Connection: string) { + switch (platform) { + case 'react': + case 'vue': + return ( ++ The current Unreal Engine SDK documentation provides this flow through Blueprint + configuration, not a verified C++ example. Configure the Auth0 connection by following the{' '} + + Unreal Engine custom authentication guide + + . +
+ ) + default: + return null + } +} + +function jwtFlow(platform: SocialLoginPlatform) { + switch (platform) { + case 'react': + case 'vue': + return ( ++ The current Unreal Engine SDK documentation doesn't provide a verified C++ JWT example. + Configure the JWT connection and login in Blueprint by following the{' '} + + Unreal Engine custom authentication guide + + . +
+ ) + case 'node': + return ( +Default implicit flow
+Native custom implicit flow
+
+ Use these examples after you add your own client ID on the social connection in the
+ dashboard. For Android and iOS, add the connection to authConnectionConfig{' '}
+ during initialization. Flutter, Unity, and Unreal Engine currently use their platform's{' '}
+ loginConfig; configure it by following the custom authentication guide for{' '}
+ Flutter,{' '}
+ Unity, or{' '}
+ Unreal Engine.
+
Auth0 implicit flow
+
+ These examples use the Auth0 custom connection configured for your SDK. Replace the
+ connection ID and domain with your Auth0 values. For Android and iOS, add the connection
+ to authConnectionConfig during initialization. Flutter, Unity, and Unreal
+ Engine currently use their platform's loginConfig; configure it by
+ following the custom authentication guide for{' '}
+ Flutter,{' '}
+ Unity, or{' '}
+ Unreal Engine.
+
JWT flow
++ Obtain a fresh ID token from your identity aggregator or backend before calling Embedded + Wallets. The token issuer and claims must match the custom connection in the dashboard. +
+