How to integerate Openlogin with an Solana dapp.

By April 17, 2021DApps
Click here to view original web page at docs.tor.us
Cover

Introduction

This tutorial will guide you over a basic example to integerate Openlogin authentication with solana blockchain.

We will create a example react app where user can login, create solana wallet address, checks wallet balance and logout.

You can find the source code of this is example on Github.

Register your OpenLogin application

In order to use OpenLogin SDK, you'll need to create a project in Developer Dashboard and get your client ID.

App registration is not required for localhost development.

Let's get started with code by installing depedencies using npm

To start with using openlogin with a solana dapp , you need to install Openlogin , Solana/Web3.js sdk and @toruslabs/openlogin-utils library to derive ED25519 key which is compatible with solana.

Initialize solana web3 connection

import { Connection, clusterApiUrl } from "@solana/web3.js";

const networks = {

mainnet: { url: "https://solana-api.projectserum.com", displayName: "Mainnet Beta" },

devnet: { url: clusterApiUrl("devnet"), displayName: "Devnet" },

testnet: { url: clusterApiUrl("testnet"), displayName: "Testnet" },

const solanaNetwork = networks.devnet;

const connection = new Connection(solanaNetwork.url);

Create and initialize openlogin instance

Start with creating a instance of openlogin class and initialize it using openlogin.init() when application is mounted. After initialization it checks if sdk has private key then user is already logged in.

We are using two options while creating openlogin class instance:-

  • clientId: clientId is a public id which is used to to identify your app. You can generate your client id from developer dashboard. For localhost you can use any static random string as client id.

  • network: network can be testnet or mainnet.

useEffect(() => {

setLoading(true)

const sdkInstance = new OpenLogin({

clientId: "YOUR_PROJECT_ID",

network: "testnet"

});

async function initializeOpenlogin() {

await sdkInstance.init();

if (sdkInstance.privKey) {

...

...

}

setSdk(sdkInstance);

setLoading(false)

}

initializeOpenlogin();

}, []);

Login

Once the sdk is initialized , then openlogin.login will be called when user clicks login button.

It will start the login flow for the user. Openlogin sdk provides two UX modes (ie POPUP and REDIRECT) for login flow. You can use either depends on your application UX by setting up uxMode option in login function, default is redirect.

Note: POPUP mode is coming soon.

In redirect mode user will be redirected completely out of app and will be redirected back to redirectUrl after successfull authentication, application will have access to private key as openlogin.privKey after intializing openlogin instance.

In PopUp mode, openlogin authenication window will open as a popup and app will get private key when openlogin.login promise will resolve.

This example is compatible with both redirect and popup ux modes.

In the given code snippet, openlogin.login function is getting called along with two options:-

  • loginProvider: It specifies the login method which will be used to authenticate user. You can checkout api reference to know about all supported and custom login provider values.

  • redirectUrl: User will be redirected to redirectUrl after login.

Checkout api reference for other options available to pass in openlogin constructor and login function.

Use the private key with solana/web3.js

After login application will have access to the user's private key at openlogin.privKey. Before using this key with solana/web3.js, we just need to make this key compatible with solana. In the code snippet below getED25519Key is imported from @toruslabs/openlogin-utils library.

Now we have a key which can be used use create a account using solana/web3.js. Functionality to generate solana account is implemented in getAccountInfo function which first creates a account by inputing the private key to Account class of solana/web3.js , creates a connection to solana blockchain and fetches account's balance from blockchain. You can use this private key to do anything like signing transactions and all the functionality supported by solana/web3.js.

Now we have a solana compatible key which can be used with solana/web3.js. In this example we are using it to create a user account and to fetch user's account balance from blockchain.

Logging out user:-

In order to logout user you needs to call logout function available on sdk instance. Logout function will clears the sdk state and removes any access to private key on frontend. You can pass various other options in logout function like fastLogin , redirectUrl etc. To know more about that checkout api reference

DONE!!

You can checkout example of this example app here.the source code of this is example on Github.

Leave a Reply