Secure your dApps with Asgardeo

Brion Mario
Identity Beyond Borders
5 min readJan 8, 2023

--

Ethereum is a decentralized, open-source blockchain platform that was created in 2015 by Vitalik Buterin. It is a blockchain-based platform that enables the creation of smart contracts and decentralized applications (DApps).

Decentralized applications (DApps) are applications that are built on top of a decentralized, distributed ledger or blockchain. They are designed to operate in a decentralized manner, meaning that they do not rely on a central authority or intermediary to function.

As introduced in a previous blog post 👈, Asgardeo is an IDaaS brought to you by the makers of the popular WSO2 Identity Server. Asgardeo helps you build secure and frictionless authentication. So, you can focus on building your app.

Asgardeo recently released a new Sign In With Ethereum(login.xyz) integration that would benefit dApp developers to secure their applications with very little effort.

💡 What is Sign In With Ethereum (Login.xyz)?

Sign-In with Ethereum is a new form of authentication that enables users to control their digital identity with their Ethereum account and ENS profile instead of relying on a traditional intermediary.

Discover more from here .

🌟 Let’s see how we can use Asgardeo to connect to an application with our Ethereum wallet.

Configure Asgardeo

Let’s create a connection on Asgardeo the Console with the Sign In With Ethereum(SIWE) template.

If you are not yet registered on Asgardeo, follow this guide and set up your workspace inorder to follow this guide.

  1. Navigate to Develop > Connections and click on the Create Connection button.
Connections view on Asgardeo Console

2. Select the Sign In With Ethereum connection type.

Connection types on Asgardeo Console

3. In the wizard, we need to submit the Client ID and the Client secret of an OIDC client registered on the ethereum sign in provider (oidc.signinwithethereum.org).

We can simply use the autogenerated curl command in the help section to easily register a client.

Copy the curl and execute it on a terminal on your local machine. And grab the client_id and client_secret from the response and add it in the wizard and click on the Finish button.

Sign In With Ethereum Wizard
Response received when the curl command is executed

4. Congrats 🎉! Now you have a SIWE integration configured on Asgardeo. How easy was that 😉.

Newly created SIWE integration

Connect your dApp

Now that we have configured the connection on Asgardeo, it’s time to connect it to our application.

I’m going to use a demo application that i’ve developed called Drogo NFT Marketplace which is a dummy NFT marketplace application that has items to be bought with Ethereum.

I’ve used the Asgardeo Auth React SDK and connected my application already with Asgardeo. You can follow the official documentation and connect your own application accordingly.

By default, the application supports basic login (username & password), Facebook, GitHub & Google login.

Drogo NFT Landing
Drogo NFT Login

Let’s make this experience better by connecting our newly created SIWE integration.

  1. Go to Applications > Drogo NFT and navigate to the Sign-in Method tab.
  2. Click on the Add Authentication button.
Sign-in Method tab of the application

3. Select the newly created connection and click on the Add button.

Adding the `Sign in With Ethereum` connector

4. Click on the Update button.

Update the configurations

Let’s initiate a login request in the application to see if our integration works.

Drogo NFT Login with SIWE as a login option

⭐️ Now we can see that Sign in With Ethereum appears as a login option for the application.

When you click on it, you’ll land on the sign-in page of the oidc.signinwithethereum.org and in there, click on the Sign-In with Ethereum button again.

Login screen of `oidc.signinwithethereum.org`

And then you’ll be presented with a wallet selection. Select your prefered wallet. I’m going to use MetaMask wallet for the demo.

Once you select MetaMask , MetaMask ‘s browser extension will ask you to sign your request. Click on the Sign button to proceed.

MetaMask Signature request

Now you’ll be redirected to your application 🎉 .

Additionally, you can decode the id_token from the token response and see what kind of information you can gather from it.

Sample decoded id_token

To see a hosted demo, go to https://drogo-nft-demo.web.app and click on Sign In.

Concluding Remarks 🔚

I hope that you found this blog post useful.

Additionally, you can also refer to the official documentation on the SIWE integration here.

If you have any further requests or suggestions, please reach out to the team through stackoverflow, discord or via asgardeo-help@wso2.com.

Signing off… ✌️❤️

--

--