diff --git a/README.md b/README.md index 4bb9862..55f4ae6 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Web3Auth is where passwordless auth meets non-custodial key infrastructure for W Checkout the official [Web3Auth Documentation](https://web3auth.io/docs) and [SDK Reference](https://web3auth.io/docs/sdk/pnp/react-native) to get started! ## 💡 Features + - Plug and Play, OAuth based Web3 Authentication Service - Fully decentralized, non-custodial key infrastructure - End to end Whitelabelable solution @@ -99,42 +100,42 @@ web3authrnexample://openlogin ## 💥 Initialization & Usage -In your sign-in activity', create an `Web3Auth` instance with your Web3Auth project's configurations and +In your sign-in activity', create an `Web3Auth` instance with your Web3Auth project's configurations and configure it like this: ### Expo Managed Workflow ```js -import * as WebBrowser from 'expo-web-browser'; -import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; +import * as WebBrowser from "expo-web-browser"; +import Web3Auth, { AUTH_CONNECTION, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; const web3auth = new Web3Auth(WebBrowser, { - clientId, - network: OPENLOGIN_NETWORK.TESTNET, // or other networks + clientId, + network: OPENLOGIN_NETWORK.TESTNET, // or other networks + redirectUrl: resolvedRedirectUrl, }); const info = await web3auth.login({ - loginProvider: LOGIN_PROVIDER.GOOGLE, - redirectUrl: resolvedRedirectUrl, - mfaLevel: 'mandatory', // optional - curve: 'secp256k1', // optional + authConnection: AUTH_CONNECTION.GOOGLE, + mfaLevel: "mandatory", // optional + curve: "secp256k1", // optional }); ``` ### Bare Workflow ```js -import * as WebBrowser from '@toruslabs/react-native-web-browser'; -import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; +import * as WebBrowser from "@toruslabs/react-native-web-browser"; +import Web3Auth, { AUTH_CONNECTION, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; const web3auth = new Web3Auth(WebBrowser, { - clientId, - network: OPENLOGIN_NETWORK.TESTNET, // or other networks + clientId, + network: OPENLOGIN_NETWORK.TESTNET, // or other networks + redirectUrl: resolvedRedirectUrl, }); const info = await web3auth.login({ - loginProvider: LOGIN_PROVIDER.GOOGLE, - redirectUrl: resolvedRedirectUrl, - mfaLevel: 'mandatory', // optional - curve: 'secp256k1', // optional + authConnection: AUTH_CONNECTION.GOOGLE, + mfaLevel: "mandatory", // optional + curve: "secp256k1", // optional }); ``` diff --git a/demo/rn-bare-aggregate-verifier-example/.bundle/config b/demo/rn-bare-aggregate-verifier-example/.bundle/config new file mode 100644 index 0000000..848943b --- /dev/null +++ b/demo/rn-bare-aggregate-verifier-example/.bundle/config @@ -0,0 +1,2 @@ +BUNDLE_PATH: "vendor/bundle" +BUNDLE_FORCE_RUBY_PLATFORM: 1 diff --git a/demo/rn-bare-aggregate-verifier-example/.gitignore b/demo/rn-bare-aggregate-verifier-example/.gitignore new file mode 100644 index 0000000..d5ae456 --- /dev/null +++ b/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 diff --git a/demo/rn-bare-aggregate-verifier-example/.watchmanconfig b/demo/rn-bare-aggregate-verifier-example/.watchmanconfig new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/demo/rn-bare-aggregate-verifier-example/.watchmanconfig @@ -0,0 +1 @@ +{} diff --git a/demo/rn-bare-aggregate-verifier-example/App.tsx b/demo/rn-bare-aggregate-verifier-example/App.tsx new file mode 100644 index 0000000..06dd962 --- /dev/null +++ b/demo/rn-bare-aggregate-verifier-example/App.tsx @@ -0,0 +1,273 @@ +import "@ethersproject/shims"; + +// IMP START - Quick Start +import * as WebBrowser from "@toruslabs/react-native-web-browser"; +import Web3Auth, { AUTH_CONNECTION, WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk"; +import { ethers, Wallet } 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 + +export default function App() { + const [web3auth, setWeb3auth] = useState(null); + const [loggedIn, setLoggedIn] = useState(false); + const [signer, setSigner] = useState(null); + const [console, setConsole] = useState(""); + + 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 + enableLogging: true, // Enable debug logging + }); + setWeb3auth(web3auth); + + // IMP START - SDK Initialization + await web3auth.init(); + + if (web3auth.connected) { + // IMP END - SDK Initialization + setSigner(web3auth.signer as Wallet); + 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) { + setSigner(web3auth.signer as Wallet); + 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) { + setSigner(web3auth.signer as Wallet); + 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) { + setSigner(web3auth.signer as Wallet); + 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) { + setSigner(null); + uiConsole("Logged out"); + setLoggedIn(false); + } + }; + + // IMP START - Blockchain Calls + const getAccounts = async (): Promise => { + if (!signer) { + uiConsole("signer not set"); + return ""; + } + setConsole("Getting account"); + const address = await signer.getAddress(); + uiConsole(address); + return address; + }; + + const getBalance = async () => { + if (!signer) { + uiConsole("signer not set"); + return; + } + setConsole("Fetching balance"); + const address = await signer.getAddress(); + const b = await signer.provider?.getBalance(address); + const balance = ethers.formatEther(b?.toString() ?? "0"); + uiConsole(balance); + }; + + const signMessage = async () => { + if (!signer) { + uiConsole("signer not set"); + return; + } + setConsole("Signing message"); + 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(prev => `${JSON.stringify(args || {}, null, 2)}\n\n\n\n${prev}`); + }; + + const loggedInView = ( + +