Wallet
- OpenLogin
- Wallet
- CustomAuth
Install Torus Embed SDK
Instantiate the SDK
Instantiate Torus Embed SDK by creating an instance of class Torus
and call
its init
function.
- Simple
- More options
const torus = new Torus();
await torus.init();
const torus = new Torus({
buttonPosition: "top-right", // The position of the Torus button. Supported values are top-left bottom-left top-right bottom-right.
});
await torus.init({
showTorusButton: true, // Set to false to hide Torus button.
enabledVerifiers: {
facebook: false, // Hide certain types of logins (default will show all)
},
loginConfig: {
// Customize login provider configurations.
google: {
description: "Login with google",
clientId: "CLIENT_ID",
logoHover: "https://sample.com/google-logo-hover.svg",
logoLight: "https://sample.com/google-logo-light.svg",
logoDark: "https://sample.com/google-logo-dark.svg",
showOnModal: true,
},
// Customize brand logo, colors, and translation
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.
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:
- Modal selector
- Specific login
Calling login
without any parameter will open a modal for user to select all
supported logins:
await torus.login();
You can also directly trigger a certain type of login by specifying a verifier
:
await torus.login({
verifier: "reddit"
});
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.
- Logout
- Clean up
await torus.logout();
await torus.cleanUp();
- index.html
<!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>