Archived Content from Web3Auth Community
This topic was originally posted by yammonabd on 8/7/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.
I couldn’t find documentation, can anyone help with this?
@yammonabd Thanks for your patience.
You may check out some examples below:
Thank you, but the examples for Solana are with react not react native.
Please refer to this Integrate Web3Auth with the Solana Blockchain | Documentation | Web3Auth
This reference is for the Web , however, you can use Solana on Android , iOS , React Native , Flutter , & Unity as well. Please follow our reference for Ethereum, and similarly use Solana libraries that support the platforms to use the private key and make blockchain calls accordingly.
I’m unable to view this link https://web3auth.io/docs/connect-blockchain/react-native
The link does not exist , nor is it listed in our documentation.
When I click the link you provided Integrate Web3Auth with the Ethereum Blockchain | Documentation | Web3Auth and choose react native it shows
Also, should I use this lib for react native @web3auth/solana-provider ? or I have to look for a compatible one
Integrate Web3Auth with the Ethereum Blockchain in React Native | Documentation | Web3Auth This is the correct link.
Yes, you can use @solana/web3.js library with Web3Auth along with @web3auth/solana-provider package.
The mentioned code for init Solana requires a provider which is not returned in the react native SDK
const solanaWallet = new SolanaWallet(web3authProvider)
You may refer to this Solana Provider | Documentation | Web3Auth
I’m stuck at the same step where you are. Also opened a issue 20 days ago and still got no response : Unable to obtain provider.
If you make it work please share how you did it!
@yammonabd Hey, sorry for the delay. I’ll link the regular react native pnp SDK expo example here. As you see, we have created a ethersRPC.js that allows us to perform transactions on Ethereum chain using ethers.js. In a similar way, you can create a solanaRPC.js using the @solana/web3.js. Sorry for the misunderstanding ,we won’t be using a SolanaProvider for react native PnP SDKs, you’ll find these useful when using PnP web SDKs or SFA Core-kit SDKs.
I’ll link this as well, How to use @solana/web3.js in a React Native app
Hello,
I was able to obtain the SolanaProvider.
I will share my code for this.
import React, { useState, useEffect } from 'react'; import { TouchableOpacity, View, Text } from 'react-native'; import EncryptedStorage from 'react-native-encrypted-storage'; import * as WebBrowser from '@toruslabs/react-native-web-browser'; import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK, } from '@web3auth/react-native-sdk'; import { SolanaWallet, SolanaPrivateKeyProvider, } from '@web3auth/solana-provider';const WEB3 = {
URL: ‘test://openlogin’,
CLIENTID: ‘YOURCLIENTID’,
CHAIN: {
chainNamespace: ‘solana’,
chainId: ‘0x2’, // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet
rpcTarget: ‘https://api.testnet.solana.com’,
displayName: ‘Solana Test’,
blockExplorer: ‘https://explorer.solana.com’,
ticker: ‘SOL’,
tickerName: ‘Solana Token’,
},
};const Web3 = ({}) => {
const [web3auth, setWeb3Auth] = useState(null);
const [userInfo, setUserInfo] = useState(null);
const [privKey, setPrivKey] = useState(‘’);useEffect(() => {
const init = async () => {
try {
const auth = new Web3Auth(WebBrowser, EncryptedStorage, {
clientId: WEB3.CLIENTID,
network: OPENLOGIN_NETWORK.TESTNET,
chainConfig: WEB3.CHAIN,
});setWeb3Auth(auth); await auth.init(); if (auth?.privKey) { console.log('Re logged in'); setUserInfo(auth.userInfo()); setPrivKey(auth.privKey); } } catch (e) { console.log('error', e); } }; init();}, );
const getSolanaPublicKey = async () => {
const solanaPrivateProvider =
await SolanaPrivateKeyProvider.getProviderInstance({
chainConfig: WEB3.CHAIN,
privKey: web3auth.ed25519Key,
});
const solanaWallet = new SolanaWallet(solanaPrivateProvider.provider);
const accounts = await solanaWallet.requestAccounts();return accounts[0];};
const login = async provider => {
try {
if (!web3auth) {
console.log(‘Web3auth not initialized’);
return;
}
console.log(‘Logging in’);await web3auth.login({ loginProvider: LOGIN_PROVIDER[provider], redirectUrl: WEB3.URL, }); if (web3auth.privKey) { console.log(`Logged in ${web3auth.privKey}`); setPrivKey(web3auth.privKey); setUserInfo(web3auth.userInfo()); const publicKey = await getSolanaPublicKey(); return { privateKey: web3auth.privKey, userInfo: web3auth.userInfo(), publicKey, }; } } catch (e) { console.log(e.message); }};
const logout = async () => {
if (!web3auth) {
console.log(‘Web3auth not initialized’);
return;
}
console.log(‘Logging out’);await web3auth.logout(); if (!web3auth.privKey) { setUserInfo(undefined); setPrivKey(''); console.log('Logged out'); }
};
return (
<View>
<TouchableOpacity
onPress={async () => {
const { privateKey, publicKey, userInfo } = await login();
}}>
<Text>Login</Text>
</TouchableOpacity>
</View>
);
};
Don’t forget to add extraNodeModules in your metro.config file
//web3
stream: require.resolve('readable-stream'),
crypto: require.resolve('react-native-quick-crypto'),
//solana
https: require.resolve('https-browserify'),
http: require.resolve('stream-http'),
//zlib requires installing assert, util
zlib: require.resolve('browserify-zlib'),
url: require.resolve('url'),
Tell me if you have any question
Hello,
Thank you for your response.
Can you take a look at my shared example using SolanaProvider. Do you think it’s the wrong approach?
Huge thanks @yammonabd, I also share the same concern as you do. Is this the intended implementation? Is this secure considering that we are interacting with the private key directly?
Hey @yammonabd, are you able to make solana transactions? I’ll consult the team if this is a secure or the intended way.