1
00:00:00,120 --> 00:00:04,320
In this lecture, we are going to authenticate users through the login form.

2
00:00:04,650 --> 00:00:06,840
We're finished with the registration form.

3
00:00:07,050 --> 00:00:11,760
Users shouldn't have to register an account every time they want to log into our app.

4
00:00:12,150 --> 00:00:14,580
The next thing to tackle is the log in form.

5
00:00:14,910 --> 00:00:17,560
A lot of what we'll be doing is the same as before.

6
00:00:17,910 --> 00:00:24,660
Unlike last time, I won't draw this process out into a dozen lectures will fly right by this solution

7
00:00:24,990 --> 00:00:25,940
in your editor.

8
00:00:25,950 --> 00:00:28,530
Open the log component class file.

9
00:00:30,970 --> 00:00:37,240
As you may recall, we separated the forms in two separate components for easier management in the previous

10
00:00:37,240 --> 00:00:37,780
section.

11
00:00:37,930 --> 00:00:40,810
We've taken care of validating the log in form.

12
00:00:41,170 --> 00:00:46,000
We can move on to sending the log and data to Firebase and handling their response.

13
00:00:46,510 --> 00:00:50,820
First, we'll send the data to Firebase inside this class.

14
00:00:50,860 --> 00:00:53,500
We have a method for handling the form submission.

15
00:00:53,860 --> 00:00:56,230
We will handle the request in this method.

16
00:00:56,590 --> 00:00:58,540
Requests are asynchronous.

17
00:00:58,750 --> 00:01:01,990
Let's have the async keyword to the log in method.

18
00:01:04,370 --> 00:01:07,850
Typically, we would outsource the request to a service.

19
00:01:08,060 --> 00:01:11,570
However, the request can be handled with one line of code.

20
00:01:11,900 --> 00:01:18,590
It's perfectly fine to write this logic inside the component class, replace the console log function

21
00:01:18,590 --> 00:01:20,270
with a try and catch block.

22
00:01:22,710 --> 00:01:29,190
Next, we should inject the service for sending me request at the top of the file import, the angular

23
00:01:29,190 --> 00:01:32,910
fire off service from the angular fire off package.

24
00:01:35,450 --> 00:01:41,480
In the constructor function, we will inject the angular fire off service as a private property.

25
00:01:41,840 --> 00:01:44,420
The name of the property will be called off.

26
00:01:47,050 --> 00:01:52,780
The authentication service will expose a method for authenticating a user into our app.

27
00:01:53,080 --> 00:01:54,250
Let's give it a try.

28
00:01:54,610 --> 00:02:02,260
Inside the try block of our login function, call the following function asks sign in with email and

29
00:02:02,260 --> 00:02:02,920
password.

30
00:02:05,480 --> 00:02:07,280
I'm introducing a new function.

31
00:02:07,520 --> 00:02:11,630
It'll sign the user into the application with their email and password.

32
00:02:11,870 --> 00:02:15,140
It has two arguments the email and password.

33
00:02:15,440 --> 00:02:17,300
These exist within the class.

34
00:02:17,600 --> 00:02:22,430
We will set the arguments to their respective values from the credentials object.

35
00:02:24,950 --> 00:02:26,900
This request is asynchronous.

36
00:02:27,170 --> 00:02:31,100
We'll need to add the await keyword before calling the function.

37
00:02:33,610 --> 00:02:40,300
We're finished with a single function we can authenticate a user into an application before we test

38
00:02:40,300 --> 00:02:41,500
our login system.

39
00:02:41,620 --> 00:02:45,640
We should provide feedback to the user during this entire process.

40
00:02:45,940 --> 00:02:49,510
We can reuse the alert component for the login form.

41
00:02:49,840 --> 00:02:55,120
A lot of the logic will be similar to the registration form as an exercise.

42
00:02:55,270 --> 00:02:58,480
Try adding the alert component to the login form.

43
00:02:58,750 --> 00:03:00,550
The behavior should be the same.

44
00:03:00,820 --> 00:03:04,540
It should be hidden by default after the form is submitted.

45
00:03:04,720 --> 00:03:07,300
The alert component should inform the user.

46
00:03:07,330 --> 00:03:08,560
They are being logged in.

47
00:03:08,830 --> 00:03:11,590
If successful, render a success message.

48
00:03:11,830 --> 00:03:14,140
Otherwise, render an error message.

49
00:03:14,380 --> 00:03:16,810
The forms should be disabled during submission.

50
00:03:17,050 --> 00:03:19,050
Pause the video and good luck.

51
00:03:21,050 --> 00:03:21,870
Welcome back.

52
00:03:22,040 --> 00:03:26,210
If you were successful with wiring the alert component, then congrats.

53
00:03:26,390 --> 00:03:28,190
If not, that's fine as well.

54
00:03:28,400 --> 00:03:30,470
Let's walk through the solution together.

55
00:03:30,740 --> 00:03:37,160
First, we should create properties for controlling the behavior of the form and alert component at

56
00:03:37,160 --> 00:03:38,630
the top of the class file.

57
00:03:38,720 --> 00:03:43,700
We will add a property called Show Alert with an initial value of false.

58
00:03:46,220 --> 00:03:50,030
This property will toggle the visibility of the alert component.

59
00:03:50,300 --> 00:03:53,900
Next, we will create a property called alert message.

60
00:03:54,170 --> 00:03:57,200
The initial value for this property will be the following.

61
00:03:57,410 --> 00:03:58,160
Please wait.

62
00:03:58,250 --> 00:03:59,540
We are logging you in.

63
00:04:02,110 --> 00:04:07,840
Afterward, we will create a property called Alert Color with an initial value of blue.

64
00:04:10,330 --> 00:04:16,300
Lastly, we will create a property called in submission with an initial value of false.

65
00:04:18,820 --> 00:04:25,060
The end submission property will toggle the buttons disabled attributes we should disable the form if

66
00:04:25,060 --> 00:04:27,070
the user has sent a request.

67
00:04:27,580 --> 00:04:31,690
These properties should be updated during the form submission process.

68
00:04:31,990 --> 00:04:37,810
We will toggle their values in the log in function before we initiate the request.

69
00:04:37,990 --> 00:04:42,010
We should display the alert component and reset the properties.

70
00:04:42,250 --> 00:04:49,000
Keep in mind, it is possible to submit the form multiple times if there are subsequent submissions.

71
00:04:49,150 --> 00:04:53,350
We should reset the alert component at the top of the function.

72
00:04:53,500 --> 00:04:56,620
We all set the show alert property to true.

73
00:04:59,100 --> 00:05:04,830
The alert message and alert color properties will be reset to their initial values.

74
00:05:07,150 --> 00:05:11,080
Lastly, we will set the in submission property to True.

75
00:05:13,620 --> 00:05:17,160
We've handled the first step of the form submission process.

76
00:05:17,370 --> 00:05:20,790
We need to update these properties when our response is given.

77
00:05:21,090 --> 00:05:23,400
There are two possible responses.

78
00:05:23,670 --> 00:05:27,960
The users login submission can be successful or end in an error.

79
00:05:28,560 --> 00:05:34,890
The sign in with email function would throw an error if the authentication was a failure in the catch

80
00:05:34,890 --> 00:05:35,370
block.

81
00:05:35,430 --> 00:05:38,100
We should handle the response if there's an error.

82
00:05:38,340 --> 00:05:42,270
First, we all set the in submission property to false.

83
00:05:44,780 --> 00:05:47,990
This value should enable the form again for submission.

84
00:05:48,200 --> 00:05:54,920
Next, we will set the alert message property to the following value An unexpected error occurred.

85
00:05:55,130 --> 00:05:56,570
Please try again later.

86
00:06:00,370 --> 00:06:04,330
Lastly, we will set the alert color property to red.

87
00:06:06,860 --> 00:06:10,460
We should return the function after updating these properties.

88
00:06:10,610 --> 00:06:13,280
We don't want to continue executing logic.

89
00:06:13,940 --> 00:06:19,700
If you would like, you can log the error for debugging their response if you run into problems.

90
00:06:22,200 --> 00:06:28,570
The last step is to handle the response, if it was a success after the try catch blocks.

91
00:06:28,620 --> 00:06:33,420
We will update the alert message property to the following value success.

92
00:06:33,540 --> 00:06:34,830
You are now logged in.

93
00:06:39,520 --> 00:06:42,550
The alert color property will be set to green.

94
00:06:45,070 --> 00:06:45,670
Awesome.

95
00:06:45,700 --> 00:06:47,330
We're finished with the class.

96
00:06:47,560 --> 00:06:50,350
We can wire these properties to our template.

97
00:06:50,620 --> 00:06:52,930
Open the log in template file.

98
00:06:55,450 --> 00:06:58,960
Above the form, we will load the app alert component.

99
00:07:01,370 --> 00:07:05,750
We can toggle the components visibility with the NGF directive.

100
00:07:06,020 --> 00:07:08,480
Let's add this directive to our component.

101
00:07:08,750 --> 00:07:11,630
The condition will be the show alert property.

102
00:07:14,050 --> 00:07:18,730
Next, we will bind the color property to the alert color of property.

103
00:07:21,240 --> 00:07:27,630
Inside the component, we will write an expression, the expression will render the alert message property.

104
00:07:30,190 --> 00:07:34,030
There's one last step before we can call this component complete.

105
00:07:34,330 --> 00:07:40,330
We need to disable the button during submission at the bottom of the form on the button element.

106
00:07:40,420 --> 00:07:42,100
We will update the condition.

107
00:07:42,400 --> 00:07:45,070
Add the following or in submission.

108
00:07:47,590 --> 00:07:48,430
We're finished.

109
00:07:48,580 --> 00:07:49,830
Save your changes.

110
00:07:49,870 --> 00:07:52,270
Let's try giving our app a test.

111
00:07:54,720 --> 00:08:01,620
Before you do, I recommend clearing the site data to start with a fresh slate in the Chrome developer

112
00:08:01,620 --> 00:08:02,160
tools.

113
00:08:02,280 --> 00:08:05,950
Navigate to the application panel on the sidebar.

114
00:08:06,030 --> 00:08:08,580
There will be an option to clear the storage.

115
00:08:08,760 --> 00:08:11,160
Click on the clear site data button.

116
00:08:13,580 --> 00:08:20,270
Once you've got that settled, refresh the page, then try logging in with an account that doesn't exist.

117
00:08:22,660 --> 00:08:26,210
Will receive an error message if we look in the console.

118
00:08:26,240 --> 00:08:30,970
An error will be logged from the request sent by the Firebase SDK.

119
00:08:33,500 --> 00:08:36,620
Now, let's try logging in with valid credentials.

120
00:08:38,950 --> 00:08:43,270
We will receive a success message if we were to refresh the page.

121
00:08:43,419 --> 00:08:47,770
We continue to be logged in because Firebase stores the token.

122
00:08:49,550 --> 00:08:52,460
Firebase can verify if the user is logged in.

123
00:08:52,670 --> 00:08:53,330
That's great.

124
00:08:53,540 --> 00:09:00,380
We've successfully created a log in and registration form after confirming everything pat yourself on

125
00:09:00,380 --> 00:09:00,890
the back.

126
00:09:01,130 --> 00:09:03,470
We've had to do a lot to get this working.

127
00:09:03,740 --> 00:09:08,360
I know we flew right by this solution, but there shouldn't be anything new.

128
00:09:08,690 --> 00:09:13,490
Almost everything was the same except for the function for signing the user in.

129
00:09:14,030 --> 00:09:20,690
In the resource section of this lecture, I provide a link to the sign in with email and password function.

130
00:09:21,020 --> 00:09:24,500
I recommend checking it out if you like to learn more about it.