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.
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.
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!
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.
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.
<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:
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。