Integration Update: Algorand and Forem

Hi Ben,

If there's a way to integrate blockchain authentication as a plugin that would be huge! Here's a brief description of our stack and how we accomplished the Algorand authentication:

We forked the production Forem and do most of our customization in Gitpod. Then we Dockerize the production model and push to Quay where we have the image repo. We use Render.com for hosting, so our Forem engine reboots after we update Quay. Beyond major customization, the main advantage of our own repo is file upload. While you can upload images from inside the Forem admin panel, you can't upload root files (javascript in assets, favicon, etc). A solution for this may be a plugin for root file upload. It is of course, also our responsibility to make sure our fork stay even with Forem main.

Algorand authentication: This is really a two step solution that can still be significantly improved.

Step 1: Determine the blockchain verification params:

FORUM Login Repo - github.com/headline-design/Forum-L...
(pipeline is our custom Algorand SDK)

import Pipeline from '@pipeline-ui-2/pipeline';
import 'regenerator-runtime/runtime';

const myAlgoWallet = Pipeline.init();

async function ASAbalance(address) {

const ASAindex = 137594422;

const main = true;

let indexerURL = 'https://'

if (main === true) {
indexerURL = indexerURL + 'algoexplorerapi.io/idx2/v2/accounts/'
}
else {
indexerURL = indexerURL + "testnet.algoexplorerapi.io/idx2/v2/accounts/"
}

let url2 = indexerURL + address
try {
let data = await fetch(url2)
let data2 = await data.json()
let data3 = data2.account.assets;
console.log(JSON.stringify(data3));
let assets = {};
data3.forEach(element =>
assets[element["asset-id"]] = element.amount);
let balance = assets[ASAindex];
if (balance >= 1000000000) {
console.log("You have enough HDLs! Click button below to proceed.");
document.getElementById("login-form").submit();
}
else { alert("Sorry! You only have " + balance + " HDLs. You need 3000 to proceed.") };
console.log(assets);
return data3;
} catch (error) {
console.log(error)
}
}

function handleConnect() {
Pipeline.connect(myAlgoWallet).then(
data => {
ASAbalance(data);
}
);
}
document.getElementById("algobtn").addEventListener("click", function () {
handleConnect();
});

Step 2: Compile the script with Parcel and add to Forem assets:

github.com/headline-design/forem-1...

Step 3: Modify email_login_form in shared authentication:
github.com/headline-design/forem-1...

The key here was to pause the authentication session in Forem while MyAlgo verification is handled. This was initially a major challenge because the ruby code
<%= f.submit "Continue", class: "crayons-btn crayons-btn--l w-100" %> automatically submits the form on click. On the front end that translates to
.

The solution I found to pause verification is this:

By switching from type="submit" to type="button" the login session does not trigger on click. The corresponding javascript file triggers the submit action on positive balance check.

I also added a form id for the login form with path:

<%= form_tag(session_path(:user), id: "login-form") do %>

Now, its worth mentioning that this is basically still proof-of-concept. For example, if you go into inspect mode, and simply switch the button from type="button" to type="submit" you can bypass the blockchain step. There are other ways to circumvent this as well, but it's just one example.

In addition to the login feature, we will be integrating an Algorand payment solution. We call it AlgoPay, and it allows anyone on any platform to create a custom Algorand checkout button like PayPal and embed it directly in HTML. Here's a link to the button generator:

algopay-js-config.vercel.app

We will be integrating other blockchain elements as well but these are just the first two. What makes this so exciting though, is that our solutions could easily be converted to work with other cryptocurrencies. On Algorand we use MyAlgo, but MetaMask on Ethereum works the same way. Our payments solution and login verification could work for the entire Ethereum ecosystem.

Well that's where we are at right now. We launch the beta for FORUM tomorrow and our users will be down to try any innovative blockchain integration we come up with. So if you guys would be interested in helping with a couple of plugins to make the integration seamless, we'll be able to promote them to the whole Algorand ecosystem. We can also help yall test any decentralized trust systems that you're interested in getting some data on.

Here's my email if you or someone from your team would like to discuss further: aaron@headline.dev

As I've mentioned, we are huge supporters of the movement starting here at Forem and we want to help in any way we can. We also make all of our code freely accessible on GitHub. Here are the source links referenced above:

github.com/headline-design/forem-1
github.com/headline-design/Forum-L...
github.com/headline-design/algopay...
github.com/headline-design/algo-pa...

Thank you! It's been a work in progress for a while now but we are about to go live. We'll also find out real quick if Forem builds on Render.com are scallable.