Now that we've managed to get our log in authentication working, the next step is to be able to use
the authenticated account to claim from the faucet and to be able to use that principal ID as the message
scholar.
So in the case where we've got off faucet dot gsx here, we should be able to call instead of token
payout.
We should be able to call the authenticated canister and call the payout method on that canister.
In order to do this, we have to write a little bit more code.
The first thing we're going to do is we're going to import auth client class from the Dfinity auth client
module.
And in addition, we're going to import some other elements from our declarations.
In addition to token, we're going to need the canister ID and also the create actor method.
And these come from our declarations.
And if you look inside the index dot Jesus, you can see that we created a blank internet computer project.
These methods have already been created for us.
The create action method, which basically creates the canister and the canister, it is basically just
a environment variable that is replaced at runtime coming back to our faucet dot gsx now that we've
got all the necessary imports.
The next thing that we can do when the click happens.
So when the faucet is being clicked on, once we've disabled the button, the next thing we can do is
we can create a authentication client in the same way that we did in our index dot gsx.
So we have to await for this process and we're going to use the off client dot create method.
And once it's been created and we've gotten this auth client back then we can use it to get the identity
of the authenticated user.
We can again use our weight and we're going to do auth client dot get identity.
Make sure that you don't make any typos and that you've got both of these awaits in there.
Now, we can use this identity that we get back to create a actor.
So, as I mentioned, create actor.
You can see it inside the declarations and is going to take the canister I.D., which is a environment
variable that contains the principal I.D. of the canister.
And in addition, this create actor can take some agent options where we can supply the identity of
the authenticated user.
So I'm going to create a authenticated canister constant, and I'm going to call the create actor method
and I'm going to supply both the canister ID by using this environment variable here.
And in addition, I'm going to supply an object.
These are going to be the options for creating this actor or canister.
And the options I'm going to set are the agent options.
Which is again going to take a.
Object.
So curly braces and I'm going to pass in the identity that we got back from the authentication process
and let's add ah commas and semicolons and just check that you've spelt everything correctly.
For example, create actor or get identity and that you've got all the semicolons and curly braces in
the right places.
So now it's with this authenticated canister that we're going to call the payout method on, because
what that's going to mean is when it gets back to this payout method, the message dog caller will then
be the principal ID of the authenticated user and it's that authenticated user who's going to be getting
the token transfer.
Unfortunately, though, even if our code works and it's correct, we can't actually tested at the moment
because if I go ahead and click on Gimme, Gimme in the Faucet, you'll see a403 error code.
And the reason is because we're running a local version of DFCS, which is a simulation, basically
allowing us to test and debug.
But in order to have the sign off and to get the authenticated session, we need to deploy our project
onto the live Internet, computer, blockchain.
That's what I'm going to do right now.
A caveat to this is, of course, you need to have enough tokens for it to work.
So if you're low on cycles, then you might need to transfer and convert some ICP tokens into cycles.
As I've shown you before, but once you're done, deploy it onto the live network, which you've done
before.
But just in case you wanted to be reminded of the command line command, you can take a look inside
the read me and under the section deploy the project to the live C network.
You can see step by step how we're going to do this.
Instead of writing out the commands which is super prone to error, I want you to simply copy it step
by step.
The first thing we're going to do is we're just going to do DFS deploy dash dash network.
I see.
And as long as you got enough tokens, this should go through in a couple of minutes.
Once all the canisters have been deployed.
The other thing that we needed to do, if you remember, was to transfer some tokens into the canister.
So the canister actually holds on to half the tokens and the owner yourself will hold onto the other
half.
And the half a billion that the canister has is going to be used to distribute through the faucet.
There's a couple steps that we need to go through to do this.
Firstly, we need to check the live canisters ID because it will be different from the one that you
have been running locally.
Once you've managed to get hold of that, you can see that we're going to put that command inside another
command in order to embed the output into a new variable, which will call the live canister key.
And once we've done that, let's just check that it actually worked by echoing the variable back out.
And you can see that we've now got the correct format in order to assign a principal ID.
So finally, we can call the transfer function on our live canister and transfer half a billion tokens
into it.
And once that's done, you should get success back.
Now, once you've successfully done that, then we want to be able to get hold of a live deployed canister
from tents.
ID I'd remember that in our project we've actually got two canisters, one which is token that contains
a main dot mutoko file.
That's our business logic.
That's our back end.
That's going to talk to the blockchain.
We've also got another canister, which is our token assets, which contains our frontend, all of that
react and JavaScript goodness.
So this is the access point that we want to get to from a browser and to find out its ID, we have to
call this command in the command line.
So it's DFS canister dash dash network, I see it.
And then we pass in our canister, which is token underscore assets.
And once we get that ID, then we combine it with the suffix .0.0. ap and that will take us to the live
version of our force ID application.
Again, we've got our pop ups blocked, so let's make sure that's unblocked and let's refresh.
And because this is first time that we're accessing this website, we need to authenticate ourselves.
And you can see this time we're now proceeding to authenticate on our live Web site.
Coming back here.
We're going to repeat that test that we did before, which is where we try to use our faucet.
And because we're running on the live network, you might notice that for that success, the pop up,
it might take a little bit longer than it would when you're testing locally, because it depends on
how busy the network is.
Now, once that's successful, that means that our authentication actually worked because that worked
instead of giving us a error like what happened previously.
That means our authentication code is actually working and we're using the authenticated canister with
the identity that's authenticated to pay out into that IDS account.
Unfortunately, because we're not running this locally, our debug prints don't actually come out in
our terminal, but we don't have to print it out here.
We can actually get hold of it on our frontend as soon as we've authenticated ourselves or if we're
ready authenticated then we get access to this auth client here.
So let's go ahead and console.log the identity from our auth client.
So get identity.
Make sure that you haven't made any typos.
And once you've got that, go ahead and deploy to the network again.
Now, once that's done, let's go ahead and hit refresh.
And if we take a look inside the console, then you'll see that what's being printed is that auth client
dot get identity.
It's the same identity that we used in our faucet to create our authenticated canister.
Now this identity contains four really important things, but what we're interested in is getting hold
of this principle which exists under the property underscore principle.
So that means that we can actually get hold of the principle of the logged in user simply through this
identity.
Let's save this into a constant.
And we actually should put in a weight here.
So that line reads const identity equals await auth client dot get identity and I'm going to use that
to get hold of the user principle, which is the identity dot underscore principle.
So I'm just going to copy that piece in here.
Now remember that at this stage it's still looking somewhat like this, right?
And we have to use the two string method in order to convert it into a string so that we can actually
read it.
And once we've got that, I'm going to firstly console.log this user principle.
So now let's hit save and let's redeploy changes.
And once that's done, let's go ahead and hit refresh again.
And now we've got our familiar format of principal IDs.
If I take that principal ID of the remember, this is my authenticated user's principal ID that we got
hold of through all of that convoluted process.
If I check its balance, you'll see that this account has the 10,000.
Dang, that I forced it out earlier when we tested the faucet.
So that means authentication works and it's actually the authenticated user who is logged in and it's
with that identity that we called the payout method.
Now, just for convenience sake, it would be really nice if I could actually see my principal ID here.
So I'm going to use a feature of React to bring it onto the frontend so that we don't have to console.log
it each time.
And the way we're going to do this is through props.
So I'm going to call my prop logged in principal and I'm going to pass it the user principal that we
got hold of right here.
So it's the name of the prop equals sign, curly braces and the name of whatever you want to pass through.
Now I can go into my app and I can get hold of the props in here.
And I'm going to pass it over to the faucet.
The faucet here is going to have a user principal prop, and it's going to be equal to the props dots.
And then it was the name of whatever I gave it here, logged in principal.
So let's go ahead and add that there.
And now I can go into my faucet and go ahead and get hold of the props that get passed in.
Make sure to type it wrong and not pops.
And once I have got hold of that, I'm going to add the props into this label here.
Instead of to your account, I'm going to add in the props right here.
So it's props Dot and then the name that I gave it, which is user principle.
So let's put that here.
Let's hit save and let's again deploy and make sure that that worked.
So now when we hit refresh, you can see instead of saying to your account, it's actually printing
out authenticated users, principal ID, which is really, really neat.
So now all that's left for us to do is to do the same thing in our transfer dot gsx.
So instead of calling the token dot transfer here, we want to use the authenticated canister through
the same process that we did with Faucet.
So I'm going to set this to you as a challenge, and I want you to pause the video and try to get this
to work so that when you transfer to a particular account.
So if I use this previous anonymous accounts, principal ID, I should be able to put it here and then
transfer something over coming from my authenticated account.
At the moment it doesn't work because this transfer function is not hooked up to use the authenticated
canister.
I want you to fix this and make it work using what you learned about authentication previously.
Pause the video now.
All right.
So the first thing we got to do is to add our imports.
So I'm just going to copy and paste that over here and I'm going to need the canister ID and the create
actor.
We don't actually need this token anymore, so you can take it away if you don't want it there.
And we're going to add the canister ID and create actor into our transfer.
Now here, just before we call our token act, transfer is where we're going to create our off client
and we're going to need to call the await auth client dot create method.
And with that, we're going to then create the identity.
Again using a weight and then using the Auckland dot get identity method.
Identity.
Yep.
Make sure you spell that right.
And then finally, we can use the identity to create the authenticated canister, which is, of course
done through the imported a create actor method.
And we're going to pass in the canister ID.
And some options.
So the agent options is going to be another object, which is going to contain the identity that we
got hold of just now of our authenticated user.
So now instead of calling token transfer, we're going to replace that token with the authenticated
canister dot transfer.
But still transferring to the recipient that the user typed in and the amount they wanted to transfer.
Now let's go ahead and hit, save and deploy our changes.
And once that's done, we can try this again by refreshing and then putting in the same information.
Click transfer.
And now, after a really long wait, we've got success instead of insufficient funds.
And if we check the funds for our current logged in user, you can see it's 200 less.
And if we check the account that we transferred to, you can see it's successfully received the tokens.
So now we're able to authenticate ourselves using the Internet identity and using the authenticated
user.
We're able to create a canister and call methods using that identity.
Now, we've achieved a lot in this one project, so I hope you really enjoyed it.
And in the next project, we're going to be building an NFT marketplace.
So I hope you're excited.
And I'll see you on the next project.