{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/email-authentication-flutter-firebase/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"b99f15e4-45cb-5600-8953-203980b1866c","excerpt":"In this article i will explain you step by step how you can add email authentication to your flutter firebase application Step 1: Create flutter project…","html":"<p>In this article i will explain you step by step how you can add email authentication to your flutter firebase application</p>\n<h4>Step 1: Create flutter project , ignore this step if you have already created</h4>\n<pre><code class=\"language-js\">flutter create flutter_firebase_auth\n</code></pre>\n<h4>Step 2: Add Flutter Dependencies for firebase</h4>\n<pre><code class=\"language-js\">dependencies:\n firebase_auth: ^1.0.1 # add this line\n firebase_core: ^1.0.2 # add this line\n</code></pre>\n<p>Run command <strong><em>flutter pub get</em></strong> to install the package</p>\n<p>You can use the package by importing like below</p>\n<pre><code class=\"language-js\">import \"package:firebase_auth/firebase_auth.dart\";\nimport \"package:firebase_core/firebase_core.dart\";\n</code></pre>\n<h4>Step 3: Create Firebase Project</h4>\n<ul>\n<li>\n<p>Visit this url <a href=\"https://console.firebase.google.com/u/0/\">https://console.firebase.google.com/u/0/</a> and create a new project</p>\n</li>\n<li>\n<p>Once project is created you can integrate with android and ios application by clicking on android and ios icon on dashboard</p>\n</li>\n</ul>\n<h4>Step 4: Configuring IOS App</h4>\n<ul>\n<li>For registering the iOS app, you have to provide unique iOS bundle ID – your iOS app bundle identifier. You can find it in the general setting of Xcode</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-flutter-1.png\" alt=\"add-app-to-firebase\"></p>\n<ul>\n<li>After filling the required fields, you’ll see something like this. Further click on Download GoogleServices-Info.plist and place it in MyApplication folder as shown below.</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-flutter-2.png\" alt=\"add-info-file\"></p>\n<ul>\n<li>\n<p>Skip step 3 and 4</p>\n</li>\n<li>\n<p>Hit continue to complete the process</p>\n</li>\n</ul>\n<h4>Step 5: Configuring Android App</h4>\n<ul>\n<li>For registering the Android app, you have to provide a unique package name. For that, you can find it at android>app>build.gradle</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-flutter-3.png\" alt=\"add-sha1\"></p>\n<ul>\n<li>\n<p>You will also need the Debug signing certificate SHA-1. You can get that by running the following command in the project directory.</p>\n<pre><code class=\"language-js\"> cd android &#x26;&#x26; ./gradlew signingReport\n</code></pre>\n<p>Copy the SHA1 value and paste it into the Firebase console.</p>\n</li>\n<li>\n<p>Now, proceeding to the next step, you will have to download the google-services.json file. You should place this file in the android/app directory.</p>\n</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-flutter-4.png\" alt=\"download-google-service.json\"></p>\n<ul>\n<li>You can skip the next step as we are using: Firebase core and Firebase auth packages. Click ‘Continue to Console’ to complete the process.</li>\n</ul>\n<h4>Step 6: Enable Email/Password Authentication in Firebase</h4>\n<ul>\n<li>\n<p>Go to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.</p>\n</li>\n<li>\n<p>Next, you should enable email authentication in the sign-in methods. Once you’ve enabled it, press Save.</p>\n</li>\n</ul>\n<h4>Step 7: Initialize firebase app</h4>\n<p>Open main.dart and use the following code snippet to initialize Firebase App.</p>\n<pre><code class=\"language-js\">future main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  await Firebase.initializeApp();\n  runApp(MyApp());\n}\n</code></pre>\n<h4>Step 8: Create Utility file for Authentication</h4>\n<p>Create a file, name it according to your choice; and use it as a helper file for firebase authentication and copy paste the following code snippet</p>\n<pre><code class=\"language-js\">import 'package:firebase_auth/firebase_auth.dart';\n\nclass AuthenticationHelper {\n  final FirebaseAuth _auth = FirebaseAuth.instance;\n  get user => _auth.currentUser;\n\n //SIGN UP METHOD\n  Future signUp({String email, String password}) async {\n    try {\n      await _auth.createUserWithEmailAndPassword(\n        email: email,\n        password: password,\n      );\n      return null;\n    } on FirebaseAuthException catch (e) {\n      return e.message;\n    }\n  }\n\n  //SIGN IN METHOD\n  Future signIn({String email, String password}) async {\n    try {\n      await _auth.signInWithEmailAndPassword(email: email, password: password);\n      return null;\n    } on FirebaseAuthException catch (e) {\n      return e.message;\n    }\n  }\n\n  //SIGN OUT METHOD\n  Future signOut() async {\n    await _auth.signOut();\n\n    print('signout');\n  }\n}\n</code></pre>\n<h4>Step 9: Create component for login and signup and call the login and signup method from helper file</h4>\n<pre><code class=\"language-js\">//Sign up\nAuthenticationUtility()\n   .signUp(email: email, password: password)\n   .then((result) {\n    \tif (result == null) {\n        Navigator.pushReplacement(context,\n           MaterialPageRoute(builder: (context) => Home()));\n       } else {\n          Scaffold.of(context).showSnackBar(SnackBar(\n          content: Text(\n              result,\n              style: TextStyle(fontSize: 16),\n             ),\n          ));\n       }\n  });\n</code></pre>\n<pre><code class=\"language-js\">//sign in\nAuthenticationHelper()\n   .signIn(email: email, password: password)\n      .then((result) {\n         if (result == null) {\n           Navigator.pushReplacement(context,\n             MaterialPageRoute(builder: (context) => Home()));\n          } else {\n             Scaffold.of(context).showSnackBar(SnackBar(\n                 content: Text(\n                 result,\n                style: TextStyle(fontSize: 16),\n                   ),\n              ));\n           }\n      });\n</code></pre>","fields":{"slug":"/email-authentication-flutter-firebase/"},"frontmatter":{"title":"Email authentication with firebase in flutter android and ios","date":"August 30, 2022","description":"In this article i will explain you step by step how you can add email authentication with firebase in your flutter android and ios application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/email-authentication-firebase.jpeg"}},"previous":{"fields":{"slug":"/docker-wordpress-setup-with-mysql-phpmyadmin/"},"frontmatter":{"title":"Wordpress setup with MySql and PhpMyAdmin using docker | Docker wordpress tutorial","date":"August 10, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/WordpressDocker.jpg"}},"next":{"fields":{"slug":"/email-authentication-with-firebase-in-nodejs/"},"frontmatter":{"title":"Email authentication with firebase in nodejs","date":"September 01, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/email-authentication-firebase-nodejs.jpeg"}}},"pageContext":{"id":"b99f15e4-45cb-5600-8953-203980b1866c","previousPostId":"43e66af1-2091-5ed9-98ad-83c6da548d47","nextPostId":"8882478b-dd67-5981-bdf6-e9baee7c64c9"}},
    "staticQueryHashes": ["3860684146"]}