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.
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
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
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.
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.
src/graphql/typeDefs.ts file, we'll introduce an
authUrl field in our root
Query object. This field when resolved will return a string.
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.