Build Apps with Plug: Levels 1 to 3 🧰

Follow our ‘build an app with Plug’ guides to learn the basics of building apps on the Internet Computer, and integrating them with Plug for authentication/transactions!

Published in

Plug

6 min readAug 6, 2021

Just getting started building on the Internet Computer? Plug can be a great starting point! By integrating into Plug, you can solve core features of your project (authentication & identity — in-app transactions) by just interacting with the Plug extension & the user’s wallet in Plug.

We’ve been building several application examples using Plug at different levels. This way, you can go from zero knowledge to building an app that uses Plug to authenticate users, trigger in-app ICP transactions, and sign canister requests using the PlugAgent.

Let’s do a quick recap of what Plug is for users and developers. You can skip this part by clicking here if you know it already 😉

What is Plug for a general user? 🌈

Plug is a browser wallet extension for the Internet Computer. You install it on your browser, and it allows you to hold, use, and transfer ICP and other Internet Computer tokens in a browser wallet experience.

Your wallet address in Plug? A Principal ID that is both your wallet address and the identifier that will serve as your identity in IC applications.

Much like MetaMask on Ethereum, you can use the extension to log into applications that support it as an authentication provider and use your tokens in those applications.

What is Plug for a developer? 🧰

So, if users can use Plug to sign into integrated apps with their wallet/identity in Plug, and use their tokens in-app…

As a developer, you can integrate Plug to enable just that! Plug is an authentication provider and provides pluggable ICP/Token features by allowing users to interact with their balances through actions in your app.

In a nutshell, when Plug is present on a visitor’s browser (installed and with an active wallet), Plug injects the IC Provider API that enables any app/website to talk to the Plug extension and the user’s wallet. That way, your application can use the app to call a user’s wallet in Plug and request to:

Connect to the user’s wallet and authenticate them as users.
Give users access to their ICP (or another token) balances in-app.
Trigger transfer requests from app interactions (e.g. “Tip this post”).
Sign canister requests with the user’s identity in Plug.

Level 1📖: Meet the IC Provider API & Plugged

All right. Level 1. Some intro theory first.

Let’s get the basics out of the way! Dig into the first resources that’ll get you familiar with the IC Provider API, the main thing you will be using to integrate Plug into your app.

The IC Provider is an API that is injected by the Plug extension onto the browser/website the user visits. As an app/site you will be calling that API to “talk” with the user’s wallet. That is how Plug is integrated!

First step: Get familiar with our introduction to the IC Provider API.
Second step: Install Plug, and interact with the Plugged app.
Third step: Check out Plugged’s build guide to learn how it works.

Plugged is an E2E application, with buttons that trigger the API calls that the injected IC Provider API has available for you as a developer.

Install Plug’s latest version, and visit the Plugged live demo page to play around with the interactions and see how works from the user’s perspective, and what each method outputs to the console, for developers.

Level 2☕: Buy Me A Coffee — ICP “tip me” button.

Done with the basics? Move on to level 2!

Here’s the guide (link!) we’ll be using for the “Buy me a coffee” project!

In Level 2, you will be creating a website that connects to a visitor’s wallet in Plug, and requests a transfer of ICP from the user to a predefined address (can be your Plug Principal ID or any Account ID).

Here’s a live demo 🚀 (Replace the “xxx” in the URL with a valid Principal ID or Account ID, and the “yyy” by an amount like 1000, to set the parameters the button will use to trigger the test transaction to the Plug wallet! Make sure to hit send to visit the URL with the set parameters).

The user will be able to click a button that you created to launch a modal from Plug that gives the option to “Decline” or “Allow” the user’s request to connect to Plug.

If the user clicks “Allow” — the button changes to “Plug is now connected” & launches a modal requesting a transfer or “tip” of ICP to the address you specify, with the amount you specify as well.

This example doesn’t involve authentication and therefore doesn’t need to use the PlugAgent. It teaches you the basic building block of how to requestConnect, and make an ICP transfer from the user’s wallet using the requestTransfer() method.

Good to go? Cheers! You’re ready to level up to Level 3 and start working with the PlugAgent to authenticate users, and use the agent to sign canister requests with their identity to, for example…

Check the NNS canister’s stats in a web-app UI!

Level 3📊: NNS — An NNS statistics application.

Let’s get started with Level 3.

As before, here’s the guide we’ll be using for Level 3 (link).

In Level 3, you’ll be creating an app that authenticates using Plug’s PlugAgent, and uses the user’s identity to request global statistics from the NNS/UI Canister.

Here’s a live demo. 🚀

This one’s a little bit different. Instead of just doing requestConnect(), we’ll do so but also requesting permission to use the PlugAgent. When we do so, we have to requestConnect() and also pass a whitelist of canister IDs we want to get authorized (the NNS canister in this case).

This is because when you perform an action on an IC application or website (for example, checking the NNS stats) behind the scenes, you -as a user- are telling the canister that hosts that app (NNS) to do that action (tell me the stats!) for you.

Those requests are signed with an identity, and the PlugAgent allows applications to “proxy” sign THOSE requests using the user’s keys (without exposing them) so that the user can perform the action they want.

In this project, the user will authorize you to use the PlugAgent to sign canister requests with their identity for very specific reasons only, checking the NNS canister’s stats.

Once the connection is allowed by the user, you will be able to use the agent and create an actor that represents the canister.

To complete, we’ll use the actor’s interface to interact with the NNS canister, mankind the necessary request to get the stats, and show them on the frontend of the app… and Voilá we’re done!

Creating custom signed calls through Plug enables the full circle of user authentication, where not only do you gather a user’s identity to authorize them into the app as a user (ID = John); but ensure all actions on the app are performed by the user’s identity (John says: “Call NNS stats!”).

It’s DIY Time! 🔌⚡

That’s all levels… For now! With everything you’ve learned, you should be in pretty good shape to start exploring your first DIY (do it yourself!) custom project with Plug. Got an idea in mind?

Go for it! Hop on our Discord if you need any help, or tweet at us to share what you’re jamming on with the team! 🐸