into this YouTube channel my name is Shekinah chocola and I'm delighted to receive you here in this video I will show you how to implement Firebase multi-factor Authentication before to do that let me first show you the demo of this video the application we are going to build will allow the user to create an account with his email and password or to use the Gmail account through Google provider after that the user will be able to connect to connect to his account through the login page almost the user is connected you will be also able to do two things the first one to disconnect from his account a second thing to activate the second Factor Authentication once this is done the user will be obligated to connect to his to his account through Tuesday the first one the user will provide is email and passwords for his Gmail account for Google provider and the Second Step the user will be able to provide the code you will receive through his phone number let's just have a look on that May count I have to go to the sign up page for that I have to click on sign up just here on some disk on this page I have to create my account for this first time I will do that with my Gmail account through Google provider let me click on I will be redirected to a page where I have to choose which which account I have to use in my case I will use the first one after that um I have created my contacts fully and I can see the user page as I said previously I'm able to do two things to disconnect from my account or to activate directly in my multi-factor authentication in my case I will activate directly the mid de facto Authentication I'm in this page so I need to provide my phone number don't forget to provide your phone number with your country and the casual thank you once my phone number provided I will be able to receive a code and let me just have a look on my code and to provide that my code is 28 28 26. and I would submit the code once it's done my second facto authentication is created and activated as wanted so I have to disconnect from my account to see if everything was set correctly I will disconnect from my account and I'm get back to my login page for to verify is if everything is set correctly I have to connect to my account with the Google provider let's click on login with Google and I will use the same email I have used for to create my account it's the first one in my case after that I will see this page and have to fill the code I've received through my number I will provide the code 0 0 56 and 63. and I have to submit that as I said this time I go through two steps to get in user page and I will do the same thing with my email and password account let's create another account with email and password we are going to do the same thing with the second authentication provider so we are going to create our page with an email and a password let's go again to the sign up page okay now we are seeing our sign up page I have to provide an email and a password for to create my account one is done I'm logging on my user page you can notice something different from this time I have to verify first my email before to do anything else in the case I want to create the second Factor authentication let me click on verify your email who can see the notification email sent I have to verify my email to see if I've received a link from Google to verify my email for to see if I can create a second for authentication so to verify my email address I have to click on that and when I'm inside of the email I can see this link and I will click on the link after that I can see a notification your email has been verified you can now sign in with your new accounts so I can close this page connect from my account to verify is everything is set correctly I will use the same account and I log in successfully in this case I can see activate the multi-factor authentication and this time I will click again on the same link and I have to provide my phone number and I have to verify that a code has been sent on my phone number let me take the code the code is 30 21 0 3. and F submit that in this case I have created a second Factor authentication let's verify that and for that I will disconnect from my account let me provide let me connect again on my account once it's done I have to provide the code I have received before to getting on my account I will wait a little bit for the code and 84 63 and 85. I have to submit that and everything is okay as you can see my multi-factor authentication is set now we are jumping into the code for to create this application I created a brand new Ninjas application and I will use with that some package let me show you that on package on my packages so for this demo I will use Nation S14 I will use Force react for the icon I will use Firebase obviously I will also use typescript react autos for notification and Taiwan TSS for styling to show you that is a brand new application I've created let me run the application I will start my application and I'm able now to see that in my navigator I can see Firebase midi photo Authentication to continue with our implementation we have to set a new Firebase project so let's create a new Firebase project we can give this project a name Firebase multi-factor Authentication and we can continue so for this project we don't need Google analytics so I will disable that I will create my project so my project is ready I can continue I will click on continue okay everything is okay so for this demo I will use just authentication from Firebase let's go to build and here I will click on Authentication I have to get started with my Authentication product so let me create and get started after that for this project I will use two provider I will use email and password I'll just to enable that save and I have to add another provider so add a new provider I'll use this time Google provider so I have to enable Google provider and I can consure that with my personal email and I will save so I as you can see I have my email and password and Google provider in our case we have to upgrade to enable the second Dimitri Factor authentication so we have to click here upgrade to enable and you will see upgrade to the new Authentication you can read the information retender and you can click on next next I'll keep it on my free plane and I will upgrade to the new Authentication so everything is set you can see SMS multi-factor authentication alloy allow your user to add an in Excel layer of security to their account so the status is disabled we will change that we'll enable that and we can save limit effect authentication is enabled so we can get back into our code projects we have now to initialize this Firebase project into our next GS application so for to do that I will create a folder called Firebase inside that folder I will put a file I will call it init so what I have to do here I have to go to my Firebase dashboard to take the credential let's go I have to click here and to click to project settings after that I have to create a new project so it will be a web project I will click on I'll click here and I will call it Firebase MVA and what Firebase hosting and I will reject just my app after that I will skip this information and I will continue to the console after that I will go to the bottom of the page I will see Firebase config here I will copy that and pass that in here I have my config here and I have now to set my Firebase to initialize my project I will create a variable app okay and after that what I will do I will check first if there is any application there is no instance of app or Firebase so I will check if there is no instance of Firebase and if there is no instance of Firebase I will use initialize here okay from Firebase and I will use Firebase config other ways I will put in my app the instance already present here so after that I will export this app I will export up so everything is set and our Firebase is initialized so then the next step we will create the sign up page of our application me to create our sign up page I'm going I will go to page and I will create a new file I will call it sign up and create function call it sign up page and inside I will return a component that we create after this moment sign up or we call it in China that creates that component so I will go to my file and create a file inside of components and its name will be sign up and I will export function call it sign up and here I will export just leave sign in so we can get back into our page and all these components so everything now is fine I'm going to check that here and go to designer okay Expo oh yeah I made a mistake here into my page I have to export this as defaults so we can get back and everything is okay so sign up okay so let's create our sign up page so I will create quickly our sign up page and we'll get back I build our sign up page as you can see that's on my navigator here we have a beautiful page and what you are going to do next is to create some function to allow user to create this account with Google provider or email and password let's do that so for that I will create in my Firebase folder a new file I will call Authentication so inside this I will create a function that will be a sync function and I will call it sign in sign in with Google okay and it will return a promise and that promise will be any and what I will do next I will put in try catch our method this method that we call it from Firebase sign in with popup so even inside this application I will use Puff the first parameter should be a half what you have to do is to create that to create that here let me create a a variable of which will be of okay and inside I will get I will use get off function and inside I will use app from our init okay and here I will get back to my function here I will pass off and the second parameter will be new Google provide both provider so I can provide that and if everything is correct I will return just a true and otherwise here I will return 0 the euro okay and the second functional recreates for how a user I will call it it will be also in a sync function and I will call it sign up and inside of this function I will take two parameter I'll take two parameter first will be the email that will be a string the second will be a password it also a string so inside this function after getting to parameter email that is string and password what I have to do is to create I will put it in a try catch and I will just wait for create user with email and password I will use this function from Firebase that's coming with the SDK and what I will do I will pass firstly off and after that I will press the email and I will pass the password so if everything is okay and more properly I will return it true but otherwise I will catch the Euro here and I will get the hero and I will return false so in this case I will return my return type is promise oh yes promise okay so let me remove this we have two two important function and we'll integrate that on our sign up page after creating two function in my authentication what I have to do is to create also to async function here I will start first with this face function I will call login with Google so inside this function what I will do is to get the response from my first function is sign in with Google if you remember I have used this function in authentication I have created this function in Authentication and I will get the response from this one so they sign in with Google will return us a true or any Row in this case I will check if the response is not returning through and in that case I will create a notification to the user and inside this notification I will create something went wrong okay let's just check what's wrong okay I just read correctly response so what what if where I use this notification this notification is just an implementation of toast here as you can see this this function will help me to pop up in information to the user in the top right of a screen so this is for the first function and I will create the second function but before to create the second function let me first bind this function to The Click method so here on click when the user will click on this button we will execute this function before to move forward what I have to do is what is to create a custom hook in that custom mode I will check if the user is connected because when our user will create his account his session will be set so for to do that I will create a new file I will put that inside the folder and this file we call it use current user okay and inside this custom hook I will exports my function and I'll call it use current user what I will do inside I will create a statehood I will create current or quality current user and I will use set parent user and I will use a used state inside my use state I will create three type I will call it the first one will be user okay because if the user is connected Firebase will return has a user type or if not when the user is not connected and I will add another type I will call it login loading and when we are starting our application it will be loading so I will create an effect here inside my effects views on off State change this function is coming with the SD or Firebase and instead of this function it will allow us to know if the user did or not I have to use authentication so let us get back into the authentication and export this and I will come here the first information I will get here is the off and this off will come from authentication and said of that I will use use a method I will get the user so this method and I can set the current user okay so this function is returning something okay it's returning its unsubscribe just call just use the function we'll call it answers unsubscribe okay right and we unsubscribe when this discuss somehow is amounted great and this method can return the current user so in this case we know when the user is connected or not okay right and I'm getting back again in my sign up pay component inside my sign up component what I would do next is to get the email and password what I have to do for that I have to create two reference I will bind that with the with my phone so the first one I will call it email and I will use a reference that reference will be an HTML input element and the default value will be no so let me just import this don't forget to import that here and the second thing I will call it passwords and inside and I will create also a user if it will be also the HTML input element and it will be in here not as a default value what I have to do next is to bind this reference with my form so I'm going downside and just look here is an email what I have to do is to create a riff and we call it email and for my passwords I will create also a ref I will call it I bind it with password okay great so now we can create our function our function we will call it a sync function it will be a Sig function and the name will be creates an account and here as we are working with our formula what you have to do is to pass an event okay and these events the type will be a form event inside the form event I will put HTML form element so as is my email might have to prevent default what I have to do here is to bind that function with unsubmit method so my method is create an account function is written account and I will continue here what I will do I will check first if my email is set and if the password also is it okay and if everything is correct I can now get the response from my function I've used I call this function sign up okay insert my function I will give email current so I can get the value passwords okay current that's value so what they have to check here is if the response is different from true have to notify my user that something went wrong but in your case we find the proper word for to describe your error to the user so I will call it create an account so another question is when our user is connected we have to redirect him to a new page we will call it user page let us create the page instead of page and call it user okay before don't forget to set it as a default and it will return let's create a div a okay that is it and don't forget that you have a sign up page in this sign up page we'll start to listen to the use current user it will allow us to know if the user is connected or not and inside this page we will redirect our user once he created his account let's do that so in our case I will create a variable I will call it current user and I will use use current user because this is returning us the current user if it's connected or not and we will use also a router provided by next year's application and what I will do here is to verify if the current user state of current user is loading I have to return the loading components okay we will create this component later let's create this component now and here inside it will create a loading component okay it will be a function loading and we will return some information so in my case I will set up quickly this loading page as you can see I have created my loading component and now I can import that inside my sign up page so let's import that okay and when the user will be set in this case we have to redirect the user to the user page I would avoid return the push and inside of this information I will redirect the user 2 to the user page now let's test our application to verify is everything is working properly to do that what I will do is to use my Google provider I will click as you can see I'm redirected to this page and I will choose the first email here and I have been redirected to the user page because now I'm connected as I'm connected let us implement the connection and the login page of our application we are going to create our logout function so to do that I will create a I will go to the Authentication and I will create a new function a new async function I will call it logout so yeah what I will do I will put in try catch I will wait for the send out function provided by the SDK of Firebase said that we put it off and if I'm signing up properly I will return true otherwise I will get the hero and I will return false information as in a sync function it will be a promise of Boolean I'll get back to my user page what I will do here is I will change the name to user page and I will create I will create a user component let's create our component and call it user a comment be user so I will export the function that function will be named user and self my function I will put some style for the page let's create that page average is a simple page and photos fix this issue here in the user page what they have to do is to import my components okay let's now visualize the page on our Navigator as you can see I have a user page a simple user page with a disconnect button nothing is happening when I'm clicking on this button so let's create a function to disconnect to his account I will create that function in the user components so the function I will call it let me just create a function the name of the function will be disconnect and here I will not scare about the return of this function log out okay so let's find that on click click logout we are going to test when I will disconnect the user so we nothing will happen because we don't redirect the user when is not connected cool let's do that here what you have to do is to get again the current user on the page use current user what I have to check is if the current the state of the current user is loading what I have to do is to return a loading component if the user is not connected if the current user state is not in that case I will create a router here I'll get in essence of a router from nhgs provide for Nature's next router and here I will redirect the user to the loading login page let's now create the login page I will create a login page here in page and I will create login information inside of this teacher I will create a default I will export a default function I will call it login and what I have to return here I will just return something simple for the moment I will call it login so if the user disconnect from his account it will build redirects to this login page let's check that on our Navigator okay okay as you can see the users redirected to the login page because it's not connected what you have to do next is to build our login page so the user who created this account can be able to connect in into his account let's build the page of login and do that now for to do that what I have to do is to create my new components and the new component I will call it login call it login and I will export a function I will call it login and I will create my page so to avoid any problem I will call this load login page then do call it login page and here we are going to set our page as you can see I've just created my components the login component let's import that in the login page here what I will do I will call my loading component and we can test just on how navigator to see if everything is okay as you can see Akin login page and I can go to my signup page and I can get back to my login or just a neural that's let me get back into my login let's change that the sign up I would call it okay okay so it's becoming more simple and I will create login sign up okay so what I have to do here I have to have to give to our user the possibility to log into his account with Google provider or with his email and password or we thought with Google I will do that into my login page and we understand why in a few minutes so here what I'm going to do I'm going to create a function it will be an async function and that testing function I will call it login with Google and inside this function I will get your response from a function called sign in with Google if the response is true okay is the response is true what I have to do I have to redirect my user to the user page for that I first to call a router here from this list and I will use that here I will wait for that push user okay here is response okay otherwise the user will stay here I can just say s I will say something went wrong okay cool what you have to do next is to allow the user to create his account with email and password let's create that function too what you have to do is to create in a sync function the sync function we call it login with email and password and password so for this case we are go we are getting back to authentication to create this function to allow users to create this account with email and password just create exports export the function with export in async function the name will be login we get the email and the password inside of this function I'll use a try cache okay to catch the arrow if there is any row I will return that zero so here it will be a promise of any and what we are going to do here we are going to await okay and to use sign in with email and password this function coming from our Firebase SDK what you have to provide is the half after that the email and the password is everything correctly we are returning a True Value okay and here into the use no not the user page we are getting back to the login now we can get this to get the response call that response instead of this response I will use this function I've created and I will provide the email you know email I will I have to provide here an email sorry and a password cool and here I will give the email and the password after that I have to check if the response is true in this case I will I will redirect the user okay here is response I will redirect the user to the user page okay right otherwise yes what I will do I will notify the user something and it's wrong all right something it went like and what we have to do here we are going to pass these two functions to our components login so we are going to pass them as props let's do that right now we are going to use our two props the first one call it login with Google let me copy and pass that and it will be login with Google and the second will be login with email and password let me copy and paste that and to be login with email and password after that you are going to our components and we are going to create props let's start first with a type we are going to create a type we call it props and instead of this type what we are going to set is function that will get in email is a string and passwords is also a string and it will return okay we'll do nothing and we are taking also login with Google okay also a function that will get nothing and the return type will be void but what you are going to do here next is to use that probes what you are going to do is to say that we are getting that props and we can use them to again with Google and login with email and password okay so we can now bind on click event we are going to bind what login with Google and in our case here we have a formula what you will do is to create another function inside this component let's create that function we are going to create a function that function will call it under submit instead of this function we'll use an event okay use an event we'll get an event because you are working with a formula and this event what will be inside of this event it will be a form event inside this info foam event we put a HTML form element and inside going to prevent default okay and we are going also to create two ref the first one we call it email use ref it will be in HTML input element and the default value will be not and let's import use ref so it's imported there and we are going also to create a second variable we'll call it passwords and it will use also the reference and here is the HTML input element and the default value it will be a no so we are going down and you can see here is an input element so an email can just reference to the email and the passwords will refresh that to the password what you are going to do next is to use the answer meet event here and to code under submit okay that is done everything is correct now okay with this information and let's try this in our Navigator I'm going to test out if everything is okay okay as you can see I'm redirected to my user page now I can disconnect from my account I will get back here note you are going to set up an option for to activate the second fact authentication or the media Factor configuration well to do that you have to check two thing the first thing the user should not be unrolled to this to the multi-factor authentication and the second thing we are going to verify if the current user has an email verified to do that we are going to get a user here what we are going to do is to come here and to take the current user let me do that here current user and it will be current user okay and get back to our page what you are going to do is to create a props type we'll call it props inside this port we call it parent user and type 3B use this user is coming from Firebase this is user components call it user component just to evote user is coming from Firebase and inside our user component what we are going to do is so we're going to get the pro our props and his current user what we are going to do now is to verify if the account user have an email verify it and the second thing what you are going to do is to verify if the user is notes Outlet so let's create a new function inside authentication that verify if the user is already or not for to do that go to the our Authentication and we are going to create a new function we are going to export a function and we call it verify if user is a roulette all right so what you are getting by getting a user okay and here what you are going to check you are going to verify if enrolled Factor okay yeah creative function I would add facto it's going to be are going to call humidifacto say that midi factor is coming from Firebase authentication we'll pass the user and we will get the overload Factor and we will return the enrolled Factor if is left is Superior than zero our user is our wallet so what you are going to do now we are going to get back here and to verify if the user is not owlette in our case is current user okay we are going to redirect the user to the page full to allow the user to create the second Factor authentication let's do that so I've created the link to a page I will call it MFA so I can submit the fact authentication so I can redirect my user there and it can create is second Factor authentication to do that let me create a new page call it meta Factor Authentication and inside this I will call default defect authentication page function okay after we return for the moment I will just return the div instead of this div I would say Okay AMC get back here everything is okay yeah I've changed the name let me just change that to user component and here is user component and here is the current user that's me write it properly parent user now everything should be okay so that it can be no so okay here I have to change my props because this type can be no okay and what I have to do is to check if the current user is exists and we are ready to go okay now check if everything is okay everything now is okay cool let's just test that on our Navigator if the user is able to see the emitter Factor page let me log in again something went wrong oh I made a mistake here okay it's in the login page the hero is even so let's change that foreign let's connect to our account and now you can see activate the mid default application when I click on that I can see my page good let's now build this page with the fact talk Authentication in her application so to create this page what you are going to do we are going first to verify if the users coming to this page is connected to do that I'm going again to get the current user use current user and we are going also to use our the router provided by Nest GS okay and we are going to verify if the state of the current user is loading in this case we are going to return loading and if there is no user you have to redirect the user to the Loading page the login page let's do that what you are going to do is to avoid the return type of the router and we will push to the login page okay great after that we are going to create a component that component will call it create symmet de facto authentication what we are going to do now is to create that multi-factor authentication let's do that we're going into our component and create a new component we'll call it create Community facto Authentication all right and it will be a function creates multifactal authentication we are going to pass in the current user as I said we have to pass in the current user what you are going to do is to create a new type props and call it props inside will create currents using and can be user be user from Authentication okay and what we are going to do here we are going to get our current user props and you can get our current use for the moment let me just created div and say components created what you are going to do here we are going to do two things for to create the second fast lodication we should verify the user with our recapture so what you are going to do we are going to create a custom hook that will generate our recapture into this page let's create this hook right now we will call this hook capture okay inside this hook we are going to use a function and we call it user capture and we will set up the component ID okay and we understand why component ID the name of the company ID will be a string and inside of this component ID what you are going to do component ID instead of a component ID what we're going to do we are going to set our capture we capture set to recapture I'm going to use the states and the type of this recapture will be application verifier from Firebase Authentication okay so instead of our use effect we are going to create a function inside this function we are going to create a variable we'll call it recapture verifier and inside this will create a recapture verifier from Firebase off and we'll call the components ID and we will pass some parameter the first parameter it will be the size in our case it will be we will use invisible and after that we use a callback and instead of our callback will call nothing and here we are going to call our off here we come from authentication so everything is correct now and what we are going to do after that we can now set the recapture we capture verifier when this this used custom code is amounted we have to clear this recapture so return function instead of the cleanup function we will call and capture verifier that clear all right okay here what you are going to do is to put in our array dependency we put component ID we are going to return this recapture okay let's now use this recapture in our create multiple authentication component before everything else we have now to create this page to create the multiple authentication the first thing the user should be able to provide his phone number and the second thing it should provide the code it will receive via its phone number now let's create the phone registration component and we are going to create also the code sign up component but before that let us create our recapture the recapture of this page capture use recapture and we are going to use sign up sign up will be just a in the name of a div we will create here okay let's do that we created these and his high D will be sign up let's just copy past to be sure that we have written that well cool and as I said we have to verify we have to create two components phone registration and code sign up let's do that and create the first phone registration foreign no phone resolution okay I will return a patch I will build let's build that page so we have created phone registration components let's call it into our create 25 Authentication phone registration and let's have a look on our Navigator below the page what's going on here just have a look oh okay we can now call our components create the fashion de facto authentication and we can pass it current user it can be no in this case we have to say no okay now we can see we have a different page and we can provide a phone number and to verify this phone number or the user can cancel and to get back to our user page let's Implement that what you have to do is go to phone registration getting an instance of a router foreign and when the users click on cancel and click users should be able to get back router that push get back to the user page okay Let's test that I click on cancel I can get back to my user page when I click on activate the multifact authentication I can see this page okay right what you have to do next phase phone number and to send him the code let's implement a function will help us to do that I will list my state my state into the parent component so the parent component is the create multiple authentication and I'm going to build a function what I'm going to do is to create first a ref I will show you how I will do that I will call it phone number info number and here I'll use a ref okay I want to be in your default value and it's HTML input element okay and have now to bind the reference here and I will call it phone number once I get this information here what I have to do I have to use another function I will call it the function I will call it end or click if a phone number that's current if the phone number is not no the current information is not no I will create a function I will call this function phone number get phone number okay and I will pass that while the user the value of the phone number okay what I have to do is to create a props that I will call it props and I will use get phone number here you will get a phone number this is a string and return avoid okay and here I can call that props and this gets phone number I have to use this kit phone number in my create multi-factor Authentication I have to create a function and we call it get phone number okay it will get a phone number and I will pass that here get phone number get phone number okay I would now bind this information with the send yeah this function I'm going to click here I would use end.click right okay now we have to create in authentication file the method that will help us to verify the phone number to verify the phone number as I said I have to create a new function here I will call it I will export the function I will call it verify phone number and what I will pass in this function I will give use information to be user should be using Firebase authentication but I will provide next it will be the phone number and the recapture verify okay and the type is application verifier if a number of video stream is ranked so what you are going to do here we are going to to get a session so creative a variable we'll call it midi Factor foreign [Music] okay and after that we are going to create a font info option so let's create a phone info option what we put inside we'll put a phone number a phone number and our session it will be I can just call it here I can call it UV multifactor session okay yes I can call it session here it will become more simple work position what you're going to do next we are going now to to create the phone off provider to do that we have to do create phone of provider and here we are going to create a new font of provider and we are going to pass our Authentication and say how a trade catch or we are going to return the response if everything went well yeah returning default of provider I can verify the phone number what we're going to pass is the phone option and the recapture will file otherwise what you are going to do is to catch the arrow and inside we can return Force okay the Wi-Fi phone number is returning as a promise of a string so here the tab will be promise of force or string cool let's now use that in inside of our create multiple authentication component what you are going to do here we are going to do this we are going to verify if the current user is near none and or the recapture is now will do nothing okay otherwise we are going to get the verification ID that is that getting the string from the weight let's be in a sync function because if iPhone number is in async function this will be also think and wait verify phone number okay here what we have to pass we pass the current user we are going also to pass the phone number the phone number we have get and we are going to pass our recapture all right if our verification ID if a verification ID is false you can notify to the user that something went wrong that's we need this verification ID for to send to the user a code so we'll create the states here code ID sets verification call ID and previous state will be notified by default so it can be let me do that it can be string or no right so if everything is correct here we are going to set a verification code ID to to pass it verification ID okay what are we going to do if the verification ID is now we are going to display the phone with this version right if the the verification ID is set we are going now to to display the code sign up component let me first do this if the verification code ID not exists I can put my phone registration otherwise if I have a verification good ID here I will display another component let's first create that component we call it code signup foreign now we are going to build a component that will help us to retrieve code let's do that and we'll call it code I'm going to create a new component we'll call it code and set of our codes to create a prop so we call it code and here what we are going to do we are creating a new type we call it props instead of this tab we'll call code get code it will be the function that's getting a code as a string and return for it so what you are going to do here what you are going to do we are going to set up our components let's do that foreign I've just created the component that will help me to display some information let me show you that on the Navigator so I will get back here to explain you what I've done here then just check that and we'll call code sign up and code sign up inside of my code sign up I will return so here I will create a function foreign function I will call it get code if the codes that is a string and here I will put get code okay here I can use code sign up what I did here I've just created a page a component that will help me to get information from the user when the user will get a code via's phone number you can use that here inside so what I have to do I can refuse to provide that code and if I cancel the operation I have to put one click click missed on click events have to avoid the router push it should get back to the user page all right but otherwise what you have to do I should execute here foreign let's create this function function and we call it end or click inside that function I will get the code I will call it final code as the code is an array what I have to do is to use reduce function and here what I have to do is to get the previous value and the current value and inside what I have to do is to return the previous value and I will tell it that with the current value and what I have to do here I have to execute now get code and I'll get the final code that is string okay we are getting back here and we need two information the first information we need here we need the current user foreign use the current user and the verification ID verification code ID it will be the verification code ID okay let's create these two props I will create a new type I will call it again props and I will use this information okay let me just put that correctly here it will be a user profile is off and here it will be a string okay here we are going to pass these two props okay and current user and verification code ID all right so you can continue her implementation now we are going to implement this function gets code inside of the get code what you are going to do we are going to check our code first things we have to do is to to enroll the user if the user provides a correct code now the user will be able to be enrolled to the second Factor Authentication let's create a new nesting function with Scotland async function we'll call it a role user and you will take user as a parameter the verification code ID 2B stream a verification cooked foreign and what you are going to do next we are going to get the phone off credential and here what you are going to do we are going to use a phone off provider and get the credential going to get the verification code ID and a verification code after that we have to create we get an assertion it will be a phone mid de facto generator here and the exertion will be if one of credential we are going to execute this going to a weight for multi-factor we are going to pass the user and we are going to enroll the user we are going to use multi-factor assertion and we are going to use a display name in our case you are going to call that personal phone number and if everything went well I'm going to return true otherwise you have to catch the euro and we are going to return false so we have now to use this function all the user to instead of let me first close this like this I'm going to go to sign up this function you can see that it will be in a sync function and we can get the response inside this response we're going to execute our user and we are going to pass the current user the verification code ID and the code right so if the second Factor authentication is set the user can be redirected to the user page for to do that we have to check if the response is true and we can do that for to do that again we have to get an instance of a router use router from SGS router and he waits for router that push user page if your person failed you have to notify the user that's something went wrong Okay so in our case create 25 authentication is set let now test this function let me provide my phone number correct I will provide my phone number okay now I will receive the code I've receive a code let me provide that and as you can see um correctly are related to the second Factor authentication Let's test that I will disconnect from my accounts and I will log in again foreign so as you see they say that something went wrong it's normal why because there is an error that's occurred just let's check on our code let's Now display what is going on here let us display the response okay foreign I see an error here they say of multifactual Transportation required so everything is set up correctly now let us handle this error we get back into our code and let us create another function and this function will create an async function and we'll call it end or it's effective Authentication you will get a response that is any and I will verify if the response that code equal to I can copy past this or there is something something which one we have to check in this time we have to check if the error code is this now will find the second Factor authentication we can send to the user noun a code we are going to create inside of our authentication file function in a sync function and we will call it verify user second facto if I use a multi-factor Authentication so what this function will take as parameter this function will take the euro okay it will be emit de facto error and the recapture verifier in the application verifier and selected index so when you have this error you should be you should select this the second Factor authentication you have set but in our case we'll use just the first one that will be the phone number but let me create that here instead of the function what you are going to do we are going to get a resolver get mean to factor resolver and inside multifactor is also what you are going to pass is the off and the euro okay here is get Community Factor resolver from Firebase of okay if the resolver it on the selected index that factor ID it equal to phone midi facto generator that's Factor ID so what you are checking here we are checking if the user has set the phone number as the second Factor authentication and if it's that you have to create a phone info option inside the info phone option we are going to create some information multi-factor int okay into what you are going to pass with this resolver and selected index okay and the second option will be the session and decision will be a resolver DOT session okay great we have to get the phone off provider we come from our phone of provider and we pass it off we created before and we are going to execute the function here we are going to take again the verification ID and we will await for the phone of Provider that dot verify the number what you are going to do is to pass this phone option info option if the recapture verifier and you will return a verification we call it verification ID return the verification ID and the resolver so correct that so here it will be a promise of force or verification ID as a string and a resolver as a multi-factor resolver from Firebase it's verification ID or we can just say it can be void okay now we can get back here so we are going to get a response from verifier user multifact authentication inside what you are going to pass here I can call it data to evote any collision and here we are going to pass the response going to pass the response we are going to pass the Second Step will be the recapture we have to create our recapture here what you are going to do we are going to create our recapture let me create these with ID sign in sign in let's let us create a recapture here let me capture it's going to use use recapture and I will take this sign in and I will give that there okay and here I will use the capture and the index will be zero so I have just to check that the recapture is not snap okay actually that it will capture is set after that here inside what I'm going to do is to check the data is false and if it's false I have to notify my user that's something went wrong okay indicate that everything works well I can now destructure my data I will get the verification ID and the resolver what I'm going to do I'm going to create two states the first one I will call it verification ID the second I will call it resolver let's do that now I'm going to create two states verification ID and set verification let me just write correct the verification ID and set verification ID there are State you state it's a string okay and resolver set resolver it's it's and by default will be undefined but the type is Interactive resolver great so here what I have to do is to set verification ID by verification ID and set resolver as resolver if we don't get this hero we have to display to the user that something went wrong let's do that here s how to send a notification something went wrong so in our case we'll be able to to receive a code and after that we have to create another component that will help the user to provide is the code it has received on its phone number so let's create the component we'll call it code sign in and here we will display this login if there is no verification ID and there is no resolver okay are going to display the login page but in higher case if we have a verification ID and we have a resolver we are going to create a code signing let's create first test components we will call it this code sign in code sign in exports function and get back here and call code sign in okay what code signing will require it will require the verification ID and the resolver cool go to the code sign in and create a type it will be made effect of resolver and verification ID will be string take verification ID and resolver let's now build this page yep we are going to integrate the code components the component that Epping has to get the code information and we are going to create in a sync function and we'll call it get code and the code will be a string tell the code we are going now to check if the user fill it the correct code okay we are going for that to create another function to our authentication file let's create that function we'll call it it will be an async function good exports first function async function we'll call it verify user a wallet this function will take into its parameter to information the first information will be the verification of the midi Factor Authentication it will be verification ID that is a string and the result the resolver that is a multi-factor resolver and the second parameter it will be the verification code that is a string okay and inside of this of our function we are going to this to distract our verification and we'll get the verification ID and the resolver after that we are going to get the credential foreign we are going to execute phone off provider that credential inside we are going to put the verification ID and the verification code I'm going to get the multi-factor assertion that is the result of phone to assert generator that assertion and we are going to get credential so I'm going to execute the result sign in without signing it will take into parameter interfer to assertion and if everything is going well you're going to return true otherwise we are going to catch the Euro and to return false get back to our code signing now we can execute this we can continue with this function okay so we are going to get the response from this method verify user a wallet inside this method we are going to pass a verification ID and the resolver and the second parameter will be the code if the response is true we are going to redirect our user to the user page for that let's first create the instance of the router from user router of an SDS and here we are going to use with the router that push user page okay otherwise we are going to notify the user that something went wrong so let's test this into her Navigator okay okay as you see they say something went wrong again what you have to do here instead of just writing something went wrong we need to call endol it's a factor authentication and to get back to response okay then you have to do the same here cool it's I'm going to repeat again I'll refresh I will reload my page after that and click again on login with Google and this time I should verify my phone number to see the code I have received I receive it for a code let me fill with code foreign as you can see I have completed Two Step before to be connected so if I try to do the same thing with an email and password provider I will encounter in neural that zero would tell me that the email should be verified first in the last part of this video I will show you how to verify the user email so the user will be able also to to activate the second Factor Authentication let's continue I will get back here so if there is a current user and the parent user have not an email verified and the current user is not or roll it yet in that case we have to foreign is email address what you are going to do we are going to send the email to that email address so the user can verify its email let's do that for to do that I will create a new function to my authentication first I'll go to authentication and I will create a new function I think function and I will call it verify user email so I will get the user and I can send email verification to the user if everything is okay I can return true but if something went wrong I can return force and in this case it will be a promise volume cool so here what we are going to do we are going to implement a button I've just put a button and I written verify your email and this button I will create a function on click that function I will I will say that is sent email okay let me create that function to be in a sync function send email and I will get a response verify user email here and I will use current user at current user in my case I have just to check if the current user exists foreign so I can execute that inside okay great so if the response is true I can notify the user that an email has been sent to has been sent to your email address set it's more simple it's we can use notify to say something something went wrong okay and we are going to test this if everything is going correctly if the user is the user used is email and password you will see first verify your email after that you will be able to see activate the midi Factor authentication let's try that I will close the console log I will disconnect let us create this a new account and your password so I can see verify your email and have to click anime has been sent to you let me check my email so I haven't I have a new email I will click on that and I see this link to your family email and they say your email has been verified you can know sign in with your new account I will disconnect from this time and I will log in into my account again okay so here nothing happened because my under submits here is empty I have to check if my email parents and my password the current is not now so in this case I will execute working with email and passwords and inside I will provide the email and password parent adds value I will do the same here with current dot value right so let me check login with email and password I have to check that here on my page if everything is correct yeah okay let's repeat again now we can click on login you can see activate Dimitri Factor Authentication I'm going to activate that I have to fill my code encode I can fit in and everything is set let me try to disconnect and to reconnect again [Music] I can create I can connect I can connect into my account and this time I have to provide the code before to login into my account let's provide this code everything is set correctly in this video we have seen how to implement Firebase multi-factor authentication in SGS if you liked this video don't forget to subscribe to this channel and to like this video