express-torus-react-native

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.

🚀 Getting Started

Using npm:

npm install --save express-torus-react-native react-native-webview

Using yarn:

yarn add express-torus-react-native react-native-webview

Using Expo:

expo install express-torus-react-native react-native-webview

✍️ Usage

import 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.

✌️ License

MIT

getuni / express-torus-react-native Goto Github PK