WEBVTT

1
00:00:01.559 --> 00:00:07.540
So, the password must be encrypted before it gets stored, that's really important.

2
00:00:09.080 --> 00:00:14.800
Therefore this code needs to be tweaked and a package needs to be installed that helps

3
00:00:14.800 --> 00:00:16.700
us with hashing the password.

4
00:00:18.020 --> 00:00:22.840
And I'll install that package manually, I'll quit the server and install the package

5
00:00:22.840 --> 00:00:28.820
manually because I know which package I want and that's bcrypt.js, that's the name

6
00:00:28.820 --> 00:00:29.380
of the package.

7
00:00:29.960 --> 00:00:34.520
There also is bcrypt without js but I want this version which is simply a bit easier

8
00:00:34.520 --> 00:00:37.220
to use in this application.

9
00:00:38.880 --> 00:00:43.840
So that will install this package and with that installed I now want to tweak this code

10
00:00:43.840 --> 00:00:45.640
here to take advantage of this package.

11
00:00:47.240 --> 00:00:53.180
And actually I also want to add a new function to this file which should be exported which

12
00:00:53.180 --> 00:00:56.600
can be used to validate user passwords.

13
00:00:57.920 --> 00:01:02.920
But I'll start with this function, I'll highlight it and add my instruction here,

14
00:01:03.680 --> 00:01:07.540
hash the password before storing it.

15
00:01:09.020 --> 00:01:14.800
I'll also add a reference to the package.json file here in hope that it understands that

16
00:01:14.800 --> 00:01:17.560
it's the bcrypt.js package it should be using.

17
00:01:19.419 --> 00:01:22.600
And with that I'll hit enter and see what I'll get here.

18
00:01:24.000 --> 00:01:29.900
So yeah, it's importing this package and then it's applying some changes here to generate

19
00:01:29.900 --> 00:01:37.820
a so-called salt and then hash the password and then store the hashed password.

20
00:01:38.880 --> 00:01:44.780
Now I actually here want to use the async version of hash which also exists which uses

21
00:01:44.780 --> 00:01:47.380
a promise, it's just a different way of building this.

22
00:01:48.000 --> 00:01:56.180
So I'll say use the async version of hash instead of hash sync.

23
00:01:56.460 --> 00:02:00.900
And I'm telling the AI to make these changes because there are different places in the

24
00:02:00.900 --> 00:02:03.900
code that need to be adjusted when using the async version.

25
00:02:05.280 --> 00:02:09.419
For example this async keyword must be added in front of the function keyword.

26
00:02:11.360 --> 00:02:16.160
So with that, that's looking good to me, I'll accept this, great.

27
00:02:16.480 --> 00:02:21.500
I have this function, now I also want to have a function that can be used to verify

28
00:02:21.500 --> 00:02:26.240
the password in the database and compare it to a plain text password.

29
00:02:27.900 --> 00:02:32.080
Because of course since we're now storing hashed passwords in the database we need a

30
00:02:32.080 --> 00:02:35.740
way of comparing those hashed passwords to plain text passwords.

31
00:02:37.260 --> 00:02:43.140
And the bcrypt package offers a function we can use for that but I want to wrap that function

32
00:02:43.200 --> 00:02:45.820
in my own function here in this user model file.

33
00:02:46.640 --> 00:02:49.200
And I'll tell the AI to do that for me.

34
00:02:49.940 --> 00:02:55.080
Add a function I can use to verify user credentials.

35
00:02:56.520 --> 00:02:58.340
Maybe that's enough, let's see.

36
00:02:59.040 --> 00:03:03.800
Verify user credentials, expects email and password, reaches out to the database, selects

37
00:03:03.800 --> 00:03:11.580
a user by email, returns null if we don't find a user and if we do find a user it uses

38
00:03:11.600 --> 00:03:19.880
this compare function which I meant to compare the password and then it either returns an

39
00:03:19.880 --> 00:03:27.180
object with user ID and email if a user was found for the given credentials and the password

40
00:03:27.180 --> 00:03:29.420
is correct or it returns null.

41
00:03:31.100 --> 00:03:36.440
It throws an error if something goes wrong after logging a little error message here.

42
00:03:38.600 --> 00:03:45.060
Now actually I don't need that kind of unnecessary error handling here.

43
00:03:45.360 --> 00:03:50.260
It'll throw an error if something goes wrong anyway so we can handle that elsewhere so

44
00:03:50.260 --> 00:03:54.220
I don't need that here but I'm happy with the rest of the code and I'll accept this.

45
00:03:55.460 --> 00:03:56.020
Like this.

46
00:03:57.520 --> 00:04:02.820
So now we have verify user credentials and now back in the user's controller we can use

