\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 5.8How to Query Google Sign-In Authentication URL From a Client
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.1Module 4 Summary
  • Go Pro
  • Courses
  • TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two
  • How to Build a React Header With a React Log Out Mutation
  • Go To Previous Lesson
    How to Query Google Sign-In Authentication URL From a Client
    How to Query Google Sign-In Authentication URL From a Client

    Having the UI of the Login page built in our client, we'll investigate how we can make the query for Google Sign In's authentication URL when a user attempts to sign in.

  • Go To Next Lesson
    Module 4 Summary
    Module 4 Summary

    This lesson is a summary of the work we've done in Module 4.0.