How to Integrate OpenLogin and zkSync
This tutorial will guide you over a basic example to integerate Openlogin authentication with zkSync.
We will go through a react app where user can login,create zkSync wallet address,ether wallet, fetch committed eth balance from zkSync account 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
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
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.
openlogin.login, your application will have access to the user's
private key at
In this example, we are using private key derivef from openlogin to create an eth wallet and a zkSync wallet.
After this we can use
syncWallet to make transactions over ethereum and zkSync
You can read more about zkSync sdk here
In the next step, we are going to unlock zkSync wallet which requires to make a transaction, so it is suggested to get test ether from rinkeyby faucet before proceeding.
To control assets in zkSync network, an account must register a separate public key once.
Up to this point , we have a zkSync wallet account generated using openlogin.
Now we can make transactions using zkSync sdk. We will demonstrate
withdraw eth functionality.
We can deposit eth by using
syncWallet which was generated after login with
depositToSyncFromEthereum function of zkSync will trigger a
blockchain transaction so make sure you have sufficient eth to pay tx fee as
Similarly you can create a withdrawal request to withdraw eth from zkSync account back to ethereum.
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
You can checkout example of this example app here.the source code of this is example on Github.
- Register your OpenLogin application
- Let's get started with code by installing depedencies using npm
- Connect with zkSync operator node and ethereum node provider
- Create and initialize openlogin instance
- Using private key to import zkSync signer wallet and eth wallet
- Get ethereum testnet ether
- Unlock zkSync wallet
- Deposit eth to zkSync and withdraw eth from zkSync
- Log out handler