Flutter Firebase Instagram Tutorial

Firebase Setup and Authentication | Flutter Firebase Instagram Tutorial 2019 (Ep 2)

hi everyone I'm Markus Singh in this video we're going to be setting up firebase migrating our Android project to Android X and authenticating our

users let's first start by heading over to console dot firebase google.com and clicking add project our project name can be flutter Instagram – clone it continued we want

to keep Google Analytics enabled and then our Google Analytics account could just be default account for firebase hit create project and this usually takes about a minute

and now that our project is ready we continue and now this is our fire based console so the first thing we want to set up is our iOS app let's click iOS they ask for our bundle identifier we

can find that by going to our code editor right clicking iOS and hitting open an Xcode a bundle identifier calmed I example dot flutter Instagram clone or you can just

copy that and then paste it right here you can also change the bundle identifier to your own domain register app and then we get a config file that we have to download and now we have the

Google service info.plist that we can drag into our excellent project and then we hit next since we're using flutter we don't actually have to do pod knit or anything when we run our flutter build

it automatically runs these commands and we can skip through this and just hit skip this step let's just check if our iOS app is working go to visual studio code and

then our simulator and our iOS app is live so what we wanted to do now is go to our pub spec ml and actually add the necessary packages for firebase gonna have them open up here and I'll link

them in the description the first one is firebase core and we can go to installing and just copy this in and put under Cupertino icons the next one is fire based analytics

[Music] firebase auth for authentication and lastly cloud fire store we need save and then flutter is going to run pub get and now we see that we had no error with

the packages so now if we restart our iOS app from scratch we hit f5 and now our iOS app is launched and we can see in the debug console that it connected to firebase so we're done setting up the

iOS app and now I can move on to the Android app let's go back to our firebase console click add app select Android and then same thing they're asking for the identifier in the build

Gradle file so if we go to our code editor again Android and then inside app build.gradle and then this is our application ID so I'm just going to change it to be the same as our iOS app

then paste I did and since we're not doing Google signing at the moment we can just register the app without making a debug signing certificate now we can download the Google services

JSON it next and now go back to es code and now we have to drag in the Google desk services Dutch JSON into the app folder did it save and following these

instructions so if we go to our project level build a cradle we can see that we have to add this line [Music] inside dependencies paste that in and

then we have to check if Google's in both these it save note our other build a cradle file and then make sure that we have implementation for firebase analytics

put that there and make sure we apply the plugin at the very bottom and since we want to migrate to Android X we have to change these androids to have it next at the end and then also change these

versions so we can change this to one point one point zero and three point one point zero we also need to add something called multi decks to dependencies so Android X dot multi decks multi decks

two point zero zero for our default config we have to add multi ducts enable true and then inside our Gradle dot properties we have to add Android use Android X and Android enabled jet afire

and set those both equal to true now if we stop our iOS build and then go to one of our files and then launch our Android emulator [Music]

we see that the UI overflowed and we can fix this by going to our signup screen we can go to column and wrap it in a container set the height to media query not of context size height and that's

going to be the height of the whole entire screen and then wrap the container in a scroll single child scroll view widget and we can remove Center if we had saved there let's just

refresh go to sign up and then we see that we can scroll up and down and there's no overflow so let's do the same thing for our login screen and now let's go back to firebase click

Next on that skip this step and now we want to go to authentication click sign-in method and we have to enable email and password so enable save and now users are able to log in with the

with an email and password so if we go to database we can set up our cloud firestore database let's start in test mode since we don't have any accounts yet and then once we set up the accounts

we can change this back to lock mode and since I'm in the u.s. my fire sir location is US Central in our databases setup firestore is a no sequel database that consists of

collections and documents for our project right now we're trying to set up a users collection that consists of user documents so for example if we have a users collection and then the user ID we

want to store the name swings a Marcus the email of the user and a profile image and so when we set up our login and sign up right now we're going to be adding a new user to

the database in the authentication and at the same time we're also going to be updating this users collection with another user document storing all this information so let's go back to our

editor and let's make a new screen let's call it feed screen and this will be the main screen that users see when they log in so it's important material create a stateful widget feed screen and then we

have to add the ID of the feed screen so we can navigate to it by using a names root scaffold and then we'll change the background color to blue so when we do navigate that we know that we change

screens now in our main dart we want to set up a new function called widget get screen ID and the point of this is so we can navigate to the correct screen when a user logs in so we're going to

set up a listener to listen to the firebase authentication and if the authentication changes then we're gonna send the user straight to the feed screen and if they are not logged in

then we're going to send them to the login screen so return dreambuilder firebase user stream firebase off that instance dot on off state changed then builder build context context snapshot

now we just check if the snapshot has data and if it has data that means the user is logged in so we send them to the feed screen else we send them to the login screen now let's set up our login

and sign up so I want to keep all of our signup logic and authentication logic in one file so inside Lib let's make a new folder called services and off service dot dark

[Music] inside this file we're going to have all of our authentication logic so we don't have to keep splitting it across our files and we can easily call it from by

just instantiating all service and then using the function so our first the first thing we have to do is static final auth equals firebase off constants let's import that and want to sign up a

user authors the way for us to communicate with the firebase authentication SDK so static void sign-up user will take you to build context so we can navigate after they

sign up starting name string email and string password if to import material and we're going to use a try-catch block because if the signup fails then it's going to throw an exception and we just

print the exception there so inside our try block we want to have an auth result and a wait because this function will be async then we use create user with email and password which takes in an email and

password a sync and an author result contains a firebase user and we'll call it signed in user equals the auth result dot user and you can find that out by just holding command on Mac and hovering

over and we see that final firebase user user now I want to check if the signed in user is not equal to null which means that a user was returned and then we want to use firestore so let's make

another static variable up here called firestore and that's gonna communicate with the firestore database import the package clog fire store go into collection users dot document

signed in user dot UID so we're going to the users collection going to the document of the user and then setting that users data and like we talked about before we want to store the

email name and profile and material name name email email and profile image or l we can just leave that as an empty string for now and then after they're done signing up we can just navigate

them to the feed screen by using push replacement named and then feed screen ID we're using push replacement named instead of just push because when the user signs up we don't want them to be

able to segue back to the login screen now hit save if we go back to our sign up screen we can log the user in with firebase right here by doing all service dot sign up user and it takes the name

email and password which we already validated using the validator from last video once it save go to sign up if we hit sign up then we can see that or we forgot to add the route so it's going to

mean that dart then feed screen dot ID context feed screen it save restart the app and we can see that we just logged in there we also see that authentication we're now a user inside the app and we

logged in when we restarted the app because when we restarted the apical to get screen ID and a checked if we were logged in by using firebase all thanks and sat on auth state changed

and because we're logged in we there was snapshot data and that's why it's not too straight to the feed screen so now if we go to our feed screen let's add a button to log out body let's enter a

flat button and we'll make a logout function in a second so inside all service that's right static void logout and that'll take in bold context because we have to segue

when we log out we just call it auth dot sign out user so I know and then navigator we want to push a replacement so the user can't just segue back into the app by dragging the screen then we

import login screen it save now if we get logout it sends a straight to the login screen and just to make sure signup works we can do it again [Music]

yep and then we start the app and then we're still logged in now let's get logging working we can write a logging function right here the static void login it's been taking an email and a

password it'll be an async function so if we do off dot sign-in with email and password you can take the email and the password now if we go to login screen go to our

submit and then import off service dot Lion email and password and save that we can type in our email and our password hit login we need to close the app and restart it

and now if we type in an email login it should work good log in and then we automatically log in because even though we're not calling a navigator in this function when we started the app we set

up a screen builder and that's checking if these were ever signs inter logs out and since the snapshot has data since that returns true we get the feed screen automatically then we log out sign up

works login works and if we go to the firebase database we see that the accounts we made be at be calm and mark Singh dev the documents were added to the collection and this one was the

first one we made when we're this was the example document we made so thanks for watching guys remember to start the repository on github and to like the video and subscribe to my channel see

you in the next video

Welcome to my Flutter Firebase Instagram tutorial series where you will learn Flutter and create amazing apps using Dart. In this video, we setup Firebase, migrate our Android project to AndroidX, and authenticate our users. Throughout this series we will implement and interact with the Cloud Firestore database, model data in Cloud Firestore, learn Cloud functions, and more!

» Resources
Source Code: https://github.com/MarcusNg/flutter_instagram_clone
Flutter Packages
Firebase Core: https://pub.dev/packages/firebase_core#-readme-tab-
Firebase Analytics: https://pub.dev/packages/firebase_analytics#-readme-tab-
Firebase Auth: https://pub.dev/packages/firebase_auth#-installing-tab-
Cloud Firestore: https://pub.dev/packages/cloud_firestore#-installing-tab-
AndroidX Dependency Versions: https://developer.android.com/training/testing/set-up-project

» Flutter and SQFLite Udemy Course Coupon
https://www.udemy.com/course/flutter-and-sqflite/?couponCode=749216595DBD298E3599

» Studying for coding interviews?
https://algoexpert.io/marcus
Use promo code “marcus” for a discount!

» Socials
GitHub: https://github.com/MarcusNg
Twitter: https://twitter.com/MarcusLNg

» My Gear*
Logitech Master MX 2S Wireless Mouse: https://amzn.to/35BZoYy
AirPods 2: https://amzn.to/2MdpJVb
Apple Magic Keyboard: https://amzn.to/2nCXqpu
Blue Yeti USB Microphone: https://amzn.to/32cs6wM
JBL Charge 3 Bluetooth Speaker: https://amzn.to/2IZuxeT

*Affiliate links

#Flutter #FlutterFirebase #CloudFirestore