Issue #428  (Userfront Review, CSS/HTML, Build Tools, JS Lib Plugins)09/30/21

The following intro is a paid product review for Userfront, a developer-friendly service to add user authentication to your React apps.

If you're building JavaScript-based web apps, user authentication is probably something you have to deal with regularly. Maybe you've looked at a few options to streamline this process. Userfront is a developer-friendly user authentication service that I think is worth a look.

Before I get into the details of implementation, here's a rundown of the basic features of Userfront:

• Simple User Authentication - Set up user auth in minutes and manage user roles and details with an intuitive dashboard.
• Security Best Practices - Userfront is secure by default, stays up to date automatically, and implements cutting-edge security features.
• Developer-friendly - Userfront includes a local testing environment for pre-production, and has solid documentation.

Userfront provides authentication and user management for apps built with plain JavaScript, React, Vue, Node.js, and Angular. I'm going to show you some of Userfront's features in the context of my own React app.

After creating my Userfront account (the free plan allows up to 10,000 active users and unlimited logins), I'm going to set up a React app with React Router. The app will include options for my users to sign up, log in, request a password reset, and access a dashboard for user options – all of this can be implemented easily with Userfront.

Once I have a basic template in place with my routes, I can set up a signup form for my users. When I created my Userfront login, I was able to set up an account that I'll use for this particular project (later I can add more "accounts" under my primary login for separate projects in my dashboard):

Once I've named my account, I can start adding Userfront's auth tools by visiting the "Toolkit" section. Here I have access to instructions for adding components for Signup, Login, Password Reset, and Logout.

Each of these tools includes code snippets for plain HTML/JS, React, Vue, and Angular – all easy to cut and paste into my code.

For my React app, I'll first install Userfront's components via npm:

Then I can initialize Userfront and render my signup form:

After that, I can include my signup form using the <SignupForm /> component when rendering my HTML. The code above uses generic example IDs but in my real-world setup I'm using the ID for this specific account in my Userfront login and the tool ID that corresponds to my signup form.

As an alternative to plain email login, I can also incorporate various Single-sign On (SSO) options like Google, GitHub, and Facebook, which I've selected in my dashboard:

Once these are in place, each of my selected providers will appear at the top of my signup and login forms when I render them in my app. For each provider, I need to set up a client ID, client secret, and a redirect URL (which Userfront provides). These are typical when setting up SSO. The Userfront docs will walk you through this nicely.

If I want to add the login and password reset components, I can do so by initializing them with the correct tool IDs, then I can use <LoginForm /> and <PasswordResetForm /> in the appropriate parts of my App.js file – similar to what I did for the Signup component.

When users sign up using my signup form, I can visit my Userfront dashboard where I'm able to view registered users and manage their roles, access control, and more:

This interface allows me to define roles for users like owner, admin, member, editor, and so forth. I can also divide application access via Tenants, providing access to certain parts of my app for some users while providing access to other parts of the app to different users.

Userfront uses JSON Web Tokens (JWT) as its cookie type for secure authentication. User data and Tenants are accessible via the Userfront REST API., allowing you to build custom, complex apps with authentication features already built in.

Your apps can build on what I've described above using Userfront's React tutorial found in their docs. Personally, I found the docs very dense, so they took some time to get used to, but there's lots in there to help you build auth-based websites and apps so it's worth spending some time with the docs if you find them a bit overwhelming at first.

As mentioned, Userfront has a decent free plan of up to 10,000 active users with unlimited logins. So if you're looking for a good toolkit to easily add authentication and user management features to your JavaScript apps, you should definitely give Userfront a try.

Now on to this week's tools!

 

CSS and HTML Tools

Huey
A color palette generator that lets you randomize palettes or you can select a start color then adjust and customize the palette as needed.

htmlq
An HTML processor that uses CSS selectors to extract bits of content from HTML files.

html-to-react
A lightweight library that converts raw HTML to a React DOM structure.

Paper to HTML Converter
An experimental prototype that renders scientific papers in PDF, LaTex, or nxml format to HTML so they can be easier to read by screen readers or on mobile devices.

blockdom
A fast virtual DOM library that uses cloneNode(true) on blocks to speed up the diff process.

