diff --git a/demo/sfarndemo/App.tsx b/demo/sfarndemo/App.tsx index 9ac0bf1..a9e923e 100644 --- a/demo/sfarndemo/App.tsx +++ b/demo/sfarndemo/App.tsx @@ -11,41 +11,69 @@ import { import RPC from './ethersRPC'; // for using ethers.js import auth from '@react-native-firebase/auth'; import EncryptedStorage from 'react-native-encrypted-storage'; -// @ts-ignore -import {decode as atob} from 'base-64'; +import {decode} from 'base-64'; +import {Auth0Provider, useAuth0} from 'react-native-auth0'; import Web3Auth from '@web3auth/single-factor-auth-react-native'; import {EthereumPrivateKeyProvider} from '@web3auth/ethereum-provider'; +import {IProvider} from '@web3auth/base'; +import {PasskeysPlugin} from './passkey/passkey'; +import {ADAPTER_EVENTS} from '@web3auth/single-factor-auth'; -async function signInWithEmailPassword() { - try { - const res = await auth().signInWithEmailAndPassword( - 'custom+jwt@firebase.login', - 'Testing@123', - ); - return res; - } catch (error) { - console.error(error); - } -} - -export default function App() { +function AppScreen() { const [privateKey, setPrivateKey] = useState(); const [loading, setLoading] = useState(false); const [userInfo, setUserInfo] = useState(''); const [consoleUI, setConsoleUI] = useState(''); const [web3auth, setWeb3Auth] = useState(null); + const [provider, setProvider] = useState(); + const {authorize, getCredentials} = useAuth0(); + const [passkeyPlugin, setPasskeyPlugin] = useState( + null, + ); + const clientId = + 'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ'; // get from https://dashboard.web3auth.io useEffect(() => { async function init() { try { const authProvider = new Web3Auth(EncryptedStorage, { - clientId: - 'BEglQSgt4cUWcj6SKRdu5QkOXTsePmMcusG5EAoyjyOYKlVRjIF1iCNnMOTfpzCiunHRrMui8TIwQPXdkQ8Yxuk', // Get your Client ID from Web3Auth Dashboard - web3AuthNetwork: 'cyan', + clientId, + web3AuthNetwork: 'sapphire_devnet', // ["cyan", "testnet"] usePnPKey: false, // By default, this sdk returns CoreKitKey + metadataHost: 'https://metadata-testing.tor.us', }); + const plugin = new PasskeysPlugin({ + buildEnv: 'local', + metadataHost: 'https://metadata-testing.tor.us', + passkeyEndpoints: { + // replace this authentication server + register: { + options: + 'https://wildcat-endless-basically.ngrok-free.app/api/v1/passkey/generate-registration-options', + verify: + 'https://wildcat-endless-basically.ngrok-free.app/api/v1/passkey/verify-registration', + }, + authenticate: { + options: + 'https://wildcat-endless-basically.ngrok-free.app/api/v1/passkey/generate-authentication-options', + verify: + 'https://wildcat-endless-basically.ngrok-free.app/api/v1/passkey/verify-authentication', + }, + crud: { + list: 'https://wildcat-endless-basically.ngrok-free.app/api/v1/passkey/list', + }, + }, + // should this be app url or backend url + rpID: 'wildcat-endless-basically.ngrok-free.app', + rpName: 'SFARNDemo', + rpOrigin: 'https://wildcat-endless-basically.ngrok-free.app', + verifier: '', + serverTimeOffset: 60, + }); + authProvider.addPlugin(plugin); + setPasskeyPlugin(plugin); const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { /* @@ -62,17 +90,17 @@ export default function App() { }, }, }); - setWeb3Auth(authProvider); - await authProvider.init(privateKeyProvider); + await authProvider.init(privateKeyProvider as any); - if (authProvider.connected) { - const finalPrivateKey = await authProvider.provider!.request({ - method: 'eth_private_key', - }); + // if (authProvider.connected) { + const finalPrivateKey = await authProvider.provider!.request({ + method: 'eth_private_key', + }); - setPrivateKey(finalPrivateKey as string); - uiConsole('Private Key: ' + finalPrivateKey); - } + setPrivateKey(finalPrivateKey as string); + uiConsole('Private Key: ' + finalPrivateKey); + setWeb3Auth(authProvider); + setProvider(authProvider.provider!); } catch (error) { uiConsole(error, 'mounted caught'); } @@ -84,39 +112,55 @@ export default function App() { try { const base64Url = token.split('.')[1]; const base64 = base64Url.replace('-', '+').replace('_', '/'); - return JSON.parse(atob(base64 || '')); + return JSON.parse(decode(base64 || '')); } catch (err) { uiConsole(err); return null; } }; + const signInWithAuth0 = async (method: string) => { + try { + //@ts-ignore + const credentials = await authorize({ + scope: 'openid profile email', + // connection: method, + }); + // const credentials = await getCredentials(); + console.log({credentials}); + return credentials?.idToken; + } catch (error) { + console.error({'error while sign with auth0': error}); + } + }; + const login = async () => { try { setConsoleUI('Logging in'); setLoading(true); - const loginRes = await signInWithEmailPassword(); - uiConsole('Login success', loginRes); - const idToken = await loginRes!.user.getIdToken(true); - uiConsole('idToken', idToken); + const idToken = await signInWithAuth0('google'); + console.log({idToken}); const parsedToken = parseToken(idToken); setUserInfo(parsedToken); - const verifier = 'web3auth-firebase-examples'; - const verifierId = parsedToken.sub; - const provider = await web3auth!.connect({ + const verifier = 'w3a-auth0-demo'; + // const currentVerifierId = parsedToken.sub; + const currentVerifierId = parsedToken.sub; + const currentProvider = await web3auth!.connect({ verifier, // e.g. `web3auth-sfa-verifier` replace with your verifier name, and it has to be on the same network passed in init(). - verifierId, // e.g. `Yux1873xnibdui` or `name@email.com` replace with your verifier id(sub or email)'s value. - idToken, + verifierId: currentVerifierId, // e.g. `Yux1873xnibdui` or `name@email.com` replace with your verifier id(sub or email)'s value. + idToken: idToken || '', }); - const finalPrivateKey = await provider!.request({ + console.log({currentVerifierId}); + // setVerifierId(currentVerifierId); + setProvider(currentProvider); + + setLoading(false); + const finalPrivateKey = await currentProvider!.request({ method: 'eth_private_key', }); setPrivateKey(finalPrivateKey as string); - uiConsole('Private Key: ' + finalPrivateKey); - - setLoading(false); uiConsole('Logged In'); } catch (e) { uiConsole(e); @@ -135,6 +179,44 @@ export default function App() { const address = await RPC.getAccounts(privateKey as string); uiConsole(address); }; + + const registerPasskeyV2 = async () => { + setConsoleUI('registerPasskey account'); + try { + console.log({passkeyPlugin}); + if (!passkeyPlugin) { + throw new Error('Passkey plugin not initialized'); + } + + await passkeyPlugin.registerPasskey({ + username: `Passkey - ${new Date(Date.now()).toUTCString()}`, + }); + setConsoleUI('Passkey registered successfully'); + } catch (error: unknown) { + setConsoleUI(`error registering user ${error}`); + throw error; + } + }; + + const loginPasskeyV2 = async () => { + if (!passkeyPlugin) { + throw new Error('Passkey plugin not initialized'); + } + await passkeyPlugin.loginWithPasskey(); + console.log('Passkey loginWithPasskey successfully', web3auth?.provider); + // const sfaProvider = new ethers.providers.Web3Provider(web3auth?.provider as any); + // const sfaAddress = await sfaProvider.getSigner().getAddress(); + // console.log('sfaAddress', sfaAddress); + // setWalletAddress(sfaAddress); + const finalPrivateKey = await web3auth?.provider!.request({ + method: 'eth_private_key', + }); + + setPrivateKey(finalPrivateKey as string); + setProvider(web3auth?.provider as any); + uiConsole('Passkey logged in successfully'); + }; + const getBalance = async () => { setConsoleUI('Fetching balance'); const balance = await RPC.getBalance(privateKey as string); @@ -169,15 +251,17 @@ export default function App() { }; const loggedInView = ( - +