How to Integrate OpenLogin and Arbitrum
This tutorial will guide you over a basic example to integerate Openlogin authentication with arbitrum.
We will go through a react app where user can login, create arbitrum wallet address,create ether wallet, trigger some methods that involve communicating between the L1 Ethereum chain and the L2 Arbitrum chain (i.e., depositing and withdrawing assets), 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.
ethers js sdk can be used to connect with eth kovan testnet nodes and arbitrum
kovan4 testnet operator nodes.
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 derived from openlogin to create an eth wallet and a arbitrum wallet.
After this we can use generate a bridgeInstance
Bridge which is a contructor
arb-ts package to make transactions over ethereum and arbitrum
In the next step, we are going to deposit some test ether from ethereum to arbitrum rollup, so it is suggested to get test ether from kovan faucet before proceeding.
Up to this point , we have arbitrum wallet account generated using openlogin and
bridgeInstance initialized using wallets and pre deployed testnet
bridge smart contract addresses.
Now we can make transactions using
token-bridge-sdk sdk which provides a react
useArbTokenBridge using which we can access methods that involve
communicating between the L1 Ethereum chain and the L2 Arbitrum chain (i.e.,
depositing and withdrawing assets) .
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 arbitrum kovan4 testnet node and ethereum kovan testnet node provider
- Create and initialize openlogin instance
- Using private key to import eth signer and arbitrum signer wallet
- Getting test ether from kovan testnet
- Deposit eth to arbitrum and withdraw eth from arbitrum
- Log out handler