Learn Babel, Jwt and Scss

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Do you want to allow users of your app to create an account and sign in with their Google profile? If so, this 10-minute video will show you how to set up within your Auth0 tenant! 

The Google social connection allows users to log in to your application using their Google profile. By simply adding the connection within your Auth0 dashboard, enabling it for your application, and creating a project within your Google developer console, you can be up and running within no time!

How To Add Google Authentication with Auth0

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Now that we have both the user and the token we can encode a JWT. This is made easy by the `jsonwebtoken` library that we will be using. 

To create a function that encodes a jwt, the function will need the user and token. Inside the function, definition create a `jwtPayload` object that just contains the essential data for encoding. Then, pass the payload to the `jsonwebtoken` library `sign` method and return the signed token.

Finally we store the jwt in the user's localStorage.

Encode User Data with JSON Web Token (JWT)

Now that we have our encoded JWT we need to be able to decode it!

The `jsonwebtoken` library makes this very easy. All we have to do is pass the `jwt` and our `token` to a decoder function. In that function definition we pass the arguments into the `verify` method and return the result.

Identify Users with JWT

We are going to use our JWT to make a protected request. 

All we have to do is create a button with a click event that calls our `fetchRepos` function. In the fetchRepos function make a fetch request to the `/repos` endpoint. In the fetch, pass an Authorization header with your JWT as a Bearer token. Then just await the response!

Use JWT to Make a Protected Request

We are going to simulate user verification when making a protected request. To simulate the database we are just going to use a simple array.

We verify the user by grabbing the JWT off of the authorization header in the request. We then look for a user in the database with a matching JWT. If the verification is successful we can give the user the data they requested.

Handle a Protected Request with JWT

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

Add Github Login to Your Web App with OAuth 2.0

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Learn the essentials of enabling semantic form validation HTML and styles in preparation to use our form design system with the validation solution of your choice.

We will add an SVG to our form descriptions when the error class is applied and look at a workaround to style the SVG through a Sass function.

Create Accessible Styles for Invalid Form Fields

Let's add a key missing element to our form design system - the submit button! Learn how to reset browser styles, and use our theme system to create accessible styles across `:hover`, `:focus`, and `:disabled` states.

Create Custom CSS Styles for Form Submit Buttons

Often we can improve the user experience by grouping related fields, such as first and last name. In these cases, it's appropriate to include `<fieldset>`. We'll first learn how to semantically create the fieldset HTML. Then, we'll set up a series of scalable classes that are flexible for various layout configurations. The layout classes will also be intrinsically responsive - meaning, they will respond to their parent container _or_ the viewport without the use of media queries!

Define Semantic Fieldset HTML and Create CSS Styles For Responsive Form Layout

In the last two lessons, we set up the initial state styles for radio buttons and checkboxes. Now we'll add styles for the focus and disabled states using our existing Sass mixins. We'll do this by layering box-shadow effects of a white border and blurred primary color.

We'll also learn about an up and coming pseudo selector - `:focus-within` - that will be used to apply styles to the label of a control in a `:focus` state.

Create Custom Radio Button and Checkbox CSS Styles for Focus and Disabled States

We'll setup the layout structure for our custom radio button and checkbox styles using CSS grid. These input types will share the `.form-control` component styles. This lesson will apply the initial styles to prepare for creating custom visual control styles.

Similar to focus states for selects, we will need to add a wrapping span and nested span to our radio buttons and checkboxes to apply visual styles to these native elements.

Create A Layout Structure with CSS Grid For Radio Buttons and Checkboxes

In the previous lesson, we set up the initial state styles for form selects and multi-selects. Now we'll add styles for the focus and disabled states, inclusive of a workaround necessary due to the lack of a parent selector in CSS.

The way we will get around this for our focus styles is to add a sibling span element to apply the styles and position those styles on top of the Select element.

Create Custom Select CSS Styles for Focus and Disabled States

We'll begin to apply our theme styles for our text inputs by creating the `.form-field` component. We'll make use of the Sass feature of "mixins" to create `:focus` and `:disabled` styles that can be reused. While creating the `:focus` and `:disabled` states we'll discuss the importance of contrast and keyboard access for accessibility.

An important take-away is that you need at least a 3:1 contrast ratio between your border and background AS WELL AS a 3:1 contrast ratio between your border and focus state.

Use Sass Mixins to Style Inputs with Accessible Contrast and Keyboard Access

Using modern CSS and in particular CSS grid and `clip-path` we can define cross-browser compatible custom select CSS styles inclusive of the dropdown arrow. We'll continue ensuring all styles are re-themeable by using the Sass functions we've already created within our form design system. We will style both the default single select, and a multi-select using `multiple`.

Create Custom Form Select and Multi-select CSS Styles

Learn how to begin addressing browser inconsistencies by resetting base styles across text inputs, textareas, and selects. We'll also review a few quirks related to mobile browsers and responsive design when dealing with form fields. And we'll uncover how to normalize `<select>` which was formerly one of the trickiest fields but is vastly easier now thanks to modern CSS through the `appearance` property.

Create Reset Styles to Normalize Form Fields Cross-Browser

We'll make a starting point for our form layout styles by creating `.form-group` which will add a bit of `margin` between fields. This will be our first design system component, and we'll also include styles for the `label` contained in this class.

Create the `form-group` Component Styles

We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system. 

We will set up Sass variables for the initial them and learn how to use the !default flag to allow our system to be easily overridden from project to project, making our form styles ultra transferable and reusable. You'll also learn how to leverage Sass color functions for ease of theming. We'll map the Sass variables to CSS variables so that as we build up our system we can use CSS variables for the most flexibility in our theming.

Initialize the Form Design System Setup with Sass and CSS Variables

View a preview of the form fields we'll be creating in this course, inclusive of custom CSS styles for text inputs, textareas, selects, multiselects, radio buttons, and checkboxes. Then get an overview of the base project and key parts of the Eleventy build process in regards to compiling with Dart Sass and use of Nunjucks for project template scaffolding. 

Prior experience with Eleventy or Nunjucks is not required, but you may also enjoy learning how to [create an Eleventy site from scratch](https://egghead.io/playlists/build-an-eleventy-11ty-site-from-scratch-bfd3?af=2s65ms) in less than 20 mins in my other egghead collection.

Course Introduction: Accessible Cross-Browser Form Field CSS Styles

Universal Login is Auth0's implementation of the login flow, which is the key feature of an Authorization Server. Each time a user needs to prove their identity, your applications redirect to Universal Login and Auth0 will do what is needed to guarantee the user's identity.

This video will walk you through how to customize and brand the Universal Login experience. This includes setting a custom domain, styling the user emails, and add your company logo to the form. 

Customize the Auth0 Universal Login

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Role-Based Access Control (RBAC) is the idea of grouping permissions together by a role. Users are assigned a role through the Auth0 dashboard the corresponding permissions are placed on the user's access token (JWT) after authenticating. That access token can be extracted by an Auth0 SDK (this video uses JavaScipt/ ReactJS) and sent to a custom server. 

Server Side logic (this video is based on NodeJS and ExpressJS), can then check for specific permissions and then allow or reject certain resources. 

-------------

Starting point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-beginning

Ending point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-final

Role Based Auth in NodeJS with ExpressJS and Auth0

In simple terms, authorization is the process of verifying what users have access to (after authenticating). This video assumes that you already have authentication set up and are ready to add authorization. 

Authentication is the process of verifying if a user is who they say they are. After a user successfully authenticates, access JWTs are issued back to the application. 

In our case of authorization, we are using the JWT (JSON web token) in our NodeJS / ExpressJS API calls, to verify the user has the correct access to the desired resource. 

Authorization in NodeJS with ExpressJS and JWT

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results