DesmJS Web3Auth Mobile

This package provides a Signer capable of sign transactions with the private key provided from Web3Auth.

React Native package

This package should be used inside React Native projects. If you want to use the same functionalities inside a React Web app, use DesmJS Web3Auth Web instead.

Installation

To install the package, you can run the following command:

yarn add @desmoslabs/desmjs-web3auth-mobile

Setup

Setup Web3Auth

After installing @desmoslabs/desmjs-web3auth-mobile, you can follow the Web3Auth documentation to set Web3Auth in your project. NOTE You don't need to install @web3auth/react-native-sdk since this package already exports all the objects exported from @web3auth/react-native-sdk

Get Web3Auth client id

After setting up the project, you need to get a Web3Auth client id. You can find how to get one in the Web3Auth docs.

Usage

Initializing the Web3Auth client

Expo General

```ts
import * as WebBrowser from "expo-web-browser";
// You need to install this package with: yarn add expo-secure-store
import * as SecureStore from "expo-secure-store";
import { Web3Auth, LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@desmoslabs/desmjs-web3auth-mobile";

const resolvedRedirectUrl =
Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
? Linking.createURL("web3auth", {})
: Linking.createURL("web3auth", {scheme: scheme});

const clientId = "YOUR WEB3AUTH CLIENT ID";

const web3auth = new Web3Auth(WebBrowser, SecureStore, {
    clientId,
    network: OPENLOGIN_NETWORK.TESTNET, // or other networks
});
await web3auth.init();
```

Bare General

```ts
import * as WebBrowser from "@toruslabs/react-native-web-browser";
// You need to install this package with: yarn add react-native-encrypted-storage
import EncryptedStorage from 'react-native-encrypted-storage';
import { Web3Auth, LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@desmoslabs/desmjs-web3auth-mobile";

const scheme = "web3authrnbareauth0example"; // Or your desired app redirection scheme
const resolvedRedirectUrl = `${scheme}://openlogin`;

const clientId = "YOUR WEB3AUTH CLIENT ID";

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
    clientId,
    network: OPENLOGIN_NETWORK.TESTNET, // or other networks
});
await web3auth.init();
```

Expo Custom Auth

```ts
import * as WebBrowser from "expo-web-browser";
// You need to install this package with: yarn add expo-secure-store
import * as SecureStore from "expo-secure-store";
import { Web3Auth, LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@desmoslabs/desmjs-web3auth-mobile";

const resolvedRedirectUrl =
Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
? Linking.createURL("web3auth", {})
: Linking.createURL("web3auth", {scheme: scheme});

const clientId = "YOUR WEB3AUTH CLIENT ID";

const web3auth = new Web3Auth(WebBrowser, SecureStore, {
    clientId,
    network: OPENLOGIN_NETWORK.TESTNET, // or other networks
    loginConfig: {
        jwt: {
            name: "Web3Auth-Auth0-JWT",
            verifier: "web3auth-auth0-example", // Verifier's name from Web3Auth Dashboard
            typeOfLogin: "jwt",
            clientId: "294QRkchfq2YaXUbPri7D6PH7xzHgQMT", // Auth0 Client ID
        },
    },
});
await web3auth.init();
```

Bare Custom Auth

```ts
import * as WebBrowser from "@toruslabs/react-native-web-browser";
// You need to install this package with: yarn add react-native-encrypted-storage
import EncryptedStorage from 'react-native-encrypted-storage';
import { Web3Auth, LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@desmoslabs/desmjs-web3auth-mobile";

const scheme = "web3authrnbareauth0example"; // Or your desired app redirection scheme
const resolvedRedirectUrl = `${scheme}://openlogin`;

const clientId = "YOUR WEB3AUTH CLIENT ID";

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
    clientId,
    network: OPENLOGIN_NETWORK.TESTNET, // or other networks
    loginConfig: {
        jwt: {
            name: "Web3Auth-Auth0-JWT",
            verifier: "web3auth-auth0-example", // Verifier's name from Web3Auth Dashboard
            typeOfLogin: "jwt",
            clientId: "294QRkchfq2YaXUbPri7D6PH7xzHgQMT", // Auth0 Client ID
        },
    },
});
await web3auth.init();
```

Building a DesmosClient instance using Web3AuthSigner

import { DesmosClient, SigningMode, GasPrice, PrivateKeySigner } from "@desmoslabs/desmjs";
import { Web3AuthKeyProvider } from "@desmoslabs/desmjs-web3auth-mobile";
import { LOGIN_PROVIDER } from "@web3auth/react-native-sdk";


// Create the private key provider instance.
const privateKeyProvider = new Web3AuthKeyProvider(
  web3auth,
  {
    loginParams: {
      // Login provider that will be used to obtain the private key.
      loginProvider: LOGIN_PROVIDER.GOOGLE,
      // Redirect URL declared on the previous section.
      redirectUrl: resolvedRedirectUrl
    },
  }
);

// Create the PrivateKeySigner instance that will be used to sign the transactions.
const signer = new PrivateKeySigner(privateKeyProvider, SigningMode.DIRECT);

// Connect to the signer
await signer.connect();

const client = await DesmosClient.connectWithSigner('https://rpc.mainnet.desmos.network', signer, {
  // Common gas price in the Desmos mainnet.
  gasPrice: GasPrice.fromString("0.01udsm")
});

// Use the client to perform operations...

Disconnecting

When you have finished to perform the operations, or if the user wants to disconnect from your app, you can call the disconnect method to terminate the session.