How to Store Persistent Google Sign-In Sessions With Cookies
A browser cookie is data that a server can send to a user's web browser where the browser can often send back to the server. With this lesson, we begin discussing how persistent login sessions can be made with cookies by going through a simple exercise with the Google search web application.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:14] In the last module, we've successfully managed to create our login functionality. However, when logged in and when we refresh a page in our app or close the browser and reopen it, we noticed that we're not in the logged in state any longer.
[00:15 - 00:31] This is because we haven't implemented any persistent login sessions. Persistent login sessions allow users to stay logged in over multiple browser sessions, closing and reopening the browser or reloading the web app will not log out a user.
[00:32 - 00:40] And this is pretty much what all major web applications do. We can see this behavior in github, youtube, twitter, google and so on.
[00:41 - 00:47] But how do these apps achieve this? Well, it's something you may have heard about before known as cookies.
[00:48 - 00:59] Let's actually see an example of this. First, we'll open an incognito window in our google browser since we won't want any cookies already in our browser's memory to affect our exercise.
[01:00 - 01:23] Next, we'll go to google's main website, www.google.com and in this case, we're in the logged out state. We'll log into google with our google account and when we refresh the web page, we'll see that google keeps us logged in.
[01:24 - 01:35] Google Chrome actually allows us to view, edit and delete cookies with their dev tools. So we'll open the dev tools in our browser and navigate to where we can see information for our browser cookies.
[01:36 - 01:45] In Chrome, cookies are shown in the application tab. We'll select a cookie called sid and delete it.
[01:46 - 02:02] We're not 100% sure what this cookie was created to do or what it stands for, but we probably think it stands for session ID. Now with the cookie deleted, we'll refresh the web page and surprise, google does not keep us logged in any longer.
[02:03 - 02:18] As we can see, this particular web app utilizes cookies to persist login sessions. A browser cookie is data that a server can send to a user's web browser where the browser can often send it back to the server.
[02:19 - 02:36] These are often used to store user sessions, personalized preferences for a user, among other things. In the next few lessons, we'll compare cookies with other modern browser APIs that allow for storing information in the client before we look to implement persistence login sessions in our app.