1
00:00:01,940 --> 00:00:06,800
In this video, we'll see how to create user authentication using Firebase.

2
00:00:07,700 --> 00:00:08,510
So I'm bill now.

3
00:00:08,840 --> 00:00:12,730
We have created that where we can add to lost functionality.

4
00:00:12,740 --> 00:00:17,600
We can go to the checkout page, see the products that are present in our basket, remove that basket.

5
00:00:17,840 --> 00:00:21,920
And also, there is a subtotal section that gets updated dynamically.

6
00:00:23,000 --> 00:00:27,980
So basically, we have completed the basic functionality of e-commerce website, and now the remaining

7
00:00:27,980 --> 00:00:32,660
part is signing so that the user can sign in through the username and password.

8
00:00:33,560 --> 00:00:36,020
So we'll implement this using Firebase.

9
00:00:37,010 --> 00:00:42,020
So first thing you have to go to the five best website by the best are Google.com, and you will see

10
00:00:42,020 --> 00:00:42,470
this film.

11
00:00:43,040 --> 00:00:44,720
So you have to sign in with a Google account.

12
00:00:45,080 --> 00:00:46,670
So I got sign in with my account.

13
00:00:47,030 --> 00:00:52,790
So once you sign in, both get there is a button called Go to consent the content button.

14
00:00:56,020 --> 00:00:59,440
And then click Add Project, so now you are going to create a new project.

15
00:00:59,740 --> 00:01:00,910
We have to give out project the name.

16
00:01:00,910 --> 00:01:02,350
I'll give it a shot.

17
00:01:04,420 --> 00:01:05,290
Click on Continue.

18
00:01:08,030 --> 00:01:12,920
And then, like an Ebola Google Analytics for this project, yes, you have to enable it and then continue.

19
00:01:15,390 --> 00:01:17,010
So for that, we have to select an account.

20
00:01:18,350 --> 00:01:22,760
Again, period, anyway, convincingly like we can do any of the thing.

21
00:01:30,930 --> 00:01:35,490
So we can use the deferred action for five minutes and then create a project that will take some time.

22
00:01:39,930 --> 00:01:44,820
So long as the product is created like now, we have to be the log in page.

23
00:01:44,970 --> 00:01:48,000
So I'm super concerned and they want to log in with that username and password.

24
00:01:48,390 --> 00:01:52,320
So for that, it's fueling a chairman and see if this same order depends on the court.

25
00:01:52,650 --> 00:01:55,020
You can go in log and digest and you can see that.

26
00:01:55,060 --> 00:02:02,130
But I've created a platinum card login and I was very active and decided to link it with the.

27
00:02:03,650 --> 00:02:04,400
Log in, --.

28
00:02:05,030 --> 00:02:07,040
So they should be logging audio.

29
00:02:11,490 --> 00:02:12,190
OK, this is.

30
00:02:14,700 --> 00:02:20,070
So there's a sign up to begin with log in container with the sign up, and there is a form for the email

31
00:02:20,070 --> 00:02:20,670
and password.

32
00:02:22,100 --> 00:02:25,750
And then by signing in, you can update this morning on this already.

33
00:02:26,030 --> 00:02:29,780
And then there's a button for creative recall and also a log signing button.

34
00:02:30,380 --> 00:02:32,800
So I have used the use there to cover it.

35
00:02:33,050 --> 00:02:36,170
I have like imported the used tech.

36
00:02:39,270 --> 00:02:39,540
OK.

37
00:02:39,740 --> 00:02:45,430
Again, like I reported the news story from React and then I have used the emergency payment for the

38
00:02:45,430 --> 00:02:45,790
U.S..

39
00:02:46,140 --> 00:02:52,740
So what does this new state does this whenever we type something in the form fund, for example, free

40
00:02:52,740 --> 00:02:59,130
Typekit email, email and then retype something every time you buy a singing alphabet.

41
00:02:59,310 --> 00:03:03,380
The the value inside the e-mail content, that is very important.

42
00:03:03,540 --> 00:03:04,980
It should get updated dynamically.

43
00:03:05,130 --> 00:03:10,890
So that is what your schedule does whenever you keep on typing, it automatically gets updated every

