\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 5.1Introduction to Module 4
Course Thumbnail of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two.TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two
  • MODULE 1
    Introduction
    • LESSON 1.1Part Two Welcome
    • LESSON 1.2The TinyHouse App
    • LESSON 1.3Walkthrough of TinyHouse Code
    • LESSON 1.4Code Patterns & Behavior
    • LESSON 1.5How To Go Through The Course
  • MODULE 2
    Set-up for Part 2
    • LESSON 2.1Set-up For Part II
  • MODULE 3
    Routing in TinyHouse
    • LESSON 3.1Introducting Module 3
    • LESSON 3.2Server-side vs Client-Side Routing in a Web Application
    • LESSON 3.3Build Web App Navigation With React Router and BrowserRouter
  • MODULE 4
    Setting up our Database
    • LESSON 4.1Introduction to Module 3
    • LESSON 4.2How to Build MongoDB Database Collections in React
    • LESSON 4.3Build a MongoDB Document Schema: Examples and Best Practices
    • LESSON 4.4How to Build a Seed Function to Add Data to MongoDB
  • MODULE 5
    User Authentication with Google Sign-In & OAuth 2.0
    • LESSON 5.1Introduction to Module 4
    • LESSON 5.2How Does OAuth 2.0 Work? [with diagrams and examples]
    • LESSON 5.3How to Get Google Access Credentials for OAuth Authentication
    • LESSON 5.4The GraphQL Document Fields Needed for Google Sign-In
    • LESSON 5.5Using Google Auth and People API With React and GraphQL
    • LESSON 5.6Build GraphQL Authentication Resolvers for Google Auth
    • LESSON 5.7How to Build a Custom Google Sign-In UI in React
    • LESSON 5.8How to Query Google Sign-In Authentication URL From a Client
    • LESSON 5.9How to Build a React Header With a React Log Out Mutation
    • LESSON 5.10Module 4 Summary
  • MODULE 6
    Persist Login Sessions with Cookies
    • LESSON 6.1Module 5 Introduction
    • LESSON 6.2How to Store Persistent Google Sign-In Sessions With Cookies
    • LESSON 6.3sessionStorage vs localStorage vs Cookies for Secure Storage
    • LESSON 6.4Using NPM cookie-parser to Read Cookies in React
    • LESSON 6.5How to Use a Viewer Cookie to Automatically Log In a User
    • LESSON 6.6Prevent Cross-Site Request Forgery Attacks With X-CSRF Token
    • LESSON 6.7Module 5 Summary
  • MODULE 7
    Building the User Page
    • LESSON 7.1Module 6 Introduction
    • LESSON 7.2Building a GraphQL Query to Fetch User Account Data Fields
    • LESSON 7.3How to Modify GraphQL Type Definitions to Support TypeScript
    • LESSON 7.4How to Build Paginating GraphQL Resolvers [with examples]
    • LESSON 7.5How to Build a UserProfile Component With React and GraphQL
    • LESSON 7.6Build User Profile Pages With GraphQL, Ant Design, & Apollo
    • LESSON 7.7Module 6 Summary
  • MODULE 8
    Building the Listing Page
    • LESSON 8.1Introduction to Module 7
    • LESSON 8.2Requesting a Single Set of GraphQL Fields
    • LESSON 8.3Building a GraphQL Resolver For Specific Fields
    • LESSON 8.4How to Query for GraphQL Data With Limits and Filters
    • LESSON 8.5Build a Grid Column Layout with Ant Design in React
    • LESSON 8.6Build a Booking Form With React and GraphQL
    • LESSON 8.7Module 7 Summary
  • MODULE 9
    Building the Home Page
    • LESSON 9.1Introduction to Module 8
    • LESSON 9.2Listings GraphQL Fields
    • LESSON 9.3Building a GraphQL Resolver For Filtered and Sorted Results
    • LESSON 9.4Building a Card-Based Homepage Layout in React
    • LESSON 9.5Sort GraphQL Data And Display Filtered Results in React
    • LESSON 9.6Module 8 Summary
  • MODULE 10
    Searching for listings with Google's Geocoding API
    • LESSON 10.1Module 9 Introduction
    • LESSON 10.2Get Started With Google Geocoding API for Location Data
    • LESSON 10.3How to Implement Location Search With GraphQL and Google
    • LESSON 10.4Using the Google Maps Node.js Client With GraphQL
    • LESSON 10.5Building a Location-Based Listings Search Page in React
    • LESSON 10.6Building Filters and Pagination in React [with examples]
    • LESSON 10.7Building a React Search Bar in the App Header
    • LESSON 10.8How to Index Location Search Results With MongoDB Indexes
    • LESSON 10.9Module 9 Summary
  • MODULE 11
    Connecting with Stripe
    • LESSON 11.1Module 10 Introduction
    • LESSON 11.2Building a Payment Platform With Stripe and Stripe Connect
    • LESSON 11.3How to Get Stripe Connect OAuth Credentials for Payments
    • LESSON 11.4Building a GraphQL Schema for Stripe Connect Integration
    • LESSON 11.5Integrating the Stripe NPM Library With React and GraphQL
    • LESSON 11.6Adding Connect with Stripe to a React App
    • LESSON 11.7How to Disconnect and Remove a Client's Stripe Account
    • LESSON 11.8Module 10 Summary
  • MODULE 12
    Hosting new listings
    • LESSON 12.1Module 11 Introduction
    • LESSON 12.2HostListing GraphQL Fields
    • LESSON 12.3Building a GraphQL Resolver to Receive New Listing Data
    • LESSON 12.4How to Build a Listing Form Interface in React and Stripe
    • LESSON 12.5Build a GraphQL Mutation to Store Listing Data and Uploads
    • LESSON 12.6Module 11 Summary
  • MODULE 13
    Cloudinary & Image Storage
    • LESSON 13.1Module 12 Introduction
    • LESSON 13.2Why Use Cloudinary to Host Images in the Cloud?
    • LESSON 13.3How to Integrate Cloudinary With React and GraphQL
  • MODULE 14
    Booking listings
    • LESSON 14.1Module 13 Introduction
    • LESSON 14.2CreateBooking GraphQL Fields
    • LESSON 14.3Build a Booking System With React, GraphQL, and Stripe API
    • LESSON 14.4How to Store New Bookings and Resolve Overlapping Bookings
    • LESSON 14.5How to Build a React Booking UI That Blocks Booked Dates
    • LESSON 14.6Build a Confirmation Dialog in React and Ant Design
    • LESSON 14.7How to Build a Stripe React Payment Form
    • LESSON 14.8Build a GraphQL Mutation to Save Bookings and Test Stripe
    • LESSON 14.9Module 13 Summary
  • MODULE 15
    Deploying with Heroku
    • LESSON 15.1Module 14 Introduction
    • LESSON 15.2IaaS vs PaaS vs SaaS: An Intro to Cloud Computing
    • LESSON 15.3A Step-by-Step Guide to Deploying a React App to Heroku
    • LESSON 15.4Walkthrough of Deployed App
  • MODULE 16
    Bonus Module
    • LESSON 16.1Module 15 Introduction
    • LESSON 16.2Build a Custom 404 Not Found Page With React Router
    • LESSON 16.3How to Customize Apollo Client Caching and Fetch Policy
    • LESSON 16.4Automatically Scroll to Top of Page With React useLayoutEffect
    • LESSON 16.5How to Customize React Router Hooks
    • LESSON 16.6How to Use the Stripe Deauthorize Function in React
    • LESSON 16.7How to Optimize a React Date Picker
  • MODULE 17
    Part Two Conclusion
    • LESSON 17.1Part Two Conclusion
  • MODULE 18
    PostgreSQL & TypeORM
    • LESSON 18.1Module 17 Introduction
    • LESSON 18.2SQL vs NoSQL: Pros and Cons for Building a Web App
    • LESSON 18.3How to Start Using PostgreSQL and Migrate From MongoDB
    • LESSON 18.4An Intro to Object-Relational Mapping With TypeORM in Node.js
    • LESSON 18.5How to Migrate a React App From MongoDB to PostgreSQL
  • MODULE 19
    Unit Testing (Client)
    • LESSON 19.1Module 18 Introduction
    • LESSON 19.2An Intro to Software Testing: End-to-End vs. Unit Testing
    • LESSON 19.3Using Jest and React Testing Library to Test React Components
    • LESSON 19.4How to Use Apollo to Test GraphQL Requests in React
    • LESSON 19.5Getting Started
    • LESSON 19.6Testing the Home Component I
    • LESSON 19.7Testing the Home Component II
    • LESSON 19.8An Intro to Pushing Code to GitHub and Creating Pull Requests
  • MODULE 20
    Package Updates
    • LESSON 20.1Google Maps Node Package Update
Right arrow icon.
Go to Next Lesson
Go to Next Lesson
LESSON 5.3How to Get Google Access Credentials for OAuth Authentication
  • Go Pro
  • Courses
  • TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two
  • How Does OAuth 2.0 Work? [with diagrams and examples]
  • Go To Previous Lesson
    Introduction to Module 4
    Introduction to Module 4

    This is an introduction to the work we'll be doing in Module 4.0.

  • Go To Next Lesson
    How to Get Google Access Credentials for OAuth Authentication
    How to Get Google Access Credentials for OAuth Authentication

    In this lesson, we'll create the necessary OAuth credentials from the Google API Console that we'll need to use to set-up Google OAuth in our application.