Forem Creators and Builders 🌱

Cover image for Integration Update: Algorand and Forem
Aaron Martinez
Aaron Martinez

Posted on

Integration Update: Algorand and Forem

Whatsup guys, the proof-of-stake social network I've been building with Forem on Algorand is about to go live. The biggest challenge (AlgoAuth) was also one of the most important features: Passing authentication from the Rails login to the Algorand wallet to verify the balance of an Algorand ASA before a user can access the platform. It was a pretty complex job, but I'm excited to announce that it is now active in production!

We have a fairly unique dev stack for this which I can go into more detail about later, but for now I just wanted to share all the progress that has been made with this. Here is a link to a video demonstration of what the UI/UX looks like with this in production in the front end:

https://twitter.com/headline_crypto/status/1450541067640709120

We start our beta next week and have already received over 300 beta tester requests. I'd love to get a technical perspective on how to improve the security/usability of this feature - if anyone would be interested. Also, in all of our testing, the only fail occurs with the official Forem iPhone app. Is there any documentation for making our own Forem iPhone apps? Or is it possible to get a modified version of the official app? I totally understand if this last enquiry is way outside the parameters of Forem at its current state, but hey I gotta to ask!

What you guys (the Forem dev team) are building is revolutionary, and has the potential to transform social internet the way blockchain technology is transforming finance. My team and I are with you 100% and look forward to assisting you in any way we can. Cheers!

Latest comments (5)

Collapse
 
ioscasey profile image
Casey πŸ’Ž

Why am I just now hearing about this! Aaron, this is seriously badass

Collapse
 
ussaaron profile image
Aaron Martinez

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.

Collapse
 
ben profile image
Ben Halpern

This is very exciting Aaron!!

Can you explain everything you've done? Is Algorand strictly for authentication? Did you fork Forem to accomplish this?

Our ideal is that all progress can plug in and be compatible with Forem as much as possible, so insight into where your head is at here is very appreciated.

I/we have lots of curiosities about how decentralized trust systems can enable what we want to do here, but want to do it in the most collaborative way possible.

Collapse
 
ussaaron profile image
Aaron Martinez

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...

Collapse
 
ildi profile image
Ildi

If there's a way to integrate blockchain authentication as a plugin that would be huge!

I think this is a really interesting idea. Social tokens have a lot of potential imo and I've been thinking a lot about tokenized communities lately. Right now most of these communities are token-gating their Discord servers but it would be cool if the option was also available for Forem communities. I know many crypto/blockchain teams have moved from Telegram to Discord but I think many would find that Forem would be a better fit.