Maximiliano Firtman
Independent Consultant
Course Description
Improve login for your web apps! Tour the many authentication options available in modern web browsers. Go from basic password forms to federated logins with Google. Then, use the latest WebAuthn API and Passkeys, enabling the use of FaceID and other biometrics to remove passwords from web apps altogether!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: February 15, 2023
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 17 minutes
Maximiliano Firtman begins the course by sharing his extensive experience building progressive web applications and working with authentication systems. The course website contains links to the slides, instructions for downloading and installing the course repository, and notes for each topic covered throughout the course.
Max explains authentication, or authn verifies a user's or service's identity. Some authentication techniques include passing credentials, two-factor or multi-factor authentication, JSON web tokens, one-time passwords, and public key cryptography.
Max highlights three authentication implementation options: Custom Authentication, Identity Providers, and Identity as a Service (IDaaS).
Web Authentication Strategies
Section Duration: 28 minutes
Max begins outlining some security risks facing web applications. Web authentication strategies like HTTP Auth and password security are also introduced in this lesson.
Max talks through the process of using multi-factor authentication. Typically this strategy requires the use of an SMS message, authenticator app, or other device to validate a user's credentials. Passwordless authentication systems are a more secure solution since they remove access points for password theft or phishing exploits.
Max summarizes the security concerns around each authentication strategy and answers questions about passwordless authentication across multiple devices.
Classic Login Flow
Section Duration: 1 hour, 16 minutes
Max shares some techniques for enhancing forms both from an accessibility standpoint and a UX/security standpoint. Using label elements and HTML semantics is good for readability and accessibility. Differentiating forms by name in single-page applications and using the correct autocomplete values will help password managers provide the correct credentials.
Max spends a few minutes walking through the application used throughout the course. The code should be cloned from the repository, and dependencies should be installed.
Max improves the Coffee Masters registration form by adding HTML label elements and autocomplete attributes. Using the correct autocomplete attributes leverages the built-in functionality of the browser and 3rd-party password managers.
Max builds out the registration endpoint on the server. A route is added in Express for handling the post request, and a method for searching for existing users is created.
Max uses the bcryptjs library to hash passwords submitted during the registration process so they aren't stored in plaintext. When users log into the site, their submitted passwords are also hashed and compared to what's saved in the database.
Max adds onsubmit events to each form to call the appropriate API methods. Results from each API request are logged in the browser console.
Max creates the postLogin method that receives the API response object and a user object. If the response is ok, the user is logged in and redirected to the /account route. The logout method is also created in this lesson.
Credential Management
Section Duration: 24 minutes
Max introduces the Credential Management API, which can leverage to add auto-login capabilities to the application. Credentials can be saved and retrieved directly from the browser's password manager. This can also apply to federated credentials like "Sign in with Google".
Max uses the Credential Management API to store the email and password in the browser's password manager. This will make auto-login possible since once the credentials are saved, they can be requested automatically. The preventSilentAccess method is used when users explicitly log out to ensure they aren't automatically logged back in.
Max uses the Credential Management API to retrieve user credentials stored in the browser's password manager. If the API is not available or if the password manager is disabled, an exception will be thrown and can be handled using try/catch.
Federated Login
Section Duration: 50 minutes
Max explains both Google and Apple provide a federated login solution that allows developers to leverage third-party authentication systems. This creates a better user experience than a flow like OAuth since the user is not pushed to a separate website to log in.
Max creates a new project in the Google APIs console. Project settings are configured along with authorized JavaScript origins. The console creates a client ID for the project, which will be used in the application.
Max generates the HTML code to add to the application. Google provides configuration options for the sign-in button, the text on the button, and how the login functions on the page. When the configuration options are selected, HTML code is provided.
Max implements the Login with Google form. The client-side application passes the credentials provided by Google to the server. The server-side endpoints are also created.
Max tests the Login with Google functionality in different browsers to highlight the different ways Federated Login is implemented.
WebAuthn
Section Duration: 1 hour, 45 minutes
Max introduces WebAuthn, a multi-vendor effort supported by the FIDO Alliance and W3C. It's typically used as a two-factor authentication strategy and is supported in every browser.
Max walks through the two WebAuthn workflows: Registration and Authentication. When a user logs in with WebAuthn from a relying party, an authenticator like FaceID or a USB key passes the user's public key to the server for authentication.
Max explains that libraries remove much of the complexity around implementing WebAuthn because they handle the low-level cryptography operations while providing an approachable API for developers to utilize. Testing cross-device WebAuthn authentication workflows on WebAuthn.io are also demonstrated in this lesson.
Max implements an identifier-first workflow to the login form that determines the method of authentication based on the user's email. This allows multiple forms of authentication to be supported without cluttering up the login UI.
Max adds the WebAuthn registration and authentication endpoints to the server. Each identifier will have two endpoints. An "options" endpoint to register a new authentication identifier and a "verification" endpoint to verify the identifier.
Max updates the login form to present the user with options for WebAuthn authentication. The first step is allowing the user to register a new authenticator.
Max adds a link to the form to log in with WebAuthn or a passkey. This link will only appear if the user has added an authenticator to their account. Testing authentication flows in iOS, and the Chrome Dev Tools is also covered in this lesson.
Max describes passwordless options like magic links, OTP, and passkeys. The advantage of passkeys is that authenticators store keys in a cloud, so they are device agnostic. They can be shared without credentials being compromised.
Max shares some authentication best practices for native apps, user experience, autologin, and privacy concerns. Ideas for extending the course project are also provided.
Wrapping Up
Section Duration: 1 minute
Max wraps up the course with a summary of what was covered and a few final thoughts on authentication.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops