‫Now the third part of the authentication flow
‫is to protect the application against unauthorized access.
‫So basically what we want to do is to redirect the user
‫back to the homepage whenever they reach one of the routes
‫that they should not reach when they are not logged in.
‫So basically this URL, or this one, or this one.
‫And really the entire application should not be accessible
‫to people that are not logged in.
‫Now in this case here, the application doesn't even work
‫when the user is not logged in
‫but there might be other applications that are different,
‫that maybe just display some secret information
‫which should not be accessible.
‫And so let's now implement that functionality,
‫so that protecting of all routes.
‫Now we could add some functionality of course
‫to every single component that is surrendered here
‫as a product of changing the route
‫but that would be a bit too much work.
‫So we would have to have the exact same redirecting code
‫in all of these components.
‫And that doesn't make a lot of sense.
‫So instead, what's a common practice
‫is to create a specialized component
‫which will handle this redirecting and then wrap
‫the entire application in that component.
‫So let's do that as a page right here,
‫and let's call it ProtectedRoute.jsx.
‫So our snippet here again,
‫because again this is just a component
‫and here it will receive the children,
‫because remember how I said
‫that we will wrap the entire application
‫into this component.
‫So it'll receive basically as children, all the application.
‫And so all this does then, is to return that.
‫So we can actually just do this.
‫So it shouldn't add any JSX to the children.
‫All it'll do is to return them
‫and in case if the user is not allowed
‫to redirect away from the application.
‫So first of all, then this component needs to know
‫whether the user is authenticated or not.
‫Authenticated, so useAuth for that.
‫And then of course we're also going to need
‫the navigate function from React Router.
‫And so actually we should not call the navigate function
‫from the top level code.
‫So that's basically an effect.
‫And so effects belong in useEffect.
‫Okay, and then let's say if the user is not authenticated,
‫then just navigate to the homepage, and that's it.
‫And we want to run this code
‫whenever there is authenticated changes,
‫and then we also need to include
‫the navigate function itself.
‫And this is actually it.
‫This is all we have to do in this component.
‫And so now we need to wrap our application inside of this.
‫Now there are two places where we could do that
‫and the first one is here in the app layout.
‫So basically our entire application is rendered right here.
‫And so we could wrap all this
‫into the protected route like this.
‫So the one we just created.
‫However, I think it's a lot more explicit
‫to actually do this right here in the application.
‫So in App.jsx where we actually define all our routes.
‫So doing it right here.
‫So where do you think we should do this?
‫Maybe in each of the routes individually,
‫well, again, not really, but instead as we just said earlier
‫our entire application is actually in the app layout.
‫And so we can very easily wrap that app layout
‫into the protected route right here,
‫because remember that this simply needs to be an element.
‫It doesn't matter how complex it is.
‫And so let's include protected route here,
‫and that's not what I wanted.
‫Yeah, okay.
‫So in case that we are going to any of the URLs
‫in the application, so that app slash cities,
‫or slash cities, slash ID, or slash countries,
‫or app slash form.
‫So in all those situations, this app layout component here
‫is rendered, right?
‫And then in there is where each of these components
‫is also rendered.
‫And so the idea is to wrap this entire component
‫into the protected route.
‫And so this will then check whether the user
‫is currently logged in or not.
‫And if not, it will simply redirect the user
‫back here to the homepage.
‫So let's try this out and if we reload this page here now,
‫then it should already be working.
‫So let's see.
‫And, (chuckles)
‫actually that doesn't work.
‫So let's go back to our protected route here,
‫and let's try to understand what actually happens.
‫So first let's see what the problem is.
‫And so we are still apparently trying
‫to read something out of avatar here in the user component,
‫which means that the user component
‫is somehow still trying to be rendered.
‫So let's use our understanding of the use effect hook
‫in order to solve this bug.
‫So remember how our effect is actually only executed
‫after the component has already been rendered.
‫And so that is actually the key
‫to understanding why this happens.
‫So our component will actually
‫initially render the children,
‫which does of course include the user.
‫And so then of course everything that the user
‫is trying to read, from the user object does not exist.
‫So that's why we get this error.
‫So right after that is when the navigation happens.
‫But in that split second, we are still trying to attempt,
‫so we are still rendering the user component.
‫And so again, that then gives us that error
‫because again, this effect is only executed
‫after the render has already happened.
‫And so here we should now return conditionally.
‫So we can say if is authenticated,
‫we can actually return the children,
‫but if not, then let's just return null.
‫And so this should then solve it.
‫So basically in case that we are not authenticated,
‫then here in place of the app layout, null will be rendered.
‫Which is not a problem,
‫because we don't want to render the application here anyway.
‫So let's retry, let's log in.
‫And if we reload now, then of course the user
‫will not be authenticated in the beginning
‫as we go to this URL.
‫And so you see that we get immediately redirected here.
‫And of course the same happens
‫if we just try to go to the app like this.
‫So as I hit Enter now, then again immediately
‫we get redirected here.
‫Great, so now it works.
‫And I just want to draw your attention
‫to the fact that here sometimes,
‫the background image does not show up.
‫Now in this case, it actually did show up,
‫but somehow it doesn't sometimes.
‫And so that's happening because here
‫we are trying to read the background image from slash app,
‫which is not where it exists.
‫So it is actually in the root folder.
‫So let's come here to the CSS module
‫where we are using that background image.
‫And so here we are missing this slash.
‫And so now that works.
‫And now that is not going to happen ever again.
‫So not sure how I triggered that, but I think it was this.
‫And yeah, now that works.
‫Nice, and so our authentication
‫is now actually completely implemented.
‫So we completed the three steps of the authentication
‫even though it's a bit of a fake authentication,
‫but that's not really important.
‫Now we are going to come back to this application here
‫in the next section one more time,
‫but I want already to fix this ugly title
‫that we still have here.
‫So it's still this fake title.
‫And so let's come here to our index.html file,
‫and let's change that.
‫So I don't know why I didn't change that earlier.
‫So that's Worldwise.
‫And in here, let's just use some divider like this.
‫Keep track of your adventures.
‫So that looks a little bit nicer indeed.
‫And now we just need to change the fav icon there.
‫So that's probably right here.
‫Yeah, it's this logo.png.
‫I think actually it's this icon.png.
‫So icon.png, and so then here
‫it's also an image.png,
‫and nice.
‫So that's looking a lot more professional already.
‫Now, okay, and with this, we actually finish this section
‫but again, we are actually coming back to this project
‫in the next section again,
‫but the features are actually all implemented now.
‫So application is feature complete.
‫And yeah, it was a long journey, but I hope it was worth it.
‫And I hope that you really enjoyed
‫building this project together,
‫over all of these lectures.
‫So I think you can be really proud
‫for having this project now
‫and hopefully you feel the same.