0:00 So next up, I wanna make sure that we don't show the user settings 0:04 icon here if the user isn't authenticated. 0:07 And additionally, let's go ahead and add some dummy 0:11 values to our navigation right now. 0:15 So we'll go back to our header component. 0:16 In our pages, I'll add a new homepage, for example. 0:21 So I don't wanna show this link to the au- unauthenticated user, 0:25 because they're not authenticated. 0:26 Instead, I just wanna show a log in and sign up link. 0:30 So in order to do this, we need to maintain some sort of state in 0:33 our 0:34 application to know if we're authenticated. 0:37 So thankfully, Apollo Client actually exposes a solution 0:41 for us 0:41 that we can use to maintain global state in our 0:45 application in a very easy way, and we're gonna go ahead and see how 0:49 we can do this next. So in our UI, let's go 0:53 ahead and create a new file in our constants folder, and 0:57 I'll call this authenticated. 0:59 So this will be a global variable essentially that we can control 1:04 and change wherever, and it will also always make sure that if 1:08 we're referencing it inside of a React component, it forces the component to 1:12 re-render, which is gonna be very important for us to 1:14 maintain state and 1:16 show con- components conditionally based on our 1:18 authentication 1:19 status. So to create this variable, we'll have a new const 1:23 called authenticatedVar, 1:26 and set it equal to makeVar. So this is the idea of a 1:30 reactive variable in Apollo Client, where we can 1:34 essentially create this global variable that will be 1:37 accessible at any of our components. 1:39 So go ahead and set a default value to false, because the user won't be 1:43 authenticated by default, and make sure we go ahead and export this. 1:47 So next, I wanna go to our logout utility function
The rest of the transcript is for members.
Sign in 