Skip to main content
Blockchain:
Language/Framework:

Wallet

  • OpenLogin
  • Wallet
  • CustomAuth

Install Torus Embed SDK

Install Torus Embed SDK using a script tag, you can use either jsdelivr or unpkg.

<script src="https://cdn.jsdelivr.net/npm/@toruslabs/torus-embed"></script>

Instantiate the SDK

Instantiate Torus Embed SDK by creating an instance of class Torus and call its init function.

const torus = new Torus();await torus.init();

See API reference for more details.

Customize login providers (optional)

You can customize login providers, e.g. using your Google/Facebook client ID instead of Torus's one.

await torus.init({  // ...  loginConfig: {    google: {      clientId: "<YOUR GOOGLE CLIENT ID>",      // ...    },  },});

See API reference for more details.

Whitelabel/customize brand logo and colors (optional)

You can also whitelabel or customize logo and colors to show your brand in the Wallet:

await torus.init({  // ...  whitelabel: {    theme: {      isDark: false,      colors: {        torusBrand1: "#282c34",      },    },    logoDark: "https://tkey.surge.sh/images/Device.svg", // Dark logo for light background    logoLight: "https://tkey.surge.sh/images/Device.svg", // Light logo for dark background    topupHide: false,    featuredBillboardHide: true,    disclaimerHide: true,    defaultLanguage: "en",  },});

See API reference for more details.

Trigger user login

Simply call torus.login to trigger user login wherever it makes sense in your application lifecycle:

Calling login without any parameter will open a modal for user to select all supported logins:

await torus.login();

See API reference for more details.

Get user info

After the user is login, you can retrieve the user's information by calling torus.getUserInfo:

const userInfo = await torus.getUserInfo();/*  email: string;  name: string;  profileImage: string;  verifier: string;  verifierId: string; */

See API reference for more details.

Integrate with Web3/ether.js

Integrating with the Torus Wallet gives you a provider, which can be wrapped by the Web3. This instance functions similar to Metamask's Web3 provider. We have taken great care to make it compatible with Metamask's Web3 interface.

const web3 = new Web3(torus.provider);

Log user out

To log the user out from your application, call torus.logout or torus.cleanUp to also clean up the Torus button and SDK installation.

await torus.logout();
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Torus Wallet Integration</title>  </head>  <body>    <h1>Torus Wallet Integration</h1>    <div>      <p id="text">Loading...</p>      <p id="error"></p>      <p id="address"></p>      <p id="balance"></p>      <button id="login">Login</button>      <button id="logout">Logout</button>    </div>    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>    <script src="https://cdn.jsdelivr.net/npm/@toruslabs/torus-embed"></script>    <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.js"></script>    <script>      (async function init() {        $("#login").hide();        $("#logout").hide();
        const torus = new Torus();        window.torus = torus;
        await torus.init(/*        // (Optional) Initialization options        {          // Customize login providers          loginConfig: {            google: {              clientId: "<YOUR GOOGLE CLIENT ID>",              ...            }          },          // Customize brand logo, colors, and translations          whitelabel: {            theme: {              isDark: false,              colors: {                torusBrand1: "#282c34",              },            },            defaultLanguage: "en",            logoDark: "https://tkey.surge.sh/images/Device.svg", // Dark logo for light background            logoLight: "https://tkey.surge.sh/images/Device.svg", // Light logo for dark background          }        }        */);
        try {          const user = await torus.getUserInfo();          $("#text").text("Logged in as " + user.name + ".");          $("#logout").show();          await initWeb3();        } catch (error) {          $("#text").text("Didn't log in.");          $("#login").show();        }      })();
      async function initWeb3() {        const web3 = new Web3(window.torus.provider);        const address = (await web3.eth.getAccounts())[0];        const balance = await web3.eth.getBalance(address);        $("#address").text("Address: " + address + ".");        $("#balance").text("Balance: " + balance + ".");      }
      $("#login").click(function (event) {        window.torus          .login()          .then(function () {            return initWeb3();          })          .then(function () {            return window.torus.getUserInfo();          })          .then(function (user) {            $("#text").text("Logged in as " + user.name + ".");            $("#error").hide();            $("#logout").show();            $("#login").hide();          })          .catch(function (err) {            $("#error").text(err.message);          });      });
      $("#logout").click(function (event) {        window.torus          .logout()          .then(function (res) {            $("#text").text("Logged out.");            $("#address").text("");            $("#balance").text("");            $("#login").show();            $("#logout").hide();          })          .catch(function (err) {            $("#error").text(err.message);          });      });    </script>  </body></html>