1
00:00:02,270 --> 00:00:05,450
Now let's add our usual authentication logic

2
00:00:05,450 --> 00:00:11,160
and that means we want to add functionality to sign users up and then also log them in.

3
00:00:11,420 --> 00:00:17,090
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

4
00:00:17,090 --> 00:00:24,110
and log in and here, I need to import other things from my browser sdk. I don't need the anonymous

5
00:00:24,110 --> 00:00:25,030
credentials,

6
00:00:25,040 --> 00:00:34,650
instead now I need to import the user password auth provider client for now, for registering users.

7
00:00:34,880 --> 00:00:42,500
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

8
00:00:42,590 --> 00:00:44,380
will use the stitch client.

9
00:00:44,390 --> 00:00:47,290
Now I do actually initialize the client here,

10
00:00:47,360 --> 00:00:54,430
so what I can do is I can also instead of storing it in a constant, store it in a property of this class,

11
00:00:54,440 --> 00:00:59,670
so this client simply turns this into a property, I have to use this client here too now 

12
00:00:59,810 --> 00:01:04,540
and this allows me to use it in other functions, then the constructor too, in that same class.

13
00:01:04,550 --> 00:01:12,260
So here I can then say this client auth and then here I'll get my provider client and that provider

14
00:01:12,260 --> 00:01:17,720
client or what I pass here is the user password auth provider client and there the factory,

15
00:01:17,720 --> 00:01:25,430
so this basically initialises my user password auth provider functionality you could say. I'll store this

16
00:01:26,270 --> 00:01:30,740
in a constant which I name email pass client but the name is totally up to you

17
00:01:31,250 --> 00:01:36,230
and then we can use that email pass client which simply stores the result of this initialization

18
00:01:36,230 --> 00:01:40,200
here to then call register with email.

19
00:01:40,760 --> 00:01:46,400
And here, I need to pass in the e-mail and the password the user gave me and that is of course data I

20
00:01:46,400 --> 00:01:48,350
can extract from my auth data,

21
00:01:48,440 --> 00:01:57,220
so here I pass auth data email and auth data password.

22
00:01:57,310 --> 00:02:00,320
This will now sign users up with stitch

23
00:02:00,350 --> 00:02:06,800
and again they are stored by stitch, not in one of my collections, they are stored by stitch and we then

24
00:02:06,800 --> 00:02:14,450
have a promise here with then and catch where we basically find out if it was successful or not.

25
00:02:14,600 --> 00:02:21,280
Now in then, let's see if we get any result we can console log here

26
00:02:22,920 --> 00:02:26,130
and in catch, we might get errors of course.

27
00:02:26,160 --> 00:02:31,590
Now I have a catch block down there and I will actually copy the code I have down there and use it

28
00:02:31,680 --> 00:02:34,210
in here, just comment this in again

29
00:02:34,320 --> 00:02:36,390
and with that, I should be fine.

30
00:02:36,390 --> 00:02:44,650
So let's now see if this works, if we can get some results with that code.

31
00:02:44,880 --> 00:02:50,490
And I of course need to change one thing for this to work, the part where I use my anonymous credential,

32
00:02:50,490 --> 00:02:51,520
this one here,

33
00:02:51,840 --> 00:02:55,740
well this has to be removed right because I don't sign in anonymously anymore.

34
00:02:57,000 --> 00:02:58,470
So now let's switch to sign up,

35
00:02:58,470 --> 00:02:59,160
that's important

36
00:02:59,160 --> 00:03:06,660
and now you need to enter a real e-mail so that the email reaches you.

37
00:03:06,720 --> 00:03:12,690
Now once you click sign up, we see undefined here so we don't actually get back a result,

38
00:03:12,750 --> 00:03:16,350
so this result here, we don't actually get any data

39
00:03:16,350 --> 00:03:21,380
so there is nothing we can log but we should receive an e-mail now.

40
00:03:21,390 --> 00:03:25,670
Now in that e-mail, you should have a link which you can click,

41
00:03:25,950 --> 00:03:30,540
now if you click that link, it looks like you're back on this page but in the developer tools, you should

42
00:03:30,540 --> 00:03:35,750
actually see this account confirmed output from the confirm account javascript file.

43
00:03:36,240 --> 00:03:41,660
If we dive into that confirm account file, this line is responsible for that output

44
00:03:41,880 --> 00:03:48,220
and there indeed, I already do parse some data which we'll find in the url of that confirm account

45
00:03:48,300 --> 00:03:52,320
page and you can see that data in the link you clicked in the email

46
00:03:52,560 --> 00:04:02,050
and we now need to use stitch to send that data to the backend of stitch, to confirm our password.

47
00:04:02,070 --> 00:04:08,160
We do that by also importing stitch in here,

48
00:04:08,270 --> 00:04:11,520
so from the mongodb stitch browser sdk

49
00:04:11,900 --> 00:04:22,460
and now we just need to call some method there to work with stitch. We also need user password auth provider

50
00:04:22,460 --> 00:04:29,180
client in that file, so in the confirm account file and then, we can use stitch, get the default app client

51
00:04:29,180 --> 00:04:39,760
with this property and call auth there and then on auth, you call get provider client and pass your user

52
00:04:39,760 --> 00:04:40,290
password

53
00:04:40,340 --> 00:04:43,540
auth provider client, the factory, just what you did before.

54
00:04:43,600 --> 00:04:45,930
So you simply replicate the code

55
00:04:45,970 --> 00:04:47,650
you had in the app.js file.

56
00:04:47,710 --> 00:04:50,080
So that is our e-mail pass client,

57
00:04:50,080 --> 00:04:52,550
you can name this constant whatever you want though

58
00:04:52,900 --> 00:04:59,770
but now we can use that email pass client here to then call confirm user and to confirm user, we need

59
00:04:59,770 --> 00:05:05,530
to pass that token and token ID which I already parse from the url here. And then stitch behind

60
00:05:05,530 --> 00:05:09,640
the scenes will validate if that is the token and token ID that was mentioned in the e-mail

61
00:05:09,720 --> 00:05:13,450
and therefore if that all matches, it will confirm the user.

62
00:05:13,450 --> 00:05:19,480
Now this will give us a promise which either succeeds or well fails, if it fails,

63
00:05:19,480 --> 00:05:28,440
I'll for now just log the error, if it succeeds, well then I want to redirect the user to the starting

64
00:05:28,440 --> 00:05:36,120
page. And with that let's save all of that and with that being saved,

65
00:05:36,440 --> 00:05:37,920
click on that e-mail link

66
00:05:37,960 --> 00:05:45,260
again. You should have now seen confirm account for the fraction of a second, for me unfortunately this

67
00:05:45,270 --> 00:05:47,350
always gets opened on the second screen

68
00:05:47,820 --> 00:05:52,390
but if we now go back and we sign up again, again with a real e-mail, that's important,

69
00:05:54,620 --> 00:05:58,760
then I get an error that is stemming from the app.js file here,

70
00:05:58,820 --> 00:06:02,570
when I tried to extract something which was required when I used axios,

71
00:06:02,680 --> 00:06:07,280
so let me simply replace this with an error occurred here.

72
00:06:10,340 --> 00:06:12,760
And then let's try this again with a real email address

73
00:06:12,770 --> 00:06:16,880
as I mentioned, I get this error

74
00:06:16,890 --> 00:06:20,600
now and here, in the error I get back,

75
00:06:20,610 --> 00:06:24,420
we actually see that the name is already in use.

76
00:06:24,600 --> 00:06:29,940
So now let's try adding the login in the next lecture so that we can use that confirmed user to log

77
00:06:29,940 --> 00:06:30,130
in.