How We Roll – Chapter 2: Avatars

Category: Company
Published: May 19, 2023

How We Roll is a deep-dive into how Clerk implements authentication. In this chapter, we discuss why avatars should never be an afterthought.

Welcome to How We Roll! This series is meant to help product owners, developers, and security professionals understand exactly how we implement (or, roll) authentication at Clerk.

Chapter 2: Avatars

We're focusing on avatars early in the series because too many applications treat them as an afterthought. But at the biggest companies in the world – the ones with full-time identity teams working to streamline every aspect of authentication – it's common to see avatars used to "level-up" the user experience.

Google uses avatars within their sign-in flow and as a button throughout their applications.

At Clerk, we operate like an outsourced identity team, and we love bringing details like these to our customers. We obsess over authentication so our customers can focus on what truly differentiates their business.

Let's dive in to the full feature!

Choosing avatars

There's an unfortunate reality when dealing with avatars: users don't like uploading their avatar directly. Forcing avatar upload during the sign-up flow would dramatically reduce conversion rates.

Thankfully, "social sign-in" providers like Google and Facebook provide access to the user's avatar through the OpenID protocol. Moreover, when social sign-in is available, it's preferred by over 50% of users.

As a result, simply enabling Sign in with Google leads to most users automatically having their choice of avatar.

Of course, should they choose, users can always modify their avatar through Clerk's <UserProfile/> component, or developers can build their own flow with the useUser() hook.

Beautiful default avatars

In the event that users do not provide an avatar, directly or indirectly, Clerk generates beautiful default avatars for every user.

We offers a variety of options, with initials or silhouettes in the foreground, and marbling or a solid color in the background. The marbling effect is built with the fantastic open source project Boring Avatars.

Avatars for the `<UserButton/>`

The most common place avatars are seen today is the top-right of an application. Clicking it opens a menu to manage account settings or sign out.

Clerk provides this functionality through a component called <UserButton/>.

To better indicate this is a button without modifying the avatar itself, we allow developers to add a "shimmer" effect on mouseover:

Like Google, Clerk's <SignIn/> component displays the user's avatar during the sign-in flow.

This is primarily seen as a benefit to user experience, but it also has benefits in security. The idea is that users will grow accustomed to seeing their avatar during the sign-in process. If they ever see the wrong avatar, it will raise suspicion of a potential phishing attack.

Summary

Though avatars may feel like a small feature, they bring a high degree of polish and professionalism to modern applications. Clerk's social sign-in integrations, beautiful default avatars, and prebuilt components all work together to make avatars easier than ever before.

How We Roll Series Index

Ready to get started?