Google OAuth — React Native IOS
OAuth is an open-standard authorization protocol or framework that describes how unrelated servers and services can safely allow authenticated access to their assets without actually sharing the initial, related, single logon credential. In authentication parlance, this is known as secure, third-party, user-agent, delegated authorization.
Let’s understand with an example,
You visit the Zomato website and there you can find an option of sign in with google. So the advantage of having this is — Users do not need to create a zomato account. They can use their Google account to place an order.
What Zomato does when you select to log in with zomato is, it goes to google and gets the required information about you, and then it takes you inside the app. This is a very high-level explanation. If you want to know more about the OAuth flow types you can check out my other stories.
https://lokeshkumar824.medium.com/oauth-authorization-code-flow-d7aab13f5783
https://lokeshkumar824.medium.com/openid-implicit-flow-26cfb4e3aa7a
Let’s start with implementing in react-native iOS application
- Create an empty react-native application by the command
npx create-native-app <appname>
- Now you will have an empty project created with the app name, open the app in any code editor and open terminal in the ios folder, and enter command pod install this will install all the libraries. after this we can try running the project with the command npx react-native run-ios. Now we will be able to see our project running in the iOS emulator.
- Install the @react-native-google-signin/google-signin by the command npm i @react-native-google-signin/google-signin from the terminal in the project folder.
- Now go to the ios folder and do pod install.
- Let's create a Google Sign-in Component in our application and write the code shown below.
How to get the webClientId?
For getting the webclientid we would need to connect our app to firebase.
- Navigate to https://console.firebase.google.com/ and create a new app.
- After creating a new project in firebase, you will be navigated to the dashboard as shown below.
- Click on the iOS icon to get started by adding an app section.
- You will the below screen
Fill in the information,
* iOS bundle ID you can get by opening ios folder in xcode as shown in the image below.
* App name can be anything it will not be shown to the end user.
- After filling in the information you can download the google config file as the next step.
- Go to Xcode and now right-click and select add files to googleLogin and select the downloaded google file.
- Go to info and URL Types and now here we need to enter the URL Schema. You can get the URL Schema from the google config file with the key name — REVERSED_CLIENT_ID
- Now open the pod file and paste pod ‘Firebase/Analytics’ in new line after the line use_react_native!(:path => config[“reactNativePath”]) and now again go to ios folder in terminal and do pod install.
- Open AppDelegate.m file and import firebase by adding @import Firebase; and also [FIRApp configure]; in the didFinishLaunchingWithOptions() funtion
- Now go to https://console.cloud.google.com/apis/credentials and select the project we created in firebase from the projects dropdown and copy the ios client id and paste in our component where it was asking for webclientid
- You will need to configure the consent screen also in order for your app to work.
That’s all, now you can test the app by clicking on the sign in with google button on your screen and it will show user info in the alert.
