Adding SteemConnect as a Custom Social Connection to Auth0

Filmreviewr.com was built fundamentally using C# and .Net Core 2.1. There are some 'microservices' that run in Node which I will write about later, but I wanted to detail how I handle the authentication layer.

Over the years, I have come to try and keep the responsibility of storing any user information as minimal as possible. Compliance and legal issues can get overwhelming if the product becomes successful quickly, and safely securing the details is always a worry no matter how experienced you are.

This is why I chose to use Auth0. This offloads the majority of security concerns with them (especially when it comes to password logins which is not currently implemented yet on the site). Their free tier allows for 7,000 active users a month, which is more than adequate for most startup requirements. But, where it shines for me, is the ease to add multiple providers such as Facebook, Google, Twitter etc. And not only are the major OAuth providers available, but also allows for custom connections that implement OAuth authentication.

In the case of Steem, this is with SteemConnect

Please note, this article assumes you have already setup a SteemConnect app and have access to your ClientId and ClientSecret

You can login here to the SteemConnect dashboard

SteamConnect

For a while, 3rd party applications that wanted to post on your behalf to the Steem blockchain need to hold your private key relevant for posting. Those that offered transactions services require a separate key for wallet access, but then these apps' codebase / servers are immediately at risk of being attacked by a malicious 3rd party to get access to those private keys and drain the unsuspecting users funds. The Steem community often demands that these apps must be open source to ensure the private keys are being stored securely.

SteemConnect is a collaborative product between SteemIt and Busy.org, to offer an authentication layer on top of the Steem blockchain. Taken a more established approach of running on the OIDC protocol layer of authentication, akin to the likes of Facebook and Google apps, the users private keys are never revealed and there is a central source of trust. Whilst this may come across as an anti-pattern to dApps, for 3rd party developers, not having the responsibility of storing users private keys is a relief.

SteemConnect and Auth0

Auth0 has a feature to connect with a custom 0Auth compliant provider (they can't add all of them themselves!). Since 0Auth is well known open standard, there are just a few values you need to set it up.

First, click on Extensions, then install Custom Social Connections as per the image

Once this is done (Auth0 will request authorisation), you will be presented with a OAuth config screen.

In the example below, you can see some of the main fields filled up which will be the same for all setups

---

Name: steem
(Auth0 uses lowercase as standard. You can call this what you want but will just be a bit smelly if you choose something else)
Authorization URL: https://v2.steemconnect.com/oauth2/authorize
Token URL: https://v2.steemconnect.com/api/oauth2/token
Scope: vote,comment,login,commentoptions,deletecomment

---

The above scopes are not exhaustive as they leave out those dealing with wallet transactions. It is best practice to only ask for those scopes your users require majority of the time, otherwise reaching out for too much may see user drop off. See here for all the scopes

The Client ID and Client Secret come from your app on the SteemConnect Dashboard

Now the interesting part.

Auth0 has a callback function that receives the access token as part of the SteemConnect OAuth authentication flow. From there, you can make any SteemConnect call you want. However, at this stage we want to setup the nominal user information that is relevant for the duration of that users signed in lifetime. This normally means

1. Username / Nickname
2. UserId
3. Access Token
4. Profile Picture
5. Relevant Metadata

Auth0's normalized user profile requires the first 3, and will use it's own default image if none set. Any other information you want to store as part of the session can be set to a property of your choice.

To retrieve this information, SteemConnect has a https://steemconnect.com/api/me endpoint. The returning data is rather verbose and most of it is information that can change without interaction from the user e.g. wallet earnings, so possibly stale after a short amount of time and therefore not relevant for a long running signed in session.

The below is a complete function that returns the core profile information, and also a copy of the json_metadata. This property is where SteemIt stores the users profile image, name, location etc they can set on the SteemIt website. Whilst it's not a requirement as part of the Steem blockchain, often there are common acceptance patterns by the community where we can assume the structure won't change readily. Once such example is the json_metadata attached when submitting a discussion which includes 'app: steemit/0.1'

function(accessToken, ctx, cb) {
  request.get('https://steemconnect.com/api/me', {
    'headers': {
      'Authorization': 'Bearer ' + accessToken
    }
  }, function(e, r, b) {
    if (e) return callback(e);
    if (r.statusCode !== 200) return cb(new Error('StatusCode:' + r.statusCode));

    var userInfo = JSON.parse(b);

    var meta = JSON.parse(userInfo.account.json_metadata);
    var metaProfile = meta.profile || {};
    var newProfile = {
      "user_id": userInfo._id,
      "name": userInfo.name,
      "nickname": metaProfile.name || userInfo.name,
      "picture": metaProfile.profile_image, // can set default e.g. metaProfile.profile_image || 'https://mydomain.com/avatar.png
      "accessToken": accessToken,
      "json_metadata": meta
    };


    cb(null, newProfile);
  });
}

So - once all done - hit Save and then Test!

Voila - you should be requested to sign in to SteemConnect and upon authorization, the JSON returned should be of your Steem profile and a new user created in Auth0!

Any issues or questions please feel free to ask!

Happy coding

By CodeCoded
https://filmreviewr.com
https://filmlovr.com