Animated Gradient Background Generator
Online tool to generate CSS that animates a background via the background-size property and keyframe animations.
 
Linkify
JavaScript utility that finds links in plain text and converts them to HTML anchor tags. Works on  URLs, #hashtags, @mentions, and more.

Type Scale Generator
An easy-to0use type scale generator for consistent typography with code generated for CSS and Tailwind.

TailwindCSS Buttons
A unique collection of 40+ copy-and-paste CSS buttons with hover effects and animations, for use in Tailwind projects.

10015 Tools
An all-in-one toolbox of text, image, coding, color, CSS tools, and more, with Chrome and Firefox extensions available to more easily access the tools.

On the Release Radar:

• Linaria - Zero-runtime CSS-in-JS now at version 2+
• Stitches - Near-zero-runtime CSS-in-JS now at version 1+

Build Tools, Bundlers, etc.

Sell. Win. Celebrate. AppSumo.
AppSumo is the #1 digital marketplace for entrepreneurs, get your name in front of 1M+ entrepreneurs, founders, and small businesses. You can sell your software, ebook, PDF, template library, online course, WP plugin, extension, or even event tickets. sponsored 

chore-cli
A super assistant that can generate development infrastructure for projects or libraries, such as Prettier, ESLint, Husky, or even Github Actions config files.

Mitosis
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

Web2Img
A unique tool that lets you bundle your web files into a single image then extract them via Service Worker at runtime.

Espree
An Esprima-compatible JavaScript parser built on top of an older JS parser called Acorn.

bundle
A quick and easy way to bundle your projects, minify, and see the gzip size, all locally in your browser.
 
Roadroller
A JavaScript packer for large demos that was originally designed for js13kGames but remains usable for demos as small as 4KB.

Projectile
A native Windows or Mac app for managing your JavaScript projects that includes a Kanban board, package manager, integrated terminal, and more.

Create Eth App
Like create-react-app but for cross-platform Ethereum-powered apps.

replace-jquery
Automatically find jQuery methods from existing projects and generate vanilla JavaScript alternatives.

unplugin
A unified plugin system for Vite, Rollup, and webpack.

metro-minify-esbuild
Use esbuild to make your React Native code bundle faster.

devcert
Makes the process of adding SSL certificates to your local development server easier so you can use https locally without any ugly warnings.
 

JavaScript Library Plugins and Tools

Sell. Win. Celebrate. AppSumo.
AppSumo is the #1 digital marketplace for entrepreneurs, get your name in front of 1M+ entrepreneurs, founders, and small businesses. You can sell your software, ebook, PDF, template library, online course, WP plugin, extension, or even event tickets. sponsored 

@ngneat/input-mask
Angular library that creates an input mask for form fields, that's a wrapper for vanilla JavaScript Inputmask library.

svelte-undo
A small utility for managing an undo stack that you can subscribe to in your Svelte applications (or elsewhere).

Bootstrap 4 Tree View
A simple plugin to build a basic and elegant tree-view component with jQuery and Boostrap 4.

@ngneat/dag
An Angular service for managing directed acyclic graphs.

Angular Tailwind CSS Schematics
A schematic that adds Tailwind CSS to your Angular application.

Svelte-Motion
An animation library for Svelte-Apps based on Framer Motion.
 
Ember Simple Auth
A library for implementing authentication/authorization in Ember.js applications.

Inspector
An Angular library that lets you inspect and change Angular 9+ component properties.

edit-in-place
A flexible and non-opinionated library for adding edit-in-place functionality to Angular apps.
 

Commercial Apps and Classifieds

FlowBite - Figma UI kit built for integration with Tailwind.

Tech Productivity - A newsletter featuring productivity apps and articles. ad 

Dadroit - A Windows, Mac, and Linux JSON file viewer.

JumpStory - Millions of stock images (coupon: WTW50, 50% off 1st mth). ad 

TinyStore - Shopify-powered, no-code, online store platform.

TextSniper - Extract text from images and other digital documents.

A Tweet for Thought

Alex Trost with a friendly reminder that not all longform content is useful or practical when shared on Twitter.
   

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...

If you want to send a message to a friend who likes jazz music, you'll love JazzKeys.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris