Nice.
And once we have wrapped all our application in the off provider, then, of course, let's set up the
log in, the log our functionalities and all that.
So if we take a look at the documentation, we keep on scrolling and we can see that they're doing something
with ease loading and.
Ah.
And don't worry, we will do this because we'll have to restrict access to our dashboard.
Now at the moment, I don't think it's going to make sense.
So we're just gonna keep on moving.
And we'll look for to log in one.
So that's the one that we're currently going to use in that bar.
And then we will restrict access to our dashboard.
And then it's going to make sense why we would also want to set up some kind of wrapper that checks
for the loading.
Because in my opinion, at the moment, it might be like, well, why we're doing all that.
So after I'm done yammering about it, let's head to Navar.
And we're looking forward as use off.
So that's something we would want to import.
Now, of course, the import is already there, but in there we'll find.
Is authenticated.
Log in.
We read here and then we'll also get a log out.
We'll check the user.
And we'll also check is loading because Howard wants you to showcase what is happening as far as the.
We're going to navigate back online.
Like I said, we're looking for a Navar.
And then I already have use off imported from the library.
And now, of course, I would just want access bunch of things.
So we're going to go with cons online.
One of the options that we have is is authenticated.
So here we're checking whether the user is authenticated now in order to log in.
We have a log in, we, as I'm sorry, log in with redirect like show Zann.
We'll also have a logout option as well as the user.
Now, like I also promised, I'm going to show you is loading now.
All of that is coming from use use off the one that we just imported and we need to invoke it.
So once we do that, then, of course, in the nav bar, we could start by setting up the button, a
button that allows us to log in and we simply would need to have a button.
And don't worry, we'll make this pretty little bit later on.
But we're gonna go with Button then on.
Click on click.
And we simply need to pass in the reference, log in with redirect and we'll write a log of Miss It
and I should have the log button.
Now, of course, there's a little bit of styling and all that.
Don't worry, I'm going to navigate right now to a bigger browser window.
And once we click on a log and we should be able to log in.
Now let's try it out.
And yep, we have the error.
I purposely left the screen on so you can see what happens if some of the details that you provided
are incorrect.
In my case, I already know that when I was copying, pasting the client I.D. is incorrect.
But if you get this type of screen, you can always check for details for this error.
And they nicely tell you that unknown client.
So now what we would need to do is head back to our application and then I'm looking for the client
I.D. So that is my get up users and all that.
And let me copy paste one more time and I can clearly see that I add one extra while here for some reason.
Magoffin Post.
And now everything should work.
Now I'm going to get back to my screen and we should be able to log in.
So if you ever hit that type of screen, don't freak out.
They provide nice messages and just follow those messages and you'll solve it in no time again.
Let's try it one more time.
We're going to log in.
And now we have three options.
We have Google.
We have Twitter.
Also, we have the email and password.
So at this point, I think I'm going to go with a password or essentially I'm going to click on log
in line.
It's going to say wrong e-mail or password.
Now, why is that happening?
Well, because, of course, we haven't signed up.
All right.
So first, we would need to sign up and then we're gonna come up with some kind of values.
Now, as a side note, they don't send the verification.
So you can come up with dummy values you want, which is going to be Miko's.
So I'm going to go with John at mail dot com.
As far as the password thing, I'm going to keep my previous one.
Cause it matched the letters and all that.
So in this case, I'm going to go for the sign up option.
Now, once we click notice, we lock them.
So we say, hi, John.
Mail Larcom get abuser's, is requesting access to your talent and all that.
OK.
Now a bunch of gibberish, but essentially what it means that we successfully logged in.
And now, of course, we just come back to our application.
So we have successfully logged in and we're kicked back to our application.
So we haven't handled that in our end.
But if we go to a nav bar, we should see bunch of interesting things as far as the authentication.
As far as the user is loading and all that.
So why don't we do this?
I'll copy and paste and I'll set up a log out option just so we can test it out one more time.
So we're gonna go with Button.
This is going to be a logout.
And then as far as the logout we would need to say where we would want to go back to.
So on KOLLEK For the logout, we'll set up our R.O. function here, say, all right, our all function,
and we're not going to pass any parameters or in the function body.
We are going to go with a logout and then will pass in the object.
And then in there we have returned to the property and now again we go with window location and then
we're looking for origin, so origin.
So that's where we're going back to.
That's our Log-On one.
And now, of course, also let's console log everything just so we can see what's happening.
So I'm going to go with is authenticated and T.K. Red, basically an object with all these properties,
user and then is loading as well.
So save it.
And we should see some interesting things in the console.
Now, in the console, I had the object that was first.
So it was is authenticated false.
Then it was loading.
User was undefined and now it came back with four or four.
So let's refresh one more time and now see that is article.
It is false.
User is undefined and is lowering is true.
And then eventually again I had this one.
Okay.
Not bad.
So why don't we do this.
Why don't we properly log in this time and now.
Of course we'll see that first is Ontake and it was false.
So that didn't work.
And user was undefined and then is loading was true.
And then of course we flipped.
We went from is Artec.
And it is false to user undefined.
Now is article.
It is true.
And the user is also true.
And now he is lowering his false.
And this is really real important because again, later, once we start restricting the access, we
need to understand that we don't get this data right away.
So even when we direct the user to log in and log out and all that.
It doesn't happen instantly.
There is still this loading process.
And this is why it's so important for us to set up that wrapper, because otherwise, if you'll try
to access or I'm sorry, restrict the access to certain pages, it is not going to work simply because
we will need to utilize that is loading flag first.
Now, hopefully that makes sense.
And you're not I think by the end of the application, I can just simply say that I'm not going to display
the mornings because it's just gonna be a little bit easier, because now, as you see with first load
and then we're just displaying the user.
So with all that in place, what we could do is try to log out.
So let's try to log out again.
All your console logging.
You can see that first we were lowering.
And now, of course, we locked out.
So there's nothing there.
Now, the user is false and also is authenticated, is false.
But then once we tried to back log in, we go over here.
Now, just to change scenery, I'm going to go with Twitter.
So we're going to try to log in with Twitter.
All this awesome.
Yep.
First time you're going to log in, it's gonna ask you for permission and all that.
And now, again, the is automated was false.
User was undefined.
Lowering was true.
Same thing.
And then eventually, of course, now we have successfully logged in.
So what we would want to do.
Well, now we could check whether is authenticated is true as well as user.
So if the user is there, if it's not undefined and then do something about it.
Correct.
And what that something would be?
Well, we could maybe hide the logging button if we already have logged in.
Correct.
And only show the log on the same for the log.
If we haven't logged in yet.
Well, maybe we should just display the log in option.
Now, one thing that I would want to mention, though, that if we take a look at our application eventually,
we're not going to have a log in here anyway.
Why?
Well, because we'll restrict access to the dashboard.
So what you'll note is that we can only log in from the log in page.
Yeah, at the moment we'll still setup everything in the nav bar.
So at the moment, since we haven't hooked up that functionality, of course, everything is gonna be
here.
No.
Just remember that by the time we log in in our final application.
Well, there's going to be no log in there anyway because we only have a log in in the log in page.
And then in here, NAV Bar just displays the log.
So let's set this up.
Let's say that we would want to display the image as well as the user name.
Only if the is authenticated, it's true as well as the user.
And the only display to log our button.
However, if we have not any of those things, then of course, we would want to display to log in one
which eventually is going to be in our logon page.
So we're going to navigate back.
Now, I'm just going to set up a variable that carries that for me.
So I'm going to go concert is user and that is equal to is authenticated.
And then also user.
So if that is the case, then I would want to access data that's coming back.
More specifically, I would want to get the user.
So I'll start by removing these console logs.
We don't need them at the moment.
Hopefully everything is clear that there is this lowering step as well.
And we do need to take care of that.
Otherwise, our application will go bananas.
Essentially, you're just going to have a lock and screen and the way it's going to work in a wrapper,
I'll start by displaying the picture.
So what I'm going to do on Wednesday is user.
If that is the case, if the user is true, then I also would want to check whether the user has the
picture and if that is the case.
So one more and then I would want to go with image source and then use our picture.
Now, again, since the user is the object, the property is the picture.
And here we go with Alte.
And we're just going to say username.
So, again, user object.
And we're looking for name property.
Now, of course, if you want, you can console log and all that.
But I'm not going to do this in this case.
And then I would want to close my image, my show.
And by the way, I mess this up over here.
So I would want to close the image and then I would want to close the curly braces.
So that's gonna be our picture.
OK.
And then once we have the picture, I also would want to work on the user name.
Essentially, that is just gonna be our name.
Now, how do we do that?
Well, again, another set of curly braces is user.
If that is the case, if the user is true, then I would want to access the user name.
So let me set up another and say user name.
Here I would say that I would one display that name.
Now, technically, you could argue that this is an extra step because even with an email one, they
do provide the name and a picture.
But I still decided to do that in a way.
Again, technically, if you want, you can check.
If the user is there, then grab me the image.
If the user is there, then show the name.
But in my case, I want with this extra step where I still checked whether the properties there and
all that.
So technically, yes, you can make an argument that it's somewhat unnecessary.
But you know what?
It's better to be safe than sorry.
So we're gonna go with heading for.
And in here, we're going to say welcome.
Well, come on, man, let's set up some strong tax here.
So strong tax strong and then within those strong tax, we're just going to access user nine.
And let's set this up to uppercase to upper case.
Now, let's invoke that.
And then the last thing that I would want is to check what is happening with my logging's and logout.
So the way we'll do that is, again, we'll check the user is user.
And if that is the case, I have two options.
So if the user is true, then we're going to do one thing.
However, if the user is false, then we'll do something else.
So if the user is true, essentially, I would want to display the yellow card button.
Correct.
Cause there's no point on logging in.
If the user is already there or if that is not the case, then of course our wanted display, my log
in button like so.
So now we save it and now I can check that we would need to log in.
So of course we can navigate back to our application and we can refresh just so we are starting from
the scratch and narratives.
Now we can press on the logging.
So now we're directed to a different screen.
And of course now we have an option of either logging in with the Google, Twitter or of course, our
e-mail.
So I'm going to go with Google this time.
So try Google again.
There's going to be some verification process and all that.
We don't really care about this.
And there is now, of course, I can display my picture and display my user name and all that.
And of course, I can also log on and notice nicely how we're not using the requestion this time.
So once we log in, we just display the static data.
And in my opinion, that's really cool because otherwise every time the user logs in, he or she gets
some kind of default user.
But at the same time, he or she waves that request.
In my opinion, is not the best setup.
So now I have logged in from my goal account.
So, of course, I can log out.
Now I have a log in option.
Let's dust out the Twitter just on.
So we're going to log in with Twitter.
All that is fine.
Now, this is the picture that comes back from Twitter again.
I have my name and all that.
Then we'll log out.
And like I said, even for the base setup with a password and user name, once we log in, we'll get
some kind of picture.
So in this case, again, it complains that the wrong e-mail password and I am because I was really
smart and I change this around.
Hopefully I remember it was John at mail dot com.
And yet now, of course I have.
Welcome.
Now this uses my initials.
And then, of course, the username is my e-mail.
So John at mail dot com.
And then if you want to check your users.
Just head to your dashboard and then look for users.
So now let me refresh and we should see my latest one, the John at mail dot com.
And of course, these are rest of the users that have already logged in in to my application.
The one that I was setting up.
So technically, you can always find your users.
You can even work on their permissions roles and all that.
So, again, in our case, we're not going to do that.
But successfully, yes, we have set up a log in and log out functionality.
So now what we could do is start restricting the access because I would only want to have access to
the people who have logged in.
So not everyone.
Only the ones that have locked in.
And this is exactly what we'll do in the next video.