Google Sign-In GraphQL Fields
We'll begin creating the GraphQL fields that we'll need to help us establish Google OAuth in our application.
Let's brainstorm the GraphQL fields we'll need to integrate Google OAuth into our app.
The first thing we'll do is clear out our schema from Part I of the course. We'll go to the type definitions file in our server project (src/graphql/typeDefs.ts
) file and remove the definitions for the fields we had before.
import { gql } from "apollo-server-express";
export const typeDefs = gql`
type Query {}
type Mutation {}
`;
We can also delete the Listing
folder from our src/graphql/resolvers/
folder since we'll no longer need the listingResolvers
map we created in Part I. This will also require us to remove the import and use of the listingResolvers
map in the src/graphql/resolvers/index.ts
file.
import merge from "lodash.merge";
export const resolvers = merge();
In our GraphQL type definitions file, we'll create three new GraphQL fields to help with authenticating users with Google OAuth.
The first step in our OAuth flow requires us to redirect our user to Google so they can authorize our app and sign in. We'll need to generate the URL that will navigate the user to the Google consent form. We'll construct this URL in our server application and have our client app be able to retrieve this URL from the server through a query field. This query field will be the authUrl
field.
Once Google Sign-In provides a value for the authorization code
and redirects the user to the /login
page of our app, we'll want to have our React app pass the code
onto our Node server. Our Node server will then make a request to Google servers with the code
to retrieve the access token
of the signed-in user. The logIn
mutation will be the mutation our React client application will fire while passing in the code
to make the request to Google to retrieve the token for a user.
Finally, we'll have a logOut
mutation to have the user be able to log-out from our app.
authUrl
, logIn
, and logOut
are the three GraphQL root-level fields we'll need to handle Google OAuth. Let's prepare our GraphQL API type definitions and resolvers with these new fields.
authUrl
#
In the src/graphql/typeDefs.ts
file, we'll introduce an authUrl
field in our root Query
object. This field when resolved will return a string.
import { gql } from "apollo-server-express";
export const typeDefs = gql`
type Query {
authUrl: String!
}
type Mutation {}
`;
logIn
#
Our logIn
mutation will accept a code
argument and when resolved will return an instance of the user (with which we're going to call the Viewer
) that has been logged-in. We'll handle this in the next lesson and for now simply state that the logIn
mutation when resolved will return a string.
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two