diff --git a/readMe.md b/readMe.md index 45a9a8f..86b2e7c 100644 --- a/readMe.md +++ b/readMe.md @@ -1,125 +1,10 @@ -# JWT Authentication and Authorization with React, RTK Query, Material UI, React Hook Form and Zod. - -## 1. Node.js + TypeScript + MongoDB: JWT Authentication - -In this article, you'll learn how to add JSON Web Token (JWT) Authentication to your Node.js app with TypeScript, MongoDB, Mongoose, Typegoose, Docker, Redis, and Zod. - -![Node.js + TypeScript + MongoDB: JWT Authentication](https://codevoweb.com/wp-content/uploads/2022/04/Node.js-TypeScript-MongoDB-JWT-Authentication.webp) - -### Topics Covered - -- Setup Development Environment (Optional) - - Download and Install Node.js - - Download and Install Docker - - Download and Install MongoDB Compass -- Node.js, Redis, MongoDB, Typegoose, Docker: JWT Authentication example -- JWT Authentication Flow with Redis, MongoDB, and Node.js -- Project Structure -- Project Setup - - Initialize a Node.js Project with TypeScript - - Install the Required Libraries - - Initialize and Start the Express Server - - Setting up Redis and MongoDB with Docker Compose - - Connecting to the MongoDB Docker Container with Mongoose - - Connecting to Redis Docker Container -- Creating the Database Schema with Typegoose -- How to Generate Private and Public keys for JWT Authentication -- Define Middleware to Sign and Verify JWTs -- Define a Custom Error Handler in Express -- Define the Zod Validation Schema -- Create a Middleware to Validate the User Inputs -- Create a Service to Communicate with the Database -- Create the Authentication Controller -- Create the User Controller to Test Authorization -- Define a function to deserialize the User -- Define a function to check if the user is logged in -- Define a Middleware to Restrict Unauthorized Access -- Create the Authentication Routes -- Update the app.ts file to use the route -- Testing the JWT Authentication Rest API - - Register users - - Login user - - Get Currently Logged in User's Credentials - - Admin Get All Users - -Read the entire article here: [https://codevoweb.com/node-typescript-mongodb-jwt-authentication/](https://codevoweb.com/node-typescript-mongodb-jwt-authentication/) - -## 2. Node.js + TypeScript + MongoDB: JWT Refresh Token - -In this article, you'll learn how to implement JWT Authentication with an Access and a Refresh token using Node.js, TypeScript, MongoDB, Redis, and Docker. - -![Node.js + TypeScript + MongoDB: JWT Refresh Token](https://codevoweb.com/wp-content/uploads/2022/04/Node.js-TypeScript-MongoDB-JWT-Refresh-Token.webp) - -### Topics Covered - -- JWT Refresh Token with Node.js, TypeScript, and MongoDB Overview -- JWT Refresh Token Implementation Flow -- Generate Public and Private Keys for the Token -- Update Environment Variables in Config -- Update the Sign and Verify JWT Utility Functions -- Update the Sign Token Service Function -- Update the Login Controller -- Create a Controller to Refresh Access Token -- Create a Controller to Logout User -- Update the Authentication Routes -- Update app.ts - -Read the entire article here: [https://codevoweb.com/react-node-access-refresh-tokens-authentication/](https://codevoweb.com/react-node-access-refresh-tokens-authentication/) - -## 3. Google OAuth Authentication with React.js and Node.js (No Passport) - -In this article, you'll learn how to implement Google OAuth Authentication with React.js and Node.js without using Passport. -You'll also learn how to send JWT access and refresh tokens after the user has been authenticated. - -![Google OAuth Authentication with React.js and Node.js (No Passport)](https://codevoweb.com/wp-content/uploads/2022/06/Google-OAuth-Authentication-React.js-and-Node.jsNo-Passport.webp) - -### Topics Covered - -- Create Google client ID and client secret - - Create a New Node.js Project - - Create an OAuth Consent Screen - - Create the OAuth Credentials -- Build the Consent Screen URL -- Build the Google OAuth Login Page with React and MUI -- Implement the OAuth Authentication on the Node.js Server - - Get Google OAuth Access Token and User's Profile - - Update the User Model - - Add a Service to Update the User - - Create the Google OAuth Controller - - Create the Route - - Register the Session Router - - -Read the entire article here: [https://codevoweb.com/google-oauth-authentication-react-and-node/](https://codevoweb.com/google-oauth-authentication-react-and-node/) - -## 4. GitHub OAuth Authentication React.js and Node.js(No Passport) - -In this article, you'll learn how to implement GitHub OAuth Authentication with React.js and Node.js without using Passport. Also, you'll learn how to send JWT access and refresh token cookies after the user has been authenticated. - -![GitHub OAuth Authentication React.js and Node.js(No Passport)](https://codevoweb.com/wp-content/uploads/2022/06/GitHub-OAuth-Authentication-React.js-and-Node.jsNo-Passport.png) - -### Topics Covered - -- Create an OAuth Application on GitHub -- Build the Consent Screen URL -- Build the GitHub OAuth Login Page with React and MUI -- Implement the OAuth Authentication on the Server - - Get GitHub OAuth Access Token and User's Profile - - Create a User Model - - Create a Service to Update the User - - Create the GitHub OAuth Controller - - Create the Route - - -Read the entire article here: [https://codevoweb.com/github-oauth-authentication-react-and-node/](https://codevoweb.com/github-oauth-authentication-react-and-node/) - -## 5. React CRUD example with Redux Toolkit, RTK Query & REST API +# React CRUD example with Redux Toolkit, RTK Query & REST API In this article, you'll learn how to make Get/Post/Patch/Delete requests to a RESTful API with React, Redux Toolkit, and RTK Query. ![React CRUD example with Redux Toolkit, RTK Query & REST API](https://codevoweb.com/wp-content/uploads/2022/06/React-CRUD-example-with-Redux-Toolkit-RTK-Query-REST-API.webp) -### Topics Covered +## Topics Covered - React, Redux Toolkit & RTK Query example Overview - How to Set up Redux Toolkit and RTK Query with React @@ -135,3 +20,24 @@ In this article, you'll learn how to make Get/Post/Patch/Delete requests to a RE Read the entire article here: [https://codevoweb.com/react-crud-example-with-redux-toolkit-rtk-query/](https://codevoweb.com/react-crud-example-with-redux-toolkit-rtk-query/) +Articles in this series: + +### 1. Node.js + TypeScript + MongoDB: JWT Authentication + +[Node.js + TypeScript + MongoDB: JWT Authentication](https://codevoweb.com/node-typescript-mongodb-jwt-authentication) + +### 2. Node.js + TypeScript + MongoDB: JWT Refresh Token + +[Node.js + TypeScript + MongoDB: JWT Refresh Token](https://codevoweb.com/react-node-access-refresh-tokens-authentication) + +### 3. Google OAuth Authentication with React.js and Node.js (No Passport) + +[Google OAuth Authentication with React.js and Node.js (No Passport)](https://codevoweb.com/react-node-access-refresh-tokens-authentication) + +### 4. GitHub OAuth Authentication React.js and Node.js(No Passport) + +[GitHub OAuth Authentication React.js and Node.js(No Passport)](https://codevoweb.com/github-oauth-authentication-react-and-node) + +### 5. React CRUD example with Redux Toolkit, RTK Query & REST API + +[React CRUD example with Redux Toolkit, RTK Query & REST API)](https://codevoweb.com/react-crud-example-with-redux-toolkit-rtk-query)