Download to read offline
Uploaded byKaty Slemon
271 views
Email authentication using firebase auth + flutter
This document is a tutorial that guides users on implementing email authentication in a Flutter app using Firebase Authentication. It covers the necessary setup steps, including creating a Flutter project, configuring Firebase, and creating authentication functionality with code snippets for sign-up and sign-in processes. The combination of Flutter and Firebase is presented as a powerful solution for developing mobile applications with an emphasis on user authentication.
Related topics:
Recommended
More Related Content
What's hot
Similar to Email authentication using firebase auth + flutter
More from Katy Slemon
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Email authentication using firebase auth + flutter
- 1.EmailAuthenticationusing FirebaseAuth +Flutterwww.bacancytechnology.com
- 2.Create Flutter appAddDependenciesCreate Firebase ProjectEnable Firebase Email AuthenticationInitialize Firebase AppCreate Helper Class for AuthenticationCreate ComponentsTable of Contents1. Introduction2. Tutorial Goal: Email Authentication usingFirebase Auth + Flutter3. What is Firebase Auth?4. Steps to implement Email Authenticationusing Firebase Auth + Flutter5. Conclusion
- 3.
- 4.Rarely have weseen that mobileapplications are connected to the backend.There are other platforms- AWS or Azure,but no platform could stand Firebase. Withthe help of Firebase and Flutter, one candevelop mobile applications in a better way.In this tutorial, we will learn about buildinga demo application from scratch andimplementing Email Authentication usingFirebase Auth + Flutter.Before getting started with the demo, let’ssee what we are building in this tutorial.
- 5.
- 6.
- 7.
- 8.Most of theapplications requireauthentication to verify the user’s identity.Firebase Authentication allows you to useits back-end services by providing SDKsand convenient UI libraries for userauthentication in your app. It makes theprocess less complicated and easy todevelop. One can authenticate the user withthe help of passwords, phone numbers, oridentity providers ( Facebook, Google, andTwitter)Click here to watch the video introducingFirebase Auth.
- 9.Email/password authenticationSign inwith Google, Apple, Facebook,Twitter, GithubPhone number authenticationCustom authenticationAnonymous authenticationNow, let’s see what does FirebaseAuthentication provides:From the list mentioned above, I’ll becovering Email and passwordauthentication using Firebase Auth + Flutterapp. So without further ado, let’s get startedwith some technical work.
- 10.
- 11.Here’s the entiresource code for the demoapplication – Flutter Firebase Auth Github.Create Flutter projectRun the below command to create a flutterproject. You can name it anything here –flutter_firebase_authAdd dependenciesUpdate your pubspec.yaml file to adddependencies.flutter create flutter_firebase_authdependencies:flutter_test:sdk: fluttercupertino_icons: ^1.0.2firebase_auth: ^1.0.1 # add this linefirebase_core: ^1.0.2 # add this line
- 12.Run the followingcommand to install thepackages.flutter pub getYour pubspec.yaml file would looksomething like this-
- 13.For using thesepackages, we need toimport them as mentioned below-import'package:firebase_auth/firebase_auth.dart';import'package:firebase_core/firebase_core.dart';Further moving towards the initialFirebase Setup.Create Firebase ProjectWe need to create a Firebase project; for that,visit the Firebase console. Start by adding anew project, giving it a name, agreeing to allthey’ve asked, and click ‘Create Project.’Once you’re done creating the project, it’s timeto integrate it with Android and iOSapplications.
- 14.Add Android AppRegisteryour Android application as shownin the below screenshot-
- 15.After filling therequired fields, you’ll seesomething like this-Follow the instructions; Download google-services.json and put it in MyApplication/appfolder.You can skip the next step as we are using:Firebase core and Firebase auth packages.Click ‘Continue to Console’ to complete theprocess.
- 16.Okay, so thiswas about integrating theAndroid app. Now, let’s follow the samesteps for integrating the iOS app.Add iOS AppClick on Add App
- 17.Click on iOSFillout the required fields as shown below-Further Download GoogleServices-Info.plistand put it in MyApplication folderas shown below-
- 18.For Linux/windows, putthis file inios/Runner/Directory.Skip steps three and four as we are usingpackages. Hit ‘Continue to console’ forcompleting the process.
- 19.Enable Firebase EmailAuthenticationOn visiting the Firebase dashboard, click‘Authentication.’Under the Sign-in method clickEmail/Password and enable it using thetoggle button.
- 20.So, we aredone setting and integratingFirebase Authentication with the Flutterapplication.Initialize Firebase AppOpen main.dart and use the following codesnippet to initialize Firebase App.// main.dartfuture main() async {WidgetsFlutterBinding.ensureInitialized();awaitFirebase.initializeApp();runApp(MyApp());}
- 21.Create Helper Classfor AuthenticationCreate a file, name it according to yourchoice; here authentication.dart and use thefollowing code for creating helper class forauthentication.// authentication.dartimport'package:firebase_auth/firebase_auth.dart';class AuthenticationHelper {final FirebaseAuth _auth =FirebaseAuth.instance;get user => _auth.currentUser;//SIGN UP METHODFuture signUp({String email, Stringpassword}) async {try {
- 22.await_auth.createUserWithEmailAndPassword(email: email,password: password,);returnnull;} on FirebaseAuthException catch (e) {return e.message;}}//SIGN IN METHODFuture signIn({String email, Stringpassword}) async {try {await_auth.signInWithEmailAndPassword(email: email, password: password);return null;
- 23.} on FirebaseAuthExceptioncatch (e) {return e.message;}}//SIGN OUT METHODFuture signOut() async {await _auth.signOut();print('signout');}}We will call the AuthenticationHelper fromSignUp and Login components on clickingthe signup and login button, respectively.The function will take two parameters andthen further pass it for FirebaseAuthentication.
- 24.Create componentsCreate twocomponents for login andsignup – Login.dart and Signup.dart,respectively.Call AuthenticationHelper, which wecreated in the above step.Use the following code snippet to performon clicking the Sign-Up button.
- 25.// Get usernameand password from theuser.Pass the data to// helper methodAuthenticationHelper().signUp(email: email, password:password).then((result) {if (result == null) {Navigator.pushReplacement(context,MaterialPageRoute(builder:(context) => Home()));} else {Scaffold.of(context).showSnackBar(SnackBar(// Signup.dart
- 26.content: Text(result,style: TextStyle(fontSize:16),),));}});Use the following code snippet to performon clicking the Login button.// Login.dart
- 27.AuthenticationHelper().signIn(email: email, password:password).then((result) {if (result == null) {Navigator.pushReplacement(context,MaterialPageRoute(builder: (context)=> Home()));} else {Scaffold.of(context).showSnackBar(SnackBar(content: Text(result,style: TextStyle(fontSize: 16),),));}});
- 28.The function takestwo arguments: emailand password. On successfully executingthe function and returning no errors, i.e.,result == null, the app will be redirected tothe Home page.So this was all about implementing EmailAuthentication using FirebaseAuthentication + Flutter. I hope yourpurpose of landing on this tutorial hasserved you well.
- 29.
- 30.Flutter is apopular framework fordeveloping mobile applications at ourease. The combination of Flutter andFirebase makes the development processmore straightforward than before. We atBacancy Technology have skillful anddedicate developers having expertisewith Flutter as well as Firebase. In caseyou require a helping hand for buildingyour project, then contact us and hireFlutter app developer.
- 31.