Recently released, Albedo allows any application to request transaction signing or identity verification without ever exposing your secret key. Built by orbitlents, the same creator of Stellar.Expert, Albedo enables a safe and reliable way to use Stellar accounts without trusting anyone with a secret key during the process.

It works like a bridge for other applications that allows them to ask permission to sign a transaction or verify identity on the user's behalf so that the same account can be used across the whole universe of Stellar applications. Sensitive data is encrypted and safely stored in the browser, it is important to point out that no one has access to the user's secret key.

Albedo also provides a playground, which allows developers to quickly get started building applications on top of it.

The purpose of this tutorial, we will be covering a small part of the great variety of features and possibilities that Albedo enables, however it will certainly give you a better understanding of how Albedo and identity verification on Stellar works, so you can start using it on your own applications.

We will be building a "Log In with Albedo" widget using React, and by installing the following dependencies: Material UI, React Bootstrap, and Albedo, you can find the github repository for the code of this tutorial here.

First that all, we will need an integrated development environment (IDE). In our case we will use Visual Studio Code, which is an open-source IDE developed by Microsoft and provides a user-friendly workspace for a great variety of programing languages. You can download it here.

After downloading and installing VSC, you will see an user interface which will look like this:

After downloading it and installing it, let's proceed to create a new folder or open an already created folder using the IDE. Then, by going to the integrated terminal that VSC provides, let's create our React App by typing the following command:

npx create-react-app nameofyourapp

Developed by Facebook, this command will automatically set up a modern web application without having to configure it. Depending on your operating system it may take some minutes to install.

Once the React installation is done, you will see the following files on your project.

After that, we will need to install the dependencies that we need, let's type again on the terminal the following command:

npm i @material-ui/core react-bootstrap @albedo-link/intent

After the installation of the dependencies is done, go the src folder, select the "App.js" file, delete all of its content and replace it with the following code:

You can find this code here.

What the code basically does is; it creates a "Button" with Material UI for the layout and by displaying the Albedo Logo with "Image" from React-bootstrap. When a user clicks, it makes a call to Albedo using the "View Public Key" request in order to verify that the selected public key is actually owned by the user performing the request. In this particular example, after the verification is successful, we proceed to console log the type of intent, the public key, the signature, and the message of the transaction. You can for example forward the user to another page after the validation is complete. Notice we do not have access to the secret key.

Now you can to render the code and display it on a browser, to do this, you need to start your application with the following command:

react-scripts start

Below, you will find an example of how the button looks like, feel free to open the project on Codesandbox.

And that's it, now you have successfully created your own "Log In with Albedo" widget, which allows you to verify the identity of your users.

Thank you very much for reading and if you have any question, please do not hesitate in contacting me on olvisgil@gmail.com