Flutter - Twitter Authentication with Firebase | Tutorial | Firebase Auth

hello guys uh i hope you all in a good state of your health so today i'm going to teach you that how you can integrate a twitter login with firebase in your flutter project so let me show you that what we are going to do right first let me click on this button and after that it will take you to this okay so right now uh if you haven't installed a twitter app in your mobile so it will ask you for the credentials of your account but as you can see that i already installed my twitter app and i logged in with my twitter account so right now it's asking me that do you want this app to authorize to access your account information so so let me authorize app okay so as you can see in the background see that a unique id is generated so let me show you that on firebase as you can see that um we are signed in with twitter provider in our firebase so you can use this method to provide the users uh a functionality where they can use their twitter account to sign in with in in your app so without wasting time let's continue so let me create a new flutter project okay so it's asking me about the sdk path i'm keeping it as as it is so right now i need to define the project location let me add this let me add a new folder firebase twitter auth okay and just keep the default options as it is finish this so i think so so i don't need this code the comments section and i also don't need this classes as well so let me remove it okay so let me create a new or yeah let me create a new class in here twitter login screen press alt enter and import flutter material class and now we need to make our button like we did here okay so first scaffold apple after that we need to define the body alt enter at const modifier and here we need to center this child elevated button on pressed function and the child again so login okay then we need to define our method which can be login okay and we need to press alt enter and create method a sync okay done okay after that we need to open our firebase and go to console so i already created a project in on firebase so if you want to see that how you can create a project on firebase then you can check out my video i think so it may be flutter firebase with google authentication so you can check that video in in that specific video i'm showing it perfectly that how you can create a project on uh firebase and connect it with uh flutter so right now i'm adding a new app which will be android here i need to define my package name which i can get from android app level build.gradle and here i can see that com.example firebase twitter auth just copy this and paste it here after that we need to define our sha key so i showed you multiple times that how you can get it cd android and greatly signing report in the terminal you need to write these to command cd android it will take you to android directory and greatly signing with note it will generate a shaky for you okay it will take some time to generate to execute this command greatly okay it's executed successfully in 19 seconds okay now you need to copy this sha-1 copy this and paste it here register app okay oh yeah now you need to download this google services.json file okay i'm downloading this okay now you need to drag this file in your project and paste this file in the app folder okay it's done and you can close this okay now you need to proceed to the next step which is copying this class path and you need to open project level build.gradle and you need to paste this here after that you need to copy this apply plugin which will connect your json json file with with android project so now you need to open app level build.gradle okay then you can paste this here okay done hopefully our firebase is connected with our android project now you can press next continue to console and done it's connected okay so now you need to open the indication from left panel and you need to open sign in methods and you need to enable your twitter okay so we need two things api key and api secret key so let me show you that how you can get those things so now you need to open developers.twitter.com okay so now after that you need to when you click when you open this link then you need to sign in with your twitter account and after that it will take you to this screen and at at this screen you need to click on create an app so it's showing me that please apply for a twitter developer account okay so apply okay so at this point you need to define yourself that this will create an uh some sort of request for twitter developer portal that i need to use your apis and i am this and that kind of guy and you need to provide me access so i can use your apis in my app so after that right now i'm using academic teacher get started okay so at this point we need to provide a valid phone number so it will take me to this add phone number i okay now i need to provide the password re-enter your password so after that it will ask you to provide a valid phone number okay after providing a valid phone number i i have to log refresh this page and now it's providing me some sort of information and now i need to provide what's your name so basically this is a permanent name i can and this can't be changed after that so right now prog labs country is pakistan and highly experienced so i'm not required to send me updates for new newsletter or anything else so next legal entity name so prog labs and prog labs this one and website url is optional again pakistan how do you categorize your okay so it can be academic academic do you or will you have customers no so okay what's next how will you use the twitter api your data so you need to provide uh some sort of description that why do you need to use the twitter apis so let me write something okay so i just write wrote this that i need to use your aps for so i can teach my students so they can learn how they can connect this okay please describe you will uh are you planning to analyze twitter data no we are not planning to analyze twitter data and we are not uh providing a feature in our app so they can retweet or like or anything else so this will be new as well and do you plan to display tweets or aggregate data about twitter content outside twitter so no and will your product service analyze make twitter content or derived information available to a government government entity that should be no and next and this is our basically basic info and next developer agreement and policy okay so yeah and we need to agree according to the terms and conditions and submit application after submitting your application it will take almost two days to verify this your application so i am not waiting for two days so after that i will close this and i will show my other account where i already verified my account um after the application will be verified then you can see this type of dashboard when you open this developer.twitter.com and i already created an app so i need to click on this app option create app i need to provide the name flutter twitter auth and click next keys and tokens so if you remember that we need uh the api key and api secret key for our uh to enable this in firebase so i'm just copying this and api and after that we need to copy this aps-c qrikey okay so save okay so now you can see that it's enabled and after that we need to open our this again app settings and enable authentication settings edit we need to enable three legged oauth okay and this is the most critical part that we need to define our our callback url okay i will teach it teach you um when after this and now we need to open pub.dev and flutter fire clutter fire and we need to open this documentation social auth and just go back to yeah twitter login click on this and it will open your just copy this open your project again and open your pubspec dot yaml file and you need to paste this library here and we need to use firebase core as well if you remember that we need to link this with twitter credentials with our firebase project so firebase core and this one is perfect copy this and paste it here okay pubget okay after clicking pubget so as you can see that it downloaded two packages in our project twitter login firebase core okay so after that we need to open oh i mean there's an error so we need to define where it should go twitter login screen or twitter login screen perfect and we need to work on this file okay and we need to [Music] create a final twitter login new twitter login so if you remember that we need to define our api key in firebase so we just we can just copy that copy and paste it here api secret key copy and just paste it here yeah okay done and redirect uri so right now i am just writing flutter twitter login on this all right showing me the error oh yeah so we need to remove the new keyboard from here and after that we need to press await right away and twitter login dot login and dot then and after that final twitter auth credentials twitter auth uh provider async twitter auth provider dot credential why it's showing me the error let me check the package is perfect this is also perfect okay sorry i missed one package which i haven't x imported yet which is firebase auth upgrade okay okay so credential and yeah so i need to provide two things here one is access token which can be value dot x auth token and this one and the second one is secret and which can also be important from auth token secret okay so i provided these two things here and i need to pass these credentials to firebase auth dot instance dot sign in with credential and twitter auth credential that's it and we need to make some modifications in our manifest as well in android so i need to open this manifest file and after that we need to open authentication which social auth and after that twitter and we need to open this plugin again so we can see that which things we need to yeah intent filter basically we need to copy this line okay copy this and we need to we need to copy these five lines copy and open and we need to define right below this intent filter so android scheme and android scheme which and we can remove this and remember we defined a [Music] scheme here so we can just copy this and paste it here and after that we need to open our and we need to paste this again if you remember that we opened the app settings and enabled the three-legged oauth and i told you that we will do this after that okay so this one and we need to define our website as well froglabs.go and save so three leg oauth is enabled and let's okay everything is in perfect position so let me install this app on the real device okay i already connected my phone with this so as you can see that when i tried to install the app in my phone then it's showing me an error that minimum sdk is 17 required and my sdk is 16. so we can change this from here open the build.gradle in app folder and just increase this to 17 and try to install the app again so as you can see the app installed successfully so let's try and click login and as you can see that it's again asking me that we need to authorize this app click authorize app this may take a few moments okay so why it's not redirecting my app to my let me check it should redirect so let me check it at what i missed here [Music] that's perfect and um okay so it's api key api secret key redirect uri and what did i miss here android scheme is also perfect oh yeah remember so i need to remove this sorry now we need to install our app again let's see what happens so click login authorize app oh it's not again so let me uninstall this app and try to install this app again okay the app is installed successfully so let me try to login and authorize app and let me see oh so as you can see an error is occurred that no firebase app is initialized so we need to open our main file future void and async widgets ensure what was the command widgets oh yeah widget splitter binding dot insure initialize and await firebase app dot um firebase dot initialize app okay that's it now we need to run our app again okay restarted application click login authorize app okay so the user is created as per the yeah so as you can see that a user is created successfully junaid khan underscore jk and you can see the user u id and by using this method you can easily create provide users so they can use twitter for logging in in your application so let me show you that how you can log out okay so it's just an easy process you know you don't need to worry much so regarding just copy this for now and column because we need to create our row we need to create two buttons and same as it is button here for log out log out and we need to create a function method here async firebase auth and instance dot sign out and await i think so it's a promising function yeah okay so by using this you can sign out from the from the current user so main access alignment space around okay so now you can see there are two buttons login and log out so this will log out the user sign out event and this one basically this button is for logging in authorized app sign up sign in the user is signed in successfully and this is for log out sign out even so by using by using this complete method you can provide users a basic basic method for logging in in your application with their twitter accounts so subscribe our channel and press the bell icon so you don't miss a new video from our channel take care

Channel: Proglabs Official

Views: 180

Keywords: proglabs, android tutorials, beginners tutorials, twitter authentication, firebase authentication, firebase tutorial, firebase flutter, flutter twitter login, flutter twitter, flutter twitter api, Flutter - Twitter Authentication with Firebase, android tutorial, firebase with flutter, flutter tutorial, flutter, firebase, twitter, authentication, twitter login, login, how to, sign in, social login, twitter auth, programming, development

Id: pQh-rskvUWA

Length: 29min 5sec (1745 seconds)

Published: Wed Nov 10 2021