Guides fixes

Author: yashovardhan

docs/authentication/custom-connections/auth0.mdx

@@ -4,11 +4,17 @@ sidebar_label: Auth0
 description: "Auth0 Login with Web3Auth | Documentation - Web3Auth"
 ---
 
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 import Tiles from "@theme/Tiles";
 
 import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
 import Auth0Connection from "@site/static/images/dashboard/auth0-connection.png";
 
+import JwtLoginAuth0 from "../../sdk/web/react/advanced/_custom-authentication-snippets/_jwt_login_auth0.mdx";
+import ImplicitLoginAuth0Google from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_auth0_google.mdx";
+import ImplicitLoginAuth0Spa from "../../sdk/web/react/advanced/_custom-authentication-snippets/_implicit_login_auth0_spa.mdx";
+
 Auth0 is a powerful authentication and authorization platform that enables developers to securely
 manage user identities. Web3Auth offers native support for integrating Auth0 as a service provider,
 allowing projects to leverage Auth0’s robust authentication mechanisms within the Web3Auth
@@ -75,16 +81,20 @@ export const Auth0Setup = [
 To use this feature, developers must go to the `Custom Connections` tab in the
 [Web3Auth Dashboard](https://dashboard.web3auth.io).
 
-<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
+:::
+
+<div style={{ display: "flex", margin: "20px 0" }}>
   <img
     src={CustomConnectionOptions}
-    style={{ alignSelf: "center", maxWidth: "100%" }}
+    style={{
+      maxWidth: "800px",
+      borderRadius: "8px",
+      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+    }}
     alt="Custom Connection Options"
   />
 </div>
 
-:::
-
 Follow these steps to create an Auth0 connection:
 
 1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
@@ -97,76 +107,182 @@ Follow these steps to create an Auth0 connection:
 8. Enter `Auth0 Domain`.
 9. Finally, click on the `Add Connection` button.
 
-<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
+<div style={{ display: "flex", margin: "20px 0" }}>
   <img
     src={Auth0Connection}
-    style={{ alignSelf: "center", maxWidth: "100%" }}
+    style={{
+      maxWidth: "800px",
+      borderRadius: "8px",
+      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+    }}
     alt="Auth0 Connection"
   />
 </div>
 
 ## Usage
 
-### Initialize Web3Auth
-
-Wrap your app with the `Web3AuthProvider`. This provider should be as close to the root of your
-React tree as possible.
-
-```js title="Example: React + Vite (main.tsx)"
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-
-import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
-
-import App from "./App.tsx";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <Web3AuthProvider
-      config={{
-        web3AuthOptions: {
-          clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
-          web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
-        },
-      }}
-    >
-      <App />
-    </Web3AuthProvider>
-  </StrictMode>
-);
-```
-
 Since, the `Auth0 Connection` details are available from Dashboard, developers don't need to pass
 any additional parameters to the `Web3AuthProvider`.
 
 > Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
 
-### Login with Auth0
-
-```jsx
-import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";
-import { useAccount } from "wagmi";
-
-function LoginPage() {
-  const { connectTo } = useWeb3AuthConnect();
-  const { address } = useAccount();
-
-  const loginWithAuth0 = async () => {
-    await connectTo(WALLET_CONNECTORS.AUTH, {
-      // focus-start
-      authConnectionId: "auth0-auth-connection-id",
-      authConnection: AUTH_CONNECTION.CUSTOM,
-      // focus-end
-    });
-  };
-
-  return (
-    <div>
-      <button onClick={() => loginWithAuth0()}>Login with Auth0</button>
-      <p>Address: {address}</p>
-      {/* 0xA8b29d40d0FE6a0c153A5759B1f0059d8b7654c5 */}
-    </div>
+### Web
+
+<Tabs>
+  <TabItem value="implicit-spa" label="Implicit Login (SPA)">
+    <ImplicitLoginAuth0Spa />
+  </TabItem>
+  <TabItem value="implicit" label="Implicit Login Auth0 Google">
+    <ImplicitLoginAuth0Google />
+  </TabItem>
+  <TabItem value="jwt" label="JWT Login with Auth0 SDK">
+    <JwtLoginAuth0 />
+  </TabItem>
+</Tabs>
+
+### Android
+
+##### Create Web3Auth Instance
+
+In your activity, create a `Web3Auth` instance with your Web3Auth project's configurations.
+
+```kotlin
+web3Auth = Web3Auth(
+  Web3AuthOptions(
+    context = this,
+    clientId = getString(R.string.web3auth_project_id), // pass over your Web3Auth Client ID from Developer Dashboard
+    network = Network.SAPPHIRE_MAINNET
+    redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"), // your app's redirect URL
+    // focus-start
+    loginConfig = hashMapOf("jwt" to LoginConfigItem(
+        verifier = "web3auth-auth0-demo",
+        typeOfLogin = TypeOfLogin.JWT,
+        name = "Auth0 Login",
+        clientId = getString(R.string.web3auth_auth0_client_id)
+        )
+    )
+    // focus-end
+  )
+)
+
+// Handle user signing in when app is not alive
+web3Auth.setResultUrl(intent?.data)
+```
+
+##### Logging in
+
+Once initialized, you can use the `web3Auth.login(LoginParams("{selectedLoginProvider}"))` function
+to authenticate the user when they click the login button.
+
+```kotlin
+private fun signIn() {
+  val selectedLoginProvider = Provider.JWT   // For Auth0, we use JWT
+  val loginCompletableFuture: CompletableFuture<Web3AuthResponse> = web3Auth.login(
+    // focus-start
+    LoginParams(
+      selectedLoginProvider,
+      extraLoginOptions = ExtraLoginOptions(
+        domain = "https://YOUR_AUTH0_DOMAIN",
+        verifierIdField = "sub"
+      )
+    )
+    // focus-end
+  )
+}
+```
+
+When connecting, the `login` function takes the LoginParams arguments for the login. See the
+[LoginParams](/sdk/mobile/pnp/android/usage#parameters) for more details.
+
+### Flutter
+
+##### Create Web3Auth Instance
+
+In your `main.dart` file, initialize the `Web3AuthFlutter` plugin at the very beginning such as in
+the overriden `initState` function
+
+```dart
+Future<void> initPlatformState() async {
+
+  Uri redirectUrl;
+  if (Platform.isAndroid) {
+    redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
+    // w3a://com.example.w3aflutter/auth
+  } else if (Platform.isIOS) {
+    redirectUrl = Uri.parse('{bundleId}://auth');
+    // com.example.w3aflutter://openlogin
+  } else {
+    throw UnKnownException('Unknown platform');
+  }
+  // focus-start
+  final loginConfig = HashMap<String, LoginConfigItem>();
+  loginConfig['jwt'] = LoginConfigItem(
+    verifier: "VERIFIER-NAME", // get it from web3auth dashboard
+    typeOfLogin: TypeOfLogin.jwt,
+    name: "Web3Auth Flutter Auth0 Example",
+    clientId: "AUTH0-CLIENT-ID" // auth0 client id
   );
+  // focus-end
+
+  await Web3AuthFlutter.init(Web3AuthOptions(
+    clientId:'YOUR WEB3AUTH CLIENT ID FROM DASHBOARD',
+    network: Network.sapphire_mainnet,
+    redirectUri: redirectUrl,
+    loginConfig: loginConfig
+  ));
+
+  await Web3AuthFlutter.initialize();
+}
+```
+
+##### Logging in
+
+Once initialized, you can use the
+`Web3AuthFlutter.login(LoginParams( loginProvider: Provider.google ))` function to authenticate the
+user when they click the login button.
+
+```dart
+Future<Web3AuthResponse> _withAuth0() {
+  // focus-start
+  return Web3AuthFlutter.login(LoginParams(
+    loginProvider: Provider.jwt,
+    mfaLevel: MFALevel.OPTIONAL,
+    extraLoginOptions: ExtraLoginOptions(
+      domain: 'YOUR_AUTH0_DOMAIN', // eg. https://torus.us.auth0.com
+      verifierIdField: 'sub')));
+  // focus-end
 }
 ```
+
+Read more about initializing the Flutter SDK [here](/sdk/mobile/pnp/flutter/initialize).
+
+### React Native
+
+```tsx
+const web3auth = new Web3Auth(WebBrowser, SecureStore, {
+  clientId,
+  network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
+  loginConfig: {
+    // focus-start
+    jwt: {
+      verifier: "YOUR_AUTH0_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
+      typeOfLogin: "jwt",
+      clientId: "AUTH0_CLIENT_ID_123ABcdefg4HiJKlMno4P5QR6stUvWXY", // use your app client id you got from auth0
+    },
+    // focus-end
+  },
+});
+```
+
+```tsx
+const web3authResponse = await web3auth.login({
+  redirectUrl: resolvedRedirectUrl,
+  // focus-start
+  loginProvider: "jwt",
+  extraLoginOptions: {
+    domain: "https://YOUR-AUTH0-DOMAIN", // Please append "https://" before your domain
+    verifierIdField: "sub", // For SMS & Email Passwordless, use "name" as verifierIdField
+  },
+  // focus-end
+});
+```

docs/authentication/social-logins/google.mdx

@@ -19,6 +19,10 @@ ID in the Google Cloud Console.
 To use this feature, please enable `Google` from the Social Connections section in the
 [Web3Auth Dashboard](https://dashboard.web3auth.io).
 
+> By default, Web3Auth uses its own pre-configured credentials for Google login.
+
+:::
+
 <div style={{ display: "flex", margin: "20px 0" }}>
   <img
     src={GoogleToggle}
@@ -31,10 +35,6 @@ To use this feature, please enable `Google` from the Social Connections section
   />
 </div>
 
-> By default, Web3Auth uses its own pre-configured credentials for Google login.
-
-:::
-
 ## Create a Google app
 
 1. Follow Google’s instructions to

docs/sdk/web/react/advanced/_custom-authentication-snippets/_grouped_auth_firebase.mdx

@@ -0,0 +1,33 @@
+```tsx title="App.tsx"
+const loginWithGoogle = async () => {
+  // focus-start
+  await connectTo(WALLET_CONNECTORS.AUTH, {
+    groupedAuthConnectionId: "aggregate-sapphire",
+    authConnectionId: "w3a-google",
+    authConnection: AUTH_CONNECTION.GOOGLE,
+  });
+  // focus-end
+};
+
+const loginWithFirebaseGithub = async () => {
+  const app = initializeApp(firebaseConfig);
+  const auth = getAuth(app);
+  const githubProvider = new GithubAuthProvider();
+
+  const result = await signInWithPopup(auth, githubProvider);
+
+  const idToken = await result.user.getIdToken(true);
+
+  // focus-start
+  connectTo(WALLET_CONNECTORS.AUTH, {
+    groupedAuthConnectionId: "aggregate-sapphire",
+    authConnectionId: "w3a-firebase",
+    authConnection: AUTH_CONNECTION.CUSTOM,
+    idToken,
+    extraLoginOptions: {
+      isUserIdCaseSensitive: false,
+    },
+  });
+  // focus-end
+};
+```

docs/sdk/web/react/advanced/_custom-authentication-snippets/_grouped_auth_implicit_auth0.mdx

@@ -0,0 +1,37 @@
+```tsx title="App.tsx"
+const loginWithGoogle = async () => {
+  // focus-start
+  await connectTo(WALLET_CONNECTORS.AUTH, {
+    groupedAuthConnectionId: "aggregate-sapphire",
+    authConnectionId: "w3a-google",
+    authConnection: AUTH_CONNECTION.GOOGLE,
+  });
+  // focus-end
+};
+
+const loginWithAuth0Google = async () => {
+  // focus-start
+  await connectTo(WALLET_CONNECTORS.AUTH, {
+    groupedAuthConnectionId: "aggregate-sapphire",
+    authConnectionId: "w3a-a0-google",
+    authConnection: AUTH_CONNECTION.CUSTOM,
+    extraLoginOptions: {
+      connection: "google-oauth2",
+    },
+  });
+  // focus-end
+};
+
+const loginWithAuth0GitHub = async () => {
+  // focus-start
+  await connectTo(WALLET_CONNECTORS.AUTH, {
+    groupedAuthConnectionId: "aggregate-sapphire",
+    authConnectionId: "w3a-a0-github",
+    authConnection: AUTH_CONNECTION.CUSTOM,
+    extraLoginOptions: {
+      connection: "github",
+    },
+  });
+  // focus-end
+};
+```