docs: update social auth docs

Author: ElasticBottle

apps/portal/src/app/connect/sidebar.tsx

@@ -126,7 +126,7 @@ export const sidebar: SideBar = {
                 },
                 {
                   name: "Social Login",
-                  href: `${connectSlug}/methods/social-logins`,
+                  href: `${walletSlug}/sign-in-methods/socials`,
                 },
                 {
                   name: "Email & Phone",

apps/portal/src/app/connect/wallet/sign-in-methods/socials/page.mdx

@@ -0,0 +1,108 @@
+import { ArticleIconCard, DocImage } from "@doc";
+import {
+    ReactIcon,
+    TypeScriptIcon,
+    UnityIcon,
+    DotNetIcon,
+    ExternalLinkIcon,
+    UnrealEngineIcon
+} from "@/icons"
+import EcosystemSocialConfig from './social-config.png'
+
+# Social Logins
+
+thirdweb uses the [OAuth 2.0 Protocol](https://oauth.net/2/) to enable social login.
+
+For all social login methods, thirdweb generates a non-custodial [wallet](/connect/wallet/security) behind the scenes. Thirdweb wallets enable your users to interact with your application, as well as store tokens and assets they receive while interacting with your application.
+
+## Add Social Login options
+
+### In-App Wallets
+
+To add social logins to your in-app wallet, refer to the following guides:
+
+<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+    <ArticleIconCard
+        title="TypeScript"
+        icon={TypeScriptIcon}
+        description="Implement in-app wallets in TypeScript"
+        href="/typescript/v5/inAppWallet#example"
+    />
+    <ArticleIconCard
+        title="React"
+        icon={ReactIcon}
+        description="Implement in-app wallets in React"
+        href="/react/v5/in-app-wallet/get-started#choose-authentication-methods"
+    />
+    {/* TODO: Link to react native getting started for in appw allet */}
+    <ArticleIconCard
+        title="React Native"
+        icon={ReactIcon}
+        description="Implement in-app wallets in React Native"
+        href="/react/v5/in-app-wallet/get-started#choose-authentication-methods"
+    />
+	<ArticleIconCard
+        title=".NET"
+        icon={DotNetIcon}
+        description="Connect in-app wallets in .NET"
+        href="/dotnet/wallets/providers/in-app-wallet#oauth-authentication-flow"
+    />
+    <ArticleIconCard
+        title="Unity"
+        icon={UnityIcon}
+        description="Implement in-app wallets in Unity"
+        href="/unity/v5/wallets/in-app-wallet#login-with-socials-google-apple-facebook-etc"
+    />
+    <ArticleIconCard
+        title="Unreal Engine"
+        icon={UnrealEngineIcon}
+        description="Implement in-app wallets in Unreal Engine"
+        href="/unreal-engine/blueprints/in-app-wallet#oauth"
+    />
+</div>
+
+### Ecosystem Wallets
+
+In order to use social logins within your ecosystem, first configurethe allowed social auth methods on [your dashboard](https://thirdweb.com/dashboard). 
+
+<DocImage src={EcosystemSocialConfig}/>
+
+Once configured, refer to the following guides to use social logins within your ecosystem:
+
+<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+    <ArticleIconCard
+        title="TypeScript"
+        icon={TypeScriptIcon}
+        description="Connect ecosystem wallets in TypeScript"
+        href="/typescript/v5/ecosystemWallet#example"
+    />
+    <ArticleIconCard
+        title="React"
+        icon={ReactIcon}
+        description="Connect ecosystem wallets in React"
+        href="/react/v5/ecosystem-wallet/get-started#configuring-auth-strategies"
+    />
+    {/* TODO: Add react native specific getting started for ecosystem wallets */}
+    <ArticleIconCard
+        title="React Native"
+        icon={ReactIcon}
+        description="Connect ecosystem wallets in React Native"
+        href="/react/v5/ecosystem-wallet/get-started#configuring-auth-strategies"
+    />
+     <ArticleIconCard
+        title=".NET"
+        icon={DotNetIcon}
+        description="Connect ecosystem wallets in .NET"
+        href="/dotnet/wallets/providers/ecosystem-wallet#oauth-authentication-flow"
+    />
+    <ArticleIconCard
+        title="Unity"
+        icon={UnityIcon}
+        description="Connect ecosystem wallets in Unity"
+        href="/unity/v5/wallets/ecosystem-wallet#login-with-socials-google-apple-facebook-etc"
+    />
+</div>
+
+## Interacting with your App
+
+Once a user signed in and their wallet is generated, you can use the **[Wallet Connection hooks](/typescript/v5/functions#wallets)** to get information about the connected wallet like getting the address, account, and more.

apps/portal/src/app/connect/wallet/sign-in-methods/socials/social-config.png

@@ -3,9 +3,11 @@ import {
 	TabsList,
 	TabsTrigger,
 	TabsContent,
+	Callout,
 	DocImage,
 	createMetadata,
 } from "@doc";
+import EcosystemSocialConfig from './social-config.png'
 
 export const metadata = createMetadata({
 	title: "Connect users with Ecosystem Wallets",
@@ -61,6 +63,22 @@ const LoginComponent = () => {
 };
 ```
 
+## Configuring auth strategies
+
+You can configure the allowed auth strategies on [your dashboard](https://thirdweb.com/dashboard).
+
+<DocImage src={EcosystemSocialConfig}/>
+
+For prebuilt UIs, the enabled auth strategies are automatically read from your dashbaord configurations.
+
+For custom UIs, you can configure the auth options when connecting the wallet. See [using your own UI](#using-your-own-ui) for an example. 
+
+<Callout variant="warning" title="Using disabled auth strategies">
+	Note that while you're allowed to pass any auth strategy today, we recommend only passing the strategies that are enabled on your dashboard. We might enforce this in the future.
+</Callout>
+
+
+
 ## Passing a partner ID
 
 For closed ecosystems, you can pass a valid `partnerId` to the `ecosystemWallet` provided by the ecosystem owner.