chore: Blog last used (unkeyed#2131)

apps/www/content/blog/improve-auth-experience.mdx

@@ -0,0 +1,122 @@
+---
+date: 2024-09-23
+title: Improve your authentication UX
+image: "/images/blog-images/auth-experience/og-image.png"
+description: Improving your authentication UX can allow for a smoother and more satisfying for returning user
+author: james
+tags: ["tutorials"]
+---
+
+The sign-in flow for your application is the gateway and sometimes the first impression; one of the biggest issues is the returning user. The return user often gets presented with a screen that looks similar to this:
+
+<Image src="/images/blog-images/auth-experience/sign-in.png" alt="sign in example" width="1920" height="1080"/>
+
+The problem is, what account did I use to sign up for this account? Was it Github? Was it Google? Or did I use my email? In great applications, Unkey included, account linking is used behind the scenes, which can help mitigate this issue.
+
+## What is Account linking?
+
+Account linking allows developers to use the email provided and match that to a previously signed-up account, for example:
+
+1. A user signs up with a GitHub account, which has the email address [email protected]
+2. The same user returns to the sign-in page and doesn’t remember, so they select Google and [email protected]
+3. During the flow, the developer identifies this user has signed up before and links the account together, placing the user on the correct dashboard.
+
+The main issue with relying only on account linking is that users potentially use different emails for accounts. For example, my GitHub primary email is my personal email, and I use my work email as my Google account. So, if I accidentally select the wrong option, I will go through the onboarding experience, which is frustrating as a user.
+
+## Adding indicator to improve the User Experience
+
+To improve the experience futher we can add an indicator to the sign-in page to show the user the last method they used to access our application.
+
+<Image src="/images/blog-images/auth-experience/last-used.png" alt="sign in example" width="1920" height="1080"/>
+
+### How can you implement this?
+
+First, we must add logic to the sign-in and sign-up flow to implement the “Last used” tag. The example below shows what a Clerk custom flow might look like and what we use at Unkey.
+
+```tsx
+const oauthSignIn = async (provider: OAuthStrategy) => {
+    if (!signInLoaded) {
+      return null;
+    }
+    try {
+      setIsLoading(provider);
+      await signIn.authenticateWithRedirect({
+        strategy: provider,
+        redirectUrl: "/auth/sso-callback",
+        redirectUrlComplete: "/apis",
+      });
+    } catch (err) {
+      console.error(err);
+      setIsLoading(null);
+      toast.error((err as Error).message);
+    }
+  };
+```
+
+As you can see from the example code above, we know what provider the end user is attempting to sign in with, so now we can store this and provide a UI update. The next step is implementing a hook to handle persisting and reading from local storage. We could write the hooks ourselves at Unkey. We opted to use usehook-ts, an excellent lightweight set of typesafe hooks with a small bundle size.
+
+```sh
+npm install usehook-ts
+```
+
+Now, we can write our function.
+
+```tsx
+"use client";
+import { useLocalStorage } from "usehook-ts";
+
+export function useLastUsed() {
+  return useLocalStorage<"github" | "google" | "email" | undefined>("last_unkey_login", undefined);
+}
+```
+
+This function allows us to read and write our sign-in options to local storage. I will show how it is used in a second, but first, we need a UI element to show to the user. We opted for a simple text span displaying the last used, but you could display an icon or any text you prefer.
+
+```tsx
+export const LastUsed: React.FC = () => {
+  return <span className="absolute right-4 text-xs text-content-subtle">Last used</span>;
+};
+```
+
+Now, we have all the elements to show our end users what sign-in method they used previously. To do this, we can update our sign-in code to include the hook similar to setState
+
+```tsx
+const [lastUsed, setLastUsed] = useLastUsed();
+
+const oauthSignIn = async (provider: OAuthStrategy) => {
+    if (!signInLoaded) {
+      return null;
+    }
+    try {
+      setIsLoading(provider);
+      await signIn.authenticateWithRedirect({
+        strategy: provider,
+        redirectUrl: "/auth/sso-callback",
+        redirectUrlComplete: "/apis",
+      });
+      setLastUsed(provider === "oauth_google" ? "google" : "github");
+    } catch (err) {
+      console.error(err);
+      setIsLoading(null);
+      toast.error((err as Error).message);
+    }
+
+  };
+  ```
+The final step is to show the user that it was the “last used.” Below is how we implemented it at Unkey: we placed it next to the button.
+
+```tsx
+<OAuthButton onClick={() => oauthSignIn("oauth_google")}>
+  {isLoading === "oauth_google" ? (
+    <Loading className="w-6 h-6" />
+    ) : (
+       <Google className="w-6 h-6" />
+    )}
+  Google {lastUsed === "google" ? <LastUsed /> : null}
+</OAuthButton>
+```
+In conclusion, improving the authentication user experience is crucial for ensuring a smooth and hassle-free sign-in process for returning users. By implementing account linking and adding a "last used" feature, we can address the issue of users potentially using different emails for their accounts and minimize the frustration of going through the onboarding experience multiple times.
+
+<Image src="/images/blog-images/auth-experience/discord.png" alt="sign in example" width="1920" height="1080"/>
+
+These improvements benefit the end users and contribute to the application's success by creating a positive first impression and increasing user satisfaction.