Skip to content

๐Ÿ” โš›๏ธ A React Native hook for simple decentralized key management using Tor.us, which serves as a combined social login and ethereum wallet!

License

Notifications You must be signed in to change notification settings

getuni/express-torus-react-native

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

56 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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

About

๐Ÿ” โš›๏ธ A React Native hook for simple decentralized key management using Tor.us, which serves as a combined social login and ethereum wallet!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published