Web Tools #421 - VS Code, Testing Tools, React

The following intro is a paid product review for Clerk, an authentication and user management service for Next.js, React, and JavaScript apps.

If you've built any kind of app that involves registration, sign-in, and user profile management, then you may have looked around for various options to integrate these features easily and securely.

Clerk is one such option, letting you add authentication user flows to your apps in a matter of minutes. Clerk can be integrated with raw JavaScript apps, React apps, or Next.js.

Clerk lets you easily build onboarding experiences for your users that work and that ensure high conversion rates.

For this review, I'll present Clerk's features in the context of a Next.js app. The primary features that Clerk lets you integrate are:

• Sign-up with optional 2-step verification
• Single sign-on via Google, Facebook, GitHub, and more.
• Passwordless sign-in
• Multi-session sign-in

The Clerk Docs walk you through how to install and initialize Clerk for React and Next.js apps. I was able to work through the steps for putting together a Next.js app with single sign-on options for logging in.

Getting started with the aforementioned features only requires two basic steps:

• Set up your apps in the Clerk Dashboard
• Integrate each app's unique Frontend API with your code

In the example above, I've created two apps, one for Next.js and one for React. To connect one of these Clerk apps to my codebase, I simply add the project's unique Frontend API value inside a .env.local file, which is then used as a project constant, like so:

In my Clerk dashboard, I'm able to select which accounts the user can sign in with:

I can then start to use Clerk's components in my code's logic to customize the user flow to my own needs. Clerk offers prebuilt UIs for four primary components I can drop into my code:

• Sign Up
• Sign In
• User Button (allowing users to sign out and manage their accounts)
• User Profile (for profile management and security settings)

In my example, my app allows three options for logging in, according to what I set up in the Clerk dashboard:

I then used the following code in my pages/index.js file to display an option for a logged-in user to log out or manage their profile:

My page will then show the User Button component, which expands to display the user's profile email along with options in a modal overlay:

From there the user can choose the "Manage account" button to display yet another UI for managing various profile features like name, avatar, email, phone number, and connected accounts.

Additionally, the account management UI allows for powerful security-related account preferences:

Here the user can manage logged in devices, enable 2-factor authentication, and more.

The final thing I'll discuss here is how Clerk can be customized to your own app's needs. In the Clerk dashboard, select an app, then under "Development" you can go to "Settings > Themes" to choose from a number of options to customize the look and feel of Clerk's components for that specific app.

And this can be done for as many apps as you create. In addition, theming can be done via Props in a Next.js or React app, or you can use plain CSS.

For customizing user flows you can use Clerk's Control Components like SignedIn and SignedOut, among others, to allow you to show or hide specific parts of your pages based on the user's current status.

In short, if you're looking for a complete user management solution with a strong onboarding user flow, Clerk is definitely something you'll want to look into. Probably the only challenge I had when looking at Clerk is the gaps in the documentation, which are a work in progress. But the folks at Clerk are available on Discord to fill in any of those gaps for you, so that's a big help.

Try out Clerk today and check out the reasonable pricing options – I'm sure one of them will suit the needs and scope of your project.
 

VS Code, Text Editors, etc.

Anyfiddle
Another online playground for sharing and writing code. This one includes a number of different front-end and back-end languages and technologies.

Serendipity
A VS Code theme with dark and light modes that uses colors selected to be easy to use on a retina display.

Abracadabra
VS Code extension for automated refactoring of JavaScript and TypeScript, on top of the refactoring features already in VS Code.

Easy Pastes
An easy to use Pastebin alternative, with automatic syntax highlighting, to create, store, share code snippets.

Svelte Storm
An open-source Svelte IDE with a built-in state manager window for viewing your project in real-time. Built with Electron and available for Win, Mac, and Linux.
 
Git Urgent!
VS Code extension that allows you to git add all, commit, push with a single command.

Leaf
A platform for building coding tutorials that features a side-by-side auto-scrolling view of your code along with the article.

Twilight
A Lua plugin for Neovim 0.5 that dims inactive portions of the code you're editing using TreeSitter.
 

Testing and Debugging Tools

Console
Join thousands of engineers in subscribing to a weekly roundup of the latest in open-source software, curated by an Amazon engineer. sponsored 

tincan
A lightweight Jest-like testing library for Deno.

AsyncDebugger
Babel plugin and utilities for running async code at breakpoints. Also includes a REPL console for debugger statements in Node.

React Preview
Fast, instant React component previews in VS Code. Other IDEs will be added later.

Pulse
A powerful logging system for Apple devices that lets you record and inspect network requests and logs right from your iOS app.

Code Generator for HTTP Requests
Generate ”ready to run“ code snippets for making HTTP requests with Google Apps Script, JavaScript, Node.js and cURL commands.

Web Vitals
A Chrome extension that automatically checks Web Vitals scores on the website you're currently viewing.
 
Scepter
A mobile web inspector that helps you easily understand how a site is built, fix problems, or make tweaks.

vConsole
Another mobile debugging tool that lets you view console logs, network requests, cookies, LocalStorage, SessionStorage, and more.

CodeSee
Provides Maps and Recordings to help any developer in your team understand your codebase at any step of the development process.

Next Page Tester
The missing DOM integration testing tool for Next.js.

Cypress Example Recipes
A GitHub repo containing various recipes for testing common scenarios using Cypress, the popular front-end testing library.
 

React Tools

Console
Join thousands of engineers in subscribing to a weekly roundup of the latest in open-source software, curated by an Amazon engineer. sponsored 

React Trix RTE
A React wrapper for Trix editor, the popular rich text editor for web apps.

tsstyled
React visual primitives with first-class TypeScript support and a tiny footprint.

aux-router
React router that supports rendering of multiple independent (auxiliary) routes. Useful when you have a side panel in your app and you want to switch between pages without losing the visibility of that panel.

React Page Scroller
Simple React component for smooth full-page scrolling using CSS animations.

useCookieConsent
React hook for managing GDPR cookie consent state.

react stepzilla
A multi-step, wizard component for sequential data collection. Lets you throw a bunch of React components at it and it will take the user through those components in steps.
 
React Facade
An experimental library that uses Proxy and TypeScript that incorporates a strongly typed facade pattern in your React hooks.

Plate
Rich text editor plugin system for Slate and React. Has a declarative API with centralized configuration and state management.

react-use-please-stay
A React hook that animates the document title and/or favicon when focus from the page is lost. Or you can configure it to always animate.

@react-three/a11y
Brings accessibility to webGL with easy-to-use react-three-fiber components, including focus, tab index, screen reader support, and more.

React Tracked
State usage tracking with Proxies. Optimize re-renders for useState, useReducer, React Redux, Zustand and others.
 

Commercial Apps and Classifieds

Replay.qa - Screen recording tool that records console and network requests.

SiteSentry - Website monitoring service for SSL, domain, 404s, etc.

Nextless.js - Build scalable and production-ready SaaS products fast.

Advanced React - Learn to build fullstack JS apps with React & GraphQL. ad 

SaaS Blocks - Tailwind themes, templates, and components.

Fsetapp - JSON schema editor
 

A Tweet for Thought

A new shortcut on GitHub: Press "." to open any repo in a VS Code-like editor.
   

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

In the future, we'll have the technology to be able to order a pizza using a computer. Oh, wait – we had that technology back in 1974.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee