How to Integrate OpenLogin and Avalanche
This tutorial will guide you over a basic example to integerate Openlogin authentication with avalanche.
We will go through a react app where user can login,create avalanche account, fetch account's balance and logout.
You can find the source code of this is example on Github.
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.
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
Once the sdk is initialized , then
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
POPUPmode 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
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.
Cde snippet given below ,connects with avalanche test network using avalanche library, imports a account with private key and fetches imported account balance of some previously deployed test asset.
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
redirectUrl etc. To know more about that checkout API Reference
You can checkout example of this example app here.the source code of this is example on Github.