44
00:03:10,890 --> 00:03:14,430
time and that is done using the set email function.

45
00:03:14,670 --> 00:03:20,250
So the setting will take the input and through either targeted value, we can get the value of the email

46
00:03:20,250 --> 00:03:24,930
that you're typing, which is basically the boilerplate that you have to do whenever you deal with forms

47
00:03:24,930 --> 00:03:30,990
and react so that parallel to the same thing, you had the password for that videotaping something no

48
00:03:30,990 --> 00:03:31,650
one can see it.

49
00:03:33,340 --> 00:03:39,000
So as you can go to that door, Jesse Lingard linked to the log section.

50
00:03:39,610 --> 00:03:45,450
When you click on the Hello guest sign in the region and many of adaptogens, you have to implement

51
00:03:45,610 --> 00:03:50,800
the light switch, which can be shown in the inside incentive switch component so that it renders the

52
00:03:50,810 --> 00:03:55,090
log in page and then the log and not see if this if you can check log in, but this idea.

53
00:03:57,960 --> 00:03:59,030
This is not in our guest.

54
00:04:00,400 --> 00:04:04,530
And then you go to long and not say this is going to see the state is basically moved over here.

55
00:04:05,410 --> 00:04:09,690
Oh, and I just sort of button sign and button log in a paragraph form in book form.

56
00:04:09,700 --> 00:04:15,400
It's fine, it's everything and basically follow the fans like it's simple, basic and entertainment.

57
00:04:15,910 --> 00:04:21,210
So once you do that, when you click on certain things in his speech that we implemented using HDMI

58
00:04:21,250 --> 00:04:21,850
lenses.

59
00:04:22,240 --> 00:04:27,400
So when we click on email and password and click on Sign in it, that's the check to the database,

60
00:04:27,400 --> 00:04:29,980
whether the image and password are already created or not, and then sign him.

61
00:04:30,190 --> 00:04:32,080
If not, you have to be to shop upon.

62
00:04:32,680 --> 00:04:34,720
So we'll see how to do that using this type of.

63
00:04:36,930 --> 00:04:39,480
So once the project is read, you can click on Continue.

64
00:04:44,830 --> 00:04:45,390
Now here.

65
00:04:50,690 --> 00:04:52,130
We have to go to project or you.

66
00:04:53,450 --> 00:04:54,470
But the product seconds.

67
00:04:57,980 --> 00:05:00,920
So first thing you have to do is go to the five five star database.

68
00:05:05,110 --> 00:05:10,060
And we have to create a new database to store the user's imminent past rhetoric that will be going to

69
00:05:10,060 --> 00:05:11,050
the fire started this.

70
00:05:14,110 --> 00:05:18,970
And then you can see the options are created inside of the database audit and stock investment.

71
00:05:19,210 --> 00:05:21,820
You can't start investment because we are testing the product.

72
00:05:21,970 --> 00:05:22,450
That's right.

73
00:05:22,870 --> 00:05:23,230
Next.

74
00:05:24,340 --> 00:05:26,110
Then you're going to be spending

75
00:05:28,750 --> 00:05:31,450
another day for the problem, and I will.

76
00:05:34,490 --> 00:05:36,840
It will take some fundamental reality to work.

77
00:05:44,070 --> 00:05:49,050
So once this is done, we are determined the database that our database is ready and then we can select

78
00:05:49,050 --> 00:05:53,820
authentication from the side panel already and choose the type of authentication that we need.

79
00:05:54,180 --> 00:05:57,000
So that's going to be a bit using email or password type of authentication.

80
00:05:59,170 --> 00:05:59,430
Yeah.

81
00:05:59,530 --> 00:06:02,220
So long said, Sudan, go to the authentication section it.

82
00:06:06,590 --> 00:06:08,360
And the underground water get started.

83
00:06:11,230 --> 00:06:16,390
So we have been able this thing email or password type of authentication on the pen and IT configurations

84
00:06:16,390 --> 00:06:18,130
in Bulgaria and emulate.

85
00:06:20,280 --> 00:06:21,270
Then you save.

86
00:06:22,700 --> 00:06:24,110
So I imagine it is, I love it.

87
00:06:24,620 --> 00:06:25,760
So once you mix it.

