Recently, my software development team decided to try out a different authentication platform — Clerk. Our initial reasoning for this decision was mostly the clear documentation for integrating with Remix. The tool has pleasantly surprised me with how rapidly I can get features in place that otherwise might be tedious.
UI Components for Free
If you are willing to hand off some granular feature control for speed in the user auth area, Clerk is an especially fantastic tool. Clerk’s default UI workflow provided by their Account Portal gives an almost instant workable flow after initial setup with next to no development effort.
Of course, if you want to incorporate custom branding into your auth flow, there are a few extra steps. Even so, the extra steps took just minutes longer. Adding a custom Sign-In page is as simple as adding a new Remix route and sticking the <SignIn /> Clerk component on there. You’re set. The component will inherit whatever default colors, fonts, and form fields you dictated in the Clerk dashboard setup. Beyond that, I had no trouble adjusting the components’ default styles code-side with its appearance prop.
Once I needed to add a sign-out button, I added a single line of code – <UserButton /> . Like magic, I got a styled user icon, a dropdown with a sign-out option, and a modal for configuring user profile details. Already the minimal branding and rapid development of Clerk was shaping out to be exactly what we wanted.
Easy Webhook Integration and Testing
Clerk continued to make my life a breeze with its webhooks. For instance, a few clicks in the dashboard, one more Remix API route, and I had the tools to grab the data from a user sign-up event. In our case, we anticipate users’ only sign-up method to be via an invitation created through a curl request. There is no sign-up directly incorporated into the app. That meant the webhooks feature ensured we recorded these external actions in our internal database as well.
Setting up the webhook’s corresponding endpoint in Remix was the most challenging step of this process. The Svix webhook verification package did not have good type support, but the Clerk documentation was generally sufficient.
Having the webhooks testing feature available was extremely helpful for manual testing. It meant I didn’t have to go through the whole sign-up workflow I intended to test repeatedly.
Email Sending Implemented Instantly
We had planned for the need to incorporate a separate email service to get a good level of branding. Fortunately, this was one more thing that Clerk provided for nearly no effort. The default branding settings and some basic templates were sufficient for us to create emails quickly that appeared branded to our app.
Using Clerk for the first time was like working with someone who had integrated auth workflows a hundred times over and could predict every step needed. We were fine with trading off deep control for speed on this feature. But, even so, I never hit roadblocks in implementing what customization we wanted. The result impressed me. I appreciated the helpful testing features and all the UI work I got for free. I’d definitely use it again in future projects.