Understanding Waves Signer — Nuxt.js integration step-by-step

Waves Signer in “Auth” Action 😄

Waves Signer is the new kid😏 on the block in the Waves Platform arsenal of technologies. In this article, I would explain how to authenticate a Nuxt.js using Waves Signer.

Note: The focus of this article is Waves Signer so I won’t be focusing more on how to set up Nuxtjs. You could check the docs for that.

Visual learner 👀?

Watch this youtube video where I explain Waves Signer and also used it to authenticate a Nuxt app.

A thorough take on Waves Signer

Let’s get Signing… ✍🏼

If the purpose of a thing is not known, abuse inevitable — Myles Munroe

Now in the spirit of the above quote…

What is Waves Signer?

Waves Signer is a Typescript/Javascript library for your web app. Signer is a protocol for interacting with an external Provider library that authenticates users with their accounts and signs transactions.

So see it as OAuth but for web 3.0— for dApps. With Waves Signer, you can authenticate a dApp web client both on desktop browsers and mobile browsers using the external providers(we will talk about these shortly).

Waves Keeper — Waves Signer Predecessor

Waves Signer is a successor for the Waves Keeper — a browser-based tool for interacting with the Waves blockchain for authenticating a user and also signing transactions. But the Waves Keeper is limited in such that it adds the complexity of the user having to install it in order to use it on their browser and on top of that, it can only be used on desktop browsers 😢.

An awesome introduction to Waves Keeper

Waves Keeper is a browser extension that allows users to manage their private keys and interact…

External Providers

Source: The official Waves Signer docs

I believe the above image illustrates the position of the external providers i.e the Signature Providers.

Waves Signer sends the requests or transactions to them and they sign or authenticate the transaction or request accordingly.

Below is a list of signature providers for Waves Signer:

• Waves.exchange client (the provider this article is focusing on)
• Waves Desktop Client
• Waves Keeper
• Ledger… or any other private key storage

Getting Started With Waves Signer

So that’s about the introduction of what Waves Signer is. Let’s get to the juice of how to use it. Now I would be focusing on using Waves Signer for authenticating a user in this article. You could see the docs of Waves Signer for the full usage of the library. Let’s get to it.

P.S: you can clone this repo to run our demo app.

Wavesafrica/waves-signer-auth-nuxt

Step 0:

Since we are using Nuxt.js for this demo, make sure you have created a fresh nuxtjs application using npx create-nuxt-app <project-name> (make sure you replace <project-name> with the actual name you want for the project)

Step 1:

From the above snippet, you could see we are npm installing @waves/signer and @waves.exchage/provider-web packages in our app. So the @waves/signer package is the protocol for authenticating while @waves.exchange/provider-web will be used by Signer for the authentication(as well as other functions Signer exposes).

Step 2:

Here we import both packages in ./src/pages/index.vue — this is the page where I’d be authenticating the user.

Step 3:

Now we instantiate both waves signer(which we call refer to with waves) and the provider. Notice while instantiating waves, we pass in an object with the key of NODE_URL to the constructor — Waves — the value of NODE_URL is the testnet URL for the Waves Blockchain(see this youtube video to understand the Testnet as well as other networks on the Waves Blockchain). We are also passing as a string to the Provider constructor, the waves.exchange testnet URL. Finally…

Step 4:

Over here, we pass to the setProvider method of the waves signer object the provider object created from the snippet above.

Summary of setting up Waves Signer

Alas! Waves Signer 😍 is all set up and ready for action.

My template

You could see It’s pretty easy. But focus on the link element cause that’s what would trigger the authentication. And I am adding a click event on it to call a method called callSigner and also the value of the link element is being gotten from a variable(state) of the index.vue page.

P.S: you’d see why I needed the isAuthenticated state as well soon enough

Now let’s see the callSigner method…

The meat of “it” all (pun intended 😃)

Whew! we are done. Now I believe what I am doing here is quite self-explanatory. But the summary is:

• I created an async method — callSigner
• Since I am pretty big on UX, the this.loginButtonText = “logging in…” is meant to give feedback to the user on what’s going on.
• I call the .login() method of the waves signer object and assign the return value to a variable called userData(since I don’t know when waves signer would return a value, I used async/await for asynchronicity).
• And using the isAuthenticated boolean value, I am able to reuse the same button to log out the user using the .logout() method of the waves signer object.

Conclusion

I hope I got your interest enough to try out Waves Signer. Do note there are other functions of waves signer which we didn’t look out in this article(but you can find them on the docs.

Also, you can watch this article in video form on youtube

Thanks to Vladimir Zhuravlev for reviewing this article. And less I forget 👼, here is the live demo app. Check it out(p.s: Create an account on https://testnet.waves.exchange if you don’t already have one)

Waves Signer Nuxt App

Resources:

Getting Started with Waves Signer

Signer | Waves documentation

Happy deploying 🚀 🚀 🚀