Pro Workshop

Authentication Strategies & Implementation

Authentication Strategies & Implementation

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.


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

Login & Logout

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