All language subtitles for 012 Protecting Frontend Pages_en

So we have this problem

that we stay on this profile page

even if we log out.

But we have a bigger problem,

if I'm not logged in as I'm currently am,

I'm not logged in here,

I can already manually enter /profile in the URL

and we load this page,

even though we should not be able to visit it.

Now of course, it's not a big problem

because if I try to change the password here,

this will fail, it will simply fail

because we did provide an invalid token in this case,

null to be precise.

So we can't do any harm, but we still might want to ensure

that we can't visit this page if we are not logged in.

And we can achieve this by adding a feature

which you could call navigation guards.

And this sounds bigger than it actually is.

It's just about dynamically changing

our route configuration here

based on whether we are logged in or not,

because that is something that we can do.

Keep in mind that we can only visit routes

which are defined here in our App JS file in this app.

Now, if I render these routes conditionally,

only under certain conditions,

then of course we can only visit a certain route

if that condition is true.

And that means that we could, of course,

use the current authentication status of the user

as a condition for certain routes.

And we could choose to not render this user profile route

configuration at all if the user is not authenticated.

In which case there's no way for the user to visit

this page if he or she is not authenticated.

And that's exactly what I'll do here.

For this, we need access to our authstatus

which is stored in the context,

and therefore of course we need to use context hook

from React and then here in the app component

we can call use context and tap into this auth context

which we again have to import, just as before,

and then we get our auth context here.

And in this auth context, keep in mind we also have this

isLoggedIn field, which tells us whether the user

is logged in or not.

And now my goal is simple,

if the user is not logged in, this route configuration

for the user profile should simply not be rendered,

it should not be part of this route configuration,

or put in other words, this route configuration

should only be added if the user is logged in.

And therefore, we can render this conditionally

because this is still just a component

that's being rendered.

It might sound weird that we conditionally change

the route configuration,

but since this is just a component,

that is something we can do

and that is a standard way of solving this problem.

So here I can then check if authCtx is logged in

and if that's the case, I render this route,

otherwise, I don't.

Of course we could also make sure

that we therefore only grant access to the auth page

if the user is not logged in,

because if the user is logged in,

visiting the auth page makes no sense.

So then here we can check if not authCtx is logged in,

in which case we grant access to that auth page.

We now also definitely wanna handle the case

that the user enters /profile,

but this configuration is not rendered,

or that in general, the user enters some invalid path.

And we of course can do that by adding another route config

which is always rendered,

which handles this wild card case,

so basically anything the user entered,

if it has not been handled by one of the other routes

and here we could then render a 404 page,

or what I will do here, we redirect the user,

and we can do that with help of that redirect component

which react-router-dom provides to us.

We can simply redirect the user here

to just slash, let's say.

And that will kick in

whenever the user enters something invalid

or if the user enters /profile without being logged in.

Now let's give it a try.

If we save this and I reload, I'm not logged in

because we currently lose our log in status

every time we reload this page,

this is something we'll change soon,

but at the moment it works like this.

And if I now enter /profile,

you see I'm back here on the starting page.

So I am redirected back here.

I can go to the log in page though

and if I then do log in, I can visit /profile,

this now works.

Now if I enter it manually, we reload the page in the end

and therefore we can't visit it in this case,

but again that is something we'll fix soon.

But now we are protecting our routes here.

Now of course you could change this slightly,

you could say that visiting /profile

should always be possible

and you just change conditionally

which page is being rendered.

And if the user is logged in and /profile is rendered,

you visit the user profile page,

otherwise if not authCtx is logged in,

so if the user is not logged in, you redirect

and you redirect to /auth for example, in this case.

Then you have this general redirect or 404 page

for anything invalid, but if the invalid thing

is /profile, then you redirect to auth

if the user is not logged in,

or if the user is logged in, you render user profile.

And that's just an alternative, nothing you have to do.

But now with this change made, for example,

if I now enter /profile here, I'm redirected to /auth,

if I'm not logged in

and on the other hand if I do log in,

I can visit this profile page.

So you can really get creative here

and fine tune this route configuration as you need it

based on the authentication status.