 Resources from Christian Nwamba in 2024

 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!

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

Add Github Login to Your Web App with OAuth 2.0

Learn how to use the react-spring library to animate our React applications. Start with the `useSpring` hook and end with the `useTransition` hook with React Router for transitions between your routes! 

You'll get the skills to begin using the react-spring library and add animation to your React components.

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

Spring Animation in React with React Spring

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

GraphQL Yoga is an open source server utility tool based on Express that simplifies how developers build GraphQL servers. This lesson shows how quick it is to get started with Yoga by writing simple types and resolvers. It also shows you how to test and inspect a GraphQL server/schema using the GraphQL playground.

Build a Simple GraphQL Server with GraphQL Yoga

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Some websites are less interactive and more informative. These websites just need a simple setup and we can manage and update them using Markdown. An example of such are documentation websites, online labs/guides, blogs, and even some commercial websites.

Vuepress reduces the time spent on setting up a website down to as simple as writing a configuration object and creating Markdown files. It then transforms and generates a website for you based on these two ingredients.

This lesson shows how to quickly get started with Vuepress and showcases some of it's important configs.

Build A Markdown-Based Static Website with Vuepress

Prisma is a next-generation open-source ORM For Node.js and TypeScript that helps developers build faster and make fewer errors.

It supports the following databases: PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, and more recently, MongoDB (Preview).

Prisma provides a complete toolkit:

- Prisma Client: Auto-generated and type-safe database client
- Prisma Migrate: Declarative data modeling and customizable migrations
- Prisma Studio: Modern UI to view and edit data


prisma

Tools like Firebase give you a powerful API that connects directly with your client apps. Though powerful, Firebase can be difficult when writing complex data to the database or querying for a complex data structure.

GraphQL, on the other hand, has a powerful API too and an easy Graph spec to query and write to your data source. Unlike Firebase, it doesn't come with a data persistence layer.

Prisma is an open source database layer for GraphQL projects. It serves as both an ORM and also hides the complexity of writing complex resolvers.

This lesson shows how, without a server, you can Firebase-like GraphQL database that your client can talk directly with.


Build a Graphql Serverless Database for Your Client Apps Using Prisma

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

React forms are redundant, non-declarative and repetitive. React Formik gives you a simpler declarative API for building self-contained forms in React.

In this lesson, we'll refactor a Vanilla React form to us Formik to show how simple forms can be. If you are interested in how the Vanilla React form was built, you can watch [Build and Validate a Form in Vanilla React](https://egghead.io/lessons/react-build-and-validate-a-form-in-vanilla-react).

Self-Contained Forms in React using Formik

Learn how to make forms and validate form fields using the onBlur event without any external React helper library/component.

With this knowledge, you will understand what problem the [next lesson](https://egghead.io/lessons/react-self-contained-forms-in-react-using-formik) is trying to solve.

Build and Validate a Form in Vanilla React

Pass a `to` property to React Spring's [useSpring]([https://www.react-spring.io/docs/hooks/use-spring](https://www.react-spring.io/docs/hooks/use-spring)) to chain together multiple animations asynchronously.

In addition to `props`, `useSpring` also returns `set` and `stop` methods. In this lesson you will see how the `stop` method doesn't abruptly stop your animation, but instead tries to reset your animation back to where it was before it took off.

Chain Together Multiple Animations With the useSpring Hook

In this lesson React Spring's [useSpring](https://www.react-spring.io/docs/hooks/use-spring) hook is used to animate CSS properties.

You will also learn how to use `animated` to extend native elements to receive animated values.

Animate Elements With the useSpring Hook

In this lesson, you'll learn how to implement smooth image scrolling using React Spring's [useSpring hook](https://www.react-spring.io/docs/hooks/use-spring)

You will use an `onMouseMove` event to get the image and mouse coordinates and `set` `useSpring` with the offset. You can then style the animated element with the `backgroundPositionX` and `backgroundPositionY` CSS properties. 

Animate CSS Background Position With the useSpring Hook

Using the `useTransition` hook from React Spring can make your todo list look and feel a lot more polished. 

In this lesson, you'll learn how to configure `useTransition` and its three animation states.

Create Smooth List Transitions With the useTransition Hook

React Spring's `useTransition` can be used with React Router to create smooth transitions between your routes!

In this lesson, you will configure `useTransition` and create its three animated states. You will then map over the transitions and return React Router's Switch and Routes wrapped in an `animated.div` element.

Create Route Transitions with React Spring and React Router

Bite-size video tutorials for badass web developers.

egghead

Learn how to set up a blog with Gatsby and deploy your blog to [Azure](https://azure.microsoft.com/en-us/free/?WT.mc_id=staticwebapps-video-chnwamba). 

While you are at it, you will learn how to automatically setup GitHub actions so that subsequent changes you make to your blog are deployed automatically.

Deploy a Gatsby Static Site with Azure and GitHub Actions

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

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

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

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)

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

We're going to fetch a user with that token we exchanged the code parameter for in the previous lesson. 

All we have to do is make a fetch request to the `/user` endpoint with an Authorization header that contains the token and then return the data. Like this ``Authorization: `Bearer ${token}``

Fetch Protected Data from a Resource Server with an Access Token

We're going to refactor some of our HTTP application code in order to create the ability to exchange the code inside our HTTP request for a token. 

We can do this by creating a function that takes the code from a request and posts a query that contains our client id and secret to our token endpoint. We then await a response, parse the data from the response, and then return the parsed data.

Exchange Auth Code in a Request for an Access Token

We'll be parsing the authorization code sent in our query before sending it to the server.

We do this by creating a function that parses our query and retrieves the code parameter. If we find a code in the query we send the code to our server by using `fetch` to make a `POST` request. In the body of the request we send the code and the state in stringified JSON.

Once we make the request we can await a response and store its JSON data (the auth token) in a variable. In a real application, we might also redirect to the homepage or the page the user was just on.

Parse for the Auth Code in a Query before Sending It to a Server

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

express

We'll create our client-server using the `express` and `cors` packages

Express will be used to create our HTTP application. We'll need it to post to our endpoints and listen to our port.

We need the `cors` package to make cross-origin requests since the front-end will be a different origin than the server.

Topics

Instructors

Content Type

Christian Nwamba