Original subtitles

[Maximilian Schwarzmuller} No for logging users out,

we got this log out button here in the main navigation

and at the moment, this button isn't doing anything.

Now, what do we want to do when we click this button?

You might think that we send some requests to Firebase

but keep in mind that the main idea

when using this authentication token approach,

was that the server does not store any information

about the logged in client.

So actually, we don't need to send any requests

because Firebase doesn't know and doesn't care

that we are, or were logged in.

The only thing we need to change when we log out

is our state.

We just have to make sure

that in this context, API, we clear our token.

We set it back to an empty string or to null.

That's the only thing that matters here.

And therefore here in main navigation JS,

we already have access to all the context

we therefore only need to add a number function here,

the log-out handler function, for example

and in that log out handler function,

I'll call off context, log out, which is a function

we already prepared in our context provider.

There in the log out handler, we set the token to null

and that's the handler which we call when we call log out.

And that's the only thing we got to do here.

So, then we just need to bind this log out handler

to this button here with on click and we should be good.

If I save that and I click log out

you see the UI changes once I do log out.

Now, of course we have an issue here though.

If I quickly log back in, if I go to the profile page

and I click log out,

the main navigation changes

but I stay on that profile page.

I'm not redirected away from there.

And that's something we might want to avoid here.

Now, to avoid that,

we can of course also redirect the user here if we want to

but I won't do that here.

And I won't do that here because in the next lecture

I want to dive into another important topic

which will solve this problem for us.

And that will be navigation guards, protecting pages

in our front end react auth.