Now let's add our usual authentication logic
and that means we want to add functionality to sign users up and then also log them in.
Now for that, I'll go to my app.js file because that is where I have the code to well do both, sign up
and log in and here, I need to import other things from my browser sdk. I don't need the anonymous
credentials,
instead now I need to import the user password auth provider client for now, for registering users.
That allows me to go down to my auth handler where I first of all check the validity of the input and then here, we
will use the stitch client.
Now I do actually initialize the client here,
so what I can do is I can also instead of storing it in a constant, store it in a property of this class,
so this client simply turns this into a property, I have to use this client here too now
and this allows me to use it in other functions, then the constructor too, in that same class.
So here I can then say this client auth and then here I'll get my provider client and that provider
client or what I pass here is the user password auth provider client and there the factory,
so this basically initialises my user password auth provider functionality you could say. I'll store this
in a constant which I name email pass client but the name is totally up to you
and then we can use that email pass client which simply stores the result of this initialization
here to then call register with email.
And here, I need to pass in the e-mail and the password the user gave me and that is of course data I
can extract from my auth data,
so here I pass auth data email and auth data password.
This will now sign users up with stitch
and again they are stored by stitch, not in one of my collections, they are stored by stitch and we then
have a promise here with then and catch where we basically find out if it was successful or not.
Now in then, let's see if we get any result we can console log here
and in catch, we might get errors of course.
Now I have a catch block down there and I will actually copy the code I have down there and use it
in here, just comment this in again
and with that, I should be fine.
So let's now see if this works, if we can get some results with that code.
And I of course need to change one thing for this to work, the part where I use my anonymous credential,
this one here,
well this has to be removed right because I don't sign in anonymously anymore.
So now let's switch to sign up,
that's important
and now you need to enter a real e-mail so that the email reaches you.
Now once you click sign up, we see undefined here so we don't actually get back a result,
so this result here, we don't actually get any data
so there is nothing we can log but we should receive an e-mail now.
Now in that e-mail, you should have a link which you can click,
now if you click that link, it looks like you're back on this page but in the developer tools, you should
actually see this account confirmed output from the confirm account javascript file.
If we dive into that confirm account file, this line is responsible for that output
and there indeed, I already do parse some data which we'll find in the url of that confirm account
page and you can see that data in the link you clicked in the email
and we now need to use stitch to send that data to the backend of stitch, to confirm our password.
We do that by also importing stitch in here,
so from the mongodb stitch browser sdk
and now we just need to call some method there to work with stitch. We also need user password auth provider
client in that file, so in the confirm account file and then, we can use stitch, get the default app client
with this property and call auth there and then on auth, you call get provider client and pass your user
password
auth provider client, the factory, just what you did before.
So you simply replicate the code
you had in the app.js file.
So that is our e-mail pass client,
you can name this constant whatever you want though
but now we can use that email pass client here to then call confirm user and to confirm user, we need
to pass that token and token ID which I already parse from the url here. And then stitch behind
the scenes will validate if that is the token and token ID that was mentioned in the e-mail
and therefore if that all matches, it will confirm the user.
Now this will give us a promise which either succeeds or well fails, if it fails,
I'll for now just log the error, if it succeeds, well then I want to redirect the user to the starting
page. And with that let's save all of that and with that being saved,
click on that e-mail link
again. You should have now seen confirm account for the fraction of a second, for me unfortunately this
always gets opened on the second screen
but if we now go back and we sign up again, again with a real e-mail, that's important,
then I get an error that is stemming from the app.js file here,
when I tried to extract something which was required when I used axios,
so let me simply replace this with an error occurred here.
And then let's try this again with a real email address
as I mentioned, I get this error
now and here, in the error I get back,
we actually see that the name is already in use.
So now let's try adding the login in the next lecture so that we can use that confirmed user to log
in.