Apple and FB social sign in (#1077)

* Adds Apple and FB as socials options

docs/onboarding/0 Getting Started/API Keys.mdx

@@ -13,7 +13,7 @@ API Keys allow you to:
 - Upload and download assets to IPFS using Storage via dashboard, CLI, or SDKs
 - Use a dedicated RPC Edge service in your application
 - Use Bundler & Paymaster services for your Smart Wallets
-- Enable various services such as signing in with Google, Email, and Custom JWT when using Embedded wallets.
+- Enable various services such as signing in with Google, Facebook, Apple, Email, and Custom JWT when using Embedded wallets.
 
 API Keys consists of two components:
 

docs/onboarding/12 Wallet/3 Building a Wallet/Building a wallet.mdx

@@ -488,7 +488,7 @@ A function that returns a React component that renders the UI for selecting your
 
 Instead of the default icon + name in wallet selector screen, you can render a custom UI for your wallet.
 
-Take [Embedded wallet](https://github.com/thirdweb-dev/js/blob/main/packages/react/src/wallet/wallets/embeddedWallet/embeddedWallet.tsx) for example, It renders an Sign in with Google + Email Input.
+Take [Embedded wallet](https://github.com/thirdweb-dev/js/blob/main/packages/react/src/wallet/wallets/embeddedWallet/embeddedWallet.tsx) for example, It renders an Social Icons + Email Input.
 
 :::info
 
@@ -717,7 +717,7 @@ function MyWalletConnectionUI(props: ConnectUIProps<MyWallet>) {
 
 Instead of the default icon + name in the wallet selector screen, you can render a custom UI for your wallet.
 
-Take [Embedded wallet](https://github.com/thirdweb-dev/js/blob/main/packages/react/src/wallet/wallets/embeddedWallet/embeddedWallet.tsx) for example, It renders an Sign in with Google + Email Input.
+Take [Embedded wallet](https://github.com/thirdweb-dev/js/blob/main/packages/react/src/wallet/wallets/embeddedWallet/embeddedWallet.tsx) for example, It renders Social Icons + Email Input.
 
 <img src="/assets/connect-wallet/connect-wallet-embedded-compact.png" />
 

docs/onboarding/12 Wallet/4 Wallets/Embedded Wallet.mdx

@@ -96,9 +96,10 @@ type EmailVerificationAuthParams = {
   recoveryCode?: string;
 };
 
-// google sign-in
-type GoogleAuthParams = {
-  strategy: "google";
+export type EmbeddedWalletOauthStrategy = "google" | "apple" | "facebook";
+
+type OauthAuthParams = {
+  strategy: EmbeddedWalletOauthStrategy;
   openedWindow?: Window;
   closeOpenedWindow?: (window: Window) => void;
 };

docs/onboarding/21 Embedded Wallet/2 Getting Started.mdx

@@ -131,7 +131,7 @@ const wallet = new EmbeddedWallet({
 });
 
 const authResult = await wallet.authenticate({
-  strategy: "google", // The authentication strategy to use
+  strategy: "google", // The authentication strategy to use, can be any of the supported strategies (google, facebook, apple, email, jwt)
 });
 const walletAddress = await wallet.connect({ authResult });
 ```

docs/onboarding/21 Embedded Wallet/3 How To/0 Connect.mdx

@@ -81,7 +81,7 @@ export default function App() {
 
 ### Choose authentication methods
 
-By default, the connect UI supports Google and email/password authentication. You can customize which authentication methods to support which will be reflected in the UI.
+By default, the connect UI supports Google, Apple, Facebook and email/password authentication. You can customize which authentication methods to support which will be reflected in the UI.
 
 <Tabs>
   <TabItem value="react" label="React">
@@ -91,7 +91,7 @@ By default, the connect UI supports Google and email/password authentication. Yo
   supportedWallets={[
     embeddedWallet({
       auth: {
-        options: ["google", "email"],
+        options: ["email", "facebook", "apple", "google"],
       }
     })
   ]}
@@ -107,8 +107,8 @@ By default, the connect UI supports Google and email/password authentication. Yo
   supportedWallets={[
     embeddedWallet({
       auth: {
-        options: ["google", "email"],
-        redirectUrl: "your_app://deeplink" // required for google auth
+        options: ["email", "facebook", "apple", "google"],
+        redirectUrl: "your_app://deeplink" // required for social logins only
       }
     })
   ]}

docs/onboarding/21 Embedded Wallet/3 How To/1 Build your own UI.mdx

@@ -48,6 +48,8 @@ import { ThirdwebProvider, embeddedWallet() } from "@thirdweb-dev/react"; // or
 
 ## Authenticate via Google
 
+Note that for Apple and Facebook you just need to update the strategey to "facebook" or "apple".
+
 <Tabs>
 <TabItem value="react" label="React & React Native">
 

docs/onboarding/21 Embedded Wallet/5 FAQ.mdx

@@ -36,7 +36,7 @@ Users can access it by choosing the thirdweb option in WalletConnect. They will
 
 ### What login options does thirdweb support?
 
-We support Google and email out of the box, and embedded wallets can be configured to work with any Open ID Compatible authentication service. We will be adding out of the box support for more social login options soon.
+We support Google, Apple, Facebook and email out of the box, and embedded wallets can be configured to work with any Open ID Compatible authentication service. We will be adding out of the box support for more social login options soon.
 
 # Customization FAQs
 

docs/react-native/wallets/EmbeddedWallet.mdx

@@ -9,7 +9,7 @@ import TabItem from "@theme/TabItem";
 import CodeBlock from "@theme/CodeBlock";
 import { CustomizeWalletConfiguratorRN } from "@components/build-wallet/CustomizeWalletConfiguratorRN";
 
-A wallet configurator for [Embedded Wallet](/wallet/embedded-wallet) (email + Google Sign In) which allows integrating the wallet with React Native.
+A wallet configurator for [Embedded Wallet](/wallet/embedded-wallet) (email or Socials Sign In) which allows integrating the wallet with React Native.
 
 ```tsx
 import { embeddedWallet } from "@thirdweb-dev/react-native";
@@ -43,7 +43,7 @@ We wrote [a short guide](/react-native/faq/deeplinks) to help you enable deep li
 embeddedWallet({
   // highlight-start
   auth: {
-    options: ["email", "google", "apple"],
+    options: ["email", "google", "apple", "facebook"],
     redirectUrl: "deep-link-to-your-app://",
   },
   // highlight-end
@@ -141,7 +141,7 @@ Here are the dependencies added:
 - react-native-aes-gcm-crypto
   - This package requires minSdkVersion = 26 on Android
 - @react-native-community/netinfo
-- react-native-inappbrowser-reborn: "^3.7.0" (for Google Sign In)
+- react-native-inappbrowser-reborn: "^3.7.0" (for Socials Sign In)
 
   - There's an open issue on RN > 0.72: https://github.com/margelo/react-native-quick-crypto/issues/186 which you can [fix by](https://github.com/margelo/react-native-quick-crypto/issues/186#issuecomment-1663666739) adding the following to your `android/app/build.gradle` file:
 
@@ -181,6 +181,8 @@ The hook will return all the necessary functions you'll need to authenticate and
 
 **Connecting with Google sign in:**
 
+Note that if you want to sign in with Facebook or Apple you'll need pass "apple" or "facebook" to the `strategy` parameter.
+
 ```tsx
 function App() {
   const { connect } = useEmbeddedWallet();
@@ -232,7 +234,7 @@ type EmailVerificationAuthParams = {
 };
 
 type SocialAuthParams = {
-  strategy: "google" | "apple";
+  strategy: "google" | "apple" | "facebook";
   redirectUrl: string;
 };
 

docs/react/hooks/wallet/useEmbeddedWallet.mdx

@@ -72,9 +72,10 @@ type EmailVerificationAuthParams = {
   recoveryCode?: string;
 };
 
-// google sign-in
-type GoogleAuthParams = {
-  strategy: "google";
+export type EmbeddedWalletOauthStrategy = "google" | "apple" | "facebook";
+
+type OauthAuthParams = {
+  strategy: EmbeddedWalletOauthStrategy;
   openedWindow?: Window;
   closeOpenedWindow?: (window: Window) => void;
 };

docs/react/wallets/embeddedWallet.mdx

@@ -31,13 +31,13 @@ const embeddedWalletConfig = embeddedWallet();
 
 Customize what authentication options to show to your users in the [ConnectWallet Modal](/react/react.connectwallet).
 
-By default, email and Google sign in options are shown.
+By default, email, Google, Apple and Facebook sign in options are shown.
 
 ```ts
 embeddedWallet({
   // highlight-start
   auth: {
-    options: ["email", "google"],
+    options: ["email", "google", "apple", "facebook"],
   },
   // highlight-end
 });
@@ -86,6 +86,8 @@ The hook will return all the necessary functions you'll need to authenticate and
 
 **Connecting with Google sign in:**
 
+Note that if you want to sign in with Apple or Facebook, you can pass in `strategy: "apple"` or `strategy: "facebook"` instead.
+
 ```tsx
 function App() {
   const { connect } = useEmbeddedWallet();
@@ -151,9 +153,10 @@ type EmailVerificationAuthParams = {
   recoveryCode?: string;
 };
 
-// google sign-in
-type GoogleAuthParams = {
-  strategy: "google";
+export type EmbeddedWalletOauthStrategy = "google" | "apple" | "facebook";
+
+type OauthAuthParams = {
+  strategy: EmbeddedWalletOauthStrategy;
   openedWindow?: Window;
   closeOpenedWindow?: (window: Window) => void;
 };

docs/unity/connecting-to-wallets/EmbeddedWallet.mdx

@@ -81,23 +81,23 @@ string address = await sdk.wallet.Connect(connection);
 
 If using Email OTP flow, displays a modal where you can input your OTP code.
 
-If using Google OAuth2 flow, opens a popup where you can login with your Google account. If successful, the popup will close and the wallet will connect.
+If using OAuth2 flow, opens a popup where you can login with your provider account. If successful, the popup will close and the wallet will connect.
 
 If using Custom JWT flow, attempts to connect directly after verifying the JWT token.
 
 ### Standalone
 
 If using Email OTP flow, displays a modal where you can input your OTP code.
 
-If using Google OAuth2 flow, opens the default browser where you can login with your Google account. Connects after the login flow is complete.
+If using the OAuth2 flow, opens the default browser where you can login with your provider account. Connects after the login flow is complete.
 
 If using Custom JWT flow, attempts to connect directly after verifying the JWT token.
 
 ### Mobile
 
 If using Email OTP flow, displays a modal where you can input your OTP code.
 
-If using Google OAuth2 flow, interacts with native in-app browser/authentication implementations to login with your Google account. Redirects back to the app through a deep link after the login flow is complete. Only available in builds.
+If using the OAuth2 flow, interacts with native in-app browser/authentication implementations to login with your provider account. Redirects back to the app through a deep link after the login flow is complete. Only available in builds.
 
 If using Custom JWT flow, attempts to connect directly after verifying the JWT token.