JS Nation

JSNation 2023

Passwords are terrible and easily hacked, with most people not using password managers. The credential management API and autocomplete attribute can improve user experience and security. Two-factor authentication enhances security but regresses user experience. Passkeys offer a seamless and secure login experience, but browser support may be limited. Recommendations include detecting Passkey support and offering fallbacks to passwords and two-factor authentication.

Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand? In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfill for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.

The State of Passwordless Auth on the Web

Phil Nash

Vue.js Live Conference

Vue.js Live 2024

This Talk introduces authentication in Vue.js and emphasizes that it is not as difficult as it may seem. The speaker explains the concept of authentication and its importance. A code example is used to demonstrate how to implement authentication in Vue.js, including separate UI parts for login, home, and dashboard views. The Talk also covers handling authentication in the Vue.js router, including defining routes, accessing user credentials, and making requests to the backend.

In the ever-evolving landscape of modern single-page applications, VueJS stands out but also presents us with challenges. Among them, authentication is crucial: ensuring the user's identity and securing their journey within your application. Fear not; we're here to guide you through these exciting frontiers. In my session, I'll unravel the secrets of authentication in VueJS applications, making it a delightful learning journey for everyone while keeping the focus on the most critical parts. I'll provide an overview of an authentication flow, break down each step, and demystify the role of JWT tokens in the process.  Whether you're a seasoned VueJS developer or just getting started, you're welcome. A dash of prior experience with user authentication certainly doesn't hurt, but it's optional.  Target audience: Web Developers of all levels who want to learn about security topics and best practices. Key learnings:- Giving a small introduction to the most essential terms and concepts of Authentication;- VueJS is used as an example, but the concepts will be agnostic.

Who Are Vue? Authn In Vue, The Important Parts

Ramona Schwering

React Day Berlin

React Day Berlin 2023

This workshop focuses on the future of authentication, specifically passwordless authentication. It explores the challenges with passwords and introduces various passwordless authentication methods such as magic links and WebOfN. The registration and authentication process for passwordless authentication are discussed, along with the use of passkeys for authentication. The workshop also covers the setup of Auth0 and the creation of a Next.js application with Auth0 integration.

Passwords have long been the keys to our kingdoms. However, they often become the weak points in our armor — forgotten, misused, or exploited. Our Next apps often make use of passwords to authenticate users, but what would a world with no passwords look like? And how we can start driving into that future today?

Authentication Beyond Passwords

Juan Cruz Martinez

This workshop covers the implementation of authentication in a JavaScript application using Node and React. It explores the concepts of authentication and user access, token-based authentication, and the implementation of API calls for login and actions. The workshop also covers the creation of middleware for validation and the implementation of social login. It concludes with a discussion on session management, building forms with flows, customizing screens and authentication methods, and upcoming releases and community engagement.

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including: - User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.

0 To Auth In An Hour For Your JavaScript App

Asaf Shen

React Summit

React Summit 2023

This is a React Node.js workshop that covers implementing Dscope authentication in a React project. It explains how to set up a Dscope account and customize authentication flows using the Dscope console. The workshop also covers using React Hooks and the Dscope provider, adding dynamic login and logout functionality, protecting data with session tokens, and validating sessions with Node.js middleware. Additionally, it demonstrates how to customize authentication flows in the Dscope console.

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps. While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.

0 to Auth in an hour with ReactJS

Kevin Gao

Node Congress

Node Congress 2023

This Workshop focuses on adding passwordless authentication to a node application, covering basic authentication concepts and the importance of authentication for application security. It explores session management using server-side sessions and client-side tokens like JWTs. The Workshop demonstrates the implementation of various authentication methods, including one-time password and OAuth. It also discusses the validation and refreshing of session tokens, as well as the customization of authentication methods and the storage of public keys for multiple instances.

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods. Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters Prerequisites- IDE for your choice- Node 18 or higher

0 to Auth in an Hour Using NodeJS SDK

Remix Conf Europe

Remix Conf Europe 2022

Today's Workshop focused on building a real-time chat application with Superbase and Remix. The workshop covered various topics such as creating Superbase tables and data, fetching data from Superbase, enabling row-level security, adding Superbase authentication with GitHub, and troubleshooting authentication and data access. The workshop also touched on mutating data in Superbase, implementing real-time subscriptions, and deploying the application. Additional resources and courses were mentioned for further learning. Overall, the Workshop provided a comprehensive overview of building a real-time chat application using Superbase and Remix.

Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!

