{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/react-native-firebase-setup-javascript/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"af9dd2a0-26c0-59de-af5d-062d97ae4d52","excerpt":"In this article i will explain you step by step how you can add firebase to your react native application and authenticate\nwith email Step 1: Create a new…","html":"<p>In this article i will explain you step by step how you can add firebase to your react native application and authenticate\nwith email</p>\n<h4>Step 1: Create a new project</h4>\n<ul>\n<li>\n<p>Go to this link <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 on dashboard you will see the following screen click on android icon to create new android app</p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-in-react-native-1.png\" alt=\"add-app-to-firebase\"></p>\n</li>\n<li>\n<p>You will see below screen</p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-in-react-native-2.png\" alt=\"add-sha1\"></p>\n</li>\n<li>\n<p>You can find the package name in the AndroidManifest.xml file which is located in android/app/src/main/.</p>\n</li>\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<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Email-auth-with-firebase-in-react-native-3.png\" alt=\"download-google-service.json\"></p>\n</li>\n<li>\n<p>After adding the file, proceed to the next step. It will ask you to add some configurations to Root-level (project-level) Gradle file (<project>/build.gradle).</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">buildscript {\n  repositories {\n    // Make sure that you have the following two repositories\n    google()  // Google's Maven repository\n    mavenCentral()  // Maven Central repository\n\n  }\n  dependencies {\n    ...\n    // Add the dependency for the Google services Gradle plugin\n    classpath 'com.google.gms:google-services:4.3.13'\n\n  }\n}\n\nallprojects {\n  ...\n  repositories {\n    // Make sure that you have the following two repositories\n    google()  // Google's Maven repository\n    mavenCentral()  // Maven Central repository\n\n  }\n}\n</code></pre>\n<ul>\n<li>Add the configuration to the Module (app-level) Gradle file (<project>/<app-module>/build.gradle):</li>\n</ul>\n<pre><code class=\"language-js\">plugins {\n  id 'com.android.application'\n\n  // Add the Google services Gradle plugin\n  id 'com.google.gms.google-services'\n\n  ...\n}\n\ndependencies {\n  // Add these lines\n  implementation platform('com.google.firebase:firebase-bom:30.4.1')\n  implementation 'com.google.firebase:firebase-auth'\n}\n</code></pre>\n<ul>\n<li>As a next step install the following package in your application</li>\n</ul>\n<pre><code class=\"language-js\">npm install @react-native-firebase/app\n</code></pre>\n<h4>Step 2: Setting up firebase email authentication</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<li>\n<p>Install the @react-native-firebase/auth in your project.</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">  npm install @react-native-firebase/auth --save\n</code></pre>\n<h4>Step 3: Email authentication in our react native application</h4>\n<ul>\n<li>You can add following piece of code inside function in any component your prefer to have create user using email and password</li>\n</ul>\n<pre><code class=\"language-js\">import auth from \"@react-native-firebase/auth\";\nconst createUser = (email, password) => {\n  try {\n    auth().createUserWithEmailAndPassword(email, password);\n  } catch (error) {\n    alert(error);\n  }\n};\n</code></pre>\n<ul>\n<li>Add following piece of code for signin</li>\n</ul>\n<pre><code class=\"language-js\">import auth from \"@react-native-firebase/auth\";\nconst signin = (email, password) => {\n  try {\n    auth().signInWithEmailAndPassword(email, password);\n  } catch (error) {\n    alert(error);\n  }\n};\n</code></pre>\n<ul>\n<li>Once you are authenticated you can check whether user is authenticated by following piece of code</li>\n</ul>\n<pre><code class=\"language-js\">import auth from \"@react-native-firebase/auth\";\n\nauth().onAuthStateChanged((user) => {\n  if (user) {\n    console.log(\"Authenticated\");\n  } else {\n    console.log(\"Not authenticated\");\n  }\n});\n</code></pre>\n<ul>\n<li>You can logout from your application using following code</li>\n</ul>\n<pre><code class=\"language-js\">import auth from \"@react-native-firebase/auth\";\n\nauth().signOut();\n</code></pre>","fields":{"slug":"/react-native-firebase-setup-javascript/"},"frontmatter":{"title":"Email authentication with firebase in react native android application","date":"February 20, 2023","description":"In this article i will explain you step by step how you can add email authentication with firebase in your react native android application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/email-authentication-firebase.jpeg"}},"previous":{"fields":{"slug":"/react-and-typescript/"},"frontmatter":{"title":"How to work with typescript and react and define props, state, functional component in react typescript application","date":"February 10, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/react-typescript.jpeg"}},"next":{"fields":{"slug":"/react-tutorial-adding-form-validation-using-react-formik/"},"frontmatter":{"title":"React tutorial adding react formik validation in react typescript project","date":"March 03, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}}},"pageContext":{"id":"af9dd2a0-26c0-59de-af5d-062d97ae4d52","previousPostId":"6740337f-7016-56ae-ace5-601b613abded","nextPostId":"4e86be9e-cf7f-53c0-b73e-8ca0894a818c"}},
    "staticQueryHashes": ["3860684146"]}