Most web applications feature user accounts in one form or another.

To the user, having a login form seems simple enough. But behind the scenes, there's a lot going on. You need to securely store and manage user sessions, handle authentication and authorization, and protect against malicious attacks.

Without knowledge of the underlying concepts, it's easy to make mistakes (even if you decide to use a third party service or library to do all the hard work for you). Weak authentication systems, misconfigured route protection, and flawed session management all lead to vulnerabilities and negative user experiences.

The Authentication Strategies & Implementation workshop is your guide to implementing industry standard user account flows in a modern web application.

Securely managing passwords, enabling two-factor authentication, and integrating with third-party providers are just some of the processes you will practice. You'll also learn how to handle user preferences, session data, and send emails to users. This will take you all the way to the point where you could easily add Single-Sign On (SSO) support–a must if you’re building a business-to-business application.

There are a lot of moving parts to consider, but this workshop will give you the confidence to tackle them all.

Cookies

The workshop begins by diving into cookies. This fundamental part of web browsing is often misunderstood, but important to understand. We keep it simple to ramp you up slowly on the web’s original state management solution. This also introduces us to important UI patterns you’ll want to use in other areas of web development as well. It’s surprisingly deep! Topics include:

Storing user theme preferences in a cookie
Server-side cookie handling
Using fetchers for non-navigation mutations
Optimistic UI updating to apply changes immediately

Session Storage

Storing user preferences in cookies is fine, but you need to be more careful when it comes to session data. It's vital that users with devtools or malicious client-side JavaScript can't access or modify the data inside of cookies. In this section, you'll learn:

Cookie-based session data persistence
Properly getting, setting, and updating session data
Deleting data after reading
The flash pattern for short-lived messages

User Sessions

Depending on the amount of data you need to store, it may make sense to use a different storage mechanism for session data. For this workshop we will continue to use cookies, however we will switch to using a dedicated session cookie. This section will teach you:

Create a session storage object for storing user data
Transform form submissions into user objects for storage
Retrieving user information from cookies then the database

Passwords

Passwords are the most common way to authenticate that a user is who they say they are. Obviously, storing them in plain text is a bad idea, but even encryption isn't enough. You need to properly prepare to securely handle passwords:

Create a Password model in the database
Generate secure password hashes with the battle-tested bcrypt algorithm
Protection against password attacks
Update signup route to securely create records

At this point, you have the ability to create users and store their passwords. But how do you actually log them in? And how do you log them out? In this one we’re also going to learn about imperative mutations which you’ll definitely want to know for other app features. This section will teach you:

Verify a user's password hash with bcrypt
Handling optional vs. required user data
Guard against timing attacks
Clearing session data on logout
Handle edge cases like deleted accounts
Set expiration dates for session cookies
Implement automatic logout after a set idle time

Protecting Routes & Role-Based Access

Most web application have routes that you need to be logged in to access. It's one thing to prevent this in the UI, but the real thing you need to do is protect the data that powers those pages. There are also considerations for different user roles and permissions. This section will teach you how to:

Ensure users only access data they own
Restrict private pages to logged in users
Implement smart redirects for login and logout
Specify and enforce permissions with Role-Based Access Control (RBAC)

Managed Sessions

Imagine a user logging in on a public computer, who then forgets to log out. This security risk can be mitigated by implementing a session management feature:

Add a session model to the database
Update auth utils, login, and logout routes to query sessions
Refactor for session expiration support
Create a page for displaying & managing active sessions

Email Verification & Password Resets

Email is one of the most common ways to verify a user's identity. If a user loses access to their account, needs to reset their password, or wants to change their email address, you'll need to send them an email. While the actual sending of the email is best handled by a third-party service, the process flow behind the scenes is what you'll need to implement:

Integrate a third-party email API
Share session data between routes for multi-step flows
Style HTML emails
Generate time-based one time passwords (TOTP) for password resets
Force verification of email address change

Two-Factor Authentication

Two-factor authentication (2FA) is a great way to add an extra layer of security to your application. It requires the user to enter a code from a second device along with their username and password. Even if an attacker determines a password, they won't be able to access the account without the second factor. In this section, you'll add 2FA to the Epic Notes application:

Handle the 2FA enable flow
Provide the user with a QR code
Implement a 2FA code input form
Verify the code and log the user in
Require re-verification
Provide option to disable 2FA

Third-Party Authentication

There are several reasons to use third-party authentication providers. It can be a great way to reduce friction for users, or allow easier access to other data. The most common way to do this is with OAuth 2. Once you’re finished with this section, you’ll be geared up to implement third party auth with any provider. Including Single-Sign On (SSO) flows. We’ll be following these steps:

Add an authentication strategy to enable GitHub login
Create a connections model to associate users with providers
Prevent duplicate account connections & hijack attempts
Pre-fill user account data based on third-party login
Mocking third party APIs for testing
Gracefully handle login errors
Implement smart redirection to return to original page after login