Web Tools #428 - React Auth, CSS Tools, Bundlers, Angular

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #428 • September 30, 2021

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.

Clerk

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):

Setting up a first account in Userfront

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.

Userfront's Toolkit

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:

npm install @userfront/react --save

Then I can initialize Userfront and render my signup form:

import Userfront from "@userfront/react";

Userfront.init("account-id");

const SignupForm = Userfront.build({
  toolId: "tool-id",
});

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:

Single-sign On (SSO) options with Userfront

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:

Single-sign On (SSO) options with Userfront

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.
 
Animated Gradient Background Generator

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:

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

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.
 
Svelte-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.
 
A Tweet for Thought
 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

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

Key phrases

Older messages

Web Tools #427 - JS Utilities, Jamstack/CMS's, VS Code

Thursday, September 23, 2021

Web Tools Weekly WEB VERSION Issue #427 • September 23, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #426 - Learning Tools, Frameworks, Testing, Uncats

Thursday, September 16, 2021

Web Tools Weekly WEB VERSION Issue #426 • September 16, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #425 - CSS Tools, Media/SVG, React

Thursday, September 9, 2021

Web Tools Weekly WEB VERSION Issue #425 • September 9, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #424 - JS Utilities, Git/CLI Tools, Vue.js

Thursday, September 2, 2021

Web Tools Weekly WEB VERSION Issue #424 • September 2, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #423 - URL Structure, Media Tools, JSON, React

Thursday, August 26, 2021

Web Tools Weekly WEB VERSION Issue #423 • August 26, 2021 Advertisement Free PDF Generation API Use pdflayer to automate PDF generation on your website. This free API renders HTML to PDF quickly and

What Part Will Blockchain Play in the Streaming Wars?

Wednesday, September 29, 2021

People were used to viewing TV directly, seeing movies in theatres, and buying DVDs when they needed entertainment a decade ago, so the concept of streaming content was novel and uncommon. Streaming

UPDATES: The corporate campaign to tank reconciliation

Wednesday, September 29, 2021

The reconciliation bill, also known as the "Build Back Better" plan, has two main components. There is a wide-ranging collection of new policies, including: Paid family leave An expanded

01 - MANA WĀHINE TOA - The Goddess, warriors, and Mothers

Saturday, September 25, 2021

Enter the world of Wāhine Māori, who were once born with Mana which was forcefully torn away from them ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

John Carmack pushes out unlocked OS for defunct Oculus Go headset — and Fed to ban policymakers from owning individual stocks

Friday, October 22, 2021

Issue #564 — Top 20 stories of October 23, 2021 Issue #564 — October 23, 2021 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1

[New post] Collection Performance: Looping Over Other Collection Types

Friday, October 22, 2021

dotNetDave posted: " Subscriber Content I would guess that most code that is written defines a collection like this: var collection = new List<Person>(); Using List<> is perfectly fine

Trump SPAC’s market cap approaches $4.7 billion

Friday, October 22, 2021

TechCrunch Newsletter TechCrunch logo The Daily Crunch logo Friday, October 22, 2021 • By Alex Wilhelm Friday! Dear friends, we made it to the end of the week. It was a big, busy few days, so give

Embrace Your Inner Stooge 🤪

Friday, October 22, 2021

How The Three Stooges became icons. Here's a version for your browser. Hunting for the end of the long tail • October 22, 2021 Hey all, Ernie here with a refreshed piece about a troupe that you

Dear Tech God, Please Execute Your Civic Duty

Friday, October 22, 2021

Contribute to the internet's 'most democra-tech awards system': Invent hilarious award titles! Hacker Noon: How Hackers Start Their Afternoons Hacker Noon: How Hackers Start Their

JSK Daily for Oct 22, 2021

Friday, October 22, 2021

JSK Daily for Oct 22, 2021 View this email in your browser A community curated daily e-mail of JavaScript news ULID vs UUID: Sortable Random ID Generators for JavaScript UUID is one of the most used

Alpine.js Weekly #77

Friday, October 22, 2021

An announcement from the Alpine Components Team We've decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless

Chart | Should Investors Buy the Dip, Buy the Rise, or Follow a Plan? 📉📈

Friday, October 22, 2021

Which strategy has paid off the most in the last decade? Should Investors Buy the Dip, Buy the Rise, or Follow a Plan? Which of these strategies works the best in an investment portfolio? We look at

Writing clean code: Naming

Friday, October 22, 2021

Keep up-to-date with the latest programming news Codementor Your Weekly Digest TOP POSTS FROM THIS WEEK Tanaka Mutakwa Writing clean code: Naming When you start learning how to code your main focus is

[Python Dependency Pitfalls] A total mess?

Friday, October 22, 2021

Hey there, Recently I watched a Pythonista ask for advice on setting up a Python project on his work machine. This new developer had some prior experience with NodeJS and had just started to get his