@toruslabs/torus-direct-web-sdk

Direct login with torus to get user private key

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@toruslabs/torus-direct-web-sdk
66125.0.3a year ago3 years agoMinified + gzip package size for @toruslabs/torus-direct-web-sdk in KB

Readme

Torus-direct-web-sdk
npm version npm

Introduction

This repo allows web applications to directly retrieve keys stored on the Torus Network. The attestation layer for the Torus Network is generalizable, below is an example of how to access keys via the SDK via Google.

Features

  • Typescript compatible. Includes Type definitions
  • All API's return Promises

Installation

Bundling

This module is distributed in 3 formats
  • commonjs build dist/directWebSdk.cjs.js in es5 format
  • commonjs build dist/directWebSdk-bundled.cjs.js in es5 format with problematic packages bundled (benfits non-webpack users)
  • umd build dist/directWebSdk.umd.min.js in es5 format without polyfilling corejs minified
  • umd build dist/directWebSdk.polyfill.umd.min.js in es5 format with polyfilling corejs minified

By default, the appropriate format is used for your specified usecase You can use a different format (if you know what you're doing) by referencing the correct file
The cjs build is not polyfilled with core-js. It is upto the user to polyfill based on the browserlist they target

Directly in Browser

CDN's serve the non-core-js polyfilled version by default. You can use a different
jsdeliver
<script src="https://cdn.jsdelivr.net/npm/@toruslabs/torus-direct-web-sdk@4"></script>

unpkg
<script src="https://unpkg.com/@toruslabs/torus-direct-web-sdk@4"></script>

Tips for NUXT

This is a plugin that works only on the client side. So please register it as a ssr-free plugin.

Usage

For more in-depth documentation, please refer to docs here
Add @toruslabs/torus-direct-web-sdk to your project:
To allow your web app to retrieve keys:
Install the package
`npm i @toruslabs/torus-direct-web-sdk`
or
`yarn add @toruslabs/torus-direct-web-sdk`
Direct Web Sdk supports two modes of login (uxMode: "popup" and uxMode: "redirect") (default: popup)

Popup Flow:

  1. Serve service worker from baseUrl where baseUrl is the one passed while instantiating DirectWebSdk for specific login (example http://localhost:3000/serviceworker/). If you're already using a sw, pls ensure to port over the fetch override from our service worker

  1. For browsers where service workers are not supported or if you wish to not use service workers, create and serve redirect page from baseUrl/redirect where baseUrl is the one passed while instantiating DirectWebSdk for specific login ( example http://localhost:3000/serviceworker/)

  1. At verifier's interface (where you obtain client id), please use baseUrl/redirect (eg: http://localhost:3000/serviceworker/redirect) as the redirecturi where baseUrl is the one passed while instantiating DirectWebSdk

  1. Instantiate the package

const torus = new DirectWebSdk({
  baseUrl: "http://localhost:3000/serviceworker/",
  network: "testnet", // details for test net
});
await torus.init();

  1. Trigger the login with your own client id (This opens a popup of OAuth provider page)

const loginDetails = await torus.triggerLogin({
  typeOfLogin: "google",
  verifier: "YOUR VERIFER DEPLOYED BY TORUS",
  clientId: "MY CLIENT ID GOOGLE",
});

Note: If you're using redirectToOpener, modify the origin of postMessage from "http://localhost:3000" to your hosted domain in redirect.html and sw.js

Redirect flow

  1. At verifier's interface (where you obtain client id), please use baseUrl/auth (eg: http://localhost:3000/auth) as the redirecturi where baseUrl is the one passed while instantiating DirectWebSdk

  1. Instantiate the package

const torus = new DirectWebSdk({
  baseUrl: "http://localhost:3000/serviceworker/",
  redirectPathName: "auth",
  network: "testnet", // details for test net
  uxMode: "redirect"
});
await torusdirectsdk.init({ skipSw: true });

  1. Trigger the login with your client id. (This redirects the user to OAuth provider page)

await torus.triggerLogin({
  typeOfLogin: "google",
  verifier: "YOUR VERIFER DEPLOYED BY TORUS",
  clientId: "MY CLIENT ID GOOGLE",
});

  1. The OAuth login completes and the OAuth provider will redirect you to baseUrl/auth with hashParams
In this page, use the following code to get the login details
const torusdirectsdk = new DirectWebSdk({
  baseUrl: location.origin,
  redirectPathName: "auth",
  uxMode: "redirect",
  network: "testnet"
});
const loginDetails = await torusdirectsdk.getRedirectResult();

  1. Once you get the login details, you can choose to take the user anywhere else in your app

Examples

Please refer to examples
Hosted Example for testing

Info

The following links help you create OAuth accounts with different login providers

For other verifiers,

Best practices

  • Due to browser restrictions on popups, you should reduce the time taken between user interaction and the login popups being opened. This is highly browser dependent, but the best practice for this is to separate the initialization of the SDK and the user login method calls.

FAQ

Question: My Redirect page is stuck in iOS Chrome
Answer: iOS Chrome doesn't support service workers. So, you need to serve a fallback html page redirect.html Please check if redirect.html is being served correctly by navigating to baseUrl/redirect#a=123. It should show a loader
For nginx, here is a simple server configuration
location ~* (/serviceworker/redirect) {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header Content-Security-Policy "default-src https:; script-src https: 'unsafe-inline' 'unsafe-eval'; style-src https: 'unsafe-inline';";
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";
        add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";
        default_type "text/html";
        alias PATH_TO_REDIRECT_HTML_FILE;
        autoindex off;
}

Alternatively, you can configure your redirect url to include redirect.html by passing in an option redirectPathName: 'redirect.html' while instantiating the sdk. Please remember to change the oauth redirect url to reflect this change

Question: Discord Login only works once in 30 min

Answer: Torus Login requires a new token for every login attempt. Discord returns the same access token for 30 min unless it's revoked. Unfortunately, it needs to be revoked from the backend since it needs a client secret. Here's some sample code which does it
const axios = require("axios").default;
const FormData = require("form-data");

const { DISCORD_CLIENT_SECRET, DISCORD_CLIENT_ID } = process.env;
const { token } = req.body;
const formData = new FormData();
formData.append("token", token);
await axios.post("https://discordapp.com/api/oauth2/token/revoke", formData, {
  headers: {
    ...formData.getHeaders(),
    Authorization: `Basic ${Buffer.from(`${DISCORD_CLIENT_ID}:${DISCORD_CLIENT_SECRET}`, "binary").toString("base64")}`,
  },
});

Question: How to initialise web3 with private key (returned after login) ?

Answer: One can use privateKeyToAccount method to initialise web3 with a privatekey. If you are supplying a hexadecimal number, it must have 0x prefix in order to be in line with other Ethereum libraries.
web3.eth.accounts.privateKeyToAccount(PRIVATE_KEY);

Requirements

  • This package requires a peer dependency of @babel/runtime
  • Node 12+

Note

If you are using the redirectToOpener option, you must update your redirect.html to allow whitelisted URIs