Simplify multi-wallet dApp integrations with Lumos’ login widget SDK | BUIDLer Tools Essentials
Even if Web3 adoption is on the rise, there are hurdles that budding developers come across. Something as basic as providing the user with the option of logging in with multiple wallets as part of their dApp.
This is where a plug-and-play component can literally get them over the line, particularly when it comes to submitting the implementation for their use cases in regular hackathons. This is what our DevRel team at Lumos Labs has observed during these events.
But before we delve into the solution, let’s understand how authentication takes place in dApps.
Your First Look at Web3 Wallet Authentication
Let’s start with the obvious: when you log into any normal app — Google, for example — your unique username, password and 2FA comes into play if you want to access your account on said device.
In stark contrast, login authentication in Web3 occurs differently: we make use of Web3 wallets that do away with passwords and emails and use public key encryption and wallet account information instead. A prominent example of this is Metamask, which is extremely popular but isn’t the only wallet available.
In fact, there are wallets classified as hot and cold wallets or hardware and software wallets, so Web3 users have a variety to choose from. Still, software wallets remain the popular choice.
Now, let’s understand how authentication works in the case of web3 wallets. As soon as you add your Web3 wallet public account address to log into a dApp, a request for a digital signature will appear on the device on which you have installed your wallet, proving that you have access to the private key and to the account itself.
This is much safer than the usual email and password login approach, provided only you have access to your wallet account or its private key. Clearly, the step of Web3 authentication is a vital first one that can literally open up a whole new world for users even if it performs authentication differently.
What should also be abundantly clear is that developers should take this business of adding Web3 wallet authentication seriously. In fact, it’s not advisable to just provide only a Metamask wallet login option but add a few more so as to appeal to a broader base of Web3 users.
Why Lumos Labs’ Multi-Wallet Login Widget SDK Can Make a Difference
This brings us to the issue that a number of Web3 developers have faced when working on their dApps: at best, they often have to cobble together code so as to enable Web3 authentication for a number of wallets. At worst, they might not be able to provide the multi-wallet login widget for their users at all.
With this issue disrupting progress made by developers at a number of Lumos Labs’s hackathons, building the SDK for such a login widget was an obvious choice. Even if it seems rudimentary, it only seems right to build such a solution, as true Web3 ecosystem enablers would do.
So, what does this solution offer developers?
Developers do not have to build such a component themselves in order to offer the multi-wallet login option. Adding this simple yet effective login widget as part of their dApp will ensure that their users can use their MetaMask and Coinbase wallets to sign in. For now. More options later.
Which begs the question: how difficult is it to add this widget to your dApp? Let’s find out, shall we?
Steps to Adding this Multi-Wallet Login Widget in React
Now, in order for you to add this login component to your dApp, there are a few things that you have to do. Assuming that you have Node Package Manager (npm) installed, you can access this library and use its code in your dApp project by running this command from the terminal:
You can find the code for this login component at this Github link. In order to use this code in your dApp, copy and paste the following code in the App.js file in React:
Of course, if you think that several more wallets should be added to this login widget SDK or if you’d like to report a bug, please share your thoughts at the Lumos Metaverse Discord Server.
Also, if you happen to use this SDK and would like to share your thoughts, let us know what you think in the comments section.
That said, we’re building a developer-centric metaverse for you to learn, earn and get hired. Sign up to join the Lumos Metaverse Whitelist for exclusive access.
