WEBVTT

1
00:00:00.080 --> 00:00:02.900
Welcome back.
Today we're going to be talking about how

2
00:00:02.930 --> 00:00:06.860
to log in the actual users
that we're registering.

3
00:00:06.890 --> 00:00:11.620
So what I want to do for that is create
a new function that is going to be using

4
00:00:11.650 --> 00:00:16.940
Firebase for logging user in using
their email and password.

5
00:00:16.970 --> 00:00:23.700
So let's export const here
and let's call it login user.

6
00:00:23.730 --> 00:00:29.020
And this is going to be an asynchronous
call taking in the email and password

7
00:00:29.050 --> 00:00:35.220
that the user entered and then we're going
to be using the try catch to make sure

8
00:00:35.250 --> 00:00:39.100
that we get errors just
in case we have any.

9
00:00:39.130 --> 00:00:45.340
And if we get an error we're just going
to say that success state is set to false

10
00:00:45.370 --> 00:00:50.740
and actually let's make it a status
and then let's say that error is going

11
00:00:50.770 --> 00:00:55.260
to contain error message
that comes back with the firebase.

12
00:00:55.290 --> 00:01:00.560
Otherwise what we're going to do is get
the response from the firebase and we're

13
00:01:00.590 --> 00:01:06.050
going to await for its response and we're
going to say auth

14
00:01:06.080 --> 00:01:11.820
sign in with email and password and we're
going to give it the email that user

15
00:01:11.840 --> 00:01:15.050
entered and we're going to give it
the password that user entered.

16
00:01:15.080 --> 00:01:19.490
And then what we're going to do is get
the token because we're going to need it

17
00:01:19.520 --> 00:01:24.490
to make sure that we let the user stay
logged in after they quit the app.

18
00:01:24.520 --> 00:01:28.260
So let's get token using response user

19
00:01:28.290 --> 00:01:30.020
get id token.

20
00:01:30.050 --> 00:01:33.380
And then we want to return

21
00:01:33.410 --> 00:01:41.140
an object saying that status was true
and that our data is an object containing

22
00:01:41.170 --> 00:01:48.290
display name of the user, which we can
get from the response user display name.

23
00:01:48.320 --> 00:01:53.060
And that we want to know what their
email address is when they're logged in.

24
00:01:53.090 --> 00:01:57.490
So let's use response user email and here

25
00:01:57.520 --> 00:02:01.660
we're just going to place
the token as well.

26
00:02:01.690 --> 00:02:03.700
Great.
Now that we have that,

27
00:02:03.730 --> 00:02:08.220
we're going to use the login user
function on our login screen.

28
00:02:08.250 --> 00:02:12.500
So let's go here we have
email and password states.

29
00:02:12.530 --> 00:02:19.730
Let's make sure that we use our button
with is disabled just in case email

30
00:02:19.760 --> 00:02:29.780
length is less than five or
length is less than eight.

31
00:02:29.810 --> 00:02:33.140
This should match our requirements here.

32
00:02:33.170 --> 00:02:37.660
And now that we have that we will see
that our logging button is disabled

33
00:02:37.690 --> 00:02:42.780
because user hasn't entered anything here
and we want some error handling on this

34
00:02:42.810 --> 00:02:45.420
page as well just in case
we get any errors.

35
00:02:45.450 --> 00:02:48.880
So let's just copy this and paste it

36
00:02:48.910 --> 00:02:55.740
in our login's styles
and we can also grab

37
00:02:55.770 --> 00:03:03.380
the error state from here
and we are going to place it right above

38
00:03:03.410 --> 00:03:07.260
our button and let's
create the error state.

39
00:03:07.290 --> 00:03:13.380
I'm going to copy this and paste it
here and just say error set error.

40
00:03:13.410 --> 00:03:14.660
Great.

41
00:03:14.690 --> 00:03:18.180
And now we are ready to log in the users.

42
00:03:18.210 --> 00:03:21.540
So what I'm going to do
for that is create an account.

43
00:03:21.570 --> 00:03:26.260
I'm going to say that my first and last
name is Nata VAcheishvili

44
00:03:26.290 --> 00:03:31.980
and I'm going to say that my email
address is nata3@vacheishvili.com.

45
00:03:32.010 --> 00:03:36.860
And then my password is going
to be numbers from one to nine.

46
00:03:36.890 --> 00:03:40.300
So let's click registration.

47
00:03:40.330 --> 00:03:43.860
And now I'm going to be redirected
back to the login page.

48
00:03:43.890 --> 00:03:45.180
Now that we have that,

49
00:03:45.210 --> 00:03:52.700
what we're going to do is make sure
that on press of a button we call

50
00:03:52.730 --> 00:03:59.320
the Login user function and we give it
the email and password field and this

51
00:03:59.350 --> 00:04:02.820
should be an asynchronous
function that we await.

52
00:04:02.850 --> 00:04:07.020
And let's make sure that if we get
any errors with that, we handle this.

53
00:04:07.050 --> 00:04:10.480
So let's get User and then what we want

54
00:04:10.510 --> 00:04:17.100
to do is if user status is false,

55
00:04:17.130 --> 00:04:23.880
we want to set error to the user message.

56
00:04:24.560 --> 00:04:26.380
I think that's how we set it up.

57
00:04:26.410 --> 00:04:33.740
Let's make sure, okay, it's called error,
so let's set it like this.

58
00:04:33.770 --> 00:04:37.180
Otherwise we are going to set the error

59
00:04:37.210 --> 00:04:42.740
to an empty string just in case
it contained an error before.

60
00:04:42.770 --> 00:04:50.660
And then if everything goes well, we want
to navigate the user to the home page.

61
00:04:50.690 --> 00:04:55.300
So let's say navigation,
navigate routes home.

62
00:04:55.330 --> 00:05:04.180
Let's make sure that this function is
imported and I will enter some incorrect

63
00:05:04.210 --> 00:05:13.540
stuff here to get
our error handling and see how it works.

64
00:05:13.570 --> 00:05:18.020
So I'm going to click Login now
and it says auth wrong password.

65
00:05:18.040 --> 00:05:21.820
The password is invalid or
the user does not have a password.

66
00:05:21.840 --> 00:05:24.620
And this is a good message but it contains

67
00:05:24.650 --> 00:05:27.340
this here and we don't
really want to show that.

68
00:05:27.360 --> 00:05:32.060
So let's go here and say if error

69
00:05:32.090 --> 00:05:37.540
code equals auth wrong password,

70
00:05:37.570 --> 00:05:46.740
we want to have a custom message
saying that please enter a correct

71
00:05:46.770 --> 00:05:52.780
password and then let's save this
and let's make sure that we return status

72
00:05:52.800 --> 00:05:59.740
false error here and say something
went wrong and let's console log.

73
00:05:59.770 --> 00:06:05.620
What would be the case for entering
an email address that doesn't exist?

74
00:06:05.650 --> 00:06:09.260
Let's say I entered this email address.

75
00:06:09.290 --> 00:06:17.100
Now let's open our terminal, try to log
in and it says auth user not found.

76
00:06:17.130 --> 00:06:27.560
So let's copy this and say here
that user was not found.

77
00:06:27.880 --> 00:06:32.980
The email you entered does not exist.

78
00:06:33.010 --> 00:06:35.900
Please create a new account.

79
00:06:35.920 --> 00:06:38.640
Let's save this.

80
00:06:39.880 --> 00:06:43.780
And now we get the message saying that
the email you entered does not exist.

81
00:06:43.800 --> 00:06:45.060
Please create a new account.

82
00:06:45.090 --> 00:06:52.740
And now I'm actually going to log
in correctly and let's click Login.

83
00:06:52.770 --> 00:06:56.100
And now we're redirected to our homepage.

84
00:06:56.130 --> 00:06:57.780
So this is all for logging in

85
00:06:57.800 --> 00:07:02.980
in and in the next video we're going to be
discussing the authenticated and not

86
00:07:03.010 --> 00:07:09.300
authenticated flow to make sure that user
doesn't have access to the screens

87
00:07:09.330 --> 00:07:13.540
that they shouldn't have access
to when they're not logged in.

88
00:07:13.560 --> 00:07:16.200
Thanks so much for watching
and I'll see you in the next video.