Up next in 10
React Firestore Project to Build Public Chat Room Using Google Login Authentication in TailwindCSS
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/react-firestore-project-to-build-public-chat-room-using-google-login-authentication-in-tailwindcss/
Show More Show Less View Video Transcript
0:07
Uh hello friends, today in this tutorial
0:08
I will be showing you that how to build
0:10
a public chat room inside your ReactJS
0:14
application using Tailwind CSS inside
0:16
the front end. So basically this is the
0:18
chatting kind of an application. So it's
0:20
a group chat. So basically public chat
0:24
room or group chat kind of an
0:25
application. So you can see this is uh
0:28
we are using Google login
0:29
authentication.
0:31
So we are using Firebase at the back end
0:34
here. So basically you can see we are
0:36
using the real-time database such as
0:38
fire store for building this. So let me
0:40
show you the authentication method which
0:42
methods we are using it. So inside
0:45
signin method you will now see we are
0:47
using this uh Google authentication
0:49
which is enabled by default and uh you
0:53
will now see these are the users which
0:55
are there. Let me uh delete this and
0:57
start from scratch. Let me delete this
0:59
account also.
1:06
So now guys it is empty. No user is
1:08
there. So we need to start from scratch.
1:10
So basically uh you can now see if you
1:14
open this inside uh the browser this
1:17
will be the simple interface. There will
1:19
be a button out there which will be sign
1:21
in with Google which is a very obvious
1:25
button that you see inside many
1:26
applications. Whenever you want to sign
1:28
in with your Google account you need to
1:30
grant permissions. So whenever you click
1:32
this sign in button guys so this window
1:34
will appear the pop-up window then you
1:36
need to grant the permission for your
1:38
Google account. After permission granted
1:41
you will now see your log out button. So
1:43
now you are successfully logged in. So
1:45
these are the messages inside our chat
1:48
here. Now you can see the name is also
1:50
displayed here. Go kam coding sika mahak
1:53
cha you can now see these are the
1:56
previously sent messages. So whenever
1:58
you sent a message it will be appearing
2:00
on the right hand side. Let's suppose I
2:03
say hello I am Gotham.
2:06
So basically this message will be there
2:08
on the right hand side and it will have
2:10
a nice little background color attached
2:11
to it. So now you can send as many
2:16
messages as you want here.
2:19
So now you can see that.
2:24
So you can see that
2:28
just refresh it.
2:33
So in this way guys you can send out the
2:35
messages here. So
2:37
all these messages that you see guys it
2:40
is stored inside uh if you see we are
2:43
storing all these messages inside our
2:47
firebase database. So go to your
2:49
firebase fire store database. So we are
2:52
storing all these messages inside this
2:55
collection which is called as table. So
2:58
let me delete this now. Delete
3:00
collection. So we will simply say or
3:03
individual we can delete this
3:10
uh can delete
3:13
document
3:26
basically you can also delete the whole
3:28
collection as well. So these are the
3:29
different kinds of messages which should
3:31
be there here. So you can now see it
3:33
will have these fields out there which
3:35
is name, text, time stamp. So you can
3:39
see name, text, time stamp and this is
3:41
the unique ID which is there. So let me
3:43
just show you. Let me delete this here.
3:49
So now this will be deleted. So now in
3:51
order to create a collection basically
3:53
here you will give your collection name.
3:54
So in this case we will put messages.
3:56
Click on next. And this document ID you
3:59
can auto generate it. And our fields
4:02
will be display name. This would be
4:03
string. And uh then we will have the
4:06
text actual text message. Here we can
4:09
put here Gotham. And uh then we can put
4:12
here hello.
4:14
And then lastly we will have the next
4:16
field here which is time stamp. And
4:18
basically this will be of the type here
4:20
time stamp. So simply select it. So here
4:22
we will give the today's date which is
4:24
10th September 2022 and the current time
4:27
which is 108 27 seconds
4:30
and click on save. So now your
4:32
collection will be created guys inside
4:34
your Firebase fire store database here
4:36
you can see that and now if you go to
4:38
your application now you will see this
4:40
message appearing here automatically. So
4:43
this is the power of using Firebase
4:45
realtime database guys you will send you
4:47
will get realtime notifications without
4:49
having to refresh your page. So let's
4:51
suppose I open another account here.
4:54
Let's suppose this account and let's
4:56
suppose I open here localhost
5:00
3001. So this is another window here. So
5:03
basically guys you will now see let me
5:05
put it side by side. So basically as you
5:07
see is a group chatting kind of an
5:09
application. If I click sign in here so
5:12
this is a separate Google account. So we
5:13
need to grant permission for this. So we
5:16
will need to grant the permission. So
5:18
once it is successfully logged in. So
5:21
now you can see that it is log out. So
5:23
if I send some message here I I am
5:27
nha. So you can now see this message
5:29
will be there on this it will be
5:32
received on the left hand side and the
5:34
background color will be nha. You can
5:36
see nha to josi and hi I'm na. So
5:39
basically now here if I send it hiam
5:42
sharma you can now see this will like
5:45
this. I can have also have three people
5:47
also. You can have multiple people
5:49
chatting at the same time. So this is
5:52
another account here, localhost 3001. So
5:55
again sign in.
5:58
So now we'll be three windows of
6:00
chatting here. So
6:04
so this is a very awesome application
6:06
guys. You can you can see all these m
6:08
messages will be pre-filled here. And if
6:10
you see hi I am Harsh.
6:14
Now you can see that you can see harsh
6:17
as you can see. Hi I'm Harsha.
6:22
So in this way guys you can do all the
6:24
three windows will be receiving these
6:26
messages. So it is unlimited number of
6:28
people can chat at one time in public
6:30
chat room. So anyone go goes to the
6:33
application you just need to sign up
6:34
sign in with your Google account grant
6:36
or permissions and you can also deploy
6:38
this application on the live internet.
6:40
So anyone coming onto the application
6:42
can chat with each other. The only
6:45
disadvantage is that you can't send
6:47
images here. Only text is sent here. So
6:50
only text would be sent here. So this is
6:52
only a disadvantage. So in the future
6:54
videos I will try to implement the image
6:57
sending feature as well. So at at any
7:00
point you need to log out, you can
7:01
simply click the log out button to
7:03
simply log out like this. So this is the
7:06
very good feature. You can now see log
7:08
out and if you check here inside your
7:10
Firebase
7:12
number of users which are there. So go
7:14
to authentication and these are number
7:17
of users which are logged in created
7:19
September 10th, September 10 and
7:20
September 10th. So this is a unique ID
7:23
which is given to them so that we can
7:24
fetch out the information such as email
7:26
address, display name, avatar image. So
7:29
all that stuff. So let's start building
7:31
this application guys. Public chat room
7:33
inside ReactJS fire store and Tailwind
7:36
CSS. So if you want the full source
7:38
code, I have given the source code of
7:39
this application in the live chat. So I
7:42
have pinned this message here. You can
7:43
see that I have pinned this message. So
7:46
you can uh click this message and get
7:49
all the source code. So I have written a
7:50
complete blog post on my tutorial
7:52
website coding section. So copy paste
7:55
all the source code. So please hit the
7:57
like button. I am seeing that you are
7:59
not liking the content. So only two
8:01
likes are there. So the target type uh
8:03
likes will be 50 likes. So please hit
8:05
the like button. Subscribe the channel
8:06
as well. So let's start building this
8:08
application.
8:11
So
8:15
why every time I go on YouTube you are
8:17
recommended and you are wearing the same
8:18
t-shirt and you have notepad open and
8:20
you are reading the code from notepad.
8:23
Um so now let's get started by building
8:26
this application guys. So
8:33
already three people have gone to the
8:35
for source code. So that's good. So now
8:38
first of all guys what we need to do is
8:39
that we will create a brand new project
8:41
react project. So go to the projects
8:43
directory and simply here you need to
8:46
create a new directory which is uh react
8:49
public chat. So simply go into this
8:53
directory
8:55
and uh
8:57
here we will create a brand new project
9:00
npx create react app public chat.
9:07
So this will create a brand new ReactJS
9:09
application inside this folder. Guys,
9:10
you just need to wait for some time to
9:12
install all the dependencies. So once it
9:14
is installed, we can definitely go about
9:16
the project. So just wait here. It is
9:18
installing all the dependencies. In the
9:20
meanwhile, let me tell you which
9:22
dependencies we are using. So, first of
9:24
all, from the front end guys, as you all
9:26
know, Tailwind CSS is a pretty good
9:28
framework for CSS without needing to
9:32
write custom CSS. So, it's a utility for
9:34
CSS framework. It has got all the
9:36
classes which is required to style the
9:39
uh layout. So, we will be using this
9:43
inside of a ReactJS application. And
9:45
then we also need be using Firebase as
9:47
you all know. And for Firebase we have
9:50
this library which is react Firebase
9:53
hooks. This is the library. Basically it
9:56
makes it very much easy now to use
9:59
Firebase inside as a hook. So only
10:02
40,000 weekly downloads are there. So
10:04
this is a simple command and also we
10:06
will use this button which is react
10:08
Google button. So this is the
10:10
dependency. So basically it is used to
10:13
uh create this signin button that you
10:15
see inside your application. So it has
10:18
got 15,000 weekly downloads. So sign in
10:20
with Google. So we will use this library
10:22
also. So it has light theme, dark theme,
10:25
all that stuff. So once it is installed
10:28
guys, you can cd into that public chip.
10:34
So here we can now open this project
10:36
inside Visual Studio Code text editor
10:39
and step by step we will install all
10:41
these dependencies guys. So first of all
10:42
we will install Firebase. Also we will
10:46
install Firebase.
10:48
Uh
10:50
what was the command here? Uh it was
10:56
uh Firebase
11:00
React Firebase hooks. So also install
11:03
this uh React
11:08
Firebase hooks and also React Google
11:12
buttons. So these are the four li three
11:16
libraries which is needed for this
11:17
project guys. Firebase, react, firebase
11:20
hooks and react Google button. So simply
11:22
install this. So it will hardly take 5
11:24
to 10 seconds to install it. So once it
11:27
is installed we can go about building
11:30
this. So
11:37
so after this guys we will be
11:39
configuring tailwind. So if you see just
11:41
go tailwind css react it will give you
11:45
the instructions that is needed here. So
11:47
go to their official website and first
11:49
of all you need to execute this command
11:51
which is npm install-d tailwind css. So
11:56
simply install this by using this then
11:58
this command here npx tailwind css in
12:01
it.
12:04
So this is our brand new reacts project.
12:09
So you don't need this file. So simply
12:11
delete this.
12:14
You also don't need the logo. Simply
12:15
delete this.
12:19
And now we can all delete this.
12:23
And uh inside app dot js delete this
12:27
also the logo. So minimalistic approach
12:30
we need to follow. So we don't need to
12:33
waste time in extra things. So now guys
12:36
we will execute this command here. So
12:38
with the help of this command you will
12:40
now see there will be two files created
12:41
which is tailwind config.js and post
12:44
cssconfig.js.
12:45
So inside this tailwind doconfig.js guys
12:48
you need to copy paste this code here
12:49
which is mentioned here. So simply paste
12:53
it. So this simply means that uh it will
12:57
be watching all the files which are
12:58
present inside the source directory.
13:00
These files can be either JavaScript
13:02
files, JSX files, TypeScript file or
13:05
TypeScript TSJ, TX txx files as well. So
13:09
simply do this and now your config
13:11
almost configured. So in go to index CSS
13:14
simply delete all this code here and you
13:17
need to copy paste this code here which
13:18
is mentioned here. So just write this.
13:21
So in the blog post I have shown you
13:23
step-by-step instruction all this stuff
13:24
in the written format as well.
13:28
So you can tell me guys in the chat if
13:31
you can listen my voice here because uh
13:34
my microphone is was not working. You
13:37
can tell tell me if my voice is audible
13:39
or not. So now it is completed guys
13:42
here. And now first of all we need to
13:45
basically here inside a root do root
13:48
directory we'll simply say firebase.js.
13:50
Simply create this file. And here guys
13:53
uh first of all you need to create a
13:54
brand new ReactJS sorry Firebase
13:57
project. Go to project settings and
14:00
basically create a web application. So
14:02
here simply click this option add app.
14:04
After that you will get a special code
14:06
here which is this code which is
14:08
required for this. So simply you need to
14:09
copy paste it
14:12
and uh simply paste it. So this code
14:15
will be different for you. This is API
14:17
key authorization domain. So don't copy
14:19
this code. So this will be different for
14:22
you.
14:23
So now guys we need to first of all get
14:26
the reference to the fire store database
14:29
as well. So simply delete this. So at
14:32
the very top we will say import
14:35
first of all authentication we will get
14:37
get from firebase / and also we will
14:43
import the
14:45
get fire store method
14:49
from
14:51
firebase/
14:54
fire store.
14:58
So after this guys what we need to do is
15:01
that we need to export this variable
15:04
which is of authentication. So this will
15:06
have this method get o and here we will
15:08
pass the app reference and also we need
15:11
to export this uh const db which is get
15:15
fire store. This is a method and again
15:18
we need to pass app that's it. So here
15:20
we are exporting these authentication
15:22
and database fire store database so that
15:25
we can include it in other files. So
15:28
simply close this file. Now moving to
15:30
the app dot js guys. So first of all
15:32
here inside this HTML. Basically here we
15:36
will have a section
15:39
tag.
15:42
So inside this section we will be giving
15:44
a tailwind class which will be called
15:46
as.
15:48
So basically here we will simply say
15:51
style dot section container. So we will
15:54
make a style object guys. So just wait
15:56
and inside this parent class you will
15:58
say style dot
16:01
uh app container.
16:04
So this is convenient guys. Let me show
16:06
you how it is done. So basically you
16:08
will create a style object here at the
16:10
very top. This will be an object and it
16:12
will contains these two properties which
16:14
is app container
16:16
and the second one will be section
16:18
container.
16:20
And right here basically you will put
16:22
all these classes which are required for
16:24
uh
16:28
uh these are the tailwind CSS classes.
16:31
So basically here you will embed our
16:34
navigation bar component. So navigation
16:38
bar
16:40
and uh we need to create this component
16:43
guys. So right here inside your source
16:45
directory make a components folder and
16:48
uh right here the first component we
16:50
will make is navigation bar JSX. JSX is
16:53
a special language which contains HTML
16:56
and the CSS as well inside the ReactJS
16:58
code. So it's a special file similar to
17:01
JavaScript and here we will be writing
17:04
the classes here which is uh
17:08
let me first of all run this project. So
17:10
npm start. So this will start this
17:12
application on local host. So it is
17:15
saying that uh
17:24
uh what is saying that sorry we need to
17:26
move to
17:31
uh
17:34
cd public chat. So here you will simply
17:38
say mpm start.
17:42
So this will start this application on
17:44
localhost 301.
17:46
So it's starting the development server
17:48
guys. So just wait.
17:58
So it is saying that navbar is not
18:00
defined. So basically we need to define
18:01
this component. So we will simply say
18:04
rfc. This will be a functional
18:06
component. So right here we need to
18:08
include this. So we will simply say
18:10
navbar.
18:12
So this will be imported from this
18:14
components folder. You will see that
18:15
automatically by visual studio code text
18:18
editor. So here we will put the if you
18:21
now see
18:23
nav bar is not declined.
18:29
So this is your uh 3001
18:33
sorry
18:36
let me see guys what is the problem. So
18:39
it is saying that navbar is not defined.
18:44
Let me see guys what is the problem.
18:54
Uh let me stop this application guys. So
18:58
which is running here in the previous
18:59
window. Let me stop this
19:04
compiling. You can now see compiled
19:06
successfully. So basically now go to
19:09
localhost
19:13
localhost 3000.
19:15
So you can now see this is your
19:17
navigation bar guys. Now we need to put
19:19
this uh this Google button Google signin
19:22
button inside this navigation bar
19:24
section. So
19:26
this is very easy guys. So first of all
19:29
inside this navigation bar.
19:35
So here we need to return simply
19:38
basically the class name will be equal
19:40
to again this approach we will follow
19:42
which is style dot navigation. So at the
19:44
very top we will create a style object
19:47
and here we will have the navigation
19:49
property. So this will have various
19:51
properties here. So we will write one by
19:54
one. So simply wait. And here inside
19:56
this guys we will have a H1 heading
19:58
simply chat app.
20:02
And for this also we will be having
20:05
style dot heading.
20:08
And uh basically
20:11
here basically we will display
20:14
the sign in button component
20:17
sign in
20:19
component
20:21
and also log out component. So these two
20:25
components we need to make guys. So
20:26
simply in the components folder just
20:29
make sign in
20:32
JSX and also logout dot JSX.
20:37
So RFCE so and RFCE.
20:42
So these two components are there and
20:45
now basically we can include this. So
20:47
simply we can simply say sign in it is
20:50
imported and log out.
20:54
Can now see and if you now refresh it
20:57
guys you will now see your components
20:58
which is this is the navigation
21:00
component. This is sign in this is log
21:02
out. So we now need to design this
21:04
components. So if you're watching it for
21:06
the very first time then please hit the
21:07
like button subscribe the channel. So
21:09
basically guys inside our sign in
21:11
component we will have a simple button.
21:13
So basically if I now show you basically
21:16
this will be a simple button here
21:18
and here we will simply have a simple
21:21
class name. Again we will follow the
21:23
same approach which is style dot
21:26
wrapper.
21:28
And basically here we will have a simple
21:30
Google button. This will be imported
21:32
from react Google button dependency that
21:34
we have imported. And basically just
21:38
have a if I put this here now here you
21:41
will now see a button here
21:44
it is saying that uh style is not
21:48
defined. So basically uh
21:53
we need to define the style here. So at
21:55
the very top
21:57
on style this is an object which will
22:00
contain this wrapper property.
22:04
Now you will see this button guys which
22:06
is sign in with Google. If you click
22:07
this button
22:09
basically nothing happens because we
22:11
need to write the JavaScript code for
22:13
this. So now this button is showing here
22:16
and uh now we need to simply style this.
22:19
So for styling it guys we will be giving
22:23
flex
22:24
justify
22:26
center. So these are tailwind CSS
22:29
classes. So
22:33
so that's it.
22:37
So basically
22:40
after this you put the navigation bar
22:44
uh styles here. So navigation it is
22:48
there like this navigation bar. So
22:51
basically we will put the back
22:52
background color will be gray to 800. So
22:55
800 is a shade by Tailwind CSS. So if
22:59
you now refresh it
23:05
so I think uh
23:09
style.nav nav
23:15
and also I need to put the height also
23:17
guys that I forgot so height will be of
23:20
20 so that's why now you will see uh
23:28
so this is I think in navbar we are
23:30
writing the styles here we need to say
23:33
flex
23:34
justify
23:36
between
23:38
items
23:39
center
23:42
padding four.
23:44
And if you now refresh it,
23:54
let me see. We need to compile this. So,
24:03
so restart the application.
24:18
For the heading, put a comma. We have
24:22
the heading here which is heading.
24:26
Basically this will be
24:31
text white and text 3 XL.
24:40
Basically this is the style object that
24:42
we have here
24:45
and here we are assigning it style dotn
24:48
navigation style dot heading. So why it
24:50
is not
24:59
Uh let me check guys if Tailwind CSS is
25:02
installed properly or not. If I check
25:04
the package.json file.
25:12
Oh I think guys what is the problem
25:15
here? We installed it in a wrong manner.
25:18
So basically let me do it once again. So
25:23
let me see.
25:32
So as you can see guys the these files
25:34
that you see inside it is not present
25:36
inside the source directory. Basically
25:38
it needs to be present inside the source
25:40
directory the both these files which is
25:42
tailwind config and post css. So we need
25:45
to shift it inside the source directory.
25:47
So what we will do is that
25:53
move to here move these files
25:57
and tailwind.
25:59
So also move these files. So so now you
26:03
can see that
26:05
hopefully now basically it will
26:10
just put npm start. So now it will work.
26:15
It was there outside the project folder.
26:17
So that's why it was not applying the
26:19
CSS. Hopefully now this will apply here.
26:27
So just wait it is starting it. Now you
26:29
can see that guys this is now Tailwind
26:31
CSS classes are successfully applied.
26:34
This is our heading here and this is a
26:36
button sign in button that you see. So
26:39
it was just a problem of moving it in
26:42
the project folder. So
26:45
this is our app component guys. So also
26:49
let me assign the classes for uh app
26:53
component as well. So basically the
26:57
parent element will be having maximum
26:59
width of 728 pixel.
27:04
So if you apply this now you will have
27:06
this
27:08
uh uh this limited width of 728
27:12
and margin we need to say MX MX in the X
27:17
direction auto. This will place in the
27:19
center of the screen. Now you can see
27:21
that and next we will want to align the
27:25
text text in the center position. So now
27:27
you can see that.
27:30
So now we will put the section guys.
27:32
Section style in we will make flex flex
27:35
column
27:37
and height basically will be of
27:40
90
27:43
view height. You can now see view height
27:49
and basically we can change the
27:51
background to be gray 100.
27:56
So now you can see this is the chat
27:59
window background color. You can see all
28:01
these messages will be displaying here.
28:03
So now you will have this. After this
28:06
guys uh
28:09
we will have our next class which is
28:13
margin from the top will be 10. We will
28:16
also have a box shadow which is shadow
28:18
excel which is extra large. And also we
28:21
will be giving a border which is border
28:24
relative.
28:27
So these are all tailwind CSS classes.
28:29
So now if you see this will have this
28:32
nice little box shadow effect here you
28:34
now see.
28:37
So there is a sign in button guys and
28:39
this also has this log out button. So we
28:41
also need to style this button which is
28:42
logout. So inside we will simply go to
28:45
the logout section which is logout
28:47
component. So right here we will write
28:49
the styling for this. So simply we will
28:52
go to this
28:54
uh component. So basically here we will
28:56
have a simple button here which is uh
28:59
log out button.
29:02
So we can remove this button. You can
29:06
simply say log out and uh
29:10
on click sorry we will attach the first
29:12
of all classes to it of style dot
29:16
uh button and basically here we will
29:21
style
29:24
button and here these are the classes we
29:26
need to change the background to be gray
29:30
and this will be 200. So basically now
29:33
you will see that your gray color will
29:35
be there. Here also we need to put
29:40
padding from the X direction. So it will
29:43
now have some padding as well and from
29:45
the Y direction as well. So
29:48
now you can see.
29:51
So basically now when we hover onto this
29:56
button we need to change the background
29:59
color to gray
30:03
100. So slightly you can now see. So
30:07
this is the interface which is quite
30:08
ready guys which is designed using flex
30:11
sorry tailwind CSS.
30:13
I think it's not responsive for mobile
30:16
devices but still it's a good interface.
30:18
So now we need to hook up the
30:20
functionality guys. So up till now if
30:21
you have any sort of problem you can ask
30:23
in the comment section.
30:27
So please hit the like button, subscribe
30:29
the channel as well if you're watching
30:31
it for the very first time.
30:34
So now guys what we need to do is that
30:37
basically
30:39
if you now refresh it local host
30:48
So basically here we will first of all
30:50
implement the sign-in functionality. So
30:52
we will go to signin.jsx.
30:55
So right here.
30:57
So basically whenever you click the sign
30:59
in button here we will attach on click
31:02
on this Google button. So on click event
31:04
handler. So when we click this button we
31:06
will execute this function which is
31:08
Google sign in. This is a custom
31:10
function we will execute. And basically
31:13
here we will put this which is uh Google
31:19
sign in. So this is a arrow function.
31:22
So here we will simply say we need to
31:24
put the provider. We will use this
31:27
provider which is Google
31:29
O provider.
31:38
So I think you need to
31:42
import this. So you need to import this
31:44
from
31:46
uh Firebase/
31:48
authentication.
31:51
You can now see authentication. And here
31:53
this is the Google O provider.
31:57
And uh after this guys we need to
32:00
redirect the user to select their Google
32:02
account. So here we will say sign in
32:04
with redirect.
32:08
There are various authentication, sign
32:09
in with credential, custom token, email
32:11
and password, email link, phone number,
32:13
popup, redirect, email link. So you will
32:15
use this method, it will be
32:18
automatically imported. You will now
32:19
see. So here you need to pass the
32:21
authentication and the provider. That's
32:23
it.
32:24
So now if you hit your Google signin
32:27
button here, so it is saying that
32:30
O is not defined.
32:34
Oh, sorry, sorry. We need to import this
32:36
authentication as well guys. So,
32:43
so this authentication we if you say in
32:45
Firebase.js file you have exported this
32:49
you will now see authentication
32:50
variable. So we can now import this
32:53
inside our component. So you can simply
32:55
say that import
33:01
sorry this o variable
33:04
and this
33:12
like this. That's it guys. So now if you
33:15
refresh it, if you click sign in with
33:17
Google, if you click this button, you
33:20
will be redirected to the page where you
33:22
can select your account.
33:26
So now you can see you have successfully
33:28
logged in. But still this button is
33:30
showing here. So that's not the behavior
33:32
that we want. If you click the console,
33:37
you will get your information. Let me
33:39
show you.
33:42
Uh
33:46
so here uh
33:49
that we we will go to the nav navigation
33:52
bar section here navigation jsx. So
33:55
basically here we will put a if
33:57
condition here. Basically we will check
33:59
here. Uh first of all we will get the
34:03
user which is currently logged in. So we
34:06
will get the user like this. And here we
34:10
will be using the use o
34:14
state.
34:16
So basically this needs to be imported
34:18
from the library that we have installed
34:23
which is uh react firebase hooks /
34:30
and basically here this is the hook here
34:32
which is use o state and here you need
34:35
to pass the authentication
34:38
guys you can see that
34:41
this is authentication we need to pass
34:43
here. So here depending upon the
34:45
condition of the user if the user is
34:47
currently logged in then we need to show
34:49
the log out button if the user is not
34:52
logged in then we need to show the sign
34:53
in button. So simply here we will check
34:57
if the user is valid then we will show
34:59
the log out component
35:02
and here we will use a turnary operator.
35:04
And now see if you have studied
35:06
programming you will definitely know
35:08
this component.
35:10
So now just simply uh now you will see
35:14
here
35:16
if you are logged in here.
35:24
So let me see here inside the console
35:27
invalid hook call. Hooks can also be
35:29
called inside of the body of a
35:30
functional component. This could happen
35:32
for you might
35:38
let me see guys what is the problem
35:40
here. Uh
35:48
use of state
36:31
Now let me refresh it guys.
36:38
NPM start once again do this. So
36:43
I think it is correct. So why it is
36:45
creating some problem here?
37:11
Let me search this problem on Google
37:13
guys. So,
37:18
so why it is showing this problem? Let
37:20
me see.
37:50
I think guys the libraries are not
37:53
there. So let me install these libraries
37:55
once again inside this folder. I think
37:58
that's why it is taking place.
38:02
So once again install all these
38:04
dependencies.
38:06
You can see it is not listed here inside
38:08
the dependency section. So that's why I
38:10
get the problem that it is not there.
38:18
So just install this npmi firebase react
38:20
firebase hooks and react Google button.
38:35
So if you're watching it for the very
38:36
first time guys, please hit the like
38:38
button, subscribe the channel as well.
38:54
So now it has successfully installed it.
38:57
So if I say npm start
39:18
So now you can see that guys if I hit
39:20
this so you are currently logged out. So
39:24
that's why it is showing this sign in
39:25
button. So if I click this button now
39:28
and uh if now if we are successfully
39:31
signed in. So now it will show you the
39:33
log out button. So now you can see that.
39:36
So it is currently now working as
39:39
expected. Now basically we will show you
39:42
a simple field out there where you can
39:43
enter your messages and send out and
39:46
store it inside fire store.
39:49
So this is the authentication is done.
39:52
Now we will move to the next section
39:54
which is uh storing messages.
39:58
So we will also when I hit this log out
40:01
button we also need to log out the user
40:03
guys. So, so in order to do this, it's
40:06
very easy. Just go to your logout
40:10
component and simply here
40:15
basically here we will need to give it a
40:18
on click event handler
40:21
when we click this button
40:24
basically this function will take place.
40:27
authentication
40:28
sign out.
40:35
So this is a call back function.
40:51
So here you need to uh import the o
40:55
module. So import
40:57
O from
41:00
Firebase and also here we will define
41:03
this method which is sign out.
41:09
This is simply here we will simply call
41:11
sign out and pass the authentication
41:14
object. That's it. So basically now if
41:17
you see guys uh
41:29
Export default imported as o was not
41:32
finding
41:39
what is saying that authentication
41:43
sorry here we need to import like this
41:45
authentication. code.
41:48
Basically now guys if I click the log
41:50
out button it will be automatically
41:52
Firebase will automatically log out my
41:54
account. It will redirect me to the
41:56
homepage once again. If I click the sign
41:59
in button my I will be successfully
42:01
signed in and the log out button will be
42:03
showing you can now see. So this
42:06
authentication is complete guys. So now
42:07
we will move to the fire store part. So
42:10
open your uh firebase guys and basically
42:13
this is a section inside fire store.
42:17
Don't select realtime database. Select
42:19
fire store database and basically you
42:22
need to edit the rules here. Go to the
42:24
rule section
42:26
and simply
42:28
you need to change all these rules. You
42:30
need to allow read and write. Simply
42:33
just pause this video and simply write
42:36
rules here. So this simply means that
42:38
anyone can read the data, anyone can
42:40
write to this database. It is not very
42:44
good for security reasons but for just
42:47
development purposes it is quite clear.
42:49
So simply do this and click on publish
42:52
and then we need to create a collection
42:54
guys. So let me delete this collection.
42:58
So collection is nothing but a table. In
43:01
MySQL it is called as table but in
43:03
Firebase it is called as collection.
43:06
So we will put messages as the table
43:09
name. Click on next. So this will be
43:12
automatically generated and the field
43:14
will be name of the person who have
43:17
written the message. Let me say for
43:19
example.
43:21
The second will be the field will be for
43:23
the text.
43:24
Uh so this will be this is a simple chat
43:28
message.
43:31
And the thirdly guys you will have the
43:33
time stamp. So basically the time and
43:35
the date you have this field here time
43:38
stamp. So you would put your current
43:40
date here and current time.
43:45
So click on save and your entry will be
43:47
created guys. You can now see name,
43:49
text, time stamp. So now we need to
43:51
fetch this data and display this inside
43:53
our application right here. So how we do
43:56
this? It's very simple. For this we will
43:58
create a separate component for this. So
44:02
we will create a separate component for
44:03
this which will be called as chat
44:08
dot jsx. So inside your components
44:11
folder just create chat dot jsx.
44:17
So here we will inside our
44:22
app dot section guys. So after this
44:26
navigation bar basically
44:35
basically here uh in after this
44:37
navigation bar we will check if the user
44:40
is valid. Again we will access to the
44:44
user by using
44:48
this hook library
44:52
which is use o state. So basically this
44:57
will be imported. You will now see use o
44:59
state from react firebase hooks. So here
45:02
we will pass the authentication which is
45:05
coming from firebase. You can now see.
45:08
So basically here you will simply check
45:10
guys inside curly brackets if the user
45:12
is valid. In that case you need to put
45:15
the chat module
45:18
if the user is currently logged in. If
45:21
the user isn't logged in then we will
45:23
show null. This chat window will not be
45:26
shown. So now if you open this now so it
45:29
is saying chat is not defined. So
45:32
basically you can import this module
45:37
chat from component chat.
45:40
So now you can see our chat is
45:42
displaying right here.
45:49
So if you click sign in you will now
45:51
see.
45:59
So this chat is now displaying because
46:01
we are currently logged in. You can now
46:03
see. So here we need to display the
46:06
messages guys which will be
46:12
so here we will simply
46:15
inside our chat
46:18
module guys. So basically
46:22
uh just go to this. So here you will go
46:24
to the chat.jsx.
46:26
So here simply guys so
46:33
uh
46:38
so here we will be designing this
46:40
interface which is this will have a main
46:42
tag and we will have a simple class name
46:46
to it which is style dot main.
46:52
So here we need to at the very top we
46:54
will declare our style object. So this
46:58
will contain this main. So we will put
47:01
these classes guys which is flex flex
47:03
column paragraph will be 10 pixel.
47:13
So after this if you now look at here.
47:22
So after this guys what we need to do is
47:24
that inside this main section.
47:29
So here inside this guys we will first
47:31
of all declare some variables. So first
47:33
of all for the messages which will be
47:37
typed by the user. So we will be
47:40
declaring a hook for this. So currently
47:42
the initial value will be use state. We
47:45
will use it the hook
47:47
and uh it will be empty array by default
47:50
and then we will declare const scroll
47:53
and also we will use ref hook.
47:58
So scroll is there because it will
48:01
automatically scroll whenever you push
48:03
out a new message. So here we will use
48:06
the use effect for as well guys. use
48:08
effect
48:11
and basically this will run
48:12
automatically when your component is
48:14
running.
48:16
So here we will be curing the database
48:19
because you can now see fire store
48:21
database.
48:23
So inside this we will simply say con q
48:26
and basically we will say query
48:29
this will be imported you will now see
48:31
from firebase/f fire store and uh then
48:35
we have this collection also this will
48:38
be also imported you will now see
48:40
collection is called as a table so our
48:45
basically this collection method takes
48:48
two arguments first is the database so
48:50
db we will pass it as a reference you
48:52
can DB is there from Firebase. So we
48:56
have created this file Firebase and the
48:59
next the second variable that we
49:00
imported is DB which is the fire store
49:04
configuration. We will pass this object.
49:06
You can now see this is our database URL
49:09
that we are accessing here. So now you
49:11
can see that.
49:14
So after this guys the second argument
49:16
it takes is the actual collection name.
49:18
So in our case we have put the table
49:20
name as messages
49:24
and uh after this
49:28
we do need to order it by some values
49:31
which is we will order it by. So this
49:34
operator is you can now see order by is
49:36
there. If you have studied MySQL
49:38
database you will definitely know what
49:40
is order by. Basically it will store
49:42
sort all the messages based upon the
49:45
time stamp that we have put here. So in
49:49
our database time stamp is a field out
49:52
there. We have created this field. You
49:53
can now see time stamp.
49:56
So all the messages could be sorted
49:58
based upon the time stamp.
50:06
So after this guys we will
50:11
uh subscribe to it and we'll say con
50:14
unsubscribe.
50:19
So here you will say on snapshot
50:24
Q. So this will all be imported. We will
50:28
now see on snapshot and
50:32
here we are passing the Q which is the
50:34
query actual query and then in the
50:37
second parameter guys our query snapshot
50:43
query snapshot will be returned to us.
50:46
So this will be holding all the data
50:48
guys which will be
50:52
simply delete this query snapshot and
50:55
here we can display this data.
50:58
So first of all these messages will be
51:00
by empty by default and query snapshot
51:04
dot for each. So for each message
51:08
we will have some properties here. So,
51:12
so we will push to this messages dotpush
51:15
and we will simply push this dot dot dot
51:20
document dot data.
51:22
So, whatever data is present inside the
51:25
fields here, we will push it to this
51:28
array and also the id. So, doc do ID.
51:32
So, this is a unique identifier it
51:34
automatically creates for you whenever
51:35
you push out entry inside firebase
51:38
database. Lastly, we need to simply
51:41
set messages. Pass this messages like
51:44
this. That's it. This is a hook function
51:46
that we put here like this.
51:51
And lastly guys, we simply need to
51:53
return
51:56
to return this function which is
51:58
unsubscribe.
52:01
And also you need to put this empty
52:04
bracket. It will only run for the very
52:07
first time when you load the component.
52:11
So now if you look here guys, if you go
52:12
to the application,
52:15
if you click refresh.
52:20
So if you now click inspect here,
52:23
nothing will be printed out because we
52:25
haven't
52:27
listed here. So we need to print the
52:30
messages. So right here we would put
52:33
here if the messages are there then only
52:36
we need to display them. So now to
52:39
display them we would use the map
52:40
operator
52:43
and here we will loop through. So for
52:45
each message we need to print out.
52:50
So here we will be declaring a separate
52:54
component for the message. So the key
52:57
will be
53:00
the actual message id
53:03
and the actual message will be passed is
53:06
these are the props that we are passing
53:08
to the react component.
53:11
So now you can see that so
53:18
so now basically guys we need to create
53:20
this uh message component that you see
53:24
guys. So inside this components folder
53:27
we will create this component
53:28
message.jsx.
53:35
So if you now see this is the actual
53:38
component which is there. So let me
53:40
paste it.
53:52
So right here inside this guys if you
53:54
now see it is saying message is not
53:56
defined.
54:00
So inside our chat component
54:06
this will be imported. You can now see
54:08
message from message.
54:12
So we are passing these as parameters
54:14
guys. So sorry this needs to be message.
54:27
So right here guys uh you can now see
54:29
what we need to do is that
54:35
so we are passing this as a
54:39
parameter which is message.
54:43
This is passed to it like this.
54:52
So here we are calling it. You will now
54:54
see messages.
55:06
So inside this message component guys
55:08
simply basically we will have a
55:10
paragraph which will embed the message
55:13
dot name
55:16
and then we will have second paragraph
55:18
which will put the message dot actual
55:21
text.
55:23
So these are the two input fields we
55:25
have declared here inside you can see
55:26
name whoever sent the message and which
55:30
is the text simply here you can now see
55:36
so basically if you now refresh it
55:37
hopefully
55:53
The messages are not printing out. You
55:56
see guys why it is this problem.
56:24
So wherever we are sending it chat jsx
56:28
you will now see
56:32
let me see uh
56:44
Uh sorry this is messages guys. So
56:47
messages
56:49
for each message we will have this
56:52
message.
57:05
So for each message here we're passing
57:08
it. So the messages exist
57:12
then only
57:21
if you set the if you see the collection
57:22
here you will not see messages. Just
57:43
I think guys I have made a mistake here.
57:46
Let me write it once again.
57:56
So this is the code here.
58:15
Can't resolve send message.
58:20
Simply delete this. So,
58:23
so now you can see that the messages is
58:26
printing out. This is a display name and
58:27
this is a simple chat message. So, it is
58:30
present inside this. You will now see if
58:32
you now add a new document. So, let's
58:34
suppose
58:35
autogenerated.
58:37
So, this will be
58:40
the name here. This will be part now.
58:46
And
58:48
the text
58:49
which will be this is some message
58:57
time stamp.
59:06
So click on save. So basically guys now
59:09
this will be the second message Karetta
59:11
you will now see. So now we are able to
59:14
print out messages from the database
59:16
fire store database. So now we need to
59:18
simply have a text field out there where
59:20
we can write the message and insert this
59:22
into the database. So, so here we will
59:26
have
59:27
after this we will have a simple
59:31
component
59:32
which will be called as send message.
59:39
So just create this inside the
59:41
components folder send message
59:45
dot jsx.
59:52
So here guys just create this. So
1:00:02
and inside this send message uh we will
1:00:05
pass a scroll attribute to it which is
1:00:09
equal to scroll
1:00:13
like this. And also after this you will
1:00:16
have a span
1:00:20
reference is equal to scroll. That's it.
1:00:23
So inside send message guys basically
1:00:28
we will have another style object.
1:00:37
So here guys we will have a simple form
1:00:39
where we can uh fill out the
1:00:41
information. So const input set input
1:00:47
and use state
1:00:50
this will be empty by default.
1:00:59
So here we will be uh
1:01:04
inside this uh HTML we will have a
1:01:07
simple form.
1:01:13
So here we're giving a class name to it
1:01:16
guys which is style do form
1:01:20
and here we have input field input type
1:01:23
of text and uh basically class name will
1:01:28
be style dot input
1:01:33
and the placeholder will be simply
1:01:42
simply message
1:01:47
and then guys you will have a simple
1:01:48
button so which will be send. So it will
1:01:52
of type of submit and we will be giving
1:01:54
a class name to it of style dot button.
1:02:00
So if you now see we will have a simple
1:02:03
text field and this is a button of send.
1:02:08
So now if I write any sort of message
1:02:10
and click on send, it should definitely
1:02:13
create this message. So how we can do
1:02:15
this? It's very easy. We can simply
1:02:20
bind a on click sorry onsubmit on the
1:02:23
form element. So when the form submits
1:02:26
we need to create this message send
1:02:29
message custom function. So we make this
1:02:32
function at the very top. So const
1:02:38
send a message.
1:02:44
So here guys what we need to say is that
1:02:46
this is will be async function
1:02:50
e uh here we will say e.prevent prevent
1:02:52
default to prevent the auto submission
1:02:54
of the form and then we need to first of
1:02:57
all check if input is uh
1:03:02
is empty then in that case it will say
1:03:04
that please enter a valid message.
1:03:10
So if you see here this input field we
1:03:12
have binded if you clearly see here let
1:03:16
me bind this value to be equal to the
1:03:20
input and we also need to bind the on
1:03:23
change. So whenever its value changes we
1:03:25
will simply declare this
1:03:28
uh
1:03:30
we simply say set input e dot target dot
1:03:35
value that's it.
1:03:38
If you now see here, if you write click
1:03:40
send, you will now see please enter a
1:03:42
valid message. So we need to enter
1:03:44
something here.
1:03:48
So after this guys what we need to do is
1:03:50
that
1:03:52
uh
1:03:55
also we need to return and uh if the
1:03:59
input is valid then in that case we need
1:04:01
to insert to pad store database.
1:04:05
So we can simply get the ID, UID,
1:04:10
display name,
1:04:13
all this information from the
1:04:15
authentication object. You will see it
1:04:20
will be imported from Firebase.
1:04:23
So we can get the current user
1:04:25
authentication.curren user. So this will
1:04:27
get the unique ID and display name. And
1:04:31
then we will simply await
1:04:33
add document. So this is the function
1:04:35
guys which provides Wi-Fi by fire store.
1:04:38
You can see it is imported. So which
1:04:40
lets you in uh import. So insert data
1:04:44
into the collection. So collection.
1:04:47
So here again DB
1:04:50
all these things you will now see it is
1:04:52
automatically imported
1:04:54
and the collection name here in this
1:04:56
case which is messages and
1:04:59
then we will put a comma and then this
1:05:01
is a call back function object. So which
1:05:05
data you need to say guys? Text will be
1:05:06
equal to input and name will be equal to
1:05:10
the display name that we have
1:05:13
imported and the UID will be inserted
1:05:16
automatically and the time stamp
1:05:19
will be equal to the server time stamp.
1:05:25
So you can see server time stamp will be
1:05:26
automatically this is a function. So
1:05:29
current date and time.
1:05:33
So after this guys, we can simply clear
1:05:35
out the input field by using set input
1:05:37
to this one. And uh you will also need
1:05:39
to scroll to the next page. Scroll
1:05:43
current scroll
1:05:46
into view.
1:05:50
And here you will simply say behavior
1:05:54
smooth. That's it.
1:05:58
So now we can test this application
1:06:00
guys. It is saying unexpected use of
1:06:02
scroll.
1:06:08
Uh let me see guys what is oh sorry we
1:06:11
also need to pass this as a parameter.
1:06:14
You can now see inside this function
1:06:19
we are passing it as a prop. So whenever
1:06:22
we are calling it if you see here we are
1:06:24
passing this as a parameter here.
1:06:29
So now basically if you write some
1:06:31
message here it will should
1:06:33
automatically insert this
1:06:50
uh authentication current user. Let me
1:06:53
see
1:07:06
current user.
1:07:09
If I refresh it guys, uh
1:07:23
our message is not inserted and I think
1:07:26
it is showing this error basically
1:07:29
which is this error uh which is uh
1:07:32
called as this one. Oh sorry this needs
1:07:35
to be uh the curly brackets not the
1:07:38
square brackets. So that's why
1:07:42
so now if you refresh it guys so
1:07:48
if you write a message click on send now
1:07:51
you can see the messages are
1:07:53
successfully inserted.
1:07:56
So you can see that inside our fire
1:07:58
store this is entries created. You will
1:08:00
now see time stamp
1:08:03
1057
1:08:04
you can now see.
1:08:07
So in this way guys you can do this and
1:08:10
uh now we simply need to style this
1:08:14
using tailwind CSS. So first of all we
1:08:18
will style this input field and
1:08:21
basically
1:08:24
basically we will set the form styling.
1:08:28
So height we need to set it to 40 width
1:08:32
to be full. So this will make it as a
1:08:35
full width
1:08:37
form. Here you can now see
1:08:42
I think we haven't attached the class
1:08:44
with the style of forms. here.
1:08:49
So maximum width will be of 728
1:08:54
pixel and this will be flex
1:08:58
text will be extra large absolute
1:09:03
bottom will be from zero.
1:09:07
So now you can see that it is
1:09:09
successfully styled here.
1:09:11
So next what we need to say put a comma
1:09:14
and for the input fields we need to
1:09:19
we need to say w full. So this will have
1:09:21
the full space which is required here in
1:09:23
mouse.
1:09:29
So after this text extra large
1:09:33
padding three.
1:09:36
So now you can see that and background
1:09:39
will be of gray color. uh 900.
1:09:46
So this is the gray color. You can now
1:09:48
see we also need to change the text
1:09:51
color to white. So text white.
1:09:56
So now you can see the text is changed
1:09:58
to white.
1:10:00
And we also need to
1:10:03
have the outline.
1:10:07
We need to remove this outline. So we
1:10:09
will say outline none and border to also
1:10:12
none. So we remove this border as well.
1:10:14
So
1:10:18
so you can now see this is your input
1:10:21
field which is typed. So basically now
1:10:24
put a comma and now we'll come to the
1:10:26
button styling.
1:10:31
So this will now will be wid to be 20%
1:10:35
which is this one and the background
1:10:37
color will be green.
1:10:40
So that's it. This is now styled here
1:10:43
guys. You can see here.
1:10:50
So now basically we will style the chat
1:10:53
window guys which is this one.
1:11:00
If you come to the chat section, we have
1:11:03
this
1:11:06
already styled here. And
1:11:12
I think we need to style the message
1:11:14
section more. Message
1:12:00
So here uh you see here where was
1:12:03
message component.
1:12:07
This is a message component. Go to
1:12:09
message component. Here we are.
1:12:18
So basically guys here you can see that
1:12:21
inside this we will have another div
1:12:24
which will have a class name of
1:12:29
basically like this we're dynamically
1:12:32
changing the class style dot message
1:12:40
and also here
1:12:45
uh message
1:12:50
So inside this you need to put this
1:12:52
paragraphs.
1:12:57
So this paragraph will also be having a
1:13:00
class name of style dot
1:13:03
name.
1:13:13
So here depending upon if the user is
1:13:16
logged in or is not logged in. So
1:13:18
basically we'll check here if message
1:13:21
class will be equal to.
1:13:26
So first of all we need to compare
1:13:28
message.
1:13:36
So here we simply compare the message
1:13:39
which we send here. So message
1:13:45
dot UID
1:13:47
and if it is triple equal to the
1:13:50
authentication which is imported from
1:13:52
Firebase current user dot UID. So if
1:13:55
this is the same user which is logged in
1:13:58
in that case we need to put the class
1:14:01
which is this class which is
1:14:05
uh style dot send and basically if it is
1:14:08
the other user then in that case we need
1:14:10
to put style dot received.
1:14:15
These are two classes here like this.
1:14:22
Now basically we need to attach all
1:14:24
these classes which is
1:14:32
simply I will paste it guys. So
1:14:35
paste the styling here
1:14:38
message name sent received. So
1:14:42
so now guys you can see your application
1:14:44
is complete.
1:14:46
This is a message can now see
1:14:52
you can open this window anywhere else
1:14:55
here also any other account that you
1:14:58
want to
1:15:04
first of all you need to sign
1:15:16
So you can see that
1:15:19
same head joker you can now see.
1:15:22
So in this way guys you can build out a
1:15:24
public chat room inside react chase
1:15:26
using fire store and uh tailwind CSS.
1:15:31
This is very much easy that I've shown
1:15:33
you. It also supports the Google
1:15:35
authentication. Users must be able to
1:15:37
sign up with their Google account
1:15:39
automatically.
1:15:40
So if you like this video then please
1:15:42
hit the like button, subscribe the
1:15:43
channel as well.
1:15:45
And all the source code is given in the
1:15:47
live chat in the pinned comment. You can
1:15:50
go to this blog post and copy paste all
1:15:53
the source code. Let me just read some
1:15:56
messages which are coming here.
1:16:00
and great consistency and great content
1:16:02
following this channel daily. Which team
1:16:05
of VS Code? Basically, it's a just
1:16:07
extension.
1:16:09
Hello, my name is I really wanted to
1:16:11
understand what you say because I'm from
1:16:13
Brazil. Can you activate the
1:16:14
translation, please?
1:16:16
Basically, I speak only English, so I
1:16:18
don't understand the Brazilians accent.
1:16:22
Yeah, I will wear a proper shirt. You
1:16:26
don't need to speak those words in the
1:16:29
live chat. Hi from Russia. I want to
1:16:31
learn Firebase from where I can start.
1:16:34
Firebase is a pretty easy database to
1:16:38
learn. It is in comparison to MySQL. So
1:16:40
I think Firebase is pretty much very
1:16:42
easy. You just need to learn from
1:16:44
YouTube videos,
1:16:46
blog post, all that stuff. Great content
1:16:49
bro. Wishing you all the best.
1:17:37
So first of all hit the like button
1:17:39
guys. Subscribe the channel as well. I'm
1:17:41
seeing that you people are not
1:17:42
subscribing the channel. So please hit
1:17:44
the notification bell icon as well. Like
1:17:47
the content as well. Target likes would
1:17:49
be 50 likes here. So first of all hit
1:17:51
the like button. Subscribe the channel
1:17:53
as well.
1:19:43
Heat. Heat.
1:20:35
All right.
1:21:05
Why?
1:21:08
Why?