88
00:06:27,170 --> 00:06:29,360
And we have to say we saved it anyway.

89
00:06:29,890 --> 00:06:35,750
And then now that the next step to do is that we have to add fire imagery that WebApp like to our visual

90
00:06:35,750 --> 00:06:37,970
studio part for that to have to go to the product settings.

91
00:06:42,440 --> 00:06:44,210
So here you can see three icons.

92
00:06:44,630 --> 00:06:49,370
We have to create a Web app in the project so that we can integrate without a visual code that is a

93
00:06:49,370 --> 00:06:50,250
third app on our air.

94
00:06:50,270 --> 00:06:51,320
Click on a third iPhone.

95
00:06:52,590 --> 00:06:54,720
And then we have to give you the app name.

96
00:06:55,050 --> 00:06:56,490
I'll give it a shot.

97
00:06:59,540 --> 00:07:00,860
But check out this thing.

98
00:07:02,210 --> 00:07:02,470
Yeah.

99
00:07:03,630 --> 00:07:03,980
Shut up.

100
00:07:07,280 --> 00:07:13,310
So until this gets complicated now, well, what we'll do is we'll import some basic required fire based

101
00:07:13,310 --> 00:07:14,750
tools that we need for the project.

102
00:07:15,320 --> 00:07:18,170
So I've installed npm install.

103
00:07:19,530 --> 00:07:22,650
Minus, these are flags to install everything properly.

104
00:07:25,070 --> 00:07:26,060
By students.

105
00:07:29,840 --> 00:07:32,000
Fire service and fire, the best logging.

106
00:07:40,270 --> 00:07:45,550
So it is happening, so in the meantime, OK, we're going next, next, next.

107
00:07:45,560 --> 00:07:46,300
Everything, order.

108
00:07:48,780 --> 00:07:53,250
Yeah, this is for the tabloid papers, we'll see this in the next week or maybe after they apply that

109
00:07:53,250 --> 00:08:00,420
the final step is to apply that application on to the US onto the onto the online platform so that we

110
00:08:00,420 --> 00:08:01,680
can share the link to anyone.

111
00:08:01,830 --> 00:08:03,990
So let's continue to function.

112
00:08:04,820 --> 00:08:10,050
So now here in this, if because at that point, conflagration both the conflict and say everything

113
00:08:10,050 --> 00:08:15,720
like this is the important thing that sets up this database and your app that we are building locally.

114
00:08:15,900 --> 00:08:18,060
So populous and popping it already it.

115
00:08:19,250 --> 00:08:22,580
What have made yesterday and create a fire alarm, fire, build our this.

116
00:08:30,410 --> 00:08:32,660
And save the carpet corollary, you can remove the.

117
00:08:33,740 --> 00:08:34,760
It's not required.

118
00:08:40,350 --> 00:08:41,040
So once.

119
00:08:42,260 --> 00:08:44,720
I have to go through this thing.

120
00:08:49,730 --> 00:08:54,980
We'll see whether that be a more different standoff that is taking some more time, we'll wait for it.

121
00:08:55,870 --> 00:08:58,610
So the basic God, what will I know what it is?

122
00:08:58,790 --> 00:09:04,310
We have been fired from the package that we installed using, and so I'll put that.

123
00:09:08,890 --> 00:09:10,090
What I address from.

124
00:09:11,760 --> 00:09:12,480
By Airbus.

125
00:09:14,370 --> 00:09:15,870
And then I'll be creating a fire with that.

126
00:09:22,190 --> 00:09:23,500
By Firebase app.

127
00:09:26,270 --> 00:09:29,210
But that's not an issue like that.

128
00:09:36,820 --> 00:09:41,410
And then we'll be passing over the this object, the responsible object inside.

129
00:09:42,500 --> 00:09:44,030
The initialize our parameters.

130
00:09:48,040 --> 00:09:50,320
So after that, we have to create a constant database.

131
00:09:53,340 --> 00:09:55,440
Frustrating the information, I find this.

132
00:10:01,230 --> 00:10:05,400
And then we have to be at authentication object so that we can use it for authentication purposes,

133
00:10:06,330 --> 00:10:08,610
Firebase has provided this object for us.

