Today I'm going to work on the usability of the app, my goal is that by end of today a lot of users have less trouble using the service.

List of features

I was fortunate enough to get some feedback from a user about the app and it was all about usability, so I'm going to focus on usability improvements.

I also curated a list of ideas I had for the app plus some bugs and feedbacks in this GitHub issue. I'm going to use this as a reference for what is remaining to do and what should be done first.

UI improvements

There are some UI improvements that are easy to do, but they are very important to keep users interested. Users' attention span is very short, unless you can explain what your service is all about very clearly it's unlikely that users even stay long enough on the page.

Therefore for the first step of today's journey, I decided to work on those small improvements.

Unwanted login on the first visit

There was a weird issue on the site, which redirected users to the login page on their first visit to the site and not on the second visit. This basically made the landing page ineffective.

The reason was that I have added the attemptSilentLogin config

const config = {
  attemptSilentLogin: true,
  authRequired: false,
  auth0Logout: true,
  secret: process.env.AUTH0_SECRET,
  baseURL: process.env.AUTH0_BASEURL,
  clientID: 'ZUUQSwOBPlXbALIc1Rb2VTVZCaZmSFvp',
  issuerBaseURL: 'https://litcodes.us.auth0.com'
};

Reading the explanation on the auth0 site, it seems to me that it shouldn't prompt users to log in, but I might be wrong.

Attempt silent login (prompt: 'none') on the first unauthenticated route the user visits. For protected routes this can be useful if your Identity Provider does not default to prompt: 'none' and you'd like to attempt this before requiring the user to interact with a login prompt

I kind of assumed that this means that the library somehow can attempt to get the user ID without redirecting them to the login page if they are not logged in.

Strangely enough, without that option, the landing page works perfectly fine, meaning that when the user is logged in req.oidc.user is still available even when attemptSilentLogin is not used.

app.get('/', async (req, res) => {
  res.render('index', { 
    title: 'Seen 👀',
    user: req.oidc.user,
  });
});

Not to track pixels shown on the site

When users clicked on the copy button, there was a img tag generated on the page with the image URL as its source, then that img tag is copied to the clipboard. That means every time users clicked on the copy button, they had an extra entry in the list of visits, which shouldn't have been there.

The solution was very simple, basically, we can use the referer tag set on the headers to match against our own domain, if it matches we basically ignore that record and just serve the image.