Building a Realtime App with Remix and Supabase

Jon Meyers

Node Congress 2022

Welcome to the workshop on managing authentication in Next.js. We'll cover custom authentication methods, integrating Firebase, and the pros and cons of different approaches. We will explore bcrypt for password hashing and comparison, and JWT tokens for authentication. Iron Session will be used for cookie management. The importance of server-side rendering and protecting routes will also be discussed.

Next.js is a compelling framework that makes many tasks effortless providing many out-of-the-box solutions. But when it comes to authentication and user security, it's our mission to make it reliable, secure, and efficient. In this workshop, we'll focus on different user authentication and session management approaches, starting from a custom authentication strategy (that we will build together), and ending learning how to identify and integrate the right auth provider (Auth0, Firebase, etc.) for any app. Table of contents:- A brief introduction to Next.js- Building an authentication mechanism from scratch- Why we should avoid custom authentication- How to identify the proper authentication mechanism and provider- Integrating NextAuth.js, Auth0, Firebase, or any other provider <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Managing Authentication in Next.js

Michele Riva

This Talk is about server-side authentication with Remix, Prisma, and the web platform. It covers adding authentication to a Remix app, troubleshooting and login setup, handling user login and session creation, creating user sessions and redirects, handling user ID retrieval and validation, and working with cookies in Remix. The speaker emphasizes that Remix is ready for production and suitable for enterprise apps. Remix simplifies the mental model and improves performance by bridging the network gap between the front end and back end.

In this talk, we'll get a live coded demo of building custom hand-rolled authentication. When you have the right tools (and we do), authentication can be quite simple and secure. This is more (and better) than just: "Install this library and you're good to go." When we're done we'll have our own auth code that can evolve with our ever-changing requirements without a need to learn some library-specific APIs. We'll be leveraging the Web Platform the way it was meant to be done to give us simple and secure server-side authentication for the web. You can check the slides for Kent's talk <a href="https://slides.com/kentcdodds/server-side-auth-with-remix-prisma-and-the-web-platform">here</a> as well as <a href="https://github.com/kentcdodds/node-congress-auth">demo code</a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Server-side Auth with Remix, Prisma, and the Web Platform

Kent C. Dodds

GraphQL Galaxy

GraphQL Galaxy 2021

This talk discusses the implementation of GraphQL Authentication and Authorization at scale at Unity. The speaker explains how they use GraphQL Federation to expose business functionality through a centralized schema and the challenges they faced in handling auth at scale. They describe how they simplified configuration and scaling using Mercurius and implemented hooks and an Orth plugin. The implementation at Unity involves a Unity Orth endpoint and a central Unity Orth directive definition. The talk also covers the implementation of AuthPolicyHandler and AuthDirective for downstream services and showcases different access levels. The Mercurius Auth plugin provides a scalable approach to authentication and ongoing improvements include adding support for a filter schema.

At Unity, we use GraphQL federation to expose a wide range of business functionality across the organization in a single GraphQL schema. With an ever-growing number of services, this presents challenges for authentication and authorization across the board. I explore how we implemented GraphQL auth at the gateway level, the key design decisions behind it, and the wide-reaching benefits this can have. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL Authentication and Authorization at Scale

Jonny Green

GraphQL Galaxy 2020

This Workshop on GraphQL Authentication covers topics such as JSON Web Tokens (JWTs), OAuth flows, and different approaches to handling authentication in GraphQL, including resolvers, context, and schema. The use of custom directives for schema authentication is highlighted as a more complex approach. The importance of token validation and the benefits of using an authentication service like Auth0 are emphasized. The Workshop includes exercises that build upon each other, allowing participants to practice implementing authentication in GraphQL.

A hands-on workshop about handling authentication and authorization in GraphQL. During this 3 hour workshop you’ll learn how to add authentication to a GraphQL server using JWTs, and handle query responses with user roles. As a bonus we’ll be adding an authentication server with Auth0.The contents:<ul><li>        - Authentication with JWTs</li><li>        - Handling query responses and user roles</li><li>        - Auth0</li></ul>Prerequisites:<ul><li>        - JavaScript (preferably TypeScript)</li><li>        - GraphQL</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#authentication