134
00:10:09,630 --> 00:10:15,750
So this is a basic in the boilerplate for when you are always when you use your firebase for authentication

135
00:10:15,750 --> 00:10:16,530
and deployment.

136
00:10:17,550 --> 00:10:20,280
So to use this deal, we are not the we have to export them.

137
00:10:22,250 --> 00:10:23,830
That it's actually five at.

138
00:10:24,560 --> 00:10:24,770
Yeah.

139
00:10:26,940 --> 00:10:28,080
So now we're going to explore.

140
00:10:29,620 --> 00:10:30,880
They've been up.

141
00:10:37,010 --> 00:10:38,810
So it is a completed the basic setup.

142
00:10:40,370 --> 00:10:42,260
Let's see whether the back end is not in Somalia.

143
00:10:43,190 --> 00:10:45,200
They're taking some more time US district for them.

144
00:10:45,770 --> 00:10:52,910
So meanwhile, in light of what we have to like, will light up on the set up indications, but.

145
00:10:54,550 --> 00:10:56,170
So that's Kelly waterlogging, Dargis.

146
00:10:59,110 --> 00:11:03,550
And then here will be importing the thought that we just exported in Firebase.

147
00:11:14,570 --> 00:11:15,430
I'm tired of us.

148
00:11:17,770 --> 00:11:19,270
And then once it's implemented.

149
00:11:28,180 --> 00:11:32,080
So we can, like use this inside insider Firebase.

150
00:11:37,260 --> 00:11:42,760
So, yeah, so now once we have a imported dog, we'll be using the like, we'll ride the logic to implement

151
00:11:42,760 --> 00:11:43,420
authentication.

152
00:11:44,200 --> 00:11:49,180
So first thing we have to create new functions such as major shutdown signing, so that whenever whenever

153
00:11:49,180 --> 00:11:54,420
we click on the button, we can trigger the functions and provide the function of the business logic.

154
00:11:54,810 --> 00:11:57,100
The fragile the function of signing.

155
00:11:59,500 --> 00:12:00,790
A little arrow function.

156
00:12:06,220 --> 00:12:11,920
So then whenever, like the basic family, what it does is whenever we click on a button, it refreshes

157
00:12:11,920 --> 00:12:12,310
the page.

158
00:12:12,490 --> 00:12:17,830
But but the best practice in React is to avoid the refreshing of which we have to do a bit in dynamic

159
00:12:17,840 --> 00:12:18,300
like that.

160
00:12:18,580 --> 00:12:23,860
Like the each component should be updated instead of refreshing the page, the fact that I have to do

161
00:12:23,860 --> 00:12:24,760
preventative front.

162
00:12:26,440 --> 00:12:29,920
So even they even that will take place after clicking on signing button.

163
00:12:34,070 --> 00:12:34,940
Preventive function.

164
00:12:36,790 --> 00:12:43,060
So as we put it, all we have to like, there is a method inside our car signing with imminent password

165
00:12:43,120 --> 00:12:45,740
that is provided by the phitidis, so we'll use that matter.

166
00:12:47,270 --> 00:12:47,650
That.

167
00:12:49,510 --> 00:12:50,380
I like values.

168
00:12:50,890 --> 00:12:52,180
This is the best practice of writing.

169
00:12:55,350 --> 00:12:55,950
Finding.

170
00:12:57,160 --> 00:13:00,490
The event and last night.

171
00:13:02,170 --> 00:13:04,450
And then inside will send they met in Boston.

172
00:13:05,840 --> 00:13:11,780
That we already know, like the fonctionnent names which contains they met and that the user entrance.

173
00:13:12,350 --> 00:13:18,950
So off the bat, if this metro successfully executed, then we'll get back the will get back something

174
00:13:18,950 --> 00:13:19,190
from.

175
00:13:19,490 --> 00:13:21,680
That is what we have to do with then.

176
00:13:23,210 --> 00:13:24,710
Anyway, getting back up.

177
00:13:27,850 --> 00:13:34,480
So now, if if, like successfully, we have completed DOD, we have to go back to the homepage.

178
00:13:35,080 --> 00:13:35,330
Right?

179
00:13:35,770 --> 00:13:39,190
So you go back to the homepage that is a can't use history.

