0 To Auth In An Hour For Your JavaScript App

Rate this content
Bookmark

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.

This workshop has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

The main goal of the authentication process is to verify the identity of a user attempting to access an application or resource, ensuring they are who they claim to be and preventing unauthorized access.

The prerequisites include a basic understanding of JavaScript, React, Node, and Express. Familiarity with these technologies is recommended, and having a GitHub account is necessary to access the boilerplate code used in the session.

The two major processes involved in authentication are authentication itself, where the user's credentials are verified (usually done once at login), and validation, where the token or session is validated with each subsequent request to the server.

JWTs (JSON Web Tokens) are used to represent user session or user information securely. After the server validates user credentials, it creates a JWT that the browser stores and sends with subsequent requests for session validation.

Server sessions, which are stateful, allow for easier session management and revocation but don't scale well as they require database queries for each request. Client tokens, such as JWTs, scale better in microservice architectures but make token invalidation more challenging.

The authentication service manages complex aspects of authentication, such as JWT management and session token refresh, enabling developers to focus on application-specific logic rather than on the intricacies of secure authentication.

The authentication provider component in a React application initializes and configures authentication services, making them available throughout the application. It typically wraps the application's root component to ensure all child components have access to authentication functions.

Asaf Shen
Asaf Shen
57 min
17 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Authentication in JavaScript

Short description:

In this session, we will cover how to facilitate authentication to a JavaScript application using Node and React. We'll discuss authentication concepts, code the authentication part, and provide prerequisites for the session. Feel free to ask questions and interact with us.

Hello, everyone, again. My name is Asaf, and I'm going to cover in the next one hour or maybe a bit less, I'm going to cover how to facilitate authentication to a standard JavaScript application that is written in a Node and React application. My premise for you for this session is that you're going to have the ability to add authentication in no time to any application, and you have a better understanding about the moving parts authentication and how to do it in a manner that is both secure and have a good UX.

So, what we are going to cover in the next session, we're going to talk a bit about few authentication concepts. And then we are going to jump right into coding the authentication part in the application that we have. Just to mention the prerequisites, I assume you have a basic understanding about JavaScript, React, Node, and Express. You can manage it, even if you are not familiar with one of those concepts, but it is recommended. And also, if you want to check out the boilerplate code and to use the same application as I am going to use, you should have a GitHub account. I will publish the a open-source repository for the template application. You can use it. And, if you want, you can write the code in any IDE. I'm going to use VS Code. This is if you want to code and also Node 18 or higher.

One second. I want to see the chat here. So, if you have any questions, feel free to write them in the chat. I'll try to be responsive there and just hope that I'll see the chat. But feel free to also ask questions, pause, to turn on your mic. Whatever you feel more comfortable. Also, I have a colleague here and he can also answer the questions.

2. Introduction to Authentication and App Overview

Short description:

In this part, Assaf introduces himself and Descope, a platform that supports various authentication methods. He explains that the app they are working on lacks authentication and sets a one-hour deadline to implement it. The plan includes breaking down the authentication concept, designing the architecture, coding the client and server sides, and leaving time for debugging. Assaf also briefly describes the app they will be working on, which is a simplistic app with a dashboard page that displays information about ice cream consumption.

Okay. Before we start, very quick details about myself. My name is Assaf. I work at Descope. Descope has an amazing platform that can help every developer build a secure and frictionless authentication. We have basically support all authentication methods out there. We support both B2B application, business application, and consumer application. We are focusing more on passwordless, and we have multiple multiple approach to integrate with authentication service, either no code or some code or use the API. If you want, you can read more, you can just try the scope in Google or go to the scope.com and you'll find us there. Beside that, my experience besides arguing a lot with the product team, I write in GoLang and in JavaScript and TypeScript, and in my free time, I love to play Frisbee and learn about astronomy, and also I'm a Real Madrid fan, big game today, like that's it about me.

So, the story is the following. We are here in the sprint planning meeting, and we have a simple app, but it doesn't have any authentication, so we need you to do it, and you have one hour to do it, maybe a bit less because I talked a bit lengthy before. So, what we are going to do, we are going to break down the authentication concept. We are going to, this is the sprint, how we are scheduling this sprint. We are going to talk like a bit about the authentication concept and break down. We are going to have a design architect about what happens where in the application, what happens in the front end, what happens in the back end. We are going to code the client side, we are going to code the server side, and in the free time, we are probably going to leave a few minutes to coffee and debugging.

Before we are starting, I want to show you the app that we have. This is a very simplistic app. I hope it's running. No, it's not. I'm going to share the information about the repository, et cetera, later on. Just want to show you what we have and what we are going to build. We have a very simplistic app. This app has two pages, the dashboard page. Dashboard page shows you information. The concept of the app is give you information about your ice cream consumption. Doesn't really matter. The data doesn't really matter. It can be any application.

QnA

Watch more workshops on topic

Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
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.
Authentication Beyond Passwords
React Day Berlin 2023React Day Berlin 2023
127 min
Authentication Beyond Passwords
WorkshopFree
Juan Cruz Martinez
Juan Cruz Martinez
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?
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
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
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.