Table of Contents
IntroductionMaximiliano 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.
Authentication ConceptsMax 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.
Implementation OverviewMax highlights three authentication implementation options: Custom Authentication, Identity Providers, and Identity as a Service (IDaaS).
Web Authentication Strategies
HTTP Auth & Password SecurityMax begins outlining some security risks facing web applications. Web authentication strategies like HTTP Auth and password security are also introduced in this lesson.
Multi-Factor & Passwordless AuthenticationMax 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.
Auth Strategies UsageMax summarizes the security concerns around each authentication strategy and answers questions about passwordless authentication across multiple devices.
Classic Login Flow
Enhancing Login FormsMax 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.
Coffee Masters Project SetupMax 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.
Form Accessibility & UX PracticeMax 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.
Creating Register EndpointMax 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.
Hashing & Login EndpointMax 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.
Calling Auth EndpointsMax adds onsubmit events to each form to call the appropriate API methods. Results from each API request are logged in the browser console.
postLogin & logout FunctionsMax 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 APIMax 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".
Saving CredentialsMax 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.
Retrieving CredentialsMax 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 ProvidersMax 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.
Generating HTML CodeMax 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.
Login From GoogleMax 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.
Testing Login with Google AuthMax tests the Login with Google functionality in different browsers to highlight the different ways Federated Login is implemented.
WebAuthn OverviewMax 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.
WebAuthn WorkflowsMax 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.
SimpleWebAuthn & WebAuthn.ioMax 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.
Identifier-First FlowMax 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.
WebAuthn Server EndpointsMax 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.
Registering & AuthorizingMax 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.
Login with WebAuthnMax 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.
PasskeysMax 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.
Next Steps & Best PracticesMax shares some authentication best practices for native apps, user experience, autologin, and privacy concerns. Ideas for extending the course project are also provided.