180
00:13:39,430 --> 00:13:45,760
So what does this news history does is when you can see inside the after days when we are putting literal

181
00:13:45,970 --> 00:13:51,490
bombs, but out of all the tail components of the that's where the components that we use inside the

182
00:13:51,490 --> 00:13:58,240
rover will be present in the U.S. history so that we can access the users to for loading back the components

183
00:13:58,240 --> 00:13:59,050
that we used already.

184
00:13:59,860 --> 00:14:01,690
So we're going back to my technologies.

185
00:14:02,500 --> 00:14:07,060
If I log into our guess, I'll be importing the user's use history of audio.

186
00:14:09,530 --> 00:14:10,040
Fast.

187
00:14:13,080 --> 00:14:14,440
It's AstraZeneca's still uses.

188
00:14:17,990 --> 00:14:20,810
So long as we're done, I can use his state on push.

189
00:14:23,330 --> 00:14:25,940
Send back to my people like that.

190
00:14:26,390 --> 00:14:30,650
But I take at the home road, if that's the homepage.

191
00:14:32,020 --> 00:14:34,140
And then if there is an error, we can catch that up.

192
00:14:37,810 --> 00:14:38,650
That is an area.

193
00:14:40,550 --> 00:14:42,140
We can alert with that message.

194
00:14:49,840 --> 00:14:51,640
So with this, we have done the signing part.

195
00:14:52,000 --> 00:14:53,950
So how do you do that?

196
00:14:53,950 --> 00:14:54,370
I just don't.

197
00:14:54,580 --> 00:14:55,960
So I just do the same it.

198
00:14:56,380 --> 00:14:57,430
Let me copy business.

199
00:14:58,780 --> 00:15:01,150
So instead of saying it will be registered.

200
00:15:06,320 --> 00:15:11,540
After Prevent Default and the insured up sign in with email and password, we'll have a function created

201
00:15:12,220 --> 00:15:13,910
create using email and password.

202
00:15:15,160 --> 00:15:16,780
So instead of saying create user.

203
00:15:20,730 --> 00:15:24,570
User with the imminent threat so dark, they up.

204
00:15:26,060 --> 00:15:32,870
So we can basically use brackets on non-native brackets, since it is only one argument only to use

205
00:15:32,870 --> 00:15:34,970
brackets, but if you want to use that next year it.

206
00:15:35,950 --> 00:15:43,870
So after this one of the images created, then if the order is successful very much like we have to

207
00:15:43,870 --> 00:15:47,410
check with a dog, this successful or not we don't directly like.

208
00:15:49,440 --> 00:15:54,180
We don't want to use it, provided you need anything below, but we want to check whether the user is

209
00:15:54,180 --> 00:15:55,380
successfully registered or not.

210
00:15:55,650 --> 00:15:57,090
So we have to use that if condition.

211
00:16:01,270 --> 00:16:02,480
Then we are basically straight up.

212
00:16:12,620 --> 00:16:14,300
And everything will be the same.

213
00:16:14,960 --> 00:16:17,000
So one thing you have to change is click.

214
00:16:19,340 --> 00:16:25,490
Wherever there is a battle to make, this is about like signing up here, signing on.

215
00:16:29,030 --> 00:16:30,380
On getting off to.

216
00:16:31,600 --> 00:16:33,010
Trigger the function of confinement.

217
00:16:37,730 --> 00:16:39,500
And the direction conflict.

218
00:16:44,070 --> 00:16:46,040
You have to register.

219
00:16:47,810 --> 00:16:49,070
So once this is done.

220
00:16:54,270 --> 00:16:59,190
So now we will see whether the yeah, so we can see all the tools are in start and then in the fight

221
00:16:59,190 --> 00:17:04,050
against drugs, we are writing that boilerplate off our fire bets.

222
00:17:07,160 --> 00:17:12,320
Here and then exporting not, and then we are catching up in the log in Dargis and creating the two

223
00:17:12,320 --> 00:17:15,740
functions to write the business logic for sign in and register.

224
00:17:15,980 --> 00:17:18,770
So once again, check out whether this is working or not.

225
00:17:21,060 --> 00:17:25,730
And we'll throw out each of website fellows that cannot fight and fight fire with our guests.

226
00:17:27,140 --> 00:17:28,300
OK, so like.

227
00:17:29,230 --> 00:17:31,330
Here we are, we have to rename this.

228
00:17:35,220 --> 00:17:41,790
Or we can change it instead of this or we can go blogging about this, and then it would fight so.

229
00:17:49,040 --> 00:17:52,270
Well, this is an already I think it is setting the process.

230
00:17:53,580 --> 00:18:00,390
Morning, not from volunteers on Fire Basin overnight is still fortified with identified with some the

231
00:18:00,390 --> 00:18:04,440
one thing like the envoy to try to build bridges and then.

232
00:18:06,080 --> 00:18:08,920
You can export and import fine best vampire vessel.

233
00:18:09,260 --> 00:18:10,720
It should be smart.

234
00:18:11,000 --> 00:18:11,420
Let us.

235
00:18:13,070 --> 00:18:16,200
But basically, the idea that whenever you get a look at a new Stack Overflow.

236
00:18:23,700 --> 00:18:27,210
So right about the log intervention, then what Cyprus?

237
00:18:28,160 --> 00:18:29,170
They are that's not.

238
00:18:38,040 --> 00:18:43,950
So the problem was as we start the fire, best fire, bad storms and fire based logging in a single

239
00:18:43,950 --> 00:18:45,690
command, it was not installed properly.

240
00:18:45,960 --> 00:18:51,300
So what any commander to do is install each and every thing's operating like PMI, fire based logging

241
00:18:51,600 --> 00:18:52,620
and PMI.

242
00:18:52,980 --> 00:18:55,950
Fire based ones are going to be in my fire to miss so that it should work.

243
00:18:56,460 --> 00:18:59,940
And then when once this is done, we check whether the app is working or not?

244
00:19:00,660 --> 00:19:01,620
I refresh the page.

245
00:19:02,810 --> 00:19:03,650
Robo-Signing.

246
00:19:04,720 --> 00:19:12,130
And let them do their best meditation, direct G-men, dot com and password, you can give any password.

247
00:19:12,700 --> 00:19:16,270
Just click on first item check by clicking on signing.

248
00:19:17,720 --> 00:19:20,450
One I on site, and you can see there's a lot of material that is throwing.

249
00:19:20,660 --> 00:19:23,330
There is no user record corresponding to this identifier.

250
00:19:23,360 --> 00:19:24,590
The user may have been deleted.

251
00:19:24,920 --> 00:19:29,540
So checks the database that the virus has and then checks whether the user is present or not.

252
00:19:29,870 --> 00:19:34,610
So since the user is not present, we can create a new shop account and click on Create Your Account.

253
00:19:35,360 --> 00:19:36,860
Once it is done, it is directing.

254
00:19:37,040 --> 00:19:42,650
Since I gave a very short password data alert extension of change, it's fine for now.

255
00:19:43,010 --> 00:19:44,810
Exactly that we are getting any clarity into the.

256
00:19:45,710 --> 00:19:56,530
So now I'll go to the same question to check whether we are getting an image when we check your e-shop

257
00:19:56,540 --> 00:19:57,110
account or not.

258
00:20:02,910 --> 00:20:05,900
That admitted that the email address is already in use by either un-American.

259
00:20:06,380 --> 00:20:10,610
So you can use a signing so that you can sign in with that.

260
00:20:11,970 --> 00:20:15,810
So there's no you can create your own authentication using Firebase.

261
00:20:16,440 --> 00:20:20,280
You can also perform various functions like whether the user is signing, you can.

262
00:20:20,790 --> 00:20:27,120
So he wants to sign or you can sign out and you can only render that one page whenever the user is signed

263
00:20:27,120 --> 00:20:28,620
him so it can take various things.

264
00:20:28,620 --> 00:20:35,040
You can check the fine print documentation for that and also you can get the user email ready whenever

265
00:20:35,040 --> 00:20:40,860
he clicks on signing and then signing with the country's present in the database for all other functionality

266
00:20:40,870 --> 00:20:42,750
that you can take as challenges and then finish it.

267
00:20:43,110 --> 00:20:47,940
So with this being added, going into the final step on a project that is deploying that app that will

268
00:20:47,940 --> 00:20:48,600
see in the next few.