47
00:04:02.840 --> 00:04:05.100
this function in the login function.

48
00:04:06.020 --> 00:04:12.300
We can use this verify user credentials function to verify the credentials in here and for

49
00:04:12.300 --> 00:04:18.540
that again I'll select this entire function and pass some editing instructions to cursor.

50
00:04:20.079 --> 00:04:27.440
Use the and I'll actually point it to my verify user credentials function because you can

51
00:04:27.440 --> 00:04:30.100
also reference specific code from other files.

52
00:04:30.360 --> 00:04:37.320
I did that by typing at and then code and then searching for verify user credentials

53
00:04:38.500 --> 00:04:44.980
to tell cursor to use the verify user credentials function and that should actually be all.

54
00:04:45.800 --> 00:04:48.200
No more details should be needed I think.

55
00:04:49.440 --> 00:04:54.080
And it goes ahead and adjusts the login function, adds the async keyword which it will need

56
00:04:54.120 --> 00:04:59.560
because verify user credentials returns a promise and rewrites the code.

57
00:05:00.000 --> 00:05:02.920
to verify the user credentials, await this,

58
00:05:03.800 --> 00:05:06.300
check if it did not get back any user data,

59
00:05:06.400 --> 00:05:08.660
in which case it knows that verification failed

60
00:05:08.660 --> 00:05:11.480
and it sends back an appropriate error response

61
00:05:11.480 --> 00:05:14.720
with an appropriate error response status code.

62
00:05:16.280 --> 00:05:18.680
Otherwise it sends back login successful

63
00:05:18.680 --> 00:05:23.320
with that user data, like this here.

64
00:05:24.660 --> 00:05:27.360
And it then also catches any other error

65
00:05:27.360 --> 00:05:29.440
and sends back a 500 status code.

66
00:05:30.660 --> 00:05:32.659
So yeah, we can accept this here.

67
00:05:33.380 --> 00:05:34.460
Looks good to me.

68
00:05:35.640 --> 00:05:38.000
And with that accepted here,

69
00:05:38.240 --> 00:05:41.260
we can test this and give this a try.

70
00:05:42.380 --> 00:05:45.980
Now I will delete my database SQLite file here

71
00:05:45.980 --> 00:05:49.060
to clear the database because I had that user

72
00:05:49.060 --> 00:05:51.920
with the plain text password in there and I don't want that.

73
00:05:53.600 --> 00:05:56.700
And I'll then thereafter restart my development server

74
00:05:56.700 --> 00:05:57.780
with npm run dev.

75
00:05:58.700 --> 00:06:00.560
And then again, give this a try.

76
00:06:01.280 --> 00:06:06.940
Send this signup request, get back this success response,

77
00:06:07.180 --> 00:06:09.820
but actually here, something's wrong.

78
00:06:10.760 --> 00:06:12.880
I got back an empty object here

79
00:06:12.880 --> 00:06:14.560
instead of the actual user data.

80
00:06:14.960 --> 00:06:16.940
So that's something we'll need to investigate.

81
00:06:17.900 --> 00:06:22.940
But at least we now have the hash password in the database

82
00:06:22.940 --> 00:06:24.500
if we explore that database.

83
00:06:25.580 --> 00:06:27.659
That's not the password I entered instead.

84
00:06:27.600 --> 00:06:30.440
That is indeed the hashed version.

85
00:06:31.440 --> 00:06:32.560
Okay, so that's looking good.

86
00:06:33.680 --> 00:06:39.200
Now with that, we can also test login real quick

87
00:06:39.200 --> 00:06:40.920
before we fix this problem

88
00:06:40.920 --> 00:06:42.620
with the wrong data being returned.

89
00:06:44.000 --> 00:06:46.940
So I'll send a new request in a new tab

90
00:06:46.940 --> 00:06:51.380
to localhost users login.

91
00:06:53.020 --> 00:06:57.800
Also add a body here, a raw body in the JSON format

92
00:06:58.700 --> 00:07:01.800
and essentially send the same data I sent for signup

93
00:07:01.800 --> 00:07:03.940
because we still need an email and password

94
00:07:03.940 --> 00:07:06.000
also when logging in.

95
00:07:07.600 --> 00:07:11.260
Now if I click send, I get an error

96
00:07:11.260 --> 00:07:13.560
which occurred during login though.

97
00:07:14.680 --> 00:07:17.100
So something went wrong here

98
00:07:17.100 --> 00:07:19.620
and I got an error here in my terminal as well.

99
00:07:19.320 --> 00:07:21.680
And that's there for what we'll debug next

100
00:07:21.680 --> 00:07:23.980
and we'll then also fix this error here

101
00:07:23.980 --> 00:07:26.400
regarding the wrong data being sent back.