Next Js Firebase Auth || Let google signin your users
Next Js Firebase Auth || Let google signin your users
The ultimate and latest firebase 9 getting started tutorial that you cannot afford to miss. We start with creating an account and will go all the way to create protected (private) routes / pages that only logged in user can visit.
Hi Logical People, this is the tutorial you need to understand everything about firebase authentication google sign-in web using Next JS (React)
Learn:
✔️ How to create account on Firebase console for FREE?
✔️ Firebase Auth using next js / react
✔️ How to create NEXT JS project from scratch (React)
✔️ How to setup Firebase on NEXTJS
✔️ How to create google login button
✔️ How to create protected routes in NEXTJS
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Hello Logical People
⌨️ (0:00:22) Why use Firebase?
⌨️ (0:02:15) Learning Objectives
⌨️ (0:03:55) Free Firebase account and google Authentication
⌨️ (0:07:33) NEXTJS project setup in VS Code Editor (IDE)
⌨️ (0:09:27) How to add firebase to Next project
⌨️ (0:18:46) How to get firebase credentials
⌨️ (0:21:43) How to create google signInWithPopup()
⌨️ (0:30:02) Protected routes
⌨️ (0:33:24) Logout user
⌨️ (0:37:13) useAuth HOOK
⌨️ (0:45:26) Celebrations!!
Firebase: https://console.firebase.google.com/
NEXTJS: https://nextjs.org/docs/getting-started
VS CODE: https://code.visualstudio.com/
Next JS / React Fundamental series: • Next JS Tutorial || The ultimate gui…
Github codebase : https://github.com/gkv856/iotbl/tree/…
#firebase #nextjs #firebaseauth #firebase #reactjs
Content
4.32 -> Hey logical people GKV here and welcome to yet
another tutorial where we're going to talk about
10.08 -> how to use Firebase for user authentication using
React and Next JS. So let's get right into that. .
18.64 -> I think the first question that comes to my
mind and should come to anybody's mind is
23.04 -> why firebase why not use something else right
well the answer is why not firebase i mean unless
29.44 -> you're super passionate about creating your own
protocols for user authentication creating a rest
34.72 -> api so that different platforms and apps running
on different you know media devices can connect
40.96 -> to that rest api and of course you are willing
to create your own database doing all that even
46.8 -> before your idea has taken off i think that takes
a lot of work and in my personal opinion if you
53.36 -> use firebase all of these things that you see on
the screen right now user authentication rest apis
59.36 -> database management things like that everything
can be taken care by google and all you need to do
64.88 -> all you need to focus is how to design a beautiful
looking front end and if that's not enough well
72.88 -> let's hear it from the horse's mouth so here i'm
gonna go to google of course and i'll search for
80.24 -> firebase here is the first link now what they
are telling us is that firebase is a product in
88.8 -> a solution that you can rely on through your
app journey so it gives you a really great
95.36 -> accelerated app development framework it helps
you in release and monitoring it gives you lots
101.04 -> of tool for example crashlytics performance
performance monitoring google analytics
106.72 -> and of course you can also see all sort of
engagements that your customers how your
111.68 -> customers are engaging with your app running a
b testing and whatnot it also provides a lot of
117.92 -> integrations for example you can integrate
your current app with google ads admob
123.36 -> market platform play store bigquery slack and so
on the list just goes on and with that motivation
129.84 -> i think we are ready to take a dive deep dive
into what we're going to learn in this tutorial
135.76 -> so here are our few learning objectives so we're
going to create a free account on firebase console
141.6 -> we will create next year's project from scratch
of course we will set up the next year's project
147.76 -> and firebase together so that your front end
is able to talk to the firebase nice looking
153.6 -> google login button when i say nice looking it
will be a simple html button but you can of course
158.16 -> use any type of styling probably use bootstrap
to style your button and make it look fancy
164.24 -> we're going to create protected routes so that we
are able to distinguish if user is logged in then
168.96 -> they can go to for example to the homepage to
the profile page and if they are not logged in
172.72 -> they cannot go to those routes okay last but not
least we would also create login logout routes
178 -> because it's important to have a separate
logo logout route so that you know you can
182.4 -> just kind of kick out someone whenever there's
appropriate reason for that on your app okay
188 -> with that let's just get started here's the
learning methodology that i normally follow and
192.88 -> i recommend everyone to follow this is we're not
gonna or let's say i'm not gonna list everything
198 -> that is there to know about firebase and then
you know off you go that's what i'm going to do
203.04 -> what i'm going to do is i'm going to go
through a journey with you and i'm going to
206.8 -> read through the documentation i'm going to
go through the methods and classes provided
211.6 -> by firebase as if i am you know learning this
together with you so that you understand if
217.76 -> you're stuck and if you're not watching this video
or something that i have not covered in this video
221.52 -> you are able to you know find solution for that
on your own and that should be your goal whenever
225.84 -> you're learning anything new okay with that
motivation now let's get started okay so let's
231.68 -> create a free account on firebase for yourself so
now let's talk about how do we get started and to
236.72 -> get started it's super simple you just need
to go to google search for firebase console
244.4 -> click on the first link that appears on
the top right corner click on go to console
253.28 -> and here what you want to do is you want
to create on this create a project button
258.64 -> and on this screen you can put the name of
the project and that project will become so
263.52 -> that project name will be shown to the user
when people are trying to log in using your
267.6 -> app so i could say here paste app youtube
right i accept and i confirm and i continue
279.2 -> i just want to leave it that way
like okay i want it to be enabled
284.16 -> it's asking a couple of questions um the
location and things like that so just said
289.6 -> everything default is good it's gonna create
a project for you so i'm gonna come back once
293.52 -> the project is ready all right my project
is ready to use i'm gonna click on continue
301.28 -> it's gonna take me to one of these screens here
you want to add the type of app that you want to
307.68 -> add on your app i'm gonna select
web version of it you can also try
312.08 -> um ios you can try android and there's
unity and flutter i'm gonna try web
320.08 -> so here you will give the name of
the app and let's say my app youtube
330.72 -> if something do you want to set up and hosting um
if you want you can go for it for timing i'm gonna
334.4 -> say no wanna register the app now it's telling
us to add the firebase sdk we're going to do this
339.92 -> in a moment and just click on i'm just going to
click on continue to console just like that okay
350.32 -> so once you're here what you need to do is
you need to pick applications or let's say
354.24 -> functionalities that you want from firebase
so the first thing that we need definitely is
358.72 -> authentication and we'll click on get started so
once you click on that you see that it tells you
363.44 -> different providers that you can use in order to
get your user signed in i'm gonna use google for
368.48 -> time being um you can also select facebook for
that matter that's the project for another video
374.8 -> at the starting i mentioned that the project
name is what people gonna see when they log in
378.56 -> however that was incorrect the the project
name that user the people gonna see is what
383.52 -> you're gonna give here so for example
i'm gonna say best app youtube like that
391.28 -> and you can configure your support email
i'm just going to give my default email
396.56 -> and i'm going to click save once you save that
you would see something like this in the sign in
401.04 -> providers which says google and it says enabled
again if you want to add another provider you
406.08 -> can click on add new provider and then you can
select facebook twitter github plain vanilla
412.24 -> email password things like that okay we're not
going to use that i'm going to click on close
417.92 -> one more important thing is that you need to
also authorize your domains so for time being
422.08 -> we're going to work on our local machines so it's
okay that i have localhost here but tomorrow if
426.88 -> you want to host this app to a website let's
say the website is called my awesome website
434 -> dot com you might want to add that domain here
and because if you do not do that google will
440.64 -> reject all the requests that's coming from
that domain beautiful so that's step one
449.36 -> so one objective completed now let's see how
we can create a next js project from scratch
459.2 -> all right so i've created where i'm intending
to keep all my code so what you need to do is
464.4 -> you need to click on this address bar and
type cmd and press enter this will open a
469.76 -> command window for you in this location and now
let's go to google and search for how to install
478.96 -> xjs with type script we need to install nexus
with typescript if you don't know what typescript
486.32 -> is how to install next year's dependencies
and everything please go through the basics
491.2 -> fundamental playlist that i created and you will
have a deeper understanding of what all this means
496 -> but for the sake of this tutorial i'm just going
to copy this command i'm going to go back to
500.8 -> this command window i'm going to paste it
and press enter firebase underscore tutorial
506.96 -> it should be okay press enter it's going
to download all the dependencies react
511.12 -> react dom and next and i'm going to
come back when once everything is done
516.8 -> beautiful looks like everything has been
installed and then i'm gonna open this project
521.84 -> in vs code so here it is here's my visual code
again if you're not sure how to set up your visual
527.36 -> code for a next project for a react project please
go through the fundamental playlist i've explained
532.24 -> everything in super detail therefore i don't want
to repeat myself here so i'm just going to move on
536.8 -> so you click on the file click on open folder and
you navigate to the folder that you just created
542.72 -> and here is the folder that i created you
don't have to go inside the folder you just
546.48 -> have to select a folder and click on select folder
551.6 -> lovely here it is our default default app i'm
going to click on terminal click on new terminal
559.2 -> and i'm going to say npm run while this
is opening we want to go back to google
567.6 -> and we're going to search for how to
install firebase in a react project
578.16 -> let's try this one i think this is the best
one so it's given by the firebase itself
582.96 -> we go to the documentation and there it is
we need to run this command so that we are
590.24 -> so that eventually we are able to do
this so let's do that i want to copy this
596.88 -> i create i'm going to open a new
terminal by clicking on plus i'm going to
601.84 -> paste this and i'm going to say minus minus
save because i want this dependency to be saved
606.64 -> within my project so our server is still
running what we're going to do we're going
612.16 -> to go to public so we're going to go
to pages we're going to go to index
615.2 -> select and delete this because we want to create
our own index file inside pages folder we're going
621.28 -> to create new file i'll call it index.csx like
that and we'll say cons index page equals to
632.16 -> what we want to return we want to return h1
636 -> first you guessed it it's hello world and we
always export this so let's do that export default
645.52 -> index page like that save it
649.12 -> and we go back to our browser we go back
to localhost and we refresh the page
656.16 -> and there you go hello world i'm going to zoom
in because you know why not so now this is set up
663.12 -> before jumping into writing the code so that our
app is able to connect to firebase and we have
668.8 -> different users um let's try and understand
this conceptually that what needs to happen
674.32 -> so that your app is able to talk to firebase
and to do that i'm gonna i'm gonna take a help
679.36 -> of very sophisticated software that's
called ms paint this is my favorite
690.16 -> so let's assume this is your website or
whatever fancy app that you're creating
696.64 -> for this to understand if user is logged in we
need to somehow talk to google so i'll say my app
707.04 -> this needs to talk to google or firebase basically
714.72 -> so how it works is within our app we're
gonna send a request to google google will
723.52 -> process the authentication and give us a response
and it will say everything is okay when google
728.96 -> sends a response saying everything is okay it
also sends cookies a cookie also contains token
737.6 -> and these tokens are like identifiers so this
is happening for the first time right so in the
742.56 -> first time user tries to log in and once this
has happened you want your app to stay logged
746.64 -> in as long as this token or this cookie is valid
so what happens is we also create a react hook
755.12 -> and this reactor checks gci checks if user
is logged in right how does it do it mostly
768.64 -> the way we did it first time but now the first
time we sent we manually needed user to you know
774.32 -> authenticate and give permission that okay
i want to log in using google but second
778.24 -> time what happens the react hook technically
graphs this token and this token is sent back
782.64 -> to google google verifies the token and it sends
back to our app if things are okay or not okay
791.92 -> beautiful and all of this to happen
seamlessly what we need to do is here somehow
801.28 -> we need an interface that can talk to google
or firebase and to do that what do we do
812.24 -> well we create firebase init function let's see
how we do that so we're going to start with this
821.36 -> firebase init function that's our step
one then we're gonna create a react
827.84 -> hook that's step number two and then
we're gonna create step number three
833.44 -> that would basically make sure that when you
click on a button so you know a button when
839.68 -> you click on it this first call is initialized
okay and from there everything flows so i hope
846.08 -> you're able to follow this you're going to see
this in action step by step and so that you're
850 -> able to follow everything along with me okay
are you excited i am super excited i'm back in
854.32 -> my vs score so inside my root folder i'm going to
create a new folder i'm going to call it firebase
860.56 -> inside firebase folder i'm going to create a
new file i'm going to call it firebase init
866.88 -> here i'm going to create a function i'm going
to call it unit my firebase now you can call
872.08 -> it anything you like that's up to you right
and now we're going to do a couple of things
878.88 -> so the first thing that we really want to
do is we want to initialize the firebase app
882.88 -> right how do we do that that's actually super
simple we're going to say const app is equal to
890.72 -> initialize app and that initialize
app will take some configuration
898.8 -> we have not created this constant so let's
do that first so we're going to say const
903.2 -> i'm being we are keeping it empty
we're going to fill it in a moment
906.96 -> also this initialized app should
not be called from firebase admin
911.12 -> this needs to be imported from firebase slash
app like that okay so we're gonna say creating
919.76 -> auth for quantification and that
would be cost auth equals to get auth
928.72 -> like that get auth function takes a takes a
variable as an input and there's app and this
935.04 -> get all needs to be imported like this that's it
these are the two lines that you need in order to
942.08 -> get started however it is recommended that you do
a couple of checks so that you you don't just keep
947.12 -> initiating a new app again and again so how do we
do that it's super simple we say if not get apps
956.64 -> right so this is a function dot length if
959.92 -> we do not have anything within this cat
app then we would like to do this of course
965.68 -> you know what let's do one more
thing we're gonna say console log
971.92 -> initialized firebase like that and if this
is not true so if this is not happening
979.28 -> then we're gonna say else copy this
986.72 -> let's say already initialized so we
don't have to re-initialize anything
991.04 -> okay beautiful now depending on what
you selected when you created your
994.96 -> firebase app if you selected google
analytics and things like that well
999.44 -> you also need to initialize that and
we initialize that by checking if
1005.04 -> type of window is not undefined basically right
1013.92 -> what we are basically saying so this window
object is provided by browser to react so we are
1018.4 -> saying if this is not undefined so basically it is
available and then we are saying if measurement id
1029.6 -> in firebase config then we want to
we want to create um two constant
1036.16 -> one for google analytics and
one for google performance
1039.2 -> so how do we do that we'll say cons
and y analytics equals to get analytics
1048.64 -> and we provide our app into that like that and
we'll say performance equals to you guessed it
1056.32 -> bit performance this also creates our
app and these needs to be imported and
1062.08 -> i'm pretty sure you have guessed it guess the
pattern so far so let's do that super quick
1068.72 -> we will import data matrix from firebase
of course and then analytics like that
1079.2 -> copy this paste it and now we want
performance and we want the performance
1087.68 -> like that so we're going to populate this
configuration in a moment and we are saying hey
1092.4 -> if window variable is available and if this config
variable also contains a measurement id then why
1098.32 -> don't you need to initialize two more apps one is
google analytics and another is performance okay
1103.44 -> so far so good now the question is
how do we get this firebase configs
1107.68 -> so let's go and see how we can find that mnce why
can't i spell it beautiful now let's go to google
1118.72 -> firebase and try and figure out how how do we get
that how do we get all these configurations right
1128.8 -> so the way we do this is you go to firebase google
and click on this go to console once you go there
1137.52 -> click on the app that you created
1142.24 -> you can click on this my app yt
for example and click on settings
1146.24 -> or you can click here project overview and click
on settings and then go for project settings
1151.28 -> either way whichever you find reasonable and handy
1156.08 -> then you scroll down and what google has done
they have given you kind of an example of
1161.68 -> how to import and how to initialize firebase
what you need is this configuration so copy this
1168.4 -> back to firebase and replace this like that
a quick reminder make sure that this api key
1175.52 -> or technically all of this is never hard coded
within your front end development so maybe make
1182.72 -> sure you read this from environment variable or
dot inv file if you need help please do comment
1188.24 -> that in the comment section and i will create
another video for you so that you understand
1192.56 -> how to import this securely from env file for
time being we're going to keep it this way
1198.32 -> okay so now we have our config ready
now we have our functionality what we
1202.64 -> need to do we need to export this so that
react can find it so let's export default
1209.6 -> a firebase like that okay beautiful now
if you take a step back and think about
1216.08 -> we have created this initialization
that is good but where do we use it like
1221.68 -> seriously i i really want you guys to you know
maybe pause the video or take a moment to try
1225.84 -> and understand where should you import
this firebase and what is the best place
1230.64 -> to put such such a thing if you need you need
a functional variable everywhere well you guys
1235.2 -> did that is within the apps page so within the f
function what we're going to do we're going to say
1243.28 -> just you know call this function like that and
it needs to be imported like this if reactor
1250.48 -> is not able to find it there are two reasons
one either you forgot to do your export or
1256.32 -> it's just not updated so just manually put it this
way beautiful so now let's test this and see if
1261.2 -> this is working the way it should or we're getting
some errors so i'm back on my chrome browser
1270.4 -> i'm going to press ctrl shift i to open my
console i'm going to do a hard refresh on the page
1277.04 -> and you see it says initialize firebase and
then it says already initialized file base
1280.64 -> this is a normal behavior from
react so nothing to worry about
1283.6 -> it's just the life cycle of how a
component works so we're good to go
1291.44 -> jumping back to our learning objectives we have
successfully created a free firebase account
1296.48 -> we have created a nexus project
from scratch we have set up
1300.88 -> next years and firebase together beautiful
let's create a login button with google
1306.08 -> i'm gonna right click on firebase create a new
file i'll call it login with google.tsx like that
1314 -> i'm gonna create login google i'm
gonna return a button type will be
1325.84 -> first button and we'll say
login with google like that
1332.8 -> and what do we do always we always export right
so export default login with google like that
1340.08 -> and now let's uh import this within our index
page so we're going to say login with google
1346.24 -> like that and login with google needs to be
imported like this okay perfect so if i save
1351.44 -> it go back to my local notes now i've got
a beautiful looking button which says login
1355.6 -> with google of course when you click on it nothing
happens because we did not tell it to do anything
1360.88 -> okay so let's try and do let's try and tell
this button to do something so i'm going to say
1366.96 -> on click so whenever it's click handle
login we have not created this function
1371.92 -> so let's do that we're gonna say
const and a login now let's go back
1378.08 -> to firebase and see what they are explaining
and how how can we use their sdk to to login
1385.84 -> so they're saying step one create a firebase
project and we did that so that is good
1389.6 -> we were able to install it this part is so
completed um no this is not what we want
1397.52 -> conjugation for web this is something
useful we're going to click on it
1403.28 -> so let's see they're saying create
a get auth we have created this
1407.92 -> things how to sign up a new user they are
saying create with email id and password
1412.32 -> um so this is not the provider we are interested
although if you want you can go and explore this
1418.16 -> we are interested in understanding google
sign in so let's try and look for this
1425.6 -> so what they're saying is we need to create an
instance of google auth provider so let's copy
1429.76 -> that back um let's first import it right
and then let's create a provider like this
1438.64 -> we've got a google auth provider now depending
upon which kind of login do you want you
1442.8 -> probably have to create different types of
providers with different types of components
1447.84 -> in this tutorial we are interested in google so
we're going to do the google if you want me to do
1452.16 -> a facebook login as well github login as well
please do let me know in the comment section
1456.56 -> and i will create those videos for you okay coming
back to this so we have created a provider which
1462.08 -> is nice and now it's saying this is optional but
you can actually provide a scope to the provider
1467.36 -> for example um what all things would you like
to read when when users say when user gives
1472.72 -> you access to their you know google profile we're
gonna skip this and we're gonna keep it to default
1477.04 -> but you can technically go and add as many scope
as you like page i'm interested with the pop-up
1482.08 -> window because this is the most used one so when
user click on the button a window opens and then
1487.68 -> user is prompted if they want to log in or
not okay well i'm going to copy everything
1493.28 -> because this is all we need so i'm going to copy
this i'll come back to our example on a paste it
1499.52 -> then i'm gonna cut everything and i'm gonna
paste it inside our function like that okay
1505.76 -> we need to import get auth that auth can be
imported of course from mod and we also need
1512.48 -> this function and sign in with pop-up that also
can be imported from all like this so what we
1518.56 -> are saying is um google will create a pop-up for
us it takes auth which we have already created
1525.2 -> and it takes a provider which we have created just
now also remember that when you when we say get
1530 -> auth this function takes in all the details that
we created with firebase init function here okay
1538.64 -> lovely so we are saying uh here is your
authentication here is the provider if everything
1544.32 -> is okay so if user did provide their confirmation
um let's get some credentials and this is how we
1551.12 -> can get their credentials uh we don't we don't
need it right now so i'm gonna delete this
1555.28 -> and also delete this if you're interested
go and read about it what i'm interested is
1559.12 -> in of course the user so i'm gonna just do a
console log for time being but what you can do
1565.36 -> technically is here the normal flow would be that
you would insert and proceed from there you know
1573.44 -> next in case something went wrong we're gonna
catch that error so i'm gonna delete everything
1577.76 -> because i don't want to do anything with the error
i just want to log it to the console like that
1583.52 -> all right so just a quick quick recaps when user
click on this button we're going to call handle
1587.6 -> login function the handle login function will call
sign in with pop-up method provided by firebase
1593.92 -> lovelywrite it takes two parameter authentic
depending on which type of login you want you
1599.36 -> create your provider this pop-up will take all
these details and prompts the user that if they
1604.72 -> want to give access success so if everything is
okay we get a result and within the result we get
1609.6 -> the user details like this and we're gonna log
it so i'm gonna save everything i will go back
1615.2 -> to my localhost refresh the page so that we are
working with a fresh one okay click on login with
1621.28 -> google now it will ask me that choose an account
to move ahead if i say close or if i do not give
1628 -> you if i do not give you access you will see
that it will log an error after a while it says
1635.52 -> pop-up close by the user now if i click here
and if i say hey yes i want to move ahead with
1640.16 -> this account okay it's asking for the password
of course because i cleared all the cookies now
1644.8 -> it doesn't know and if the password is correct
you see that i got the user and within the user
1650.4 -> um so this user is basically a dictionary that
we logged right here and within that user you've
1656.56 -> got the display name which is it's okay to be
logical you got the email the important thing
1660.8 -> is that you get a new id and this should
normally be a unique id in your database
1665.28 -> against this user basically you also get a photo
url which is this so this is you this url can
1671.36 -> be used as an avatar right and there are a bunch
of other details if you want to use it beautiful
1677.28 -> so now you see that we are able to log in to
google but there's something missing here and
1687.84 -> so if there was a success we would like the
user to basically move to a new page right we
1691.92 -> don't want to them to stay here and that's super
simple what we can do is we can say use router
1697.68 -> like that this should be const router and make
sure you import the use router from next like this
1706.16 -> and then with this use router hook i could say
1711.2 -> router dot push and send user to new page and
that should be home page so if i clear everything
1716.48 -> here i click on login it will be success and then
i'm redirected to home page and i get a 4.4 error
1722.72 -> because this page is not defined not able to find
it so let's create a new page i'm going to call it
1728.64 -> home dot tsx you know the rail it's
launched you should see me only if you are
1736.08 -> logged in okay then we would like to create a
button and we'll say logo like that and we'll
1743.44 -> say type of course this button and on click and
i'll log out we have not created this function
1750.8 -> yet so let's do that we'll say const under log out
this should be a function and we're going to come
1756.48 -> back to you know define how we log out a user and
of course all is always going to export default
1763.44 -> homepage like that we come back and wait here
if it says hi i'm from homepage you should see
1770 -> me only if you're logged in log out button doesn't
work and there's no way to log out right now but
1775.92 -> you are able to go to index page and you're able
to go to home page like this so if i go back
1783.44 -> to index page and if i type just go here and
manually say home should be able to go to home
1789.28 -> page in general this should not be happening but
we're gonna handle that in a moment and that's our
1794.64 -> next learning objective so we are able to create
a prompt prompt or google login button success
1800.08 -> now we're going to look how to create a protected
route like so let's see how we can implement that
1808.56 -> well to create protected routes what we need to
do at on the home page we need to check if user
1814.16 -> is logged in if if user is logged in then we're
going to return this otherwise we will just send
1819.76 -> user back to home page right so once this is
initialized we would like to you know send user
1825.44 -> to home page sorry to the index page to do that
what we would do we would create a hook we will
1830.56 -> use the hook called use effect and within this
use effect we're going to pass a dependency of
1837.2 -> empty array which means this will
be called once the component is
1846.08 -> mounted or initialized so this use effect will
be called when once only once when the when the
1853.04 -> component is mounted now to understand if user
is logged in we're going to create an auth so
1858.32 -> we're going to say const was equal to get auth
now your master of this you know how to do this
1864.48 -> with this get off we will get an authentication
object and within this use effect we're going
1870.64 -> to say const um unsubscribe maybe subscribe that
is equals to auth dot on state change so whenever
1881.52 -> the state of authentication changes this function
in need needs a callback function so if you read
1887.84 -> the documentation it says that it needs a callback
so we're going to say we're just going to say auth
1894.48 -> state change handler and left like that
so let's create this now this is a const
1902.4 -> earth handler the function of course like that now
within this function we would like to do a couple
1908 -> of things to understand if user is authentic or
authenticated or not when this function is called
1913.6 -> a parameter will be passed that parameter is we're
going to call it use state for example and we're
1920.32 -> going to say if if use auth is not available
then we basically say that log console.log
1928.32 -> user is not logged in and from here we
want to redirect the user to index page
1940.8 -> how do we do that we do that by creating
router so we say cost router equals to
1945.6 -> use router and remember use router needs to be
imported from next like that so if auth is not
1952.64 -> available that means user is not logged in so
we're going to say router sorry auto dot push
1960.48 -> where do you want the user to go we
want them to go to index page like this
1965.12 -> else if user is complicated well then there's
nothing to do about it so like literally that's it
1972.32 -> right welcome back like this okay and to clean
up everything what we will say we will say return
1979.6 -> an anonymous function like this and
within this function we're gonna call
1982.72 -> unsubscribe like that beautiful so with this now
go let's go and check if user is logged in or not
1991.04 -> now if i go back and refresh the page it
says welcome back there's no way really to
1996.16 -> log out right now so let's let's see if
we can how we can implement the logout
2005.6 -> so we say handle log out so we're going to
copy this and let's create this function we
2009.2 -> have already created this let's log out the
user how do we log out the user well that's
2014.48 -> simple we just go we're just going to go to
google and look for here it is we can import
2019.36 -> sign out from auth and you can say sign out
like that just like that so let's copy this
2027.52 -> and within the handle logout we could do this and
of course we have to import sign out like that
2035.92 -> now in the documentation they are saying that if
sign out is successful then you can do something
2040.56 -> this is an asynchronous function of course so if
you want you could you know technically go and
2048.64 -> do something after the sign out so
basically doing something like this
2055.6 -> that's the result and here basically
you can clear up the cookies
2062.64 -> i don't know maybe upgrade the database
whatever you fancy doing right i'm just gonna
2069.44 -> put a log console let's say font out like
that right beautiful let's go back and one
2080.64 -> more thing so when whenever we sign out i would
like to you know send the user back to home page
2086.08 -> that's something we can do right let's do this
beautiful so if i go back go to my local host and
2092.32 -> click on log out so it say user not logged in blah
blah blah user logged out and then we are back to
2097.92 -> index page and that's how the whole flow works so
you click on login to google everything is okay
2104.08 -> you are back to homepage if i click on logout you
are back to logoutpage if i try to go to homepage
2109.6 -> manually it will redirect me back to homepage
like this you see the homepage for a moment and
2115.68 -> we're going to fix that in a moment so there's one
problem with the approach that we have taken here
2119.76 -> let's do one more thing i'm going to go back to
pages i'm going to create a new page i'm going
2122.88 -> to call it profile.psx and i'll say of course
you know profile page to profile page like this
2132.32 -> and i'm going to create this function and now you
see the problem already so i'm going to say const
2138.96 -> and as always what we'll do we will export this
function this component sorry for default and
2144.8 -> profile page like this and we will say i am from
well page now we are fairly advanced i'm going to
2152.88 -> go back to index page and here i'm going to create
two buttons actually i'm going to create two link
2158.96 -> link needs to be imported from next like this and
here i could say href equals to home and i'll say
2168.4 -> inside i'll create a button like this i'll
say it of course type is button and i'll say
2175.92 -> go to home page copy this paste it
here i'll say go to profile page
2184.48 -> and the address should be profile like this so log
in with google go to home page go to profile page
2192.4 -> we already know if you go to home page it's
gonna send us back to index page which is fine
2197.28 -> but if we click on profile page we are able
to go to profile page now this is something
2202.08 -> we don't want right because people should be
able to see it only when they are logged in
2207.2 -> and of course the logout button doesn't work
and that's because the way we have designed our
2213.36 -> protected route this is super convoluted and
super difficult to understand or let's say
2218.72 -> scale per se so to overcome this what we gonna
do in general the way you would do you will
2224.16 -> create a new function in you know if you are
working with any other programming language
2228.96 -> with react we're going to create a we're
going to create a hook so we'll say use auth
2235.84 -> dot psx say const sorry this needs to be a
small letter because we are creating a hook
2242.64 -> like this now i'm going to go back to home page
i'm going to copy everything that we have in terms
2249.6 -> of the routing logic so i'm going to technically
cut everything save it go back to use auth
2257.44 -> paste it here first we need to import things
so i'm gonna cut everything from homepage
2263.36 -> and i'm gonna and i'm gonna paste it here
like this everything should be good okay
2272.56 -> hand and logout is not being used which
is okay um all good so now with this hook
2279.44 -> what we want to do is we want to return couple
of things and instead of returning a jsx or
2285.84 -> you know html and okay we're gonna return
a dictionary we'll say user as auth user
2291.44 -> right we're gonna say loading as loading sometimes
vs code is super smart and we're going to say
2300.72 -> log out as enter logout like this so we do not
have we did not create auth user and loading
2308.16 -> as of now so let's do that so in this hook we
will create two states we're gonna say const
2317.2 -> auth user comma set of user this needs to be used
states of course like this and we'll say const
2328.32 -> loading comma set loading this will also
be state and we're going to initialize this
2336.4 -> as true which means that while google is figuring
out if user is logged in we're going to say
2343.84 -> loading is true so so that we can use this flag
in order to display a different content on the
2348.72 -> page so that's first thing first we know for fact
that this user will always be of specific type
2355.2 -> so we could say auth dot user either this or null
and we'll initialize this as null and this has
2365.04 -> been imported wrong so we will say import auth
from firebase slash like this so far so good
2375.76 -> um let's cut it here and paste it here so
that all the declaration is at one place
2381.2 -> now our used hook is you auth hook
is ready and we can use this hook
2387.44 -> anywhere and everywhere we want to
check if either is authenticated or not
2391.76 -> and before that we also need to set these users
so let's do that we're going to copy this and
2398.56 -> where you are saying console welcome back here i
can say set auth user as all the state like this
2405.68 -> maybe i'll just no it's fine and whenever
there is no user so before sending user to the
2412.16 -> index page what we would like to do we would
like to say set auth user as you guessed it null
2418.72 -> and we would say set loading as true right as
false because it doesn't matter if user is logged
2426.24 -> in or not we are able to figure out that it is not
logged in hence it's not loading anymore and when
2431.84 -> we are setting the user here also we would like
to set the loading as false because now we know
2436.08 -> that if user exists or if user does not exist okay
beautiful particular hook could be extended to
2443.44 -> any complexity so for example um before sending
user to the home page you could also clear out
2451.84 -> cookies if you want and similarly you will do
something different um something opposite here
2457.52 -> you might want to you know set cookies if you
want again let me know in the comment section
2462.64 -> if you want me to explain this in a different
video i'm more than happy to do that but for
2466.08 -> timing this looks good okay okay beautiful so
instead of saying use auth i'm gonna call it use
2476.48 -> firebase or so we are able to differentiate this
from from this um where is it from this get out
2487.92 -> you know i'm gonna copy this i'm gonna go back
to home page and here now it's super simple
2497.68 -> i'm just going to say advanced auth equals to this
firewall sort like this and now i know that this
2508.64 -> variable will contain three things if i go back
here i know that i am sending user i'm sending
2514.16 -> loading and also sending logout so let's basically
deconstruct this i'm going to go back here
2520.16 -> i'm going to do something like this i
need to clear out a couple of things
2527.44 -> like this okay pass out pass log it log
out here like this and i could also say if
2535.36 -> loading so if loading is
true then i want to return
2540.56 -> loading please wait like that okay let's go back
to home page and let's see if let's see all of
2548.16 -> this in action so i'm gonna go back to index
page everything looks fine i'm gonna go back
2555.52 -> to home page what i want to show you is that you
can you see that loading please wait for a moment
2560.72 -> and that is because we have inserted this if
command here and that is we do this because we
2566.16 -> want to save this real content from unauthorized
users right so if i click on login with google
2574.48 -> now i'm at the home page and it
says i am from home page beautiful
2578.56 -> and now we can do the same thing for the profile
page so i could just simply go and copy this
2583.84 -> go to profile page and i could say like this
2588.4 -> so here it needs to be log out and we need to
import this so i'm going to copy this so i can
2595.36 -> now go to profile page and i won't be able
to because that's a protected route first i
2599.52 -> need to log in with google and once i'm logged
in now i'm at the home page from here i should
2604.48 -> be able to go to profile page so let me create
that button so i'm going to copy this i'm going
2609.68 -> to go to home page and now do this and instead
of saying home page i'm going to say index page
2616.8 -> and here i would say nothing
i would need to import link
2623.2 -> okay looks good so i want to do the same thing on
the profile page so first we need to import link
2633.12 -> like that i go back to profile page
i'm on the profile page if i go back to
2640.08 -> i need to change this to home apologies
2646 -> bro go back to home page i'm at the homepage
go back to profile page and my profile page
2650.8 -> i can go to index page now this should not
be happening so once user has logged in
2655.84 -> they should not be able to see the index page how
do we do that super simple i'm going to copy this
2661.28 -> go back to index page paste it here and of
course we need to import this so let's do that
2669.2 -> like that and here we're gonna say if it's
loading then we're gonna say please wait
2674.32 -> and if loading is done and if there's
no user if there's a user so basically
2683.52 -> we are logged in then we're gonna
2688.08 -> use router of course so we're going to
say const router request to use router
2694.4 -> and we're going to say router dot push where do
we want to send people when they log in we're
2699.6 -> going to send it to home page like this we are
at the home page i'm going to click on index
2704.16 -> page and i still at the home page so if i go
back to profile page and i click on take me to
2709.76 -> the index page i won't be able to and i'm back
to homepage profile page if i click on logout
2715.2 -> then i'm on the index page i won't be able
to go to homepage and that's all ladies and
2719.36 -> gentlemen you create protected routes
using xjs and firebase authentication
2732.16 -> with that we have created all our running
objectives there's one objective left which is
2737.12 -> logout route which is super easy to create so what
we can do is we can go to our vs code here we can
2744.32 -> create a new component we can call it ago.tsx and
we'll say const logout like this and this will be
2752.32 -> coming from use firebase auth and then we're gonna
just you know execute this we're gonna say return
2762.88 -> what do we want to return we want to just return
that function call that function like this
2769.28 -> saying some error because logout needs to be
looking like this so let's do that like this
2776.32 -> um i'm sure that we did not need this
but i'm just creating it because i
2780.56 -> mentioned it in our learning so let's do
this put default logout page like this
2787.52 -> so now if somebody is here and if they go to
logout page they should be logged out and they
2794.48 -> will be sent to index page like this beautiful
now with this i hope you learned a lot and
2801.04 -> if you have any doubts do let me know in the
comment sections and here's the video that you
2805.12 -> should watch in case you're not sure how use
effect work how hooks work or how next chase
2810.64 -> works or react works in general and of course do
not forget to like subscribe and comment thank you
Source: https://www.youtube.com/watch?v=vBbxgnMLzcg