Giovanny's WikiExpo Android and Google Sign In
Docs:
Git commit: This commit contains the changes in this section:
1. Install dependencies
npx expo install @react-native-google-signin/google-signin
WARNING
At the moment of this blog writing, the latest version of @react-native-google-signin/google-signin is 11.0.0, but it has a bug that prevents the iOS from building. So we need to install the previous version 10.1.0 instead.
npm install @react-native-google-signin/google-signin@10.1.0npm install @react-native-google-signin/google-signin@10.1.02. Configure Plugin
// app.json
{
"expo": {
// ...
"plugins": ["@react-native-google-signin/google-signin"]
}
}// app.json
{
"expo": {
// ...
"plugins": ["@react-native-google-signin/google-signin"]
}
}3. Build the app and run on Android
Then run the following to generate the native project directories for android:
npx expo prebuild --platform androidnpx expo run:android
4. Google Console API
- Go to: https://console.cloud.google.com/apis/credentials
- Create a project if you don't have one
OAuth consent screen:
screenshot
Select
Externaland clickCreatescreenshot
Just Fill in the required fields for now and click
Save and Continuescreenshot
No need to add any
scopesfor now, clickSave and ContinueAdd test users if you want, click
Save and ContinueWhile publishing status is set to "Testing", only test users are able to access the app. Allowed user cap prior to app verification is 100, and is counted over the entire lifetime of the app.
screenshot
Click
Back to Dashboard
Create Credentials:
In Credentials
screenshot
Click
Create Credentialsand selectOAuth client IDscreenshot
Select
Androidand fill in the required fields and clickCreatePackage name: Use the one from
app.jsoninexpo.android.packageSHA-1 certificate fingerprint: Run
keytool -keystore android/app/debug.keystore -list -vand copy the SHA-1 value- Password:
android
- Password:
screenshot
No need to copy the
Client IDfor now
5. Google Sign In component
Add the component to App.tsx:
// App.tsx
...
{Platform.OS === 'android' && <GoogleSignIn />}
...// App.tsx
...
{Platform.OS === 'android' && <GoogleSignIn />}
...