Javascript

Full-featured User Authentication Made Easy with Clerk

Jun 14, 2023

8 min read

Intro

Authentication is hard. It’s just another example of one of the things we deal with as web developers that can be solved in 100 different ways, and requires a well-thought-out decision. Thinking and decision making: my week in a nutshell. The first decision you need to make is whether you are going to roll your own authentication or use a third-party provider. If you decide to roll your own, you have a whole lot more thinking and decision-making ahead. There are a lot of considerations and specialized security-related knowledge required for this path if you intend to build an application that is secure. This post is going to cover a newer third-party provider option named Clerk.

Clerk overview

Clerk has been gaining popularity because it offers a fantastic developer experience. It comes with a first-class React integration that includes most of the popular React Frameworks. These integrations are powered by a full-featured, modern authentication service.

Auth features

Clerk offers an impressive array of authentication features that cater to a wide range of use cases and security requirements. Let's dive into these features and explore their benefits.

User management: Clerk provides a comprehensive user management system that allows you to easily manage and monitor user accounts, including registration, login, and profile updates. This saves you time and effort in building and maintaining a custom user management solution.
Organizations: The Organizations feature enables you to group users into separate entities, such as companies or teams. This is particularly useful for applications that require different levels of access or collaboration among various groups of users. With Clerk's Organizations, you can easily manage permissions, roles, and billing for each organization, streamlining your app's administrative tasks.
Email and SMS authentication: Clerk supports both email and SMS authentication, allowing users to securely authenticate using their preferred method. This flexibility enhances the user experience and helps to ensure that your application is accessible to a wider audience.
Password-less authentication: With Magic links and one-time passwords, Clerk offers password-less authentication options that eliminate the need for users to remember complex passwords. This not only improves the user experience, but also enhances security by reducing the risk of password-related attacks.
Social login: Clerk's Social login feature allows users to authenticate using their existing social media accounts, such as Google or Facebook. This simplifies the registration and login process for users, while also potentially increasing conversion rates for your application.
Multi-factor authentication (MFA): MFA adds an extra layer of security by requiring users to provide multiple forms of identification during the authentication process. With Clerk, you can easily enable MFA for your application, ensuring that your users' accounts are better protected against unauthorized access.
Multi-sessions: Clerk's multi-session feature allows users to be logged into multiple accounts simultaneously, similar to popular apps like Figma. This is particularly useful for users who need to switch between personal and work accounts frequently, providing a seamless and efficient user experience.
Device management: Device management is a powerful feature that allows users to view and manage all the devices they've used to access your application. This level of control is typically found in solutions provided by tech giants, and its inclusion in Clerk's feature set demonstrates their commitment to providing a robust and secure authentication experience.
Password leak protection: Clerk's password leak protection feature informs users if their password has been detected in a data breach. By proactively alerting users to potential security risks, this feature helps to protect your users' accounts and further sets Clerk apart from its competitors.

Organizations, Multi-Sessions, and Device Management are features that really set Clerk apart from a lot of their competitors. If I’m working on a new application that requires any of these, I would be looking to Clerk as a top choice.

React framework integrations

Clerk’s React and NextJS integrations are extensive. I’m not going to do a walk-through on setting up a new React/NextJS app with Clerk because their website already offers a bunch of quick-start guides for many of the popular frameworks. Instead, we’ll just check out some of the important parts of their APIs that make it such a popular choice for React apps. They also offer support for React Native and Expo as well in case you’re planning on building a native application.

The React API consists of pre-built components that can be directly imported into your application and a hook-based API.

React Component API

Clerk provides a set of pre-built components that can be directly imported into your React or Next.js application. These components are designed to handle common authentication tasks, such as sign-up, sign-in, and password reset forms. By using these pre-built components, you can save the time and effort of creating your own custom UI components for authentication.

Some of the pre-built components include:

SignIn: A sign-in form that handles user authentication with email, password, or social login.
SignUp: A sign-up form that manages user registration with email, password, or social login.
UserButton: A button that displays the current user's profile picture and opens a dropdown menu with user-related actions.
UserMenu: A dropdown menu with user-related actions, such as signing out or account management.
UserProfile and OrganizationProfile: Easily display and manage user and organization information.
OrganizationSwitcher: Simplifies multi-tenant applications by allowing users to effortlessly switch between organizations and manage their memberships within your application.

The component API comes equipped with themes that you can use out of the box to help match your website and also allow configuration for customizing the style even further.

import { dark } from '@clerk/themes';
import { ClerkProvider, SignIn } from '@clerk/nextjs';
import type { AppProps } from "next/app";

function MyApp({ pageProps }: AppProps) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: dark
      }}
    >
      <Component {...pageProps}>
    </ClerkProvider>
  )
}

React Hooks API

Clerk's React API also includes a set of hooks that allow you to interact with the authentication system programmatically. These hooks provide a simple and intuitive way to manage user authentication state and perform actions related to user accounts.

Some of the hooks available in Clerk's React API include:

useClerk: Provides access to the Clerk instance, which allows you to interact with the Clerk API directly.
useUser: Returns the current user object, allowing you to access user data and monitor authentication state.
useSignUp: Provides methods for managing the sign-up process, such as creating new user accounts or handling social logins.
useSignIn: Offers methods for managing the sign-in process, including authenticating users with email, password, or social login.
useSession & useSessionList: The useSession hook provides access to the current user's active session object, allowing you to manage and monitor the user's session state within your application. In contrast, the useSessionList hook returns an array of all active sessions for the current user, enabling you to implement features like device management and session monitoring by displaying and controlling multiple sessions across different devices and browsers.
useOrganization & useOrganizationList: The useOrganization hook offers access to the organization object associated with the current user, enabling you to manage organization-related features and permissions, especially in multi-tenant applications. Meanwhile, the useOrganizationList hook returns an array of all organizations the current user is a member of, allowing you to implement features like organization switching, role management, and billing by managing and displaying multiple organizations or teams within your application.

By using Clerk's pre-built components and hook-based API, integrating authentication into your React or Next.js application becomes a much more straightforward process by using these higher-level APIs.

ClerkJS API

Yes, Clerk’s React Component and Hooks APIs are really awesome, but you don’t need to be using React to take advantage of Clerk’s fantastic feature set. They do have a vanilla JavaScript API that can be used to implement your authentication using the Clerk in any client-side JavaScript environment or framework. It’s pretty similar to the React Hooks API with methods for sign-in, sign-out, user profile, sessions, and organization management. So even if you are not using React, you can still easily use Clerk for a great user and developer experience.

Server-side APIs

Their base server-side API client is pretty straightforward and includes methods for managing users and organizations. There are other backend APIs and features made available through the Backend HTTP API. The Node server API specifically includes a few more of these features.

Clerk Node

The Clerk NodeJS API has methods for managing clients, user invitations, sessions, users, and organizations. It also has methods for creating emails, SMS messages, and managing Allowlists.

Clerk Backend API

There’s quite a bit in their Backend API documentation so I’m not going to go over everything, but it’s good to know that it’s available if your backend is using a language that doesn’t yet have an API, or doesn’t include certain features. They also include some beta features that are available for use in this API. SAML Connections is an example of one of them at the time of this writing.

Webhooks

Webhooks are an essential aspect of Clerk's server-side integrations, allowing developers to receive real-time updates about authentication-related events. Clerk supports a variety of webhook events, such as user creation, user updates, and session events. By configuring webhooks, we can automate processes and integrate them with other services, like sending welcome emails, triggering notifications, or updating CRM systems.

Serverless database integrations

Clerk also has integrations with several different serverless database providers like Supabase and Hasura to name a couple. This is a really nice feature if you’re using a service like this that will allow you to secure access to your data. You can easily do things like only allow the original author user to edit a post, like when your app has some sort of social feed. Another common example might be just protecting certain queries from being ran without being authenticated as a user in your application.

Conclusion

It’s clear that the team over at Clerk has worked really hard to ship a really fantastic service for user authentication with some of the best APIs and integrations you could hope to find. It is a top-tier developer experience that allows you to ship user authentication and management to your app in literal hours without compromising on user experience along the way.

They have 3 standard pricing tiers that include a very generous free tier that you can get pretty far on. If you’ve read this article and want to give it a hands-on tryout, I suggest jumping over to their quick-start guides page. There are a bunch of great guides here that quickly take your app from 0 to authenticated.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Dane Grant

JavaScript developer building things on web, native, and server environments. Free time filled with reading, cooking, dog, sports, comedy, and music.

@danecando @danecando

Improving INP in React and Next.js

Improving INP in React and Next.js In one of my previous articles, I've explained what INP is, how it works, and how it may affect your website. I also promised you to follow up with more concrete advice on how to improve your INP in your favorite framework. This is the follow-up article, where I'll focus on how to improve your INP score in React and Next.js. How to prepare for INP in React and Next.js? The first thing to do is to ensure you're using the latest version of React. The React team has been working on making React more INP-friendly and has already made some improvements in the latest versions. To enhance your INP score, consider fully taking advantage of new features introduced in React 18, such as Concurrent Rendering, Automatic Batching, and Selective Hydration. However, there are also some general areas to focus on, such as SSR and SSG in Next.js, Web Workers, or optimizing your hooks and state management. Concurrent Rendering The Concurrent Mode in React uses an algorithm that breaks rendering down into so-called "fiber nodes" and schedules the renders based on their expiration and priority. This effectively allows the user to interact with the page while the rendering is still in progress. In previous React versions, all updates, such as setState calls were treated as "urgent" and once the re-render had started, there was no way to interrupt it. Concurrent Mode changes this by being able to prioritize the updates and interrupt a non-blocking state update started with startTransition. For a simple explanation of concurrency in React, you can check out Dan Abramov's explanation. As part of the Concurrent Mode, React introduced several lifecycle methods that allow you to prioritize the rendering of certain parts of your UI, such as: - useTransition hook that allows you to update the state without blocking the UI, - useDeferredValue hook that allows you to defer the rendering of certain parts of your UI, - startTransition API that, similarly to the useTransition hook lets you mark a state update as non-blocking. It lacks, however, an indication of whether it's still pending. Automatic Batching Introduced in React 18, Automatic Batching reduces the number of re-renders that happen on state changes even when they happen outside of event handlers, e.g. in a setTimeout or Promise callback. This feature comes out of the box and you don't have to do anything to enable it, and it makes a great argument for upgrading to React 18. Selective Hydration Selective Hydration allows you to take hydration off the main thread by wrapping your components in a Suspense boundary. This way, components can become interactive faster as the browser can do other work on the main thread while the hydration is happening. To fully take advantage of selective hydration, consider the following: - Prioritizing Above-the-Fold Content: Use Suspense boundaries strategically around any parts of your application that may take the server longer to deliver to ensure they don’t block critical content from becoming interactive as soon as possible. - Hydration on Interaction: Implementing hydration upon user interaction for non-critical components can drastically reduce the main thread's workload, enhancing INP. Vercel even has a small case study showing how using selective hydration improved the performance of a Next.js site. Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js Not everything has to run client-side. Next.js excels in SSR and SSG capabilities, which can significantly impact INP by delivering content to users faster. Optimizing SSR with techniques like incremental static regeneration (ISR) or leveraging SSG for static pages ensures that users can interact with content faster, improving the perceived performance. Workers Offloading heavy computations to Web Workers can free up the main thread, enhancing the responsiveness of React and Next.js applications. This strategy is especially useful when dealing with third-party scripts. Offloading such scripts in Next.js can be easily done by specifying the "worker" strategy on your Script component. Be aware that this feature is not yet stable and does not work with the app directory, though. If you want to take things one step further, you could use Partytown, which helps you offload any resource-intensive scripts to Web Workers. It comes with a React component that you can use to wrap your third-party scripts and offload them to a Web Worker, and it's compatible with Next.js as well. Hooks and State Management State management in React applications can easily get out of hand, leading to unnecessary re-renders and effectively an increased INP. Sometimes, using a state management library like Redux or MobX can help you consolidate your state and reduce the number of re-renders. However, they are not silver bullets and can also introduce performance issues if not used properly. If you are dealing with a lot of re-renders due to prop changes, make sure you are leveraging memoization. As of now, you may need to work with useMemo and useCallback hooks to memoize your values and functions, respectively. The upcoming React 19’s Forget Compiler, however, will apparently memoize everything under the hood, making these hooks obsolete. Using memoization properly can help you reduce the number of re-renders and improve your INP. To investigate your hook dependencies and re-renders, you can leverage React Developer Tools or use this handy helper hook I found on the internet to trace your re-renders: ` Conclusion Improving INP in React and Next.js is not easy and can require much investigation and fine-tuning. Still, it's worth doing to avoid being penalized by Google in its search results and provide a better experience for your users. Adopting React 18's new features, leveraging SSR and SSG in Next.js, utilizing Web Workers, and optimizing hooks and state management can significantly boost your INP score and deliver a faster application to your users. Remember, INP is just one among many performance metrics emphasizing the need for a comprehensive approach to performance optimization...

Apr 19, 2024

5 mins

Web PerformanceReactNextJSJavaScript

JSR - The cross-platform package manager for ESM

JSR - The cross-platform package manager for ESM Move over NPM, there’s a new package manager in town. JSR is a new open-source package registry for JavaScript and TypeScript. This particular release has caught my attention, and I’m excited to explore if and where JSR fits into our overflowing ecosystem. Setting the stage The JSR website has a page called Why JSR? I want to explore the _why_ a little bit further. I think that the _why_ points to JSR potentially being the future of the JavaScript ecosystem. NPM and JavaScript modules If you’ve found yourself confused about publishing and consuming packages and modules in the modern ESM era, you’re not alone. When NodeJS was created, there was no standard for JS modules. Node introduced CommonJS modules, and NPM provided a way to publish and consume these modules in our applications. It’s been years now since ES Modules became a standard and we are still in a weird module purgatory with no clear end in sight. JSR represents a fresh start, free from the baggage of the Node and NPM ecosystems. JavaScript runtimes and interoperability New JavaScript runtimes are popping up every year. WinterCG (_Web-interoperable Runtimes Community Group)_ was started to improve interoperability for the various runtimes with some standard APIs. Node has made steps towards this goal, but it might never get all the way there and NPM is coupled pretty tightly to that ecosystem. JSR supports several runtimes (depending on the package). This is a huge opportunity for it to become the package manager for the ecosystem at large. See cross-runtime support section for more details. NPM Compatibility JSR doesn’t end up being a complete departure from NPM since it includes an NPM compatibility layer. The docs highlight some limitations and provide deeper technical details on how this piece works. The simple overview is that you can install and use packages from JSR to a Node/NPM based project. The packages will get added to your package.json and node_modules directory. About the same as any package installed from NPM. JSR Overview At a high level, JSR is very similar to NPM. You can search for packages on the website. You can publish packages to their registry, and you can download packages from it as well. We touched on the two major features that set it apart from NPM: It only supports ESModules, and it has cross-runtime support. In the rest of the article we’ll explore the essentials (package management) and also some other really great features that feel like are bringing the JS package management ecosystem up to speed with our modern workflows. Native TypeScript I have to say I’m not surprised by this feature, considering JSR was developed by the same people behind Deno (a runtime that supports TS natively). It’s a great feature. If you haven’t figured it out yet TypeScript is a big deal and doesn’t seem to be fading away anytime soon. So what exactly does TS support look like in a package manager, though? If your runtime supports TypeScript natively (like Deno) - it can consume the TS files in your package directly. For environments that don’t, it will automatically compile your code to JavaScript and package it with type declaration files (.d.ts). Pretty, stinking, cool. The docs include a page called “about slow types”. It is probably worth a read on its own ,but the TLDR is that JSR will analyze your TS code and penalize you in certain ways if you have some type code that it considers to be slow. On the page, it outlines exactly what these penalties are, as well as what it considers slow types to be. Slow types will also come into play when we get into package scoring later in the article. Packages The docs have a page dedicated to packages. It covers some important stuff like deleting packages, versioning, documentation, and publishing. We’ll touch on some of it with an emphasis on the things that are done differently or better than with NPM. jsr.json file jsr.json is a configuration file that specifies a name, version, and exports of a package. It doesn’t include a list of dependencies like you would have in a package.json file. This is a configuration file for a package to be published to JSR. JSR dependencies are defined in an import map file or a package.json file, depending on the runtime. Adding packages to a project Adding packages to your project will vary depending on your target runtime. Here’s an example of installing it for Deno and NPM using various package managers. For Deno, an import map entry is created. For NPM, it gets installed as an NPM package using the JSR NPM compatibility layer. ` If the runtime has native JSR support, you don’t need to explicitly install packages. You can important them using the jsr: scheme. ` As you can see semantic versioning is supported and works similarly to NPM. Publishing packages If you want to publish a package to JSR, there are many important rules you need to be aware of. I recommend reading “Publishing packages” before moving forward with this. The main things to note are: ESModules only, npm packages are supported, JSR packages are supported, and node APIs are supported. So there aren’t many constraints. You just need to understand how exactly to do these things. IE: how do I use NPM dependencies, how do the imports work, etc? Once you’ve got all that down, you will be ready to publish your first package to JSR 😃 Documentation JSR emphasizes quality package documentation. It’s one of the factors in their package scoring algorithm, which we will discuss shortly. The important parts of a package’s documentation include: * a README.md file * symbol documentation - functions, interfaces, classes, etc * module documentation - docs for each exported module in a package The symbol and module documentation are written using JSDoc. The JSR website generates some nice documentation based on these 3 pieces on your package page. This means you can understand a package's entire public API without ever leaving jsr.io. Browser support The cross-runtime support is amazing, but I was curious where the original JavaScript runtime fit (the browser). According to the documentation: “You can use JSR with any tool that supports ES modules, and either has native support for JSR or supports npm packages using node_modules.” Since modern web browsers support ES modules, I will count this as JSR support. From what I can tell, though, there is one caveat. To include a module on a web page, we need a URL to download it from. Can we publish our package to JSR and use it to load a module via a script tag? According to the JSR usage policy, no. The “Unacceptable use” section states: “It is not acceptable to use JSR as a CDN for serving assets directly to web applications in a browser, except for development purposes.” So, it seems that this is a no-go for now. We will probably need to wait a bit for CDN services like jsdelivr to pull packages from the JSR registry, similar to what they do with NPM currently. Other notable features We’ve covered the most important bits about package management, TS support, NPM compatibility, etc. But there are still a few unique features that add an extra bit of sparkle to JSR. Scoring We mentioned earlier that documentation plays a part in a scoring algorithm. JSR analyzes all of the packages published to its registry and assigns them a score based on certain criteria: documentation, best practices, discoverability, and compatibility. This score is shown with every package listed on the website. You can also add a shiny badge to your README if you’re particularly proud of something. It’s still early on, so it’s likely this will evolve as time goes on. It’s an interesting gimmick, at the very least! Summary I am excited to have a new cross-platform compatible package manager that only supports ESM. As useful as NPM has been all these years, it carries a lot of baggage from “the olden days”. JSR’s native TypeScript support and reliance on modern standards is a breath of fresh air. It feels like I can publish a simple package without much ceremony. I’m excited to release my first package to JSR soon :)...

Apr 12, 2024

6 mins

JSRJavaScript

Level up your REST API's with JSON Schema

JSON Schema isn’t a hot topic that gets a lot of attention compared to GraphQL or other similar tools. I discovered the power of JSON Schema while I was building a REST API with Fastify. What is it exactly? The website describes it as “the vocabulary that enables JSON data consistency, validity, and interoperability at scale”. Or more simply, it’s a schema specification for JSON data. This article is going to highlight some of the benefits gained by defining a JSON Schema for a REST API. JSON Schema Basics Here’s an example of a simple schema representing a user: ` If you’re familiar with JSON already, you can probably understand most of this at a glance. This schema represents a JSON object with some properties that define a User in our system, for example. Along with the object’s properties, we can define additional metadata about the object. We can describe which fields are required and whether or not the schema can accept any additional properties that aren’t defined on the properties list. Types We covered a lot of types in our example schema. The root type of our JSON schema is an object with various properties defined on it. The base types available to define in your JSON Schema map to valid JSON types: object, array, string, number, integer, boolean. Check the type reference page to learn more. Formats The email property in our example has an additional field named format next to its type. The format property allows us to define a semantic identification for string values. This allows our schema definition to be more specific about the type of values allowed for a given field. “hello” is not a valid string value for our email type. Another common example is for date or timestamp values that get serialized. Validation implementations can use the format definition to make sure a value matches the expected type and format defined. There’s a section on the website that lists the various formats available for the string type. Schema Structuring JSON Schema supports referencing schemas from within a schema. This is a very important feature that helps us keep our schemas DRY. Looking back to our initial example we might want to define a schema for a list of users. We defined an id on our user schema of “user”, we can use this to reference that schema from another schema. ` In this example we have a simple schema that is just an array whose items definition references our user schema. This schema is exactly the same as if we defined our initial schema inside of "items": { }. The JSON Schema website has a page dedicated to structuring schemas. JSON Schema Benefits Validation One of the main benefits of defining a schema for your API is being able to validate inputs, outputs. Inputs include things like the request body, URL parameters, and search parameters. The output is your response JSON data or headers. There are some different libraries available to handle schema validation. A popular choice and the one used by Fastify is called Ajv. Security Validating inputs has some security advantages. It can prevent bad or malicious data from being accepted by your API. For instance, you can specify that a certain field must be an integer, or that a string must match a certain regex pattern. This can help prevent SQL injection, cross-site scripting (XSS). Defining a schema for your response types can help to prevent leaking sensitive data from your database. Your web server can be configured to not include any data that is not defined in the schema from your responses. Performance By validating data at the schema level, you can reject invalid requests early, before they reach more resource-intensive parts of your application. This can help protect against Denial of Service (DoS) attacks. fast-json-stringify is a library that creates optimized stringify functions from JSON schemas that can help improve response times and throughput for JSON API’s. Documentation JSON Schema also greatly aids in API documentation. Tools like OpenAPI and Swagger use JSON Schema to automatically generate human-readable API documentation. This documentation provides developers with clear, precise information about your API’s endpoints, request parameters, and response formats. This not only helps to maintain consistent and clear communication within your development team, but also makes your API more accessible to outside developers. Type-safety I plan to cover this in more detail in an upcoming post but there are tools available that can help achieve type-safety both on your server and client-side by pairing JSON Schema with TypeScript. In Fastify for example, you can infer types in your request handlers based on your JSON Schema specifications. Schema Examples I’ve taken some example schemas from the Fastify website to walk through how they would work in practice. ` ` We would use this schema to define, validate, and parse the query string of an incoming request in our API. Given a query string like: ?name=Dane&excitement=10&other=additional - we can expect to receive an object that looks like this: ` Since additionalProperties are not allowed, the other property that wasn’t defined on our schema gets parsed out. ` Imagining we had a route in our API defined like /users/:userId/posts/:slug ` Given this url: /users/1/posts/hello-world - we can expect to get an object in our handler that looks like this: ` We can be sure about this since the schema doesn’t allow for additional properties and both properties are required. If either field was missing or not matching its type, our API can automatically return a proper error response code. Just to highlight what we are getting here again. We are able to provide fine-grained schema definitions for all the inputs and outputs of our API. Aside from serving as documentation and specification, it powers validation, parsing, and sanitizing values. I’ve found this to be a very simple and powerful tool in my toolbox. Summary In this post, we've explored the power and functionality of JSON Schema, a tool that often doesn't get the spotlight it deserves. We've seen how it provides a robust structure for JSON data, ensuring consistency, validity, and interoperability on a large scale. Through our user schema example, we've delved into key features like types, formats, and the ability to structure schemas using references, keeping our code DRY. We've also discussed the substantial benefits of using JSON Schema, such as validation, enhanced security, improved performance, and the potential for type-safety. We've touched on useful libraries like Ajv for validation and fast-json-stringify for performance optimization. In a future post we will explore how we can utilize JSON Schema to achieve end-to-end type-safety in our applications....

Feb 16, 2024

5 mins

JSON

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

Join us backstage at CityJS Conf for this conversation with Jason Lengsdorf. In this discussion, we explore strategies for reducing stress and anxiety among engineers, ensuring they maintain relevance in the dynamic world of coding. Jason emphasizes the importance of self-assurance and the role of play in fostering continual engagement with evolving technologies. Moreover, we get a sneak peek into Jason's latest venture, "Web Lunch," a platform where he converses with developers who have found harmony between their careers and personal satisfaction. Coding isn't just a job; it's a passion and a lifestyle. Jason highlights the significance of pursuing work that excites and challenges us, echoing the sentiment that coding can be both a career and a hobby. By infusing enjoyment and creativity into our coding endeavors, we can shape our professional trajectories in alignment with our values and interests. This approach not only minimizes regret but also maximizes happiness and fulfillment in our careers. Central to our discussion is the pivotal role of effective leadership in creating a supportive and encouraging work environment. Leaders who prioritize the well-being and happiness of their team members foster a culture of collaboration and empowerment. Through mentorship, guidance, and opportunities for growth, these leaders enable developers to align their personal goals with organizational objectives, leading to increased job satisfaction and professional fulfillment. Adaptability is key to sustained success in software engineering. Jason emphasizes the value of remaining open-minded and continuously learning, even when it means stepping out of our comfort zones. Embracing discomfort is an integral part of personal growth, allowing us to overcome obstacles and unlock our full potential. By nurturing a spirit of curiosity and adaptability, developers can navigate the complexities of their careers with resilience and enthusiasm....

Apr 25, 2024

2 mins

JavaScriptMentorship

Full-featured User Authentication Made Easy with Clerk

Intro

Clerk overview

Auth features

React framework integrations

React Component API

React Hooks API

ClerkJS API

Server-side APIs

Clerk Node

Clerk Backend API

Webhooks

Serverless database integrations

Conclusion

Dane Grant

You might also like

Improving INP in React and Next.js

JSR - The cross-platform package manager for ESM

Level up your REST API's with JSON Schema

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

You might also like

Improving INP in React and Next.js

JSR - The cross-platform package manager for ESM

Level up your REST API's with JSON Schema

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024