Google Oauth using react native CLI
Google OAuth is Google’s GSuite version of an OAuth 2 client. OAuth is a standard that apps can use to provide client applications with “secure delegated access”. OAuth works over HTTPS and authorizes devices, APIs, servers, and applications with access tokens rather than credentials.
Google oauth is one of the most convenient ways to sign in as a user doesn’t need to create a new account with a password because most of the time, we don’t want to remember a new password, don’t we?
To make it easier, I will create a simple application on android and iOS that will only shows some text and google sign in button. The result will look like this.
First you need to create react native project using the basic template. I prefer the typescript of it so I usually use this command to create a new react native project.
npx react-native init MyApp --template react-native-template-typescript@6.11.9I am using this github module called react native community — react native template typescript.
After it’s done. I rewrite all the code on App.tsx file and put this code on it.
That’s pretty much it for the react native part! On the first load using useEffect hook, we create a configure function that contain the api data from google service. On the element part, there’s <GoogleSigninButton /> element which is self-explanatory. On press, it will trigger signIn function that will check either the user has the google play services or not on their phone. After that, we’ll try to sign in using the user google account. If it’s successful, it will return the data of the user.
The data will look like this.
Android Configuration
First you need to open your APIs & Services page on google cloud platform. Click the create credentials button and then click OAuth client ID.
Select android as application type. You need to fill out the name of your app which is whatever you want. But for package name and SHA-1 fingerprint, you need to get it from your project.
For the package name, you need to go to android folder -> app -> src -> main -> AndroidManifest.xml.
For SHA-1 fingerprint, make sure your current directory is /android/app and then type this command
keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android
You can find the SHA-1 fingerprint on the terminal after you execute that command.
Android part is done now, you can click create.
Next, you need to configure the web client API. Click on Oauth client ID just like before but now, choose web application.
Just like this. You’ll get the web client ID. Use that web client ID on your react native project.
Now restart your metro and it should be working fine!
When I click sign in with google, it will return my google account information.
IOS Configuration
You need to create Oauth Client ID for iOS.
You need bundle ID. You can get that from the xcode. Change directory into ios folder and then type:
open yourproject.xcworkspace
You can copy the bundle identifier on general tab.
Paste the bundle identifier and you good to go.
The last thing you need to do is to edit info.plist file on iOS folder and add this code:
Change this line
<string>org.reactjs.native.example.MyGoogleReactNative</string>Into your bundle identifier. And change this line
<string>com.googleusercontent.apps.fmoawmefoiamfeowamfowaimefoim</string>Into your iOS url scheme that you get from creating iOS client ID.
And that’s it. You can click on google sign in button and it should work.
The final result.
