Add other custom auth examples

Author: yashovardhan

demo/rn-bare-aggregate-verifier-example/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

demo/rn-bare-aggregate-verifier-example/.gitignore

@@ -0,0 +1,74 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

demo/rn-bare-aggregate-verifier-example/.watchmanconfig

@@ -0,0 +1 @@
+{}

demo/rn-bare-aggregate-verifier-example/App.tsx

@@ -0,0 +1,301 @@
+import "@ethersproject/shims";
+
+// IMP START - Quick Start
+import * as WebBrowser from "@toruslabs/react-native-web-browser";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import Web3Auth, { AUTH_CONNECTION, ChainNamespace, WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";
+import { ethers } from "ethers";
+import React, { useEffect, useState } from "react";
+import { Button, Dimensions, ScrollView, StyleSheet, Switch, Text, TextInput, View } from "react-native";
+import EncryptedStorage from "react-native-encrypted-storage";
+// IMP END - Quick Start
+
+const scheme = "web3authrnbareaggregateexample"; // Or your desired app redirection scheme
+// IMP START - Whitelist bundle ID
+const redirectUrl = `${scheme}://auth`;
+// IMP END - Whitelist bundle ID
+
+// IMP START - Dashboard Registration
+const clientId = "BHgArYmWwSeq21czpcarYh0EVq2WWOzflX-NTK-tY1-1pauPzHKRRLgpABkmYiIV_og9jAvoIxQ8L3Smrwe04Lw";
+// IMP END - Dashboard Registration
+
+// IMP START - SDK Initialization
+const chainConfig = {
+  chainNamespace: ChainNamespace.EIP155,
+  chainId: "0xaa36a7",
+  rpcTarget: "https://1rpc.io/sepolia",
+  // Avoid using public rpcTarget in production.
+  // Use services like Infura, Quicknode etc
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+  decimals: 18,
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+  config: {
+    chainConfig,
+  },
+});
+
+export default function App() {
+  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [provider, setProvider] = useState<any>(null);
+  const [console, setConsole] = useState<string>("");
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        // EncryptedStorage.clear();
+        const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
+          clientId,
+          // IMP START - Whitelist bundle ID
+          redirectUrl,
+          // IMP END - Whitelist bundle ID
+          network: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // or other networks
+          privateKeyProvider,
+          enableLogging: true, // Enable debug logging
+        });
+        setWeb3auth(web3auth);
+
+        // IMP START - SDK Initialization
+        await web3auth.init();
+
+        if (web3auth.connected) {
+          // IMP END - SDK Initialization
+          setProvider(web3auth.provider);
+          setLoggedIn(true);
+        }
+      } catch (error: any) {
+        setConsole(`Init error: ${error.message}`);
+      }
+    };
+    init();
+  }, []);
+
+  const loginWithGoogle = async () => {
+    try {
+      if (!web3auth?.ready) {
+        setConsole("Web3auth not initialized");
+        return;
+      }
+
+      setConsole("Logging in with Google");
+      await web3auth.connectTo({
+        authConnection: AUTH_CONNECTION.GOOGLE,
+        authConnectionId: "w3a-google",
+        groupedAuthConnectionId: "aggregate-sapphire",
+      });
+
+      if (web3auth.connected) {
+        setProvider(web3auth.provider);
+        uiConsole("Logged In");
+        setLoggedIn(true);
+      }
+    } catch (e: any) {
+      setConsole(e.message);
+    }
+  };
+
+  const loginWithAuth0EmailPasswordless = async () => {
+    try {
+      if (!web3auth?.ready) {
+        setConsole("Web3auth not initialized");
+        return;
+      }
+
+      setConsole("Logging in with Auth0 Email Passwordless");
+      await web3auth.connectTo({
+        authConnection: AUTH_CONNECTION.CUSTOM,
+        authConnectionId: "w3a-a0-email-passwordless",
+        groupedAuthConnectionId: "aggregate-sapphire",
+      });
+
+      if (web3auth.connected) {
+        setProvider(web3auth.provider);
+        uiConsole("Logged In");
+        setLoggedIn(true);
+      }
+    } catch (e: any) {
+      setConsole(e.message);
+    }
+  };
+
+  const loginWithAuth0GitHub = async () => {
+    try {
+      if (!web3auth?.ready) {
+        setConsole("Web3auth not initialized");
+        return;
+      }
+
+      setConsole("Logging in with Auth0 GitHub");
+      await web3auth.connectTo({
+        authConnection: AUTH_CONNECTION.CUSTOM,
+        authConnectionId: "w3a-a0-github",
+        groupedAuthConnectionId: "aggregate-sapphire",
+      });
+
+      if (web3auth.connected) {
+        setProvider(web3auth.provider);
+        uiConsole("Logged In");
+        setLoggedIn(true);
+      }
+    } catch (e: any) {
+      setConsole(e.message);
+    }
+  };
+
+  const logout = async () => {
+    if (!web3auth?.ready) {
+      setConsole("Web3auth not initialized");
+      return;
+    }
+
+    setConsole("Logging out");
+    await web3auth.logout();
+
+    if (!web3auth.connected) {
+      setProvider(null);
+      uiConsole("Logged out");
+      setLoggedIn(false);
+    }
+  };
+
+  // IMP START - Blockchain Calls
+  const getAccounts = async (): Promise<string> => {
+    if (!provider) {
+      uiConsole("provider not set");
+      return "";
+    }
+    setConsole("Getting account");
+    const ethersProvider = new ethers.BrowserProvider(provider!);
+    const signer = await ethersProvider.getSigner();
+    const address = signer.getAddress();
+    uiConsole(address);
+    return address;
+  };
+
+  const getBalance = async () => {
+    if (!provider) {
+      uiConsole("provider not set");
+      return;
+    }
+    setConsole("Fetching balance");
+    const ethersProvider = new ethers.BrowserProvider(provider!);
+    const signer = await ethersProvider.getSigner();
+    const address = signer.getAddress();
+    const balance = ethers.formatEther(await ethersProvider.getBalance(address));
+    uiConsole(balance);
+  };
+
+  const signMessage = async () => {
+    if (!provider) {
+      uiConsole("provider not set");
+      return;
+    }
+    setConsole("Signing message");
+    const ethersProvider = new ethers.BrowserProvider(provider!);
+    const signer = await ethersProvider.getSigner();
+    const originalMessage = "YOUR_MESSAGE";
+    const signedMessage = await signer.signMessage(originalMessage);
+    uiConsole(signedMessage);
+  };
+  // IMP END - Blockchain Calls
+
+  const launchWalletServices = async () => {
+    if (!web3auth) {
+      setConsole("Web3auth not initialized");
+      return;
+    }
+
+    setConsole("Launch Wallet Services");
+    await web3auth.launchWalletServices();
+  };
+
+  const requestSignature = async () => {
+    if (!web3auth) {
+      setConsole("Web3auth not initialized");
+      return;
+    }
+    try {
+      const address: string = await getAccounts();
+      const params = ["Hello World", address];
+      const res = await web3auth.request("personal_sign", params);
+      uiConsole(res);
+    } catch (error) {
+      uiConsole("Error in requestSignature:", error);
+    }
+  };
+
+  const uiConsole = (...args: unknown[]) => {
+    setConsole(`${JSON.stringify(args || {}, null, 2)}\n\n\n\n${console}`);
+  };
+
+  const loggedInView = (
+    <View style={styles.buttonArea}>
+      <Button title="Get User Info" onPress={() => uiConsole(web3auth?.userInfo())} />
+      <Button title="Get Accounts" onPress={() => getAccounts()} />
+      <Button title="Get Balance" onPress={() => getBalance()} />
+      <Button title="Sign Message" onPress={() => signMessage()} />
+      <Button title="Show Wallet UI" onPress={() => launchWalletServices()} />
+      <Button title="Request Signature UI" onPress={() => requestSignature()} />
+      <Button title="Log Out" onPress={() => logout()} />
+    </View>
+  );
+
+  const unloggedInView = (
+    <View style={styles.buttonArea}>
+      <Button title="Login with Google" onPress={() => loginWithGoogle()} />
+      <Button title="Login with Auth0 Email Passwordless" onPress={() => loginWithAuth0EmailPasswordless()} />
+      <Button title="Login with Auth0 GitHub" onPress={() => loginWithAuth0GitHub()} />
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {loggedIn ? loggedInView : unloggedInView}
+      <View style={styles.consoleArea}>
+        <Text style={styles.consoleText}>Console:</Text>
+        <ScrollView style={styles.console}>
+          <Text>{console}</Text>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: 50,
+    paddingBottom: 30,
+  },
+  consoleArea: {
+    margin: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+  },
+  console: {
+    flex: 1,
+    backgroundColor: "#CCCCCC",
+    color: "#ffffff",
+    padding: 10,
+    width: Dimensions.get("window").width - 60,
+  },
+  consoleText: {
+    padding: 10,
+  },
+  buttonArea: {
+    flex: 2,
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingBottom: 30,
+  },
+});

demo/rn-bare-aggregate-verifier-example/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'