Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve setup instructions #30

Merged
merged 1 commit into from
Oct 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/one-tap.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ const signIn = async () => {
// No saved credential found, call `createAccount`
}
} catch (error) {
console.error(error);
if (isErrorWithCode(error)) {
switch (error.code) {
case statusCodes.ONE_TAP_START_FAILED:
Expand All @@ -152,7 +153,6 @@ const signIn = async () => {
}
} else {
// an error that's not related to google sign in occurred
console.error(error);
}
}
};
Expand Down
7 changes: 2 additions & 5 deletions docs/setting-up/android.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ If you're using the sponsor package:

If you're using RN >= 0.73, you're good to go.

But if you're using RN 0.72 or older, you need to either:

- install version `12.1.0` of the package
- or install version >= `13` AND specify `compileSdkVersion` 34 in `android/build.gradle` of your project as highlighted below
But if you're using RN 0.72 or older, you need to specify `compileSdkVersion` 34 in `android/build.gradle` of your project as highlighted below.

## Google project configuration

Expand All @@ -31,7 +28,7 @@ You don't need to do any more modifications.

#### 1. Download the configuration file

- Download the configuration file (`google-services.json`) from Firebase into your project according to [this guide](https://developers.google.com/android/guides/google-services-plugin#adding_the_json_file).
- Download the configuration file (`google-services.json`) from Firebase. Then, place it into your project according to [these instructions](https://developers.google.com/android/guides/google-services-plugin#adding_the_json_file).

#### 2. Update gradle files

Expand Down
11 changes: 4 additions & 7 deletions docs/setting-up/expo.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ sidebar_position: 1

:::info

With Expo SDK 50, minimum iOS version was bumped to 13.4. In case you get an error during pod install step, please consult release notes to determine the right version of this package to install.
With Expo SDK 50, minimum iOS version was bumped to 13.4. In case you get an error during pod install step, please see [release notes](https://github.com/react-native-google-signin/google-signin/releases/tag/v11.0.0) to determine the right version of this package to install.

:::

:::note

This package cannot be used in ["Expo Go"](https://docs.expo.dev/workflow/overview/#expo-go-an-optional-tool-for-learning) because it requires custom native code.
This package cannot be used in [Expo Go](https://docs.expo.dev/workflow/overview/#expo-go-an-optional-tool-for-learning) because it requires custom native code.

However, you can add custom native code to an Expo app by using a [development build](https://docs.expo.dev/workflow/overview/#development-builds). Using a development build is the recommended approach for production apps, and is documented in this guide.

Expand All @@ -32,7 +32,7 @@ After installing the npm package, add a config plugin (read more details below)

If you're _not_ using Firebase, provide the `iosUrlScheme` option to the config plugin.

To obtain `iosUrlScheme`, go to the [Google Cloud Console](https://console.cloud.google.com/apis/credentials) and copy the "iOS URL scheme" from your iOS client in the "OAuth 2.0 Client IDs" section.
To obtain `iosUrlScheme`, go to the [Google Cloud Console](https://console.cloud.google.com/apis/credentials?project=_) and copy the "iOS URL scheme" from your iOS client in the "OAuth 2.0 Client IDs" section.

```json title="app.json|js"
{
Expand Down Expand Up @@ -73,10 +73,7 @@ If you're using the sponsor package:

If you're using Expo SDK >= 50, you're good to go.

But if you're using Expo 49 or older, you need to either:

- install version `12.1.0` of the package
- or install version >= `13` AND specify `compileSdkVersion` 34 of your project using [Expo BuildProperties](https://docs.expo.dev/versions/latest/sdk/build-properties/#usage)
But if you're using Expo 49 or older, you need to specify `compileSdkVersion` 34 of your project using [Expo BuildProperties](https://docs.expo.dev/versions/latest/sdk/build-properties/#usage).

## Rebuild the app

Expand Down
47 changes: 32 additions & 15 deletions docs/setting-up/get-config-file.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,29 @@ sidebar_position: 15

Please note that you **do not** need Firebase to configure Google Sign In. However, if you use it, it's a little easier to set up the sign in experience because Firebase gives you one file to download and put into your project.

Configuration information obtained in this guide is used in later steps of the setup and in the [`configure()` call](/docs/one-tap#configure).

## Android

Read below on how to set up Google Sign In for your Android app.
Follow the 2 steps below to set up Google Sign In for your Android app.

:::danger
Completing this guide is crucial for Google Sign-In to work on Android. If not done correctly, you will get the infamous `DEVELOPER_ERROR` error [(how to troubleshoot it)](/docs/troubleshooting#developer_error).
:::

### Obtain SHA-1 certificate fingerprints
### Step 1: Obtain SHA-1 certificate fingerprints

You likely have multiple signing configurations - for example for building debug and release APKs locally or building on [Expo EAS](https://docs.expo.dev/app-signing/managed-credentials/#inspecting-credentials-configuration). Then there's the [Play App Signing](https://support.google.com/googleplay/android-developer/answer/9842756?hl=en) for store deployments - while the Google Play Store does not rebuild your app, it may _re-sign_ it using its own signing configuration.

You likely have multiple signing configurations - for example for building local debug and release APKs, builds on [Expo EAS](https://docs.expo.dev/app-signing/managed-credentials/#inspecting-credentials-configuration), and [Play App Signing](https://support.google.com/googleplay/android-developer/answer/9842756?hl=en) for production deployments. You will need to get the SHA1 certificate fingerprints
for _all_ keystores you intend to use and enter them _all_ in Firebase or Google Cloud Console.
First, you need to get the SHA1 certificate fingerprints for _all_ of these signing configurations using the instructions below.
Then go to "Step 2".

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="eas" label="When using Expo EAS">
If you're using Expo EAS, read [credentials docs](https://docs.expo.dev/app-signing/managed-credentials/#inspecting-credentials-configuration) to learn how to obtain information about how your app is signed with EAS.
If you're using Expo EAS, run `eas credentials` to obtain the Keystore information, which includes the SHA-1 fingerprint. See [EAS credentials docs](https://docs.expo.dev/app-signing/managed-credentials/#inspecting-credentials-configuration) to learn more.
</TabItem>
<TabItem value="local" label="When developing locally">
1. From your project root, `cd android && ./gradlew signingReport`.
Expand All @@ -42,7 +46,9 @@ import TabItem from '@theme/TabItem';
</TabItem>
</Tabs>

### Add SHA-1 hashes to Firebase or Google Cloud Console
### Step 2: Add SHA-1 hashes to Firebase or Google Cloud Console

Using the SHA-1 fingerprints obtained in the previous step, follow the instructions below.

<Tabs>
<TabItem value="firebase" label="When using Firebase">
Expand All @@ -58,35 +64,46 @@ import TabItem from '@theme/TabItem';
</TabItem>

<TabItem value="cloud-console" label="When not using Firebase">
Follow the "To create an OAuth 2.0 client ID in the console" instructions
[here](https://support.google.com/cloud/answer/6158849?hl=en).
Follow the "Create authorization credentials" instructions
[here](https://developers.google.com/identity/protocols/oauth2/native-app#android) to create an "OAuth client ID" of type Android for each of the SHA-1 fingerprints you obtained - see screenshot below.

![Google cloud console - creating Android OAuth ID](/img/android-client-id.png)

</TabItem>

</Tabs>

---

## iOS

Read below on how to set up Google Sign In for your iOS app.

<Tabs>
<TabItem value="firebase" label="When using Firebase">
1. Sign in to Firebase and open your project.
2. Click the Settings icon and select Project settings.
3. In the "Your apps" card, select the app.

1. Sign in to [Firebase Console](https://console.firebase.google.com/) and open your project.
2. Click the settings icon and go to "Project settings".
3. Scroll down to "Your apps" section, and select the app.
4. Check that "Bundle ID" is correct.
5. Download the `GoogleService-Info.plist` file.

</TabItem>

<TabItem value="cloud-console" label="When not using Firebase">

You need to obtain the `reversed client id`.
Remember that _all_ created client IDs can be found in the [Google Cloud Console](https://console.cloud.google.com/apis/credentials?project=_).

Follow the instructions at ["Get an OAuth client ID"](https://developers.google.com/identity/sign-in/ios/start-integrating#get_an_oauth_client_id), ["Get an OAuth server client ID"](https://developers.google.com/identity/sign-in/ios/start-integrating#server_client_id) and then ["Configure your application project"](https://developers.google.com/identity/sign-in/ios/start-integrating#configure_app_project).
Obtain the iOS OAuth Client ID and "iOS URL scheme" (also known as `reversed client id`): Create an OAuth Client ID of type iOS in [Google Cloud Console](https://console.cloud.google.com/apis/credentials?project=_). Alternatively, use <a href="https://console.developers.google.com/henhouse/?pb=%5B%22hh-0%22%2Cnull%2Cnull%2Cnull%2C%22https%3A%2F%2Fdevelopers.google.com%22%2Cnull%2Cnull%2Cnull%2C%22Configure%20a%20project%20for%20Google%20Sign-In%22%2C1%2Cnull%2Cnull%2C0%2C1%2Cnull%2Cnull%2Cnull%2Cnull%2C0%2Cnull%2Cnull%2C0%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2C0%2Cnull%2Cnull%2Cnull%2C0%5D" target="_blank">this wizard</a>.

When done configuring your project (check you selected the correct project in the console), take note of Web Client ID which you may need later. It can be found [here](https://console.developers.google.com/apis/credentials).
The Client IDs are under the OAuth section.
We will use these later in the setup.

</TabItem>

</Tabs>

---

## Web Client ID (optional)

For many use cases, a Web Client ID is needed (the [`configure()`](/docs/one-tap#configure) call). To obtain a Web Client ID, go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials?project=_) and find an existing one (it may be already created by Firebase) or create a new OAuth Client ID of type **Web**.
6 changes: 5 additions & 1 deletion docs/setting-up/ios.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,14 @@ If you use Expo, please follow [this guide](/setting-up/expo.md) instead. This g

- Follow [this](./get-config-file) guide to get the configuration information which you need for the next steps.

### Firebase Authentication

If you're using Firebase Authentication, download the `GoogleService-Info.plist` file and place it into your Xcode project.

### Xcode configuration

- Configure URL types in the `Info` panel (see screenshot)
- add a URL with scheme set to your `REVERSED_CLIENT_ID` (found inside `GoogleService-Info.plist` or Google Cloud console)
- add your "iOS URL scheme" (also known as `reversed client id`), which can be found in [Google Cloud Console](https://console.cloud.google.com/apis/credentials?project=_) under your iOS client ID.
- If you need to support Mac Catalyst, you will need to enable the Keychain Sharing capability on each build target. No keychain groups need to be added.

![link config](/img/urlTypes.png)
Expand Down
7 changes: 4 additions & 3 deletions docs/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@ See [the next paragraph](#developer_error).

### `DEVELOPER_ERROR` or `code: 10` or `Developer console is not set up correctly` error message {#developer_error}

This is always (_always_!) a configuration mismatch between your app and Google's servers. The problem is on your app's side.
This is always (_always_!) a configuration mismatch between your app and the server-side setup (in Firebase or Google Cloud console).

Follow these pointers:

- [Search the issue tracker](https://github.com/react-native-google-signin/google-signin/issues?q=is%3Aissue+DEVELOPER+ERROR+is%3Aclosed) for old reports of the error
- Make sure that your SHA certificate fingerprints and package name you entered in Firebase / Google Cloud Console are correct. [See how your app was signed](https://x.com/vonovak/status/1692127631473529226). If you are in development, make sure your development signing fingerprint is added as well.
- Make sure that your SHA certificate fingerprints and Android package name you entered in Firebase / Google Cloud Console are correct.
- [See how your app was signed](https://x.com/vonovak/status/1692127631473529226). If you are in development, make sure your development signing fingerprint is added as well.
- Follow the [setup guide](/docs/setting-up/get-config-file) and perform its steps once again.
- [Search the issue tracker](https://github.com/react-native-google-signin/google-signin/issues?q=is%3Aissue+DEVELOPER+ERROR+is%3Aclosed) for old reports of the error
- If you're passing `webClientId` in configuration object to `GoogleSignin.configure()` make sure it's correct and that it is of type web (NOT Android!). You can get your `webClientId` from [Google Developer Console](https://console.developers.google.com/apis/credentials). It is listed under "OAuth 2.0 client IDs".

### Login does not work when using Internal App Sharing.
Expand Down
Binary file added static/img/android-client-id.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.