Now let's see how we can implement the Internet identity within our project and use the Internet identity 1
to authenticate our users. 2
Now we're going to be writing the log-in code inside our index.jsx. 3
And at the moment it's pretty simple. 4
All it does is when it gets initialized, it's going to render our app component and it's going to put 5
it at the root. 6
And our app component consists of our header, faucet, balance and transfer components. 7
So pretty simple bit of React code in here. 8
Now what we're going to do is we're going to use a package from the Internet computer called the auth 9
client. 10
And these two npm packages basically allow us to have a ready-made frontend that looks identical to 11
what you see when you use any of the Internet computer applications all currently available. 12
So thanks to those packages, we don't actually have to code up the frontend, but what we do need to 13
do is to actually import them. 14
We're going to need to import the AuthClient class from the auth client module. 15
And once we've got that class, we can then use it to log in or user or to trigger that frontend log 16
in. 17
Inside our initializer, we're going to create a new constant which I'm just going to call auth client, 18
and this is going to be a new object created using the AuthClient class and it has a method called 19
create. 20
If we call that, we should create a new AuthClient object, which then we're going to use to log in 21
our user. 22
Now the method is asynchronous, so we're going to have to use await on it 23
again. We have to call authClient.login. And here we're going to pass in a JavaScript object that 24
describes who the identityProvider is. 25
And the identityProvider in this case is going to be a URL that points to the identity service on the 26
Internet computer, which is basically going to provide the frontend for our login purposes so that 27
we don't have to create it ourselves. 28
In addition to the identity provider, we're also going to provide a value for the onSuccess callback. 29
This is going to be what should happen once the log in was successful, and I'm going to use the fat 30
arrow notation to open up a set of curly braces to describe what should happen. 31
Because at the moment, all that we want to happen is once they have been successfully authenticated, 32
is just to take the user to our main app, 33
so to render the app. 34
So I'm going to move that line into this callback. 35
And once that's done, we can go ahead and test it out. 36
So let's reload. 37
And you can see in my case, it says pop up blocked. 38
So make sure that you allow pop ups from localhost which is going to allow us to actually see the 39
login page. 40
And once you've allowed it, hit refresh and it should now allow the pop-up which takes us to this familiar 41
page allowing us to authenticate with our Internet identity. 42
Once I click authenticate, it's going to take me to my device, which I can use touch ID to authenticate 43
on. 44
And because I don't have a recovery mechanism, it's giving me that prompt. 45
But I'm just going to say add recovery later. 46
And once that's done, I'm allowed to proceed 47
and it shows me which website is asking for the authentication and who I'm actually authenticating with, 48
which is quite important. 49
And once I hit proceed, it will take me back to my initial website that requested the authentication. 50
Now, there's still just one more problem. 51
When we hit refresh, you'll notice that every time the init is called, so when our JavaScript frontend 52
loads up, it's going to call this log-in method and it's going to trigger this 53
and no matter how many times we authenticate ourselves and log in, it's still going to repeat this 54
process. 55
So how can we make sure that we check whether if we're already logged in? 56
And in that case, we actually bypass the login process. 57
Well, underneath here, one of the things that we can check for is we can use an await to wait 58
and check to see if the authClient is authenticated. 59
And this method, of course, comes from the authClient class. 60
And once we've checked that, we can go ahead and just console.log and say, logged in. 61
Let's check and see if that works. 62
So let's pull up our console and you can see even without going through the login process, we're currently 63
already logged in and this is because the login is cached. 64
So just as when you log on to Facebook or Gmail, you don't have to log on repeatedly every single time 65
you try to access it, 66
there's a memory that stores whether if you have already been logged in. And if within eight days you 67
come back to the website, it should know that you have logged in before and won't force you to go 68
through the process. 69
Now we know that we can check to see if we're already authenticated, 70
that means that we can simply navigate the user to our app element instead of having to go through the 71
login process to do that. 72
In that case, let me go ahead and create just below this init definition an async function which 73
we'll call handleAuthenticated. 74
And we're going to pass in the authClient as an input to this function. And inside this function 75
for now, all that's going to happen is we're going to render the app component and we're going to do 76
that on the success callback of our login method. 77
So handle authentication parsing in the authClient, but we're also going to do that if we check that 78
we're already logged in and we can bypass the login process. 79
And now we can finally add the else statement to say if they're not authenticated, 80
well, in that case, let's go ahead and force them to log in. 81
Now that's done. 82
Let's go ahead and hit save and test it out. So that we can close down our Internet identity tab. 83
And let's go ahead and refresh this page. 84
And because we're already logged in, we're not forced to log in through the Internet identity again. 85
Now, theoretically, once we've got our account authenticated, then that will be the user on the frontend. 86
So it means when you click on 'Gimme Gimme' the faucet should be distributing the DANG tokens to the logged 87
in user's account. 88
But as you can see right now, if I click on this, it's still going to tell me already claimed because 89
this method call is still going through an unauthenticated msg.caller. 90
So how do we get our method calls here from payOut or transfer to tap into the authenticated user instead 91
of a anonymous user? 92
Well, that is what we're going to do in the next lesson. 93
So for all that and more, 94
I'll see you there.