Customized Login Branding

Right now, all apps on Fission go through the same auth.fission.codes “authorization lobby”, or auth lobby for short.

Some apps would like to showcase their brand and messaging through all aspects of the experience. Customizing the auth lobby visually through colours, logos, and custom description can allow apps to do this.

We will implement a way for developers to customize the lobby in this way, and configure it on a per-app basis.

This is likely to be a premium paid feature for developers.

Design Work in Progress

Comments and questions welcome

Currently, the auth lobby (auth.fission.codes) takes you to a fission-branded page, with no context of the app you were sent from.

To be friendlier to users, add the ability to modify the branding (banner/logo, colorscheme, etc.) to fit a theme like “APP, powered by Fission” or something similar to let the user know there is a connection between the two.

Inspiration:

Winamp skins FTW!

More seriously, yes, I think the basic logo + colour scheme + string of text makes sense as showing a visual connection for users that they are creating a Fission account that gives them access to the app that requested it.

@expede was showing it as a query string and IPFS CID, could also be in your fission.yaml or app manifest.

1 Like

OMG a shot of liquid nostalgia right in the arm

Yeah, the config for sure. If we want this on auth.fission.codes, there needs to be some kind of “hook” for that domain (which we have set up with TLS, and so on). This is specifically for liking machines (for early app use case where users don’t have a Fission account yet, and want to know that they’re in the right flow for MyCoolApp)

For linking permissions to an app, it 100% absolutely makes sense to put this in a fission.yaml or the manifest.yaml (or whatever well defined location). Could then also point to that in the first (machine linking) use case with the auth.fission.codes?app=mycoolapp.fission.app :thinking: Interesting.

2 Likes

I think both branding options, for new users without fission identity and for just authenticating dapp permissions, are very interesting. This will smooth out the onboarding experience by a magnitude in a non-inversive and non-disrupting way, while bringing a multitude of users from many different worlds into the fission identity ecosystem.

1 Like

@samuelandert we’re going to see about how to iterate on this in a branch of the current codebase, led by @icidasset

You and I also talked about an iframe-based-login, which I also think is a very interesting idea. That should get written up as a separate #developers:features – let’s start with customized login branding first.

I’ve realized that there are quite a lot of screens that we’ll need to look at and decide which pieces get customized and which wording does.

I’ve created a wireframe page on Whimsical and invited you to it as a guest editor.

Also embedded in the top post.

I think in the first iteration, we can focus on just exchanging the logo and colors and leave the rest as is.

One thing, which I think is important though will be the email text and sender address, as this is for the trust essential. It’s weird, if I signup at omo and get a fission mail, at which point I don’t know who or what fission is. Do you see there an easy way?

Not right now, and yes, we definitely thought of this.

Including a message from the app you signed up with in that verification email is the smallest thing I can think of. That can potentially be a part two.

The next step is pretty close to full federation — with custom usernames and domains.

Looking at Auth0 (as an example), I think they make you run your own email provider? Not clear, need to research more Auth0 Email Services

Including a message from the app you signed up with in that verification email is the smallest thing I can think of. That can potentially be a part two.

Jup, nice that could be already enough for the beginning.

The next step is pretty close to full federation — with custom usernames and domains.

Looking forward to this step. We’ll discuss this further over the weeks.

OK, @icidasset has a first example of this up on staging.

@samuelandert @jaensen you should be able to experiment with passing queries to look at styling.

Documentation is in the auth lobby README for now:


By passing a theme query parameter you can adjust the look and text of the lobby. Note that when setting a custom logo, there will be a subtle reference to Fission added, to indicate that this is still a Fission service. The theme query param should be a URL or IPFS CID pointing to a JSON file with the following format:

{
  "introduction": "MARKDOWN",
  "logo": {
    "dark-scheme": "URL_TO_IMAGE_OR_CID",
    "light-scheme": "URL_TO_IMAGE_OR_CID",
    "styles": "OPTIONAL_CSS"
  }
}

So for example:

{
  "introduction": "Learn more about Fission on our [website](https://fission.codes).",
  "logo": {
    "dark-scheme": "https://auth.fission.codes/images/logo-dark-scheme-textonly.svg",
    "light-scheme": "https://auth.fission.codes/images/logo-light-scheme-textonly.svg",
    "styles": "width: 120px; padding-bottom: 10px"
  }
}

Here is a live example on staging: https://auth.runfission.net/?theme=bafkreiapoxkrw6rtwzomzdo2jpze3anvfszm7drrduhigais4hx2u4li6u

Note the .net which is our staging domain. “Command” logo and emoji in place.

Vs what’s live now at https://auth.fission.codes

1 Like