Get Started

Follow this guide to use our Client JavaScript SDK in your web application to implement your authentication logic

Step 1: Installation

Download SDK to your project:

NPM
Yarn
CDN
NPM
npm i --save fortmatic
Yarn
yarn add fortmatic
CDN
<script src="https://cdn.jsdelivr.net/npm/fortmatic/dist/fortmatic.js"></script>

Step 2: Set up Your Fortmatic Whitelabel SDK Instance

If you don't have a Fortmatic app already, you will need to sign up or log into your Fortmatic dashboard and create an app to get your API keys.

Once you have an API key, you can create a Fortmatic instance, then instantiate with Whitelabel SDK via Phantom:

import Fortmatic from 'fortmatic';
const fmPhantom = new Fortmatic.Phantom('YOUR_API_KEY'); // ✨

Step 3: User Authentication

In the example below, create a button that takes in a use email. Once the button is clicked, Fortmatic will send a magic link to the specified email. As soon as that link is opened in a browser, loginWithMagicLink will resolve with the logged-in user object.

<input type="text" id="user-email" placeholder="Enter your email!" />
<button onclick="handleLoginWithMagicLink()">
const handleLoginWithMagicLink = async () => {
const email = document.getElementById('user-email').value;
const user = await fmPhantom.loginWithMagicLink({ email });
console.log(await user.isLoggedIn()); // => true
console.log((await user.getMetadata()).publicAddress); // You should use this as a unique user Id.
};

You don't need to store user passwords, or even keep a user table. The next time your user logs in with the same email, the same publicAddress (user id) will be returned.

If you want a complete whitelabel experience without the default loader UI, you can configure your loginWithMagicLink method as the following:

const user = await fmPhantom.loginWithMagicLink({
email,
showUI: false
});

Step 4: Send a Transaction!

Fortmatic is compatible with web3.js and ethers.js, so if you dApp already works with the original Fortmatic or MetaMask, it will automatically work with our Whitelabel SDK!

const fmPhantom = new Fortmatic.Phantom('YOUR_API_KEY'); // ✨
web3 = new Web3(fmPhantom.getProvider()); // Instantiate web3 object
// Send a transaction using web3
web3.eth.sendTransaction({
from: web3.eth.accounts[0],
to: '0x22b05D73097c0a2440D29aF61db4b4eD3803e55E',
value: web3.utils.toWei('1', 'ether')
})

What's cool about whitelabel is that sending transaction or signing a message that would normally result in a popup will no longer show up, so you can own your UX end-to-end!

Read more on how to use Fortmatic with more web3 methods.

Under The Hood

The Fortmatic SDK, upon a successful user login, generates a Decentralized IDentity Token (DID Token) upon successful user login to represent a valid login session for the given user. You can optionally use our Admin SDK to securely validate the given user session via the DID token, with your custom backend server!