Flutter Firebase Microsoft Auth | Azure AD #flutter #microsoft #azure

hello flid wiers welcome to another video on E in this video we are going to try something different with Firebase we are going to sign in a user in a Flur application using Firebase Microsoft art method and as far as I think there might be very few people who have done this before especially in the beginners so this video is going to be very helpful for you and all you have to do is to stay tuned till the end and let's let's get started so first thing first you need to create your account in the Azor microsoft.com and to come to this page all you have to do is to search Azor portal and then click the first one then this will navigate you first in here the same page that I show you in here so the Azor portal is basically a web-based console provided by the Microsoft that allows us to manage all the Azo resources in one place once you're sign in by putting your credentials your car details and go with free trial you will see this page on your screen and remember one thing you have to put your car details and go with free trial in order to get the Azor Cloud resources to work so this is a very crucial step that you have to carry out so once you're signed in next you need to register your application with the asor active directory to obtain the cral for the Microsoft signin so here you have to search for the app Reg registrations and click the first one app registration this will take you in here where you have to go for new registration because you won't have any new application registered when you first come in here so you have to go with new registration here you have to put the name and then you have to select the accounts in any organizational directory any Microsoft intro idant multitenant and personal Microsoft accounts for example Skype or Xbox so that would be the supported account types for your application and then here you need to select the platform and then we are going to do it for the web because in flare application we will use a provider sign in method from the fireb a method and this will eventually take us to the web so here in the Azor Cloud we will register an application with the web and then from the farbas we will use a link that will be provided by the farbas authentication method for the Microsoft when we go to the farbas console and try to enable the Microsoft o method for the Firebase so you will get to know about this once we get here so you have to select this and then put your application name and register so once you have done this your application will be registered and then I will try to go back because I already have created one so I will discard all the changes and then agree with the GoBack in my all applications I have already one application that is working app where I have the client ID in here so I will go in here inside this app and I will get the details like this I have my application ID the client ID and the object ID and the directory tenant ID and then we have one credit initial one secret already created and the redirect U eyes application ID you are you will get all these information when you click each of this link so once your application is registered the next important step that we have to do is to go to the certificates and secrets and create one secret for our farb best application that will be used in the method of the farus so I already have one working secret created but we will still create one new secret to show you how this works so I will do working Secret to and then add the secret so this will take a while and your secret will be created and this will appear directly in here so you have to directly copy it from here otherwise it will become like this once you refresh the page so I will copy this client secret and then we need a Firebase project to use that client Secret in here and also in the overview the our application client I so these two fields are required in there so once you're signed in in the Azor portal and then you have registered your application you got everything you need now the next step you have to do is to go and create a farb best project and then set it up with your flare application and I already have this task done so if you don't know how to set up fire bre with a flare application you can watch this video where I taught how you can set up a far best project in your flare application using flut fire CLI and also if you don't know how to get started with flutter you can watch this s weeks of flter and fire bester board camp where initially I taught setting a flare SD C so anyways once you have fireb best project and it's set up with a Flur application then you have to go to the build and then click this authentication you will get the authentication then you will see a popup then simply click on the get started and you will get here you might have you might not have the users in here then you have to enable a sign in method to use that signin Provider from the Firebase so in this video we will this time go for the Microsoft and we will enable this and here the application ID will be application ID that we have here P it right here and then the client secret will be that secret that we have here I'll copy this and paste it in here and then we have to add the redirect URL in the application that we have created so once we have this set up we will save this I have copied this URL this signin provider is enabled now now I can go to the authentication and here I already have one redirect Ur I added because previously I already have done this in my test application and that was WhatsApp so I will add the URI and pass in here that is for fire best demo this time and I will go for add this URI that's it now delete this one and save this place also this will update the application authentication so now once you have this thing set up now this time is to go to the flut application and start writing code and see the result of it so I already have this application Nam new flutter app where I have already set up the Firebase using flutter fire Li and I have two pages of login page which is doing nothing for now and the homepage here for displaying the U ID and the display name and the email once the user is authenticated so now we'll go to the login page and when the onpress is called we will try to sign in a user with the provider of the microsoft.com so first we need the O provider and the provider will be the microsoft.com as simple as that one variable and O provider is provided by the farb best a and then we simply specified our Microsoft art provider then once you have this variable you have your provider Next Step you have to do is to set up the provider custom parameters and then in the parameters you have to set your tenant as your tenant ID a tenant ID is basically a unique identifier in the cloud-based Microsoft Services it is important for for identity and access management and it pinpoints a specific organization or company within the Microsoft cloud environment this makur only authorized users from the particular tenant or organization can access the resources they are permitted to also it's recommended to keep the tenant ID secret to maintain a strong security for your Azo resources and from where you can take this tent ID simply move to your Azor portal and then simply click this here and navigate to the Microsoft intro ID once you have here then here you will find the tenant ID here it is the tenant ID you can copy that and simply go for besting it in here and some people sometime misunderstand with the tenant ID as I did when I was trying to do this I put the application ID here it is go back the application ID the this ID in place of tenant and I was getting unexpected years and I also tried this ID because I was unable to find where is the tenant ID placed of my Azor Cloud environment so if people sometime misunderstand this so your tenant ID is actually located in the Microsoft intra ID and you have to use this one and not the others so once you have this you have set the custom parameters as your tenant as simple as that next thing you have to do simply AIT from the far best instance sign in with provider passing that provider that we have created and make this asynchronous since we are performing an asynchronous task which is a future of user credential so once this is done our user will be signed in using Microsoft provider and then to change the stat and once the user is signed into the application then we have to navigate user to the homepage we have to come to the main page here we will wrap this login page with a stream Builder to listen to the changes of the authentication status changes and then based on that we will navigate user to the different pages that we want to for example home if is signed in and if it's not then the login page so we will do here the user since the method will be returning a Firebase user that we calling and we will do Firebase au. instance. auate changes to listen to the Au State changes and methods can't be involved in a constant Expressions yes we have to remove the constant and then instead of the login page directly returning we will check if the snapshot. has data equal equal to false or we can say true and then we will simply access the final us user equal to snapshot. dat which is the user and then simply we will return here the home page and simply go to the homepage now and this will accept a parameter of user that will be the Firebase User make it nullable and we will do it user passing it in the Constructor and simply accessing the information here with string interpolation user dot uh U ID or it can be the yes the U ID and then for the name the display name we are going to do user. display name and for the email we will do the user. email and that's it then we have to put the assertion operator which means that there won't be n if the user is already signed in and once we are done with this in the else condition here we will return the login page and this is going to accept won't be constant though it will be user as the user and the login page will be constant since it has nothing to pulse so once we have this and we have set up the logic for that as simple as that these three line of codes now we can H start the application and then try with the farb Microsoft odd method so once the application hard starts we will open up the console and then we will click this sign in with Microsoft method it is doing something unable to match Des Behavior ignoring far best because it value was n and I think that will be because of I don't have the internet connection so I'm going to just start this emulator and try again so once I have the internet connection I will sign in with my Microsoft again this time and this will take me to a web browser and where I have to put my credential design in with Microsoft so I already had put my credential and this directly navigate me in here by giving me the my U ID my display name and my account and if you are signing in for the first time this will ask you for the email in the Microsoft Tab and your password and then you have to allow some permissions and once you have done with this this will send you back in here now the user is signed in so you can see I'm no more on the homepage I'm no more on the login page and I'm on the homepage and I have received the U ID display name and the email and this condition the first condition is true now the snapshot has data and now if you visit our fireb project here we can go to the users we got the ID in here and you can always sign in with some other email and this will appear in here with the providers of Microsoft and one more thing that I wanted to tell you is that in some cases if the authentication of the Microsoft didn't work you can always head on over to the learn microsoft.com this site in here learn. microsoft.com they have documented all the relevant errors and error codes and provide very good documentation to fix the particular error I myself while doing Microsoft in Flur encountered many errors and I solve all of them with just their very helpful documentation about the errors and the fixes of the error here you can see they have a lot of errors and their articles how to fix these specific errors and I recently fixed this one error that's why I am on this article learn on the learn microsoft.com and while doing Microsoft o in Firebase if you face some error for example analid certificate hash es so what you have to do is to move to your Firebase project and go to the project settings and then come all the way down and select your fireb best Android project and currently the application of the Android that my app is running on is new flut app the Android one you have to hward this question mark and will click this link this will take you in here by using these commands you can generate the Sha fingerprint certificates and and simply add it in your fireb project of the underr then that error will disappear and your Microsoft a on FL application will start working and the same logic here that I wrote for mobile will work on the web also what you have to do is simply change the sign in with popup and that's it since it's already coded in here this method is only available on the web platform so the sign in popup method you can use for the web also and remember the same code will work for the web also for example here from the console I run the same application in flitter web by running the flter Run minus the Chrome web render HTML and once this is run you will see the window like this and once you click this sign with Microsoft this will take you here and here you can write your email for example I write my email and and go for the next and this will now require the password now here I will put my password and go for the sign in and once it's done I will save it I will say don't show this again yes St sign in and previously I Al I already did this test signing there so I directly sign in and it didn't show me the putting your email and password and then to get these results so you can see I got the uid display name and the email the same that I have in the Firebase so this is also working in the web and also in the mobile so that's how is the fireb Microsoft authentication so that's it for this video and to be updated with all the videos like this subscribe to e qul and I will see you in the next video until that happy fluttering

Channel: eTechViral

Views: 2,584

Keywords: flutter, firebase, microsoft, azure, firebase microsoft auth, flutter firebase microsoft auth, how to sign in with microsoft flutter and firebase, azure active directory, azure portal, flutter and firebase, whats new in flutter, flutter microsoft, how to login with microsoft, microsoft authentication, How to sign a Azure AD user into Firebase in a Flutter mobile app?, Authenticate Using Microsoft on Android, Authentication, firebase_auth, Flutter Firebase Auth Microsoft Mobile platforms

Id: dT73ztftv0U

Length: 17min 22sec (1042 seconds)

Published: Sat Mar 09 2024