Day 84 of 100 Replicating Google Login Page Practice Project 1

I am now replicating Google login page that is fully functional from front to back using plain CSS with flexbox and BEM, React hooks with Apollo, GraphQL, Django and PostgreSQL. This wouldn’t be an exact replication but the idea is to fill the gaps and holes in my knowledge on the stack through a simple practice project before working on my main and finale project: the ERP application.

Below is the screen capture of the Google login pages. People question why Google separates pages for entering user id and the password. From my quick web search, the reason is to minimize the phishing risk. To expand on it, my understanding is that when you send a login request to google by entering id and password as a single request, and if that request is tapped by a non-intended person before the request reaches the server, then it’s more likely that the identity theft would occur. But if you send two separate request, one for id and another for the password, it’s harder to perform the phishing attack as it would be a difficult task to associate the link between the two separate requests.

To easily replicate the functionalities of the google login pages, I am going to utilize built-in Django-GraphQL-jwt and Django user model libraries to authenticate and validate user login and generate JSON web tokens to pass onto the http header as my core strategy.

Here is my step by step plan:

1. I will first define the model and schema in the backend so that the GraphQL API is available to the front-end.
2. Then, I will make 4 react components, where each of them will represent the view google login pages (sign-in, find your email, Welcome, Create your Google Account). Using apollo, the data will be retrieved directly from server to each of these components to pass the JSON web token?? maybe I am unsure as of right now.