This library enables cross-platform (Android/iOS/Web/Expo) ethereum-login for React Native using Tor.us, a service which provides a simple and seamless way to onboard users from their social login into the world of Web3 and DeFi.
It works by navigating from your application to the interface hosted by your specified providerUri, i.e. where your instance of express-torus is being served. Upon successful auth with one of the many supported authentication providers, your app will returned to with the authentication result, which is accessed via a hook. This includes standard authentication data (such as username and profile photo) in addition to Ethereum wallet credentials that can be used in transactions.
This project was created as part of the Gitcoin KERNEL Genesis Block.
Using npm:
npm install --save express-torus-react-native react-native-webviewUsing yarn:
yarn add express-torus-react-native react-native-webviewUsing Expo:
expo install express-torus-react-native react-native-webviewimport React from "react";
import {Platform, SafeAreaView, TouchableOpacity, ActivityIndicator, StyleSheet, Text} from "react-native";
import Torus, {useTorus} from "express-torus-react-native";
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: "lightgrey" },
error: { color: "red" },
});
const ConnectedAccounts = ({ ...extraProps }) => {
const { results, isLoggedIn, logout } = useTorus();
return (
<>
{isLoggedIn && <Text children="Connected accounts:" />}
{Object.entries(results).map(
([typeOfLogin, result], i) => (
<Text
key={i}
children={typeOfLogin}
/>
)
)}
{isLoggedIn && (
<TouchableOpacity
onPress={logout}
>
<Text children="Logout" />
</TouchableOpacity>
)}
</>
);
};
const SimpleTorusLogin = ({...extraProps}) => {
const {loading, results, login} = useTorus();
if (loading) {
return (
<ActivityIndicator />
);
}
return (
<TouchableOpacity
onPress={async () => {
try {
const result = await login();
console.warn(result);
} catch (e) {
console.error(e);
}
}}
>
<Text children="Login" />
</TouchableOpacity>
);
};
export default function App() {
return (
<Torus>
<SafeAreaView>
<SimpleTorusLogin />
<ConnectedAccounts />
</SafeAreaView>
</Torus>
);
}You can view the full list of supported authentication providers here.