⏫Install and configure Widget

Introducing the Sesame Labs Widget and Widget API! In this section we’ll cover off on how to deploy Widget and configure it via Widget API.

Let’s get right to it!

Sign-up for Community Hub today

Widget deployment

Our no-code/low-code approach is embodied in Widget. Deployment onto any web property is as simple as adding a script to the <head> tag of your index.html file:

<script
    async
    src="https://sesamelabs.xyz/api/static/scripts/sesameWidget.js"
    data-sesame-id="YOUR_APP_ID"
></script>

Widget configuration

Once deployed, you can configure Widget via the API. You’ll find the configuration parameters via the window.Sesame object on the client side

Required widget keys

PUBLIC_KEY - stored on client server (you)

PRIVATE_KEY - stored on vendor server (Sesame Labs)

How to get the keys?

Get in touch with us to obtain your keys

The client must path secure data in encrypted form. Every payload with sensitive data should be encrypted with PUBLIC_KEY

Methods available via window.Sesame

Widget API uses asymmetric cryptography to pass secure data from client to vendor.

One aspect to note when calling a window.Sesame method. It may take some time to load, so add null safety to avoid errors.

Here’s an example of calling a window.Sesame method:

const isWidgetReady = () => typeof window !== 'undefined' && 'Sesame' in window

if (isWidgetReady()) {
	// call API methods
}

1) Open/close

Property name - open/close

Action - open/close widget

Returns - void

Usage

window.Sesame.open()
window.Sesame.close()

2**) Hide/show**

Property name - hide

Action - hide the widget from page

<aside> 💡 Note: If the widget is hidden open/close will not open the widget. need to call show() firstly

</aside>

Returns - void

Usage

window.Sesame.hide()
window.Sesame.show()

3) Login

(🔑 0 - secure payload. This should be encrypted.)

Property name - login

Action - authenticated user into widget based on data from client web app

Returns - void

Usage

const authData = {
	payload: 'VU7CJfh7jivtbeP7dlbPe5QkCRo3kRzuUJWiAu/vtmhF+kl9+s6d7p4XMx3wlLCPHMWMGEtQgs+oz1ePVehYgd6m+MXuKiGeBGjk7pPjlh/iQrjT7y/uhftuccZNG6H0LepW8kF2coQPu6QDtmA7qDOPkD02m2bI0LtShaCZ8M6xydM=',
  publicKey: 'yGsboXRCQ/I1W9hLWP1cM1mRWxA5wyX0ShowXcj+V0k=',
  nonce: 'PwZPaFup7uhgmq8HOoX+IZtDSpL66iau'
} - comes from client BE side
window.Sesame.login(authData)

How to get authData

Simply call receiverPublicKey (PUBLIC_KEY is only available by contacting Sesame Labs)

import nacl from 'tweetnacl'
import naclUtil from 'tweetnacl-util'

const msgParams = {
	walletAddress: '0x1234', // wallet address of the user to log in
  nonce: 'any string', //signed nonce
}

// function call should be next

const aData = encrypt('PUBLIC_KEY', JSON.stringify(msgParams))

export function encrypt(receiverPublicKey: string, msgParams: string) {
  const ephemeralKeyPair = nacl.box.keyPair()
  const pubKeyUInt8Array = naclUtil.decodeBase64(receiverPublicKey)
  const msgParamsUInt8Array = naclUtil.decodeUTF8(msgParams)
  const nonce = nacl.randomBytes(nacl.box.nonceLength)
  const encryptedMessage = nacl.box(
    msgParamsUInt8Array,
    nonce,
    pubKeyUInt8Array,
    ephemeralKeyPair.secretKey,
  )

  return {
    payload: naclUtil.encodeBase64(encryptedMessage),
    publicKey: naclUtil.encodeBase64(ephemeralKeyPair.publicKey),
    nonce: naclUtil.encodeBase64(nonce),
  }
}

4) trustLogin

Property name - trustLogin

Action - login user with current selected Ethereum wallet address

Returns - boolean

Usage

window.Sesame.trustLogin()

5) isLoggedIn

Property name - isLoggedIn

Action - check cookies validity. if not valid it will logout user from the widget automatically

Returns - boolean

window.Sesame.isLoggedIn()

Sign-up for Community Hub today

PreviousSesame Labs WidgetNextDiscord bot

Last updated