Learn Flexbox, Jwt and Nativescript

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

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

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

Sending a JSON Web Token is one way to valid your identity as a user of an API or service. In this lesson, we will see how to add an Express middleware which will check for a valid JWT and return a 401 Unauthorized error if not.

Add Middleware to Validate a JSON Web Token (JWT)

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

With just a handful of CSS properties, we can create an intrinsically responsive photo gallery using flexbox. This is accomplished by setting our preferred width as the `flex-basis` value and allowing items to both shrink and grow. The use of `object-fit: cover` on images allows them to fully fill up the list item without distortion or overflow. We finish the gallery with a small animated effect that alters `opacity`.

Create an Automatically Responsive Flexbox Gallery

With Auth0's React SDK, integreting an identity provider has never been easier. With a couple changes to your React app, creating an account within Auth0, we can have a login experience ready to go! This lesson will walk through all the steps nesscary such as adding the SDK through npm, setting up your Auth0 account, adding a login/logout button, and using the Auth0 provided hook to access values. 

Adding Login to React with Auth0

Authentication and authorization doesn't need to be hard. In this lesson, we're going to use the Auth0 React SDK to add authentication to protect a route. Which means that a user has to be logged in in order to access any content on that page. We'll finish the lesson by sending an access token to an Express API in order to retrieve some data. 

Protecting Routes and Calling Secure APIs in React with Auth0

CSS Grid and Flexbox are very useful tools for providing the overall layout of a page.  I take a specific design and create the high level layout using css grid and then arrange an individual section using flex box.

Layout a webpage using css grid and flexbox

See how to use flexbox to layout variable-width content in columns, and take advantage of `justify-content` to keep flex children center-aligned on smaller viewports. We'll also learn how `margin` can be applied to resolve for lack of a well-supported `gap` property in flexbox. At the end of the lesson, we'll have styled both the "Subscribe" section and the site footer.

Use Flexbox to Responsively Layout Variable-Width Content

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

Create a Landing Page with CSS Grid and Flexbox

Learn the fundamental difference between CSS grid and flexbox layout, and create utility classes for each `display` value. Then begin to apply and expand these concepts to style the landing page navigation.

Choose Between Grid or Flexbox for CSS Layout

We have a parent HTML element that takes up the height and width of the page. We will make that parent element into a flex container, and then vertically center its child element using `align-items: center;`. Finally, we'll use `justify-content: center;` to horizontally center the element.

Center an Element Horizontally and Vertically using Flexbox

This playlist will be a smorgasbord of Auth0 authentication and authorization topics. Everything from adding Auth0 to various apps, customizing your Auth0 settings, adding specific rules / audiences / features, and debugging errors. 

Auth0 Tips and Tricks 

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 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

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

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.