{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/google-authentication-firebase-react-native/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"82f31d34-4583-5b2a-aa39-370f32173ccb","excerpt":"In this article i will explain you step by step how you can add google and facebook authentication with firebase in your react native android application Step…","html":"<p>In this article i will explain you step by step how you can add google and facebook authentication with firebase in your react native android application</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/Google-auth-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/Google-auth-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/Google-auth-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 google 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 google 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 and google signin package in your project.</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">  npm install @react-native-firebase/auth --save\n  npm install @react-native-community/google-signin --save\n</code></pre>\n<h4>Step 3: Google signin in our react native application</h4>\n<ul>\n<li>\n<p>Go to App.js of your react native application and configure the GoogleSignIn using webClientId which you can find in found in the <strong><em>google-services.json</em></strong> file in <strong><em>android/app</em></strong> as the <strong><em>client/oauth_client/client_id</em></strong> property.</p>\n<pre><code class=\"language-js\">//Inside App.js file\n\nimport auth from \"@react-native-firebase/auth\";\nimport { GoogleSignin } from \"@react-native-community/google-signin\";\n\nGoogleSignin.configure({\n  webClientId:\n    \"260759292128-4h94uja4bu3ad9ci5qqagubi6k1m0jfv.apps.googleusercontent.com\",\n});\n</code></pre>\n</li>\n<li>\n<p>You can add following piece of code inside function in any component your prefer to have Google SignIn working</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">import auth from \"@react-native-firebase/auth\";\nimport { GoogleSignin } from \"@react-native-community/google-signin\";\nasync function onGoogleButtonPress() {\n  const { idToken } = await GoogleSignin.signIn();\n  const googleCredential = auth.GoogleAuthProvider.credential(idToken);\n  return auth().signInWithCredential(googleCredential);\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":"/google-authentication-firebase-react-native/"},"frontmatter":{"title":"Google authentication with firebase in react native android application","date":"September 10, 2022","description":"In this article i will explain you step by step how you can add google authentication with firebase in your react native android application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/google-authentication-reactnative.jpeg"}},"previous":{"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"}},"next":{"fields":{"slug":"/graphql-apollo-node-mongodb-restapi/"},"frontmatter":{"title":"Create GraphQl API with Apollo Server, Node and MongoDb","date":"September 22, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/GraphQL.jpg"}}},"pageContext":{"id":"82f31d34-4583-5b2a-aa39-370f32173ccb","previousPostId":"8882478b-dd67-5981-bdf6-e9baee7c64c9","nextPostId":"4dc7e8b2-b7fd-5770-a45d-a4cc712e79c2"}},
    "staticQueryHashes": ["3860684146"]}