{"id":383,"date":"2024-03-28T16:25:13","date_gmt":"2024-03-28T16:25:13","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=383"},"modified":"2024-05-07T15:35:53","modified_gmt":"2024-05-07T15:35:53","slug":"react-native-app-google-authentication","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/react-native-app-google-authentication\/","title":{"rendered":"No More Password Hassles: Google Sign-In for Your React Native App on Mac"},"content":{"rendered":"\n<p><br>Implementing Google Authentication in a React Native application on a Mac without using Expo involves several steps, including setting up your project on Google Cloud Platform and Firebase, configuring your React Native environment, and making the necessary adjustments in Xcode. This article will guide you through each of these steps in detail.\n\n\n\n<p>You need to first setup your code base. You can follow below tutorial regarding setup of react native\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"gTgxdtD6qJ\"><a href=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/\">No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/embed\/#?secret=f8ONUHyxAO#?secret=gTgxdtD6qJ\" data-secret=\"gTgxdtD6qJ\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Setting up Google Cloud Platform<\/h2>\n\n\n\n<p>1. <strong>Create a New Project<\/strong>:\n\n\n\n<p>Go to <a href=\"http:\/\/console.cloud.google.com\/\">Google Cloud Console<\/a>.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-9-1024x483.png\" alt=\"\" class=\"wp-image-384\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-9-1024x483.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-9-300x141.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-9-768x362.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-9-1536x724.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-9-2048x965.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image 1<\/figcaption><\/figure>\n\n\n\n<p>\n\n\n\n<p>Click on Project mentioned with red arrow on above image. On clicking, it open a modal. \n\n\n\n<p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-11-1024x448.png\" alt=\"\" class=\"wp-image-386\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-11-1024x448.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-11-300x131.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-11-768x336.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-11-1536x672.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-11-2048x896.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on NEW PROJECT mentioned on above image. It will open a page.\n\n\n\n<p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"782\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-12-1024x782.png\" alt=\"\" class=\"wp-image-387\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-12-1024x782.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-12-300x229.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-12-768x586.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-12-700x535.png 700w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-12.png 1098w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Write your Project Name as shown on above image and click CREATE button. It will redirect to Welcome screen with project creation status.\n\n\n\n<p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"364\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-13-1024x364.png\" alt=\"\" class=\"wp-image-388\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-13-1024x364.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-13-300x107.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-13-768x273.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-13-1536x547.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-13-2048x729.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now if we click on Project (Refer image 1) , it will open a modal with your newly created project name mentioned on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-14-1024x487.png\" alt=\"\" class=\"wp-image-389\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-14-1024x487.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-14-300x143.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-14-768x365.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-14-1536x730.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-14-2048x974.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Click on your newly created project. It will open newly created project welcome page.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"437\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-16-1024x437.png\" alt=\"\" class=\"wp-image-391\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-16-1024x437.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-16-300x128.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-16-768x328.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-16-1536x655.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-16-2048x873.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on <code>APIs &amp; Services<\/code> shown on above screen. It will open below mentioned page. Make sure your Project name is mentioned in header of the page.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-18-1024x549.png\" alt=\"\" class=\"wp-image-393\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-18-1024x549.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-18-300x161.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-18-768x412.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-18.png 1168w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now click on Credentials 1st , it will redirect to Credentials page and then 2nd click on CREATE CREDENTIALS as mentioned on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-19-1024x574.png\" alt=\"\" class=\"wp-image-394\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-19-1024x574.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-19-300x168.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-19-768x431.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-19-1536x862.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-19.png 1608w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now click on <code>Oauth client ID<\/code> as shown on below screen.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"384\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-21-1024x384.png\" alt=\"\" class=\"wp-image-396\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-21-1024x384.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-21-300x113.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-21-768x288.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-21-1536x577.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-21.png 1854w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it has open a screen, that says that we have not created a consent screen yet. Click on the <code>CONFIGURE CONSENT SCREEN<\/code> button as mentioned in below screen:\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"248\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-22-1024x248.png\" alt=\"\" class=\"wp-image-397\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-22-1024x248.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-22-300x73.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-22-768x186.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-22-1536x373.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-22-2048x497.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will open Oauth consent screen . Chose <code>External<\/code> and then click on <code>CREATE<\/code> button.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"708\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-23-1024x708.png\" alt=\"\" class=\"wp-image-398\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-23-1024x708.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-23-300x207.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-23-768x531.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-23.png 1432w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It will open App registration page. Write your App name, User support email, upload your app logo\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"973\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-24-1024x973.png\" alt=\"\" class=\"wp-image-399\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-24-1024x973.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-24-300x285.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-24-768x729.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-24.png 1472w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>also write url link of your Application&#8217;s home page, give link of privacy policy, give link of terms of service, write your Authorized domain , write email address of developer  and press SAVE AND CONTINUE button.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-28-1009x1024.png\" alt=\"\" class=\"wp-image-403\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-28-1009x1024.png 1009w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-28-296x300.png 296w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-28-768x779.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-28.png 1220w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will redirect to Scopes. Click on ADD OR REMOVE SCOPES as shown on below screen.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1006\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-29-1024x1006.png\" alt=\"\" class=\"wp-image-404\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-29-1024x1006.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-29-300x295.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-29-768x755.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-29.png 1502w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now you can choose scopes which you required from user on login.  scope is users, name, email, age , profile pic etc. Choosen scopes I have marked in as point 1 and 2 in red color and then click on UPDATE button and then click on SAVE and CONTINUE button.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-30-1024x575.png\" alt=\"\" class=\"wp-image-405\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-30-1024x575.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-30-300x168.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-30-768x431.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-30-1536x862.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-30-2048x1149.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will open Test users page. Click on ADD USERS button as mentioned in below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"660\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-31-1024x660.png\" alt=\"\" class=\"wp-image-406\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-31-1024x660.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-31-300x193.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-31-768x495.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-31.png 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>You can insert list of email address that you will use on development of google login. After adding your single or multiple emails click on SAVE AND CONTINUE button.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-32-1024x389.png\" alt=\"\" class=\"wp-image-407\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-32-1024x389.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-32-300x114.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-32-768x292.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-32-1536x584.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-32-2048x779.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will redirect to Summary page as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"919\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-33-1024x919.png\" alt=\"\" class=\"wp-image-408\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-33-1024x919.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-33-300x269.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-33-768x689.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-33-1536x1378.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-33.png 1612w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now click on Credentials and then Click on <code>CREATE CREDENTIALS<\/code> and then choose <code>OAuth client ID<\/code>. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-34-1024x522.png\" alt=\"\" class=\"wp-image-409\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-34-1024x522.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-34-300x153.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-34-768x392.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-34-1536x784.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-34.png 1682w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It will open Create Oauth client ID page . Click on Application type which will open lists.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-35-1024x507.png\" alt=\"\" class=\"wp-image-410\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-35-1024x507.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-35-300x149.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-35-768x380.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-35.png 1430w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Choose Web application.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-36-1024x554.png\" alt=\"\" class=\"wp-image-411\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-36-1024x554.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-36-300x162.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-36-768x415.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-36.png 1416w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>On selecting Web application it will open some more fields. Fill the name, Authorised redirect url. Authorised redirect url is usually required on web application to redirect to a page after google login.\n\n\n\n<p>Now click <code>CREATE<\/code> button as shown on image below.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"890\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-37-1024x890.png\" alt=\"\" class=\"wp-image-412\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-37-1024x890.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-37-300x261.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-37-768x668.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-37-1536x1336.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-37.png 1626w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will popup with a modal which display Client ID and Client secret of your google auth project. \n\n\n\n<p>Note down your <code>Client ID<\/code> and <code>Client secret<\/code>. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-38-1024x485.png\" alt=\"\" class=\"wp-image-413\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-38-1024x485.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-38-300x142.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-38-768x363.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-38-1536x727.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-38-2048x969.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Get Bundle Identifier of your IOS Apps : <\/h2>\n\n\n\n<p>The Bundle Identifier serves as a unique identifier for your app within the iOS ecosystem. When integrating Google OAuth, this unique identifier ensures that the authentication process is securely tied to your specific application. This is essential for maintaining the integrity and security of the authentication process.\n\n\n\n<p>To proceed you must have react native app . You can check below article on how to create an app in react native .\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"rYlxz9cUlT\"><a href=\"https:\/\/zahiralam.com\/blog\/building-your-first-react-native-app-with-nodejs-backend-on-macos\/\">Developing a Cross-Platform Mobile App on macOS: A Guide to Using React Native and Node.js Without Expo<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Developing a Cross-Platform Mobile App on macOS: A Guide to Using React Native and Node.js Without Expo&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/building-your-first-react-native-app-with-nodejs-backend-on-macos\/embed\/#?secret=B4uyskhSY4#?secret=rYlxz9cUlT\" data-secret=\"rYlxz9cUlT\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\n\n\n\n<p>1. Go to ios folder of your react native app. It should have files and folder as mentioned in below mentioned. Name of my app here is ReactGAuth .\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"239\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-39-1024x239.png\" alt=\"\" class=\"wp-image-417\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-39-1024x239.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-39-300x70.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-39-768x179.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-39.png 1434w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>2 Right click on ReactGAuth.xcodeproj . In your case instead of ReactGAuth it will have your app name.\n\n\n\n<p>Click on <strong>Open With<\/strong> and then Click on <strong>Xcode<\/strong> as mentioned in below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"602\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-40-1024x602.png\" alt=\"\" class=\"wp-image-418\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-40-1024x602.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-40-300x176.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-40-768x451.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-40-1536x903.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-40.png 1998w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will open your app on Xcode. Click on your App name shown on below image. In my case I have clicked on ReactGAuth.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"673\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-41-1024x673.png\" alt=\"\" class=\"wp-image-419\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-41-1024x673.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-41-300x197.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-41-768x505.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-41.png 1396w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will open multiple tabs. Click on General Tab. In General Tab you can see your apps Bundle Identifier.\n\n\n\n<p>You can see it in below image.\n\n\n\n<p>In my case my Apps Bundle Identifier is org.reactjs.native.example.ReactGAuth \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-42-1024x548.png\" alt=\"\" class=\"wp-image-420\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-42-1024x548.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-42-300x160.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-42-768x411.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-42-1536x821.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-42-2048x1095.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>You can also edit the name of your Bundle Identifier.\n\n\n\n<p>To edit click on the right arrow as mentioned on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"119\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-43-1024x119.png\" alt=\"\" class=\"wp-image-421\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-43-1024x119.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-43-300x35.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-43-768x90.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-43-1536x179.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-43.png 1612w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Write your new Bundle Identifier name as shown on below image.\n\n\n\n<p>As you can see I have edited Bundle Identifier name to org.reactjs.native.zahiralam.ReactGAuth \n\n\n\n<p>To save click on any other part of xcode. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-44-1024x476.png\" alt=\"\" class=\"wp-image-422\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-44-1024x476.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-44-300x139.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-44-768x357.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-44.png 1416w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: <strong>React Native Project Configuration for Android<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">A) Gradle Configuration: <\/h3>\n\n\n\n<p>1. Open <code>android\/build.gradle<\/code> and below lines in dependencies:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">classpath &#039;com.google.gms:google-services:4.4.1&#039;  \/\/ Google Services plugin<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#classpath%20%27com.google.gms%3Agoogle-services%3A4.4.1%27%20%20%2F%2F%20Google%20Services%20plugin\">\n                            <button class=\"copy-button\" data-label=\"classpath &#039;com.google.gms:google-services:4.4.1&#039;  \/\/ Google Services plugin\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Your final android\/build.gradle usually looks something like this:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">buildscript {\n    ext {\n        buildToolsVersion = &quot;34.0.0&quot;\n        minSdkVersion = 21\n        compileSdkVersion = 34\n        targetSdkVersion = 34\n        ndkVersion = &quot;25.1.8937393&quot;\n        kotlinVersion = &quot;1.8.0&quot;\n    }\n    repositories {\n        google()\n        mavenCentral()\n    }\n    dependencies {\n        classpath(&quot;com.android.tools.build:gradle&quot;)\n        classpath(&quot;com.facebook.react:react-native-gradle-plugin&quot;)\n        classpath(&quot;org.jetbrains.kotlin:kotlin-gradle-plugin&quot;)\n        \/\/ Add the Google Services classpath here\n        classpath &#039;com.google.gms:google-services:4.4.1&#039; \/\/ Use the latest version available\n    }\n}\n\napply plugin: &quot;com.facebook.react.rootproject&quot;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#buildscript%20%7B%0A%20%20%20%20ext%20%7B%0A%20%20%20%20%20%20%20%20buildToolsVersion%20%3D%20%2234.0.0%22%0A%20%20%20%20%20%20%20%20minSdkVersion%20%3D%2021%0A%20%20%20%20%20%20%20%20compileSdkVersion%20%3D%2034%0A%20%20%20%20%20%20%20%20targetSdkVersion%20%3D%2034%0A%20%20%20%20%20%20%20%20ndkVersion%20%3D%20%2225.1.8937393%22%0A%20%20%20%20%20%20%20%20kotlinVersion%20%3D%20%221.8.0%22%0A%20%20%20%20%7D%0A%20%20%20%20repositories%20%7B%0A%20%20%20%20%20%20%20%20google%28%29%0A%20%20%20%20%20%20%20%20mavenCentral%28%29%0A%20%20%20%20%7D%0A%20%20%20%20dependencies%20%7B%0A%20%20%20%20%20%20%20%20classpath%28%22com.android.tools.build%3Agradle%22%29%0A%20%20%20%20%20%20%20%20classpath%28%22com.facebook.react%3Areact-native-gradle-plugin%22%29%0A%20%20%20%20%20%20%20%20classpath%28%22org.jetbrains.kotlin%3Akotlin-gradle-plugin%22%29%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20the%20Google%20Services%20classpath%20here%0A%20%20%20%20%20%20%20%20classpath%20%27com.google.gms%3Agoogle-services%3A4.4.1%27%20%2F%2F%20Use%20the%20latest%20version%20available%0A%20%20%20%20%7D%0A%7D%0A%0Aapply%20plugin%3A%20%22com.facebook.react.rootproject%22\">\n                            <button class=\"copy-button\" data-label=\"buildscript {\n    ext {\n        buildToolsVersion = &quot;34.0.0&quot;\n        minSdkVersion = 21\n        compileSdkVersion = 34\n        targetSdkVersion = 34\n        ndkVersion = &quot;25.1.8937393&quot;\n        kotlinVersion = &quot;1.8.0&quot;\n    }\n    repositories {\n        google()\n        mavenCentral()\n    }\n    dependencies {\n        classpath(&quot;com.android.tools.build:gradle&quot;)\n        classpath(&quot;com.facebook.react:react-native-gradle-plugin&quot;)\n        classpath(&quot;org.jetbrains.kotlin:kotlin-gradle-plugin&quot;)\n        \/\/ Add the Google Services classpath here\n        classpath &#039;com.google.gms:google-services:4.4.1&#039; \/\/ Use the latest version available\n    }\n}\n\napply plugin: &quot;com.facebook.react.rootproject&quot;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p> You can get Google Services latest version from below mentioned:\n\n\n\n<p><a href=\"https:\/\/maven.google.com\/web\/index.html\">https:\/\/maven.google.com\/web\/index.html<\/a>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"404\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-63-1024x404.png\" alt=\"\" class=\"wp-image-448\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-63-1024x404.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-63-300x118.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-63-768x303.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-63-1536x606.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-63.png 2028w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>2. Apply the Google Services plugin in your <code>android\/app\/build.gradle<\/code> file by adding the following line at the bottom of the file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">apply plugin: &#039;com.google.gms.google-services&#039;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#apply%20plugin%3A%20%27com.google.gms.google-services%27\">\n                            <button class=\"copy-button\" data-label=\"apply plugin: &#039;com.google.gms.google-services&#039;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>3. Ensure you have the necessary dependencies for Google Sign-In in the same <code><code>android\/app\/build.gradle<\/code><\/code> file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">implementation &#039;com.google.android.gms:play-services-auth:21.0.0&#039;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#implementation%20%27com.google.android.gms%3Aplay-services-auth%3A21.0.0%27\">\n                            <button class=\"copy-button\" data-label=\"implementation &#039;com.google.android.gms:play-services-auth:21.0.0&#039;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>similar way you can get latest version of play-services-auth from <a href=\"https:\/\/maven.google.com\/web\/index.html\">https:\/\/maven.google.com\/web\/index.html<\/a>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-64-1024x684.png\" alt=\"\" class=\"wp-image-449\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-64-1024x684.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-64-300x200.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-64-768x513.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-64-1536x1026.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-64-2048x1369.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Your final android\/app\/build.gradle will looks something like this:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">apply plugin: &quot;com.android.application&quot;\napply plugin: &quot;org.jetbrains.kotlin.android&quot;\napply plugin: &quot;com.facebook.react&quot;\n\nreact {\n    \n}\n\ndef enableProguardInReleaseBuilds = false\n\ndef jscFlavor = &#039;org.webkit:android-jsc:+&#039;\n\nandroid {\n    ndkVersion rootProject.ext.ndkVersion\n    buildToolsVersion rootProject.ext.buildToolsVersion\n    compileSdk rootProject.ext.compileSdkVersion\n\n    namespace &quot;com.gloginandroid&quot;\n    defaultConfig {\n        applicationId &quot;com.gloginandroid&quot;\n        minSdkVersion rootProject.ext.minSdkVersion\n        targetSdkVersion rootProject.ext.targetSdkVersion\n        versionCode 1\n        versionName &quot;1.0&quot;\n    }\n    signingConfigs {\n        debug {\n            storeFile file(&#039;debug.keystore&#039;)\n            storePassword &#039;android&#039;\n            keyAlias &#039;androiddebugkey&#039;\n            keyPassword &#039;android&#039;\n        }\n    }\n    buildTypes {\n        debug {\n            signingConfig signingConfigs.debug\n        }\n        release {\n            signingConfig signingConfigs.debug\n            minifyEnabled enableProguardInReleaseBuilds\n            proguardFiles getDefaultProguardFile(&quot;proguard-android.txt&quot;), &quot;proguard-rules.pro&quot;\n        }\n    }\n}\n\ndependencies {\n    \/\/ The version of react-native is set by the React Native Gradle Plugin\n    implementation(&quot;com.facebook.react:react-android&quot;)\n    implementation(&quot;com.facebook.react:flipper-integration&quot;)\n    implementation &#039;com.google.android.gms:play-services-auth:21.0.0&#039; \/\/ Add this line\n\n    if (hermesEnabled.toBoolean()) {\n        implementation(&quot;com.facebook.react:hermes-android&quot;)\n    } else {\n        implementation jscFlavor\n    }\n}\n\napply from: file(&quot;..\/..\/node_modules\/@react-native-community\/cli-platform-android\/native_modules.gradle&quot;); applyNativeModulesAppBuildGradle(project)\napply plugin: &#039;com.google.gms.google-services&#039;\n<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#apply%20plugin%3A%20%22com.android.application%22%0Aapply%20plugin%3A%20%22org.jetbrains.kotlin.android%22%0Aapply%20plugin%3A%20%22com.facebook.react%22%0A%0Areact%20%7B%0A%20%20%20%20%0A%7D%0A%0Adef%20enableProguardInReleaseBuilds%20%3D%20false%0A%0Adef%20jscFlavor%20%3D%20%27org.webkit%3Aandroid-jsc%3A%2B%27%0A%0Aandroid%20%7B%0A%20%20%20%20ndkVersion%20rootProject.ext.ndkVersion%0A%20%20%20%20buildToolsVersion%20rootProject.ext.buildToolsVersion%0A%20%20%20%20compileSdk%20rootProject.ext.compileSdkVersion%0A%0A%20%20%20%20namespace%20%22com.gloginandroid%22%0A%20%20%20%20defaultConfig%20%7B%0A%20%20%20%20%20%20%20%20applicationId%20%22com.gloginandroid%22%0A%20%20%20%20%20%20%20%20minSdkVersion%20rootProject.ext.minSdkVersion%0A%20%20%20%20%20%20%20%20targetSdkVersion%20rootProject.ext.targetSdkVersion%0A%20%20%20%20%20%20%20%20versionCode%201%0A%20%20%20%20%20%20%20%20versionName%20%221.0%22%0A%20%20%20%20%7D%0A%20%20%20%20signingConfigs%20%7B%0A%20%20%20%20%20%20%20%20debug%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20storeFile%20file%28%27debug.keystore%27%29%0A%20%20%20%20%20%20%20%20%20%20%20%20storePassword%20%27android%27%0A%20%20%20%20%20%20%20%20%20%20%20%20keyAlias%20%27androiddebugkey%27%0A%20%20%20%20%20%20%20%20%20%20%20%20keyPassword%20%27android%27%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20buildTypes%20%7B%0A%20%20%20%20%20%20%20%20debug%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20signingConfig%20signingConfigs.debug%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20release%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20signingConfig%20signingConfigs.debug%0A%20%20%20%20%20%20%20%20%20%20%20%20minifyEnabled%20enableProguardInReleaseBuilds%0A%20%20%20%20%20%20%20%20%20%20%20%20proguardFiles%20getDefaultProguardFile%28%22proguard-android.txt%22%29%2C%20%22proguard-rules.pro%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%0Adependencies%20%7B%0A%20%20%20%20%2F%2F%20The%20version%20of%20react-native%20is%20set%20by%20the%20React%20Native%20Gradle%20Plugin%0A%20%20%20%20implementation%28%22com.facebook.react%3Areact-android%22%29%0A%20%20%20%20implementation%28%22com.facebook.react%3Aflipper-integration%22%29%0A%20%20%20%20implementation%20%27com.google.android.gms%3Aplay-services-auth%3A21.0.0%27%20%2F%2F%20Add%20this%20line%0A%0A%20%20%20%20if%20%28hermesEnabled.toBoolean%28%29%29%20%7B%0A%20%20%20%20%20%20%20%20implementation%28%22com.facebook.react%3Ahermes-android%22%29%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20implementation%20jscFlavor%0A%20%20%20%20%7D%0A%7D%0A%0Aapply%20from%3A%20file%28%22..%2F..%2Fnode_modules%2F%40react-native-community%2Fcli-platform-android%2Fnative_modules.gradle%22%29%3B%20applyNativeModulesAppBuildGradle%28project%29%0Aapply%20plugin%3A%20%27com.google.gms.google-services%27%0A\">\n                            <button class=\"copy-button\" data-label=\"apply plugin: &quot;com.android.application&quot;\napply plugin: &quot;org.jetbrains.kotlin.android&quot;\napply plugin: &quot;com.facebook.react&quot;\n\nreact {\n    \n}\n\ndef enableProguardInReleaseBuilds = false\n\ndef jscFlavor = &#039;org.webkit:android-jsc:+&#039;\n\nandroid {\n    ndkVersion rootProject.ext.ndkVersion\n    buildToolsVersion rootProject.ext.buildToolsVersion\n    compileSdk rootProject.ext.compileSdkVersion\n\n    namespace &quot;com.gloginandroid&quot;\n    defaultConfig {\n        applicationId &quot;com.gloginandroid&quot;\n        minSdkVersion rootProject.ext.minSdkVersion\n        targetSdkVersion rootProject.ext.targetSdkVersion\n        versionCode 1\n        versionName &quot;1.0&quot;\n    }\n    signingConfigs {\n        debug {\n            storeFile file(&#039;debug.keystore&#039;)\n            storePassword &#039;android&#039;\n            keyAlias &#039;androiddebugkey&#039;\n            keyPassword &#039;android&#039;\n        }\n    }\n    buildTypes {\n        debug {\n            signingConfig signingConfigs.debug\n        }\n        release {\n            signingConfig signingConfigs.debug\n            minifyEnabled enableProguardInReleaseBuilds\n            proguardFiles getDefaultProguardFile(&quot;proguard-android.txt&quot;), &quot;proguard-rules.pro&quot;\n        }\n    }\n}\n\ndependencies {\n    \/\/ The version of react-native is set by the React Native Gradle Plugin\n    implementation(&quot;com.facebook.react:react-android&quot;)\n    implementation(&quot;com.facebook.react:flipper-integration&quot;)\n    implementation &#039;com.google.android.gms:play-services-auth:21.0.0&#039; \/\/ Add this line\n\n    if (hermesEnabled.toBoolean()) {\n        implementation(&quot;com.facebook.react:hermes-android&quot;)\n    } else {\n        implementation jscFlavor\n    }\n}\n\napply from: file(&quot;..\/..\/node_modules\/@react-native-community\/cli-platform-android\/native_modules.gradle&quot;); applyNativeModulesAppBuildGradle(project)\napply plugin: &#039;com.google.gms.google-services&#039;\n\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B) Find Android package name:<\/h3>\n\n\n\n<p>Go to android\/app\/src\/main\/java\/com\n\n\n\n<p>Go to your project name, in my case it is <code>reactgauth<\/code>. Open <code>MainActivity.kt<\/code>\n\n\n\n<p>At top you can see your package name. In my case it is &#8216;<code>com.reactgauth<\/code>&#8216;.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-65-1024x496.png\" alt=\"\" class=\"wp-image-450\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-65-1024x496.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-65-300x145.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-65-768x372.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-65-1536x744.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-65.png 1574w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Note down your package name.\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">C) Get SHA-1 Fingerprint of your App:<\/h3>\n\n\n\n<p>Inside your project go to android folder and type below command\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">.\/gradlew signingReport<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#.%2Fgradlew%20signingReport\">\n                            <button class=\"copy-button\" data-label=\".\/gradlew signingReport\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Note down SHA1.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-66-1024x503.png\" alt=\"\" class=\"wp-image-452\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-66-1024x503.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-66-300x148.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-66-768x378.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-66-1536x755.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-66.png 1562w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Setting up Firebase :<\/h2>\n\n\n\n<p>1. Go to <a href=\"https:\/\/console.firebase.google.com\/\">Firebase Console<\/a>.  Click on Add project as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"627\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-45-1024x627.png\" alt=\"\" class=\"wp-image-425\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-45-1024x627.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-45-300x184.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-45-768x470.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-45-1536x940.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-45.png 1984w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will show below screen. On clicking &#8216;Enter your project name&#8217; input , it will show list of Google cloud projects. Select project which you have created from &#8216;Step 1: Setting up Google Cloud Platform&#8217;. In my case I have Choosen ReactGAuth as shown on below screen. And click on Continue.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-46-1024x587.png\" alt=\"\" class=\"wp-image-426\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-46-1024x587.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-46-300x172.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-46-768x440.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-46-1536x881.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-46.png 1632w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will open below screen. Click on Continue. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"848\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-48-1024x848.png\" alt=\"\" class=\"wp-image-428\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-48-1024x848.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-48-300x249.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-48-768x636.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-48.png 1412w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will display Google Analytics configuration setup. Choose default account for Firebase and Click <strong>Add Firebase<\/strong> as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"722\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-49-1024x722.png\" alt=\"\" class=\"wp-image-429\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-49-1024x722.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-49-300x212.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-49-768x542.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-49-1536x1083.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-49.png 1560w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will show a project ready message . Click Continue as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"712\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-50.png\" alt=\"\" class=\"wp-image-430\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-50.png 976w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-50-300x219.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-50-768x560.png 768w\" sizes=\"auto, (max-width: 976px) 100vw, 976px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will redirect to your project. In my case it is ReactGAuth. Click on ioS+ as shown on below screen.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-51-1024x611.png\" alt=\"\" class=\"wp-image-431\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-51-1024x611.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-51-300x179.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-51-768x459.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-51.png 1484w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Write your &#8216;Bundle Identifier&#8217; that we have got from &#8216;Step 2: Get Bundle Identifier of your IOS Apps&#8217; in my case it is &#8216;org.reactjs.native.zahiralam.ReactGAuth &#8216;. Write App nickname and press &#8216;<strong>Register app<\/strong>&#8216; as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"907\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-52-907x1024.png\" alt=\"\" class=\"wp-image-432\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-52-907x1024.png 907w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-52-266x300.png 266w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-52-768x867.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-52.png 1230w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will appear below screen. Click <strong>Next<\/strong>. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-53-920x1024.png\" alt=\"\" class=\"wp-image-433\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-53-920x1024.png 920w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-53-270x300.png 270w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-53-768x854.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-53.png 1332w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will appear with Add Firebase SDK setup screen. Click <strong>Next<\/strong> as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"899\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-54-899x1024.png\" alt=\"\" class=\"wp-image-434\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-54-899x1024.png 899w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-54-263x300.png 263w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-54-768x875.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-54.png 1332w\" sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now it will show below mentioned screen. Press <strong>Next<\/strong>. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"984\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-55-984x1024.png\" alt=\"\" class=\"wp-image-435\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-55-984x1024.png 984w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-55-288x300.png 288w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-55-768x799.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-55-1477x1536.png 1477w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-55.png 1540w\" sizes=\"auto, (max-width: 984px) 100vw, 984px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will redirect to home page of firebase app. Click on <strong>Authentication<\/strong> which is inside <strong>Build<\/strong> as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"732\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-56-1024x732.png\" alt=\"\" class=\"wp-image-436\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-56-1024x732.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-56-300x214.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-56-768x549.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-56.png 1478w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will redirect to Authentication setup. Click on <strong>Sign-in-method<\/strong> and then choose <strong>Google<\/strong> as  shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-57-1024x488.png\" alt=\"\" class=\"wp-image-437\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-57-1024x488.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-57-300x143.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-57-768x366.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-57-1536x732.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-57-2048x976.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Click on <strong>Enable<\/strong> as shown on below image and click on <strong>Save<\/strong>.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-58-1024x527.png\" alt=\"\" class=\"wp-image-438\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-58-1024x527.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-58-300x154.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-58-768x395.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-58-1536x790.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-58.png 1964w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will show a modal which configuration file. Download the Configuration file  which is <strong>GoogleService-Info.plist<\/strong>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"788\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-59-1024x788.png\" alt=\"\" class=\"wp-image-439\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-59-1024x788.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-59-300x231.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-59-768x591.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-59.png 1426w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Setting up Firebase for Android:<\/h2>\n\n\n\n<p>1. Go to your project of firebase console and click on <code>Add app<\/code> as mention on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"314\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-67-1024x314.png\" alt=\"\" class=\"wp-image-453\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-67-1024x314.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-67-300x92.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-67-768x235.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-67-1536x471.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-67.png 1690w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>It will show list of platform. Choose Android.\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"872\" height=\"368\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-68.png\" alt=\"\" class=\"wp-image-454\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-68.png 872w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-68-300x127.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-68-768x324.png 768w\" sizes=\"auto, (max-width: 872px) 100vw, 872px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Not it will show Firebase setup for android. \n\n\n\n<p>Write your Android package name which we have got from &#8216;Step 3: React Native Project Configuration for Android -&gt; B) Find Android package name&#8217;. In my case it is &#8216;com.reactgauth&#8217;.\n\n\n\n<p>Write App nickname . \n\n\n\n<p>Write SHA-1 which we have got from &#8216;Step 3: React Native Project Configuration for Android -> C) Get SHA-1 Fingerprint of your App&#8217;. \n\n\n\n<p><strong>Note For apps installed from the Google Play Store: <\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google uses the SHA-1 from the Google Play App signing certificate instead of the one from your development key. You need to make sure both SHA-1 certificates are added to your project in the Google Cloud Console.<\/li>\n\n\n\n<li>Check your Google Cloud Platform project that is linked to your Google Sign-In API. You need to add the SHA-1 certificate fingerprint from your Google Play Console (App signing key certificate) to the list of credentials in the Google API Console.<\/li>\n\n\n\n<li>To find the SHA-1 of your app signing key, go to your Play Console, select your app, then go to &#8220;Setup&#8221; \u2192 &#8220;App signing&#8221;. Copy the SHA-1 certificate fingerprint from the &#8220;App signing key certificate&#8221; section.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2666\" height=\"1166\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3.png\" alt=\"\" class=\"wp-image-532\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3.png 2666w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3-300x131.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3-1024x448.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3-768x336.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3-1536x672.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-3-2048x896.png 2048w\" sizes=\"auto, (max-width: 2666px) 100vw, 2666px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>And click on Register as mentioned on below image. \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"938\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-69-1024x938.png\" alt=\"\" class=\"wp-image-455\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-69-1024x938.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-69-300x275.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-69-768x703.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-69.png 1424w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Below mentioned screen will appear. Click on Next.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"907\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-70-1024x907.png\" alt=\"\" class=\"wp-image-456\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-70-1024x907.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-70-300x266.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-70-768x680.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-70.png 1466w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now below mentioned screen will appear. Click Next.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"817\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-71-817x1024.png\" alt=\"\" class=\"wp-image-457\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-71-817x1024.png 817w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-71-239x300.png 239w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-71-768x962.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-71.png 1130w\" sizes=\"auto, (max-width: 817px) 100vw, 817px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Now click on &#8216;<code>Continue to console<\/code>&#8216; as mentioned on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"838\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-72-1024x838.png\" alt=\"\" class=\"wp-image-458\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-72-1024x838.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-72-300x245.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-72-768x628.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-72.png 1310w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<p>Now click on <strong>Project Overview<\/strong> and then <strong>Project Setting<\/strong> as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"240\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-73-1024x240.png\" alt=\"\" class=\"wp-image-459\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-73-1024x240.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-73-300x70.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-73-768x180.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-73-1536x360.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-73.png 1674w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Setting page will appear. Click on General and then scroll down , choose your android app and then download <code>google-service.json<\/code> as shown on below image \n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"950\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-76-950x1024.png\" alt=\"\" class=\"wp-image-463\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-76-950x1024.png 950w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-76-278x300.png 278w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-76-768x828.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-76-1425x1536.png 1425w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-76.png 1516w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Place <code>google-service.json<\/code> in your React Native project under <code>android\/app\/<\/code> as shown on below image.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"787\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-77-1024x787.png\" alt=\"\" class=\"wp-image-464\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-77-1024x787.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-77-300x231.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-77-768x591.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-77-1536x1181.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-77.png 1896w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Configuring Xcode for iOS<\/h2>\n\n\n\n<p>Open your app in Xcode by clicking &#8216;.xcodeproj&#8217; extension as mentioned in &#8216;Step 2: Get Bundle Identifier of your IOS Apps :&#8217; .In my case it is &#8216;ReactGAuth.xcodeproj&#8217; . After opening of Xcode open folder &#8216;ReactGAuth&#8217; as shown on below image and inside &#8216;ReactGAuth&#8217; there is another &#8216;ReactGAuth&#8217; . Drag &#8216;<strong>GoogleService-Info.plist<\/strong>&#8216; into this folder. As you can see from below image &#8216;GoogleService-Info.plist&#8217; has information like CLIENT_ID, RESERVED_CLIENT_ID, BUNDLE_ID of your app etc. Copy RESERVED_CLIENT_ID. \n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2260\" height=\"842\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62.png\" alt=\"\" class=\"wp-image-443\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62.png 2260w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62-300x112.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62-1024x382.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62-768x286.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62-1536x572.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-62-2048x763.png 2048w\" sizes=\"auto, (max-width: 2260px) 100vw, 2260px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Open <strong>Info.plist<\/strong> in a notepad. Info.plist is located in same directory. Add add below mentioned lines to Info.plist\n\n\n\n<p> \n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">&lt;key&gt;CFBundleURLTypes&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;dict&gt;\n\t\t\t&lt;key&gt;CFBundleTypeRole&lt;\/key&gt;\n\t\t\t&lt;string&gt;Editor&lt;\/string&gt;\n\t\t\t&lt;key&gt;CFBundleURLSchemes&lt;\/key&gt;\n\t\t\t&lt;array&gt;\n\t\t\t\t&lt;string&gt;RESERVED_CLIENT_ID&lt;\/string&gt;\n\t\t\t&lt;\/array&gt;\n\t\t&lt;\/dict&gt;\n\t&lt;\/array&gt;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%3Ckey%3ECFBundleURLTypes%3C%2Fkey%3E%0A%09%3Carray%3E%0A%09%09%3Cdict%3E%0A%09%09%09%3Ckey%3ECFBundleTypeRole%3C%2Fkey%3E%0A%09%09%09%3Cstring%3EEditor%3C%2Fstring%3E%0A%09%09%09%3Ckey%3ECFBundleURLSchemes%3C%2Fkey%3E%0A%09%09%09%3Carray%3E%0A%09%09%09%09%3Cstring%3ERESERVED_CLIENT_ID%3C%2Fstring%3E%0A%09%09%09%3C%2Farray%3E%0A%09%09%3C%2Fdict%3E%0A%09%3C%2Farray%3E\">\n                            <button class=\"copy-button\" data-label=\"&lt;key&gt;CFBundleURLTypes&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;dict&gt;\n\t\t\t&lt;key&gt;CFBundleTypeRole&lt;\/key&gt;\n\t\t\t&lt;string&gt;Editor&lt;\/string&gt;\n\t\t\t&lt;key&gt;CFBundleURLSchemes&lt;\/key&gt;\n\t\t\t&lt;array&gt;\n\t\t\t\t&lt;string&gt;RESERVED_CLIENT_ID&lt;\/string&gt;\n\t\t\t&lt;\/array&gt;\n\t\t&lt;\/dict&gt;\n\t&lt;\/array&gt;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Replace &#8216;RESERVED_CLIENT_ID&#8217; with value of RESERVED_CLIENT_ID received on &#8216;<strong>GoogleService-Info.plist<\/strong>&#8216;. \n\n\n\n<p>Your final <strong>Info.plist<\/strong> will look something like this :\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\n&lt;!DOCTYPE plist PUBLIC &quot;-\/\/Apple\/\/DTD PLIST 1.0\/\/EN&quot; &quot;http:\/\/www.apple.com\/DTDs\/PropertyList-1.0.dtd&quot;&gt;\n&lt;plist version=&quot;1.0&quot;&gt;\n&lt;dict&gt;\n\t&lt;key&gt;CFBundleDevelopmentRegion&lt;\/key&gt;\n\t&lt;string&gt;en&lt;\/string&gt;\n\t&lt;key&gt;CFBundleDisplayName&lt;\/key&gt;\n\t&lt;string&gt;ReactGAuth&lt;\/string&gt;\n\t&lt;key&gt;CFBundleExecutable&lt;\/key&gt;\n\t&lt;string&gt;$(EXECUTABLE_NAME)&lt;\/string&gt;\n\t&lt;key&gt;CFBundleIdentifier&lt;\/key&gt;\n\t&lt;string&gt;$(PRODUCT_BUNDLE_IDENTIFIER)&lt;\/string&gt;\n\t&lt;key&gt;CFBundleInfoDictionaryVersion&lt;\/key&gt;\n\t&lt;string&gt;6.0&lt;\/string&gt;\n\t&lt;key&gt;CFBundleName&lt;\/key&gt;\n\t&lt;string&gt;$(PRODUCT_NAME)&lt;\/string&gt;\n\t&lt;key&gt;CFBundlePackageType&lt;\/key&gt;\n\t&lt;string&gt;APPL&lt;\/string&gt;\n\t&lt;key&gt;CFBundleShortVersionString&lt;\/key&gt;\n\t&lt;string&gt;$(MARKETING_VERSION)&lt;\/string&gt;\n\t&lt;key&gt;CFBundleSignature&lt;\/key&gt;\n\t&lt;string&gt;????&lt;\/string&gt;\n\t&lt;key&gt;CFBundleVersion&lt;\/key&gt;\n\t&lt;string&gt;$(CURRENT_PROJECT_VERSION)&lt;\/string&gt;\n\t&lt;key&gt;LSRequiresIPhoneOS&lt;\/key&gt;\n\t&lt;true\/&gt;\n\t&lt;key&gt;NSAppTransportSecurity&lt;\/key&gt;\n\t&lt;dict&gt;\n\t\t&lt;key&gt;NSAllowsArbitraryLoads&lt;\/key&gt;\n\t\t&lt;false\/&gt;\n\t\t&lt;key&gt;NSAllowsLocalNetworking&lt;\/key&gt;\n\t\t&lt;true\/&gt;\n\t&lt;\/dict&gt;\n\t&lt;key&gt;NSLocationWhenInUseUsageDescription&lt;\/key&gt;\n\t&lt;string&gt;&lt;\/string&gt;\n\t&lt;key&gt;UILaunchStoryboardName&lt;\/key&gt;\n\t&lt;string&gt;LaunchScreen&lt;\/string&gt;\n\t&lt;key&gt;UIRequiredDeviceCapabilities&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;string&gt;armv7&lt;\/string&gt;\n\t&lt;\/array&gt;\n\t&lt;key&gt;UISupportedInterfaceOrientations&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;string&gt;UIInterfaceOrientationPortrait&lt;\/string&gt;\n\t\t&lt;string&gt;UIInterfaceOrientationLandscapeLeft&lt;\/string&gt;\n\t\t&lt;string&gt;UIInterfaceOrientationLandscapeRight&lt;\/string&gt;\n\t&lt;\/array&gt;\n\t&lt;key&gt;UIViewControllerBasedStatusBarAppearance&lt;\/key&gt;\n\t&lt;false\/&gt;\n\t&lt;key&gt;CFBundleURLTypes&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;dict&gt;\n\t\t\t&lt;key&gt;CFBundleTypeRole&lt;\/key&gt;\n\t\t\t&lt;string&gt;Editor&lt;\/string&gt;\n\t\t\t&lt;key&gt;CFBundleURLSchemes&lt;\/key&gt;\n\t\t\t&lt;array&gt;\n\t\t\t\t&lt;string&gt;com.googleusercontent.apps.6786875767-juy689878797yggihsdfds6576576sf709890798&lt;\/string&gt;\n\t\t\t&lt;\/array&gt;\n\t\t&lt;\/dict&gt;\n\t&lt;\/array&gt;\n&lt;\/dict&gt;\n&lt;\/plist&gt;\n<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3C%21DOCTYPE%20plist%20PUBLIC%20%22-%2F%2FApple%2F%2FDTD%20PLIST%201.0%2F%2FEN%22%20%22http%3A%2F%2Fwww.apple.com%2FDTDs%2FPropertyList-1.0.dtd%22%3E%0A%3Cplist%20version%3D%221.0%22%3E%0A%3Cdict%3E%0A%09%3Ckey%3ECFBundleDevelopmentRegion%3C%2Fkey%3E%0A%09%3Cstring%3Een%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleDisplayName%3C%2Fkey%3E%0A%09%3Cstring%3EReactGAuth%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleExecutable%3C%2Fkey%3E%0A%09%3Cstring%3E%24%28EXECUTABLE_NAME%29%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleIdentifier%3C%2Fkey%3E%0A%09%3Cstring%3E%24%28PRODUCT_BUNDLE_IDENTIFIER%29%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleInfoDictionaryVersion%3C%2Fkey%3E%0A%09%3Cstring%3E6.0%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleName%3C%2Fkey%3E%0A%09%3Cstring%3E%24%28PRODUCT_NAME%29%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundlePackageType%3C%2Fkey%3E%0A%09%3Cstring%3EAPPL%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleShortVersionString%3C%2Fkey%3E%0A%09%3Cstring%3E%24%28MARKETING_VERSION%29%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleSignature%3C%2Fkey%3E%0A%09%3Cstring%3E%3F%3F%3F%3F%3C%2Fstring%3E%0A%09%3Ckey%3ECFBundleVersion%3C%2Fkey%3E%0A%09%3Cstring%3E%24%28CURRENT_PROJECT_VERSION%29%3C%2Fstring%3E%0A%09%3Ckey%3ELSRequiresIPhoneOS%3C%2Fkey%3E%0A%09%3Ctrue%2F%3E%0A%09%3Ckey%3ENSAppTransportSecurity%3C%2Fkey%3E%0A%09%3Cdict%3E%0A%09%09%3Ckey%3ENSAllowsArbitraryLoads%3C%2Fkey%3E%0A%09%09%3Cfalse%2F%3E%0A%09%09%3Ckey%3ENSAllowsLocalNetworking%3C%2Fkey%3E%0A%09%09%3Ctrue%2F%3E%0A%09%3C%2Fdict%3E%0A%09%3Ckey%3ENSLocationWhenInUseUsageDescription%3C%2Fkey%3E%0A%09%3Cstring%3E%3C%2Fstring%3E%0A%09%3Ckey%3EUILaunchStoryboardName%3C%2Fkey%3E%0A%09%3Cstring%3ELaunchScreen%3C%2Fstring%3E%0A%09%3Ckey%3EUIRequiredDeviceCapabilities%3C%2Fkey%3E%0A%09%3Carray%3E%0A%09%09%3Cstring%3Earmv7%3C%2Fstring%3E%0A%09%3C%2Farray%3E%0A%09%3Ckey%3EUISupportedInterfaceOrientations%3C%2Fkey%3E%0A%09%3Carray%3E%0A%09%09%3Cstring%3EUIInterfaceOrientationPortrait%3C%2Fstring%3E%0A%09%09%3Cstring%3EUIInterfaceOrientationLandscapeLeft%3C%2Fstring%3E%0A%09%09%3Cstring%3EUIInterfaceOrientationLandscapeRight%3C%2Fstring%3E%0A%09%3C%2Farray%3E%0A%09%3Ckey%3EUIViewControllerBasedStatusBarAppearance%3C%2Fkey%3E%0A%09%3Cfalse%2F%3E%0A%09%3Ckey%3ECFBundleURLTypes%3C%2Fkey%3E%0A%09%3Carray%3E%0A%09%09%3Cdict%3E%0A%09%09%09%3Ckey%3ECFBundleTypeRole%3C%2Fkey%3E%0A%09%09%09%3Cstring%3EEditor%3C%2Fstring%3E%0A%09%09%09%3Ckey%3ECFBundleURLSchemes%3C%2Fkey%3E%0A%09%09%09%3Carray%3E%0A%09%09%09%09%3Cstring%3Ecom.googleusercontent.apps.6786875767-juy689878797yggihsdfds6576576sf709890798%3C%2Fstring%3E%0A%09%09%09%3C%2Farray%3E%0A%09%09%3C%2Fdict%3E%0A%09%3C%2Farray%3E%0A%3C%2Fdict%3E%0A%3C%2Fplist%3E%0A\">\n                            <button class=\"copy-button\" data-label=\"&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\n&lt;!DOCTYPE plist PUBLIC &quot;-\/\/Apple\/\/DTD PLIST 1.0\/\/EN&quot; &quot;http:\/\/www.apple.com\/DTDs\/PropertyList-1.0.dtd&quot;&gt;\n&lt;plist version=&quot;1.0&quot;&gt;\n&lt;dict&gt;\n\t&lt;key&gt;CFBundleDevelopmentRegion&lt;\/key&gt;\n\t&lt;string&gt;en&lt;\/string&gt;\n\t&lt;key&gt;CFBundleDisplayName&lt;\/key&gt;\n\t&lt;string&gt;ReactGAuth&lt;\/string&gt;\n\t&lt;key&gt;CFBundleExecutable&lt;\/key&gt;\n\t&lt;string&gt;$(EXECUTABLE_NAME)&lt;\/string&gt;\n\t&lt;key&gt;CFBundleIdentifier&lt;\/key&gt;\n\t&lt;string&gt;$(PRODUCT_BUNDLE_IDENTIFIER)&lt;\/string&gt;\n\t&lt;key&gt;CFBundleInfoDictionaryVersion&lt;\/key&gt;\n\t&lt;string&gt;6.0&lt;\/string&gt;\n\t&lt;key&gt;CFBundleName&lt;\/key&gt;\n\t&lt;string&gt;$(PRODUCT_NAME)&lt;\/string&gt;\n\t&lt;key&gt;CFBundlePackageType&lt;\/key&gt;\n\t&lt;string&gt;APPL&lt;\/string&gt;\n\t&lt;key&gt;CFBundleShortVersionString&lt;\/key&gt;\n\t&lt;string&gt;$(MARKETING_VERSION)&lt;\/string&gt;\n\t&lt;key&gt;CFBundleSignature&lt;\/key&gt;\n\t&lt;string&gt;????&lt;\/string&gt;\n\t&lt;key&gt;CFBundleVersion&lt;\/key&gt;\n\t&lt;string&gt;$(CURRENT_PROJECT_VERSION)&lt;\/string&gt;\n\t&lt;key&gt;LSRequiresIPhoneOS&lt;\/key&gt;\n\t&lt;true\/&gt;\n\t&lt;key&gt;NSAppTransportSecurity&lt;\/key&gt;\n\t&lt;dict&gt;\n\t\t&lt;key&gt;NSAllowsArbitraryLoads&lt;\/key&gt;\n\t\t&lt;false\/&gt;\n\t\t&lt;key&gt;NSAllowsLocalNetworking&lt;\/key&gt;\n\t\t&lt;true\/&gt;\n\t&lt;\/dict&gt;\n\t&lt;key&gt;NSLocationWhenInUseUsageDescription&lt;\/key&gt;\n\t&lt;string&gt;&lt;\/string&gt;\n\t&lt;key&gt;UILaunchStoryboardName&lt;\/key&gt;\n\t&lt;string&gt;LaunchScreen&lt;\/string&gt;\n\t&lt;key&gt;UIRequiredDeviceCapabilities&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;string&gt;armv7&lt;\/string&gt;\n\t&lt;\/array&gt;\n\t&lt;key&gt;UISupportedInterfaceOrientations&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;string&gt;UIInterfaceOrientationPortrait&lt;\/string&gt;\n\t\t&lt;string&gt;UIInterfaceOrientationLandscapeLeft&lt;\/string&gt;\n\t\t&lt;string&gt;UIInterfaceOrientationLandscapeRight&lt;\/string&gt;\n\t&lt;\/array&gt;\n\t&lt;key&gt;UIViewControllerBasedStatusBarAppearance&lt;\/key&gt;\n\t&lt;false\/&gt;\n\t&lt;key&gt;CFBundleURLTypes&lt;\/key&gt;\n\t&lt;array&gt;\n\t\t&lt;dict&gt;\n\t\t\t&lt;key&gt;CFBundleTypeRole&lt;\/key&gt;\n\t\t\t&lt;string&gt;Editor&lt;\/string&gt;\n\t\t\t&lt;key&gt;CFBundleURLSchemes&lt;\/key&gt;\n\t\t\t&lt;array&gt;\n\t\t\t\t&lt;string&gt;com.googleusercontent.apps.6786875767-juy689878797yggihsdfds6576576sf709890798&lt;\/string&gt;\n\t\t\t&lt;\/array&gt;\n\t\t&lt;\/dict&gt;\n\t&lt;\/array&gt;\n&lt;\/dict&gt;\n&lt;\/plist&gt;\n\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Setup Your code:<\/h2>\n\n\n\n<p>You can get all the codes from <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/mesepith\/ReactGAuth\" target=\"_blank\">https:\/\/github.com\/mesepith\/ReactGAuth<\/a>\n\n\n\n<p><strong>Install Dependencies<\/strong>:\n\n\n\n<p>The package.json file lists all the required dependencies for this project. To install them, run the following command in your project directory:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">npm install @react-native-google-signin\/google-signin @react-navigation\/native @react-navigation\/native-stack react react-native react-native-safe-area-context react-native-screens react-redux redux<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20%40react-native-google-signin%2Fgoogle-signin%20%40react-navigation%2Fnative%20%40react-navigation%2Fnative-stack%20react%20react-native%20react-native-safe-area-context%20react-native-screens%20react-redux%20redux\">\n                            <button class=\"copy-button\" data-label=\"npm install @react-native-google-signin\/google-signin @react-navigation\/native @react-navigation\/native-stack react react-native react-native-safe-area-context react-native-screens react-redux redux\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Create <code>credentials.ts<\/code> in root of your project and write your <code>GOOGLE_WEB_CLIENT_ID<\/code> that we have got from &#8216;Step 1: Setting up Google Cloud Platform&#8217;. It should look like below code:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-10\">export const GOOGLE_WEB_CLIENT_ID = &#039;Your Google Web Client Id&#039;;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#export%20const%20GOOGLE_WEB_CLIENT_ID%20%3D%20%27Your%20Google%20Web%20Client%20Id%27%3B\">\n                            <button class=\"copy-button\" data-label=\"export const GOOGLE_WEB_CLIENT_ID = &#039;Your Google Web Client Id&#039;;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><code>credentials.ts<\/code> exports the&nbsp;<code>GOOGLE_WEB_CLIENT_ID<\/code>&nbsp;constant, which is used to configure the Google Sign-In library.\n\n\n\n<p>The flow of the application is as follows:\n\n\n\n<ol class=\"wp-block-list\">\n<li>The&nbsp;<code>App<\/code>&nbsp;component renders the&nbsp;<code>NavigationContainer<\/code>&nbsp;and the&nbsp;<code>AppNavigator<\/code>.<\/li>\n\n\n\n<li>The&nbsp;<code>AppNavigator<\/code>&nbsp;renders the&nbsp;<code>LoginScreen<\/code>&nbsp;as the initial screen.<\/li>\n\n\n\n<li>The&nbsp;<code>LoginScreen<\/code>&nbsp;renders the&nbsp;<code>LoginForm<\/code>&nbsp;component, which displays a &#8220;Sign in with Google&#8221; button.<\/li>\n\n\n\n<li>When the user clicks the button, the&nbsp;<code>handleGoogleSignIn<\/code>&nbsp;function is called, which checks for Google Play Services and initiates the Google Sign-In process.<\/li>\n\n\n\n<li>If the sign-in is successful, the&nbsp;<code>handleGoogleSignIn<\/code>&nbsp;function navigates to the&nbsp;<code>HomeScreen<\/code>&nbsp;and passes the user information as a parameter.<\/li>\n\n\n\n<li>The&nbsp;<code>HomeScreen<\/code>&nbsp;receives the user information and renders the&nbsp;<code>UserProfile<\/code> component, displaying the user&#8217;s name, email, and profile picture.<\/li>\n<\/ol>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-11\">\u251c\u2500\u2500 App.tsx\n\u251c\u2500\u2500 credentials.ts\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 AppNavigator.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 components\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 LoginForm.tsx\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 UserProfile.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 screens\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 HomeScreen.tsx\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 LoginScreen.tsx\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 utils\n\u2502\u00a0\u00a0     \u2514\u2500\u2500 auth.ts\n\u2514\u2500\u2500 tsconfig.json<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%E2%94%9C%E2%94%80%E2%94%80%20App.tsx%0A%E2%94%9C%E2%94%80%E2%94%80%20credentials.ts%0A%E2%94%9C%E2%94%80%E2%94%80%20package.json%0A%E2%94%9C%E2%94%80%E2%94%80%20src%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20AppNavigator.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20components%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20LoginForm.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20UserProfile.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20screens%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20HomeScreen.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20LoginScreen.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20utils%0A%E2%94%82%C2%A0%C2%A0%20%20%20%20%20%E2%94%94%E2%94%80%E2%94%80%20auth.ts%0A%E2%94%94%E2%94%80%E2%94%80%20tsconfig.json\">\n                            <button class=\"copy-button\" data-label=\"\u251c\u2500\u2500 App.tsx\n\u251c\u2500\u2500 credentials.ts\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 AppNavigator.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 components\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 LoginForm.tsx\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 UserProfile.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 screens\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 HomeScreen.tsx\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 LoginScreen.tsx\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 utils\n\u2502\u00a0\u00a0     \u2514\u2500\u2500 auth.ts\n\u2514\u2500\u2500 tsconfig.json\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Implementing Google Authentication in a React Native application on a Mac without using Expo involves several steps, including setting up your project on Google Cloud [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-383","post","type-post","status-publish","format-standard","hentry","category-react-native"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=383"}],"version-history":[{"count":22,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/383\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/383\/revisions\/534"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}