How to Build a Custom Google Sign-In UI in React

[00:00 - 00:15] In this lesson, we'll be working with our React application to communicate with the server and allow a user to sign in via Google OAuth. The first thing we'll do is create the GraphQL documents with the new GraphQL query and mutations we've created.

[00:16 - 00:40] In part two of the course, we'll group all our GraphQL documents in our app within a GraphQL folder within a lib folder in the source folder. We've created three new GraphQL roots-level fields that can be queried.

[00:41 - 00:52] We'll create folders for each of these fields. We'll create the auth URL folder that will have an index file within the queries folder which is to contain the auth URL query document.

[00:53 - 01:10] We'll create a login folder and log out folder in the mutations folder with both having an index file. These index files are to contain the log in and log out mutation documents.

[01:11 - 01:36] In the auth URL index file, we'll import the GQL tag from the Apollo Boost package and export a GraphQL document to make a query for the auth URL field. We'll name the query auth URL as well.

[01:37 - 01:54] In the login index file, we'll import the GQL tag and export a constant to contain the document to make the login mutation. We'll name the mutation login and state it is to accept an input argument with which the mutation field will accept as well.

[01:55 - 02:06] We'll have all the fields of the viewer object be queried from the result of the mutation. ID, token, avatar, has wallet and did request.

[02:07 - 02:22] In the logout index file, we'll import the GQL tag and export a constant to contain the logout mutation, we'll also have all fields from the viewer object be queried from the mutation result. Perfect.

[02:23 - 02:38] With our GraphQL query and mutations defined on the client, we can auto-gener ate the corresponding TypeScript definitions with the codegen scripts we've created in the package JSON file. But first, we need to modify the codegen generate script.

[02:39 - 02:55] In part one of the course, we had our GQL documents within TSX files in our source folder. In part two, we'll keep all GraphQL documents in their own TS files within the lib graph ql folder.

[02:56 - 03:10] In addition, we've mentioned how Apollo Codegen auto-generates a global types file that contains enum and input object type values of the GraphQL schema. Apollo Codegen by default kept it in the root of the client project.

[03:11 - 03:27] In part two of the course, we'll try and have this global types file be kept within the lib graph ql folder. So we'll apply the dash dash global type files option and state the file will be in source lib graph ql and the name of the file will be global types.

[03:28 - 04:06] We can go ahead and delete the old generated folder for the global types file that was kept in the root of the project. We'll run the codegen schema script in our terminal to regenerate the schema JSON file in our client's project.

[04:07 - 04:42] And then we'll run the codegen generates command to generate the type script definitions from our GraphQL query and mutations. When complete, we'll notice the auto-generated type script definitions within the folders where we've kept our GraphQL documents.

[04:43 - 05:00] We'll want our users to login in a /log-in path of our application and we'll want a corresponding login component or page to be shown in this path. We'll first create this login component in our sections folder.

[05:01 - 05:40] And for now, we'll simply have this login component display a header element that says login. We'll then import the login component in our index file and create a new route that will have the login component be shown in the /log-in path.

[05:41 - 05:57] With our client webpack server running, if we go to localhost3000/log-in, we'll see our login component be rendered. Before we continue, let's make our login component more presentable.

[05:58 - 06:05] Our login page will look like the following. It will have a simple card with some details telling the user to sign in if they're interested in booking rentals.

[06:06 - 06:21] We'll also add some secondary text. With our initial design and preparation, we had the idea of directing users to a privacy form of sorts, but now we'll just simply say that the user if they are to sign in, they'll be taken to Google's consent form.

[06:22 - 06:35] The three main components from end design we're going to use to help build this component are the layout, card and typography components. The layout component helps handle the overall layout of the page.

[06:36 - 06:53] The card component is a simple rectangular container, that is to say a card, and the typography component gives us some simple styles for heading, body texts and lists. We're also going to add in classes that we've already created to additionally add some custom styling.

[06:54 - 07:04] Let's begin creating the UI of our login components. As a note, we've just added an asset labeled Google logo that we're going to use for the sign in button.

[07:05 - 07:20] We'll provide this image asset as part of the rest of the source code for this lesson. We'll first import the card, layout and typography components from end design.

[07:21 - 07:53] We'll then destruct the child content component from layout and the child text and title components from the parent typography. In our login component, return statements will return the content component with the class applied.

[07:54 - 08:11] And the contents components will have a card component. The card components will have a div element, that is to have the intro section.

[08:12 - 08:39] This introduction section will display a title where the waving emoji is being shown. And another title that says log in to TinyHouse.

[08:40 - 09:07] There will also be a text statement that is to say sign in with Google to start booking available rentals. Outside of the intro, we'll have a button that will have the Google image and a span that says sign in with Google.

[09:08 - 10:00] in the next section. We'll have a button that says sign in with Google. Finally, we'll have secondary text.

[10:01 - 10:37] That will stay by signing in, you'll be redirected to the Google consent form to sign in with your Google accounts. Taking a look at our login component at this moment, we can see that the card looks like what we expected to look.

[10:38 - 10:53] To have it vertically aligned in the middle, we'll introduce a small change in the root index file. We'll import the layout component in the index file.

[10:54 - 11:07] And wrap our switch statement with the layout component with an ID of app. And now we'll see the login page look more like we expected to.

[11:08 - 11:16] Note that the card is actually arranged in the middle. In this presentation view, a portion of my screen at the bottom is actually hidden.

[11:17 - 11:24] So it appears a little bit below, but it's actually being arranged in the middle of the page. We'll stop here for now.

[11:25 - 11:35] In the next lesson, we'll see how we can manually make our authentication URL query when the user clicks the sign in with Google button. Thank you.