Phone Auth using Firebase in Kotlin (All Steps in detail) - Android Studio 2022 #androidstudio

[Music] hey guys welcome back to coding stuff and welcome to the cortland plus firebase series till now we have covered email and password sign up and google sign in with kotlin and firebase and now in this video we'll see for authentication with firebase in kotlin so yeah i have created this empty project and i have created two activities or three activities basically one is the main activity that we get and then i have created otp activity and phone activity so these activities are empty for now so the first thing that we need to do we will just click on the tools and firebase we'll click on the authentication we'll select authentication using custom authentication system and then we'll click on the connect to firebase we need to build our project so we'll click on that and if you don't have project created on the firebase just create one firebase project i have already created one so this is kotlin firebase so it is built and i can click on connect to firebase so it will open new tab in the google chrome i'll select kotlin firebase then i'll select connect and it is connected so then we'll move to the kotlin firebase project reload it and you can see the two apps are connected here google sign-in and phone authentication as well so what i'm going to do now we need to click on the authentication so we need to click on this sign in method and we need to enable the phone authentication so you can just enable this by click clicking on the add new provider and as you can see we got email password for facebook game center and many more so just enable this phone authentication from here and then i'll close this so it is enabled now we'll add this firebase authentication sdk so click on the accept changes will minimize this and then we'll open the google chrome and we'll search for phone authentication with firebase click on this first link which is google firebase documentation and okay so we have done this part uh adding dependencies and all that so uh second thing we need to do is we need to enable the safety net so for that uh we need to click this android uh device check api so it will open the google cloud console so it will load uh till that time what we can do we'll move to the terminal and we'll write gradle w signing report and hit enter will copy our shortcase and we'll add them in our firebase project that is required for phone authentication so we got the shortcase i'll just copy this show one key from here and i'll go to the settings project settings i'll select the phone auth project and i'll add the fingerprint here i'll just paste that copied short key and i'll click on the save so share one cubic key we got now you copy the ssh 256 key so again i'll copy it i'll click on the add fingerprint i'll paste it click on the save and yeah that's it now we need to download this google services.json file so it is downloaded i'll just copy this and i will paste it and let's let's first switch to the project mode i need to open the phone or our application and then we need to open the app file just paste that google services dot json file here and change its name to google services on ok so it will ask it to overwrite so we'll say yes okay so now we need to enable this uh google android device verification so as you can see i have selected kotlin firebase project here so what you can do you just need to search your project and it will show show up here so then select that project like this and click on open and enable this for me it's showing manage so i have already enabled so for in your case it will show as enable so you just need to click on that okay then we'll again move to the phone authentication with firebase okay so our uh safety net is done now switch to the android mode so before moving to the coding part i'll let me show you that the layouts that i have prepared so i'm not gonna create it in front of you instead i already created it because it takes time and so i will provide the github link in the description box so you can just copy this code and you can just create similar ui or you can create your own ui so yeah these images are downloaded from pretty pic okay so we have one progress bar here and then we have one text edit text another edit text which is disabled we already set the country code so my country code is plus nine one and then the send otp button pretty simple then we'll move this is just an image then this is our otp activity in which again i have one image these are the edit text so what i've done here what i'm what i have done here i just selected all of these and then as you can see these are changed and then right click and click on the chain horizontal change style so i have already selected that uh if you want to do it you can just click on that okay so what this uh chains do uh they just separate all the widgets in the similar distance so yeah as you can see here okay again pretty simple progress bar and all so yeah first of all we'll move to the phone activity we'll just close all the activity main and main activity activity main is pretty simple i haven't added anything there but we'll add sign out button later there so yeah activity phone so first of all what we'll do we have one edit text here and one button so we'll create few later network for that so late in it where send otp button then we'll call one method here which will be in it we'll create it over here so private fun innate and inside that will initialize this send otp button equals to find your id r dot id dot send otp button phone number et equals to find wave id r dot id dot phone number edit text again i will create what latentware for our auth so auth this will be type of firebase auth will initialize it over here so auth equals to firebase dot kt instance okay so just after that after calling initi method what we'll do we'll add on click listener to send otp button so set on click list now and inside this what we'll do first of all we will get the phone number from the edit text again what we can do we can create again latent wire for phone number so number it will be type of string number will be equals to phone number et third text dot dream dot to string and then we can have few checks so if number is not empty so is not empty and inside that again we can have one check if numbers length is 10 close to 10 then you are good to go first uh let's just handle the else condition for this so we'll just a display and toast here so make toast this and the message will be pretty simple please enter correct number we need to specify the length so short and dot show i'll just copy this line from here and so after this f will also have one else which will say please enter number or please type a number okay so we are only good to go when the number length is 10 and it is the number string is not empty so when everything is fine what we'll do we'll add a country code with this number so number will be equals to plus 9 1 and dollar sign number okay then we'll copy some code from the firebase documentation so this one we need to copy this option so i'll just copy this and i'll paste it over here when everything is fine okay so we need to import few things so press import and import and again import import and instead of phone numbers we need to write number here and the callbacks will copy them from here so callbacks we get three callbacks when we use full firebase phone authentication we'll copy the callbacks over here at the bottom callbacks we need to input this we'll delete the logs we don't need any log here import the firebase exception import this exception delete the logs for this exception okay so most important uh callback method is on code sent so we'll come back here again as you can see sign in with phone auth credential we need to copy this method from here as well so this one again we'll just copy this so coding is all about uh understanding the code not memorizing the code so yeah we can copy paste a lot of code we just need to understand where to use which code okay so let me just delete this i'm gonna explain all of this so don't worry about that okay so we don't need to create this variables we'll just delete this okay okay so let's try to understand this code so yeah first of all we created some latent ads for saying otp button phone number it text auth and the phone number again so then inside the on create method we called one uh init method and if i if i select this init method as you can see we initialize our variables here and we need to create one more variable for our progress bar so let me just name it as m progress its type is progressive okay and again we'll initialize it inside the init method so m progress bar equals to find your id r dot id dot phone progress bar and we'll set its visibility to invisible start and visible at the first okay and then uh we'll just make it visible only when we click on this send otp button so oh here we can do it so if everything is fine then m progress bar dot set visibility or visibility equals to view start visible and yeah that's it okay so now we need to understand uh this on click listener of send otp button first of all we get the text from the edit text and we stored it inside the number or variable and then we checked if it is not empty if it is empty or we showed one toast which is please enter number and inside that we have again one check for the length of the number so if the number length is 10 then everything is fine uh if it's not 10 then we will say please enter correct number so if the number is 10 we need to add the country code uh at as a prefix of a number so country code my country code is plus nine one you can use your country code and then we make our progress bar visible and after that uh inside the options we need to pass the authentication which is firebase auth and then of dot set phone number we pass number here then again time out so 60 seconds and then activity which is this and then the most important which are the callbacks okay so we'll go to the callbacks now and what it's saying okay we'll make it private are you sure okay so so phone auth provider provides us three callbacks first one is the on verification completed second is the on verification field and third is the on code sent so what uh happens in the on verification completed is firebase automatically verifies the code or it even doesn't need to send the otp it will automatically verify the code but this happens very rare so if all this method gets triggered it's very rare but if it's a gate trigger then we'll directly go to the sign in sign in with phone authentic credential method so we'll go there later then inside the on verification field we gets we get lot of exceptions here we can just handle them by you can just log this error so log t and v dot to string and just we'll copy this again and we'll paste it over here so so this happens when the liquid request is uh invalid and this happens when the sms code of the firebase project has been exceeded okay so this is on verification field just minimize it and then the most important method which is on code sent so when the otp is sent to the phone number this method gets triggered so we need to handle this one so as soon as the otp has been sent first thing that we'll do we will navigate user to the uh otp activity from the phone activity but with the intent we will pass this verification id and token as well we'll create one intent so while doing it this will be close to maintained and we need to split we need to pacify specify two parameters here so first will be this and another will be the otp activity class dot java so with this intent we will pass the otp first parameter will be otp that will be verification id and the second parameter that will pass is the descending token so just keep the key as a received token and the value will be token okay and then we can just you can just start the activity with this indent and yeah that will be happy again we will overwrite the onstart method here which will check if the user is already logged in or not so auth dot current user if it's not equal to null means user is authenticated we will send him to the main activity so start activity intent from this to main activity class.java and yeah that will be happy so i guess uh that's it for this class if you need something i will come back here later okay we need to make our progress bar invisible so visibility this will be equals to invisible so view dot invisible and yeah so inside the so inside the otp active activity we will use a lot of code from here so stay with me so first of all let me just close this activity phone and we'll open the otp activity and the activity odp so here we have six edit text so and again one otp recent otp textview and the verify button so let's just create few variables for them again we will create few variables so private lead anywhere let's just create one otp variable which will type of string again privately unit valve for our same token which is which type is let me just check it over here inside the callbacks and okay i forgot to explain this sign in with phone or credential method we'll just uh go back there let me just uh okay this one and we will also have the phone number here so letting it var full number which will be type of string okay so we can just pass phone number from here as well so intent dot put extra this will be phone number and will pass in the number okay so sign in with for north credential we'll jump to that method so in here we we are just passing the credentials like the otp and the number and then author dot sign in with credential this is the firebase method in which we have to pass the credentials so this credential will get passed from here as i mentioned already on verification completed these methods are triggered very rare but if it is uh if it is triggered then we'll get called this sign in with phone or credential method in which we are passing the credentials and again we are just checking if uh if it is successful or not so if it is successful again we can human toast so make toast and this can display the message what authenticate successfully again we can just log here so log d which will be dollar task dot get exception dot to string okay so yeah this is same thing so that was the sign in auth pro so that's what our sign in with for north credential method does so we passed phone number over here as well so we'll go to the otp activity first of all we'll get this stuff as soon as activity is created so otp this will be equals to content dot get string extra and otp let me just check it is in small or capital capital so otp and we'll convert this to string okay so after receiving the otp will receive the recent token so this will be equal to intent dot get possible extra and we don't need to specify the type as we already specified it over here we just need to type the recent token and we need to insert the no null then we will select we will get the phone number so intent dot get string extra and because this is the phone number or number again we need to insert the so this will be phone number i guess let me just check it over here so yeah it is phone number okay so again after this we will similarly call the init method we will create it over here so private fun init okay so inside the init function i have initialized our variables like auth and then i have find it ids or for all the widgets okay so the next step that we need to do let me just open the activity view so here we have six edit text so each edit text for one digit of the otp so when i uh write here like the otp number let's say i write two here i want the cursor to jump on jump on the secondary text and if i write something here then it should be jump on next edit text and similarly with this edit text as well so for that uh we need to create an inner class so just after the init function let me just minimize this init function and over here we'll create one in a class so i'll write in a class and we'll give it name as edit text watcher and this will take one parameter which will be the private valve view of type view will pass edit text here later so let me just import the view and this class will implement or inherit from the text watcher this one i'll press we need to implement some methods so alt enter and implement this three functions okay so let me just remove this to do we will not do anything in the before text change or on text change we'll directly jump to the after text change over here okay so in here what we'll do we'll create one val we'll name it as a text and this will be equals to this p naught so p naught dot to string okay okay so we used to use our switch statement in java but we have upgraded version of it which is when so inside the van we will check for ids so view dot id and the first condition will be r dot id dot o t p edit text one and then we'll have an if condition that will check if the text that we get passed here its length if it is equal to 1 then input otp 2 dot request focus will pass the focus on the input otp 2 so then another otp edit text 2 i'll just duplicate this line and this will be 2 if the text length is 1 i'll just request the focus on the otp 3 edit text and here we will also have the elsif condition which will check if the text is empty so if text is empty then we want to send back the focus on the otp edit text one or input otp just input otp one okay don't request focus let me just okay then we can just duplicate this few times and simply this will be three this will be four and this will be five this will be four this will be five and this will be six this will be two this will be three and this will be four the last condition for sorry and then the last condition for otp edit text six this one so in here we'll just check if the text is empty then the input otp 5 will request the focus on the input odb5 okay so yeah that's the inner class that will provide the feature of jumping the cursor from one edit text to another edit text okay then we'll just minimize this class and we'll create another function so this will be private fun let's just name it as add text change listener in this function we will just uh we'll just add the change listener to the edit text so add text change listener and here we need to pass our class name which is edit text watcher this one and in here we just need to pass the edit text or view as you can see here we are passing view here we'll just duplicate this few time again this will be 2 this will be 3 this will be 4 this will be 5 and this will be 6 similarly this will be 2 this will be 3 and this will be six and we'll call this method just after calling the init method so yeah let's just minimize these two and now we will add on click listener to our verify button so verify button yeah verify button dot set on click listener he will collect the otp so let's just have comment collect otp from all the edit text edit text so let's just create one val uh let's just name it as a typed odp and this will be equals to our input otp one dot text dot to string plus input odb2 dot text dot tostring plus input odb3 dot text dot to string you can have this inside one bracket okay so then we can check if the typed otp is not empty not empty and then again inside that similarly we'll have check for length which will be equals to 6 will handle both else conditions in here as well we will display the toast like toast this and the message will be please enter otp then toast dot length short and dot show we'll copy this one we'll paste it over here as well and this time we'll type please enter correct otp so then if everything is fine then what we will do we'll create one credential variable so val credential this will be type of phone auth credentials equals to phone auth provider this one not get credentials and here we need to pass the our otp that we get passed from the previous activity and then the typed otp okay so inside the phone activity you can in on verification co completed we get phone auth credentials and we pass that credentials inside the sign in with phone or credential method so we can just copy this method from here and we need to add one thing here that if everything is successful let's just create one method here private fun send to main and here start activity intent not this contained on this to the main activity class dot java so if uh authenticate success if user is authenticated successfully will send him to the main activity i'll just copy this code we can just copy this two functions from here and i will paste that over here okay so we just need to call this method in in here so after the credentials after uh we create credential we can call this method just sign in with create auth credentials and we can pass this credentials there so yeah okay so this this much of code is enough for authenticating the user with phone otp but remember in the layout we also have this recent otp button so we need to make it work so for that uh we need to create another method just copy the options from here we'll copy this options and let's just minimize this minimize this minimize this we'll create one method which will be private fun recent verification verification code and in this method we'll paste the paste those options and you can see we need to pass the number here so val number of type string and we also need to copy the callbacks so again we'll move to the phone activity and we'll copy the callbacks we'll copy them and we'll paste the callbacks over here or we can just paste them over here okay so we'll come back here in a second so yeah okay so i guess we don't need to pass the parameters here as we already fetched the recent token and phone number and odp over here so they are we can access them over here as well so custom number let's name it as a phone number and after the set callbacks we can have set force resistant resending token method and this is important for resending the otp and we'll just pass the recent token there i guess uh that's enough we'll call this method uh when we click on the recent token text view but before that uh inside the callbacks we need to add some modification and we need to remove something so we'll just remove this stuff that we don't need here here we just need to make our otp equals to verification id and our token recent token is equal to token okay so when we click on the recent token what happens uh otp is sent to the user again and we are just setting that verification id means otp to our existing otp variable here we are just modifying its value and we are again modifying the recent token value so so if the user want to resend the otp again even after doing it one time so this will be helpful so yeah so after this what we will do our resend text view recent tv dot set on click list now and here we'll call the recent verification code method okay okay so yeah everything is done i guess uh we just need to work for this progress bar and the visibility of the recent otp okay so for visibility of this and otp we can create another method which will be private fun let's just named as a recent otp tv visibility and inside this first of all we will just say text will make all the edit text null two three four and five last one six resent tv dot visibility first of all we'll make it invisible at the start so and visible view dot invisible and will also make it disable so set enable or is enable and this will be false then we'll have one handler and inside the handler we'll write looper dot my looper dot post delayed enable and we need to pass another parameter which will be the duration so we want to display it only after 60 seconds so inside this we will write resend tv dot set visibility or visibility just view dot visible and will also make it enable so recent tv is enabled and make true okay then we need to call this method we'll call that method over here so we send otp visibility and we'll also call that method over here sorry send otp visibility okay so yeah when in oncreate we call this method all the inputs will be set to null and we will just make our our text view invisible and we'll also set it to false or like we will disable it and then we started one handler which will be which we use to delay something so we are just are delaying this visibility of the same tv so it will be visible after 60 seconds so yeah and when we click on the recent tv a recent text view then again we are calling that method so it will work the similar way it will just set all the otp edit text to null and it will make our make our recent tv invisible and false then after 60 second automatically it will be visible and it will be enabled so yeah i guess uh that's pretty much stuff okay we need to work on the progress bar as well so case we'll just create one private lady network for our progress bar so progress bar and this will be type of progress bar let's just initialize it in the init method so progress bar equals to find u by d r dot id dot otp progress bar i guess yeah so inside the init or so after the init we can just make our progress bar to invisible so view dot invisible and we'll make it visible when we click on the verify button so over here progress bar dot visibility will be visible so view dot visible and will make it invisible when we successfully sign in so before showing the toast progress bar dot visibility to view dot visible and i'll press alt ctrl l to reformat the code so yeah that's pretty much stuff now we'll try to run okay we need to again go to the main activity as well so it just it just have one button inside the main activity so you just have one button here and i'll not design it i'll just keep it simple i'll name it sign out i'll provided id as a sign out sign out button and inside the main activity similarly we will have private later network for auth which will be type of firebase auth and private latent valve for button so button is sign out button and type is button i'll not create init method here i'll just initialize it so firebase auth dot get instance and sign out button equals to find your id r dot id dot sign out button okay and sign out button will add on click listener on that sign out button so auth dot sign out so here we'll just start the activity will send user from main activity to phone activity after signing out so user can sign in again so we'll create one indent here and we'll pass this and phone activity class dot java okay we need to import the intent and yeah that's pretty much tough so now we will try to run the app and we'll see it's working or not okay so before installing the app uh we need to do one thing we need to copy this intent filter from here we need to cut it and we need to paste it inside the phone activity over here and we need to make our exported parameter as a true and now i'll try to run this app so as you can see it is installed and it is asking me for typing my number so i will type it and then i'll click on the send otp button as you can see the progress bar is visible now so as you can see we received the otp so as you can see i haven't typed the otp i just wait for this 60 seconds to get this text view visible which is reset otp now i'll click on the recent otp and we'll see if we get the otp again or not so the text view goes disappeared and as you can see it automatically signed in so yeah this is how it works that sign in with the callback method which we have let me just open the callbacks so in the otp activity we have this on verification completed method which gets triggered automatically so in our case this get triggered because we already send the otp to the user and we didn't type it but when we click on the recent otp and it again send that otp this method gets triggered it automatically help user to sign in so now we are in the main activity so i'll just click on the sign out now and i'll jump to the all the phone activity again and again i will type my number click on the send otp and this time i want to type the otp myself so seven seven seven nine six zero and i will click on the verify so yeah this again worked so yeah that's it for this video and if you like the tutorial you can subscribe to channel and if you open the uh firebase console you will see the new user has been added and i will provide the source code in the description box so if you have some errors you can just match your code with that or you can also dm me on the instagram at codingstuff070 so yeah that's it thank you for watching

Channel: CodingSTUFF

Views: 19,172

Keywords: android studio coding tutorial, android studio coding for beginners, android studio coding with harry, android studio coding tutorial hindi, belajar coding android studio, android studio coding cafe, coding stuff, codingstuff, stuff, coding, google, google sign in, firebase google, phone, phonenumber, mobile, mobilenumber, log in, auth, phone number, mobile number, phone number firebase, mobile number firebase, phone auth firebase, kotlin, mobile number firebase kotlin, kotlin phone auth

Id: zKa14ULHGBQ

Length: 45min 18sec (2718 seconds)

Published: Fri Jul 15 2022