fix: Update Google Sign In setup to use new Google Auth Platform (#393)

Co-authored-by: Marcelo Soares <marcelo.me.soares@gmail.com>

Author: exaby73

docs/06-concepts/11-authentication/04-providers/02-google/01-setup.md

@@ -1,6 +1,6 @@
 # Setup
 
-To set up Sign in with Google, you will need a Google account for your organization and set up a new project. For the project, you need to set up _Credentials_ and _OAuth consent screen_. You will also need to add the `serverpod_auth_idp_flutter` package to your app and do some additional setup depending on each platform.
+To set up Sign in with Google, you will need a Google account for your organization and set up a new project. You will also need to add the `serverpod_auth_idp_flutter` package to your app and do some additional setup depending on each platform.
 
 :::note
 Right now, we have official support for iOS, Android, and Web for Google Sign In.
@@ -20,28 +20,54 @@ To be allowed to access user data and use the authentication method in Serverpod
 
 [Enable it here](https://console.cloud.google.com/apis/library/people.googleapis.com) or find it yourself by navigating to the _Library_ section under _APIs & Services_. Search for _Google People API_, select it, and click on _Enable_.
 
-### Setup OAuth consent screen
+### Configure Google Auth Platform
 
-The setup for the OAuth consent screen can be found [here](https://console.cloud.google.com/apis/credentials/consent) or under _APIs & Services_ > _OAuth consent screen_.
+If you haven't already, enable the Google Auth Platform for your project. Navigate to the [Google Auth Platform overview](https://console.cloud.google.com/auth/overview) and click _Get started_.
 
-1. Fill in all the required information, for production use you need a domain that adds under `Authorized` domains.
+![Google Auth Platform Overview](/img/authentication/providers/google/4-auth-platform-overview.png)
 
-2. Add the scopes `.../auth/userinfo.email` and `.../auth/userinfo.profile`.
+Configure the following settings in the Google Auth Platform:
 
-3. Add your email to the test users so that you can test your integration in development mode.
+1. **Data Access**: Navigate to the [Data Access](https://console.cloud.google.com/auth/scopes) page to add the required scopes. Add the scopes `.../auth/userinfo.email` and `.../auth/userinfo.profile`.
 
 ![Scopes](/img/authentication/providers/google/1-scopes.png)
 
+:::tip
+If you need access to additional Google APIs (e.g., Calendar, Drive), you can add more scopes here. See [Accessing Google APIs](./configuration#accessing-google-apis) for details on requesting additional scopes and using them with the `getExtraGoogleInfoCallback` on the server.
+:::
+
+1. **Audience**: Navigate to the [Audience](https://console.cloud.google.com/auth/audience) page to add test users. Add your email so you can test your integration in development mode.
+
+:::tip
+For production apps, you can configure additional branding options on the [Branding](https://console.cloud.google.com/auth/branding) page. See the [Google Auth Platform documentation](https://developers.google.com/identity/protocols/oauth2) for more details.
+:::
+
 ## Server-side configuration
 
-Create the server credentials in the Google Cloud Console. Navigate to _Credentials_ under _APIs & Services_. Click _Create Credentials_ and select _OAuth client ID_. Configure the OAuth client as a _**Web application**_. If you have a domain add it to the `Authorized JavaScript origins` and `Authorized redirect URIs`. For development purposes we can add `http://localhost:8082` to both fields, this is the address to the web server.
+Create the server credentials in the Google Auth Platform. Navigate to _Clients_ and click _Create Client_. Configure the OAuth client as a _**Web application**_. If you have a domain add it to the `Authorized JavaScript origins` and `Authorized redirect URIs`. For development purposes, we can add `http://localhost:8082` to both fields, which is the address to the web server.
 
-![Google credentials](/img/6-google-credentials.jpg)
+![Google credentials](/img/authentication/providers/google/5-clients.png)
 
 Download the JSON file for your web application OAuth client. This file contains both the client id and the client secret. You will need to supply the contents of the file to the `clientSecret` property of the `GoogleIdpConfig` object.
 
 This can be done by pasting the contents of the JSON file into the `googleClientSecret` key in the `config/passwords.yaml` file or setting as value of the `SERVERPOD_PASSWORD_googleClientSecret` environment variable. Alternatively, you can read the file contents directly using the `GoogleClientSecret.fromJsonFile()` method.
 
+```yaml
+development:
+  googleClientSecret: |
+    {
+      "web": {
+        "client_id": "your-client-id.apps.googleusercontent.com",
+        "project_id": "your-project-id",
+        "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+        "token_uri": "https://oauth2.googleapis.com/token",
+        "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+        "client_secret": "your-client-secret",
+        "redirect_uris": ["http://localhost:8082"]
+      }
+    }
+```
+
 In your main `server.dart` file, configure the Google identity provider:
 
 ```dart
@@ -103,27 +129,27 @@ For our client-side configurations, we have to first create client-side credenti
 
 ### iOS
 
-Create the client credentials. Navigate to _Credentials_ under _APIs & Services_. Click _Create Credentials_ and select _OAuth client ID_. Configure the OAuth client as Application type _**iOS**_.
+Create the client credentials in the Google Auth Platform. Navigate to _Clients_ and click _Create Client_. Configure the OAuth client as Application type _**iOS**_.
 
-Fill in all the required information, and create the credentials. Then download the `plist` file rename it to `GoogleService-Info.plist` and put it inside your ios project folder. Then drag and drop it into your XCode project to include the file in your build.
+Fill in all the required information and create the credentials. Download the `plist` file - you'll need to extract values from it to configure your app.
 
-Open the `GoogleService-Info.plist` in your editor and add the SERVER_CLIENT_ID if it does not exist:
+Open your `ios/Runner/Info.plist` file and add the following keys:
 
 ```xml
 <dict>
   ...
-  <key>SERVER_CLIENT_ID</key>
+  <key>GIDClientID</key>
+  <string>your_ios_client_id</string>
+  <key>GIDServerClientID</key>
   <string>your_server_client_id</string>
 </dict>
 ```
 
-Replace `your_server_client_id` with the client id from the JSON file you put inside the config folder in the server.
+Replace `your_ios_client_id` with the `CLIENT_ID` value from the downloaded plist file, and `your_server_client_id` with the client ID from the server credentials JSON file.
 
 #### Add the URL scheme
 
-To allow us to navigate back to the app after the user has signed in we have to add the URL Scheme, the scheme is the reversed client ID of your iOS app. You can find it inside the `GoogleService-Info.plist` file.
-
-Open the `info.plist` file in your editor and add the following to register the URL Scheme.
+To allow navigation back to the app after sign-in, add the URL scheme to your `Info.plist`. The scheme is the reversed client ID of your iOS app (found as `REVERSED_CLIENT_ID` in the downloaded plist file).
 
 ```xml
 <dict>
@@ -135,22 +161,22 @@ Open the `info.plist` file in your editor and add the following to register the
       <string>Editor</string>
       <key>CFBundleURLSchemes</key>
       <array>
-        <string>your_reversed_client_id</string>
+        <string>com.googleusercontent.apps.your_client_id</string>
       </array>
     </dict>
   </array>
 </dict>
 ```
 
-Replace `your_reversed_client_id` with your reversed client ID.
+Replace the URL scheme with your actual reversed client ID.
 
 :::info
 If you have any social logins in your app you also need to integrate "Sign in with Apple" to publish your app to the app store. ([Read more](https://developer.apple.com/sign-in-with-apple/get-started/)).
 :::
 
 ### Android
 
-Create the client credentials. Navigate to _Credentials_ under _APIs & Services_. Click _Create Credentials_ and select _OAuth client ID_. Configure the OAuth client as Application type _**Android**_.
+Create the client credentials in the Google Auth Platform. Navigate to _Clients_ and click _Create Client_. Configure the OAuth client as Application type _**Android**_.
 
 Fill in all required information, you can get the debug SHA-1 hash by running `./gradlew signingReport` in your Android project directory. Create the credentials and download the JSON file.
 
@@ -164,11 +190,15 @@ $ keytool -list -v -keystore /path/to/keystore
 ```
 :::
 
+:::tip
+If you encounter issues with Google Sign-In on Android, check the [official troubleshooting guide](https://pub.dev/packages/google_sign_in_android#troubleshooting) for common solutions.
+:::
+
 ### Web
 
-There is no need to create any client credentials for the web, since it uses the same client ID as the server. However, you have to modify the server credentials inside the Google Cloud Console.
+There is no need to create any client credentials for the web, since it uses the same client ID as the server. However, you have to modify the server credentials in the Google Auth Platform.
 
-Navigate to _Credentials_ under _APIs & Services_ and select the server credentials. Under `Authorized JavaScript origins` and `Authorized redirect URIs` add the domain for your Flutter app, for development, this is `http://localhost:<port>` where the port is the port you are using.
+Navigate to _Clients_ and select the server credentials (the one configured as a _**Web application**_). Under `Authorized JavaScript origins` and `Authorized redirect URIs` add the domain for your Flutter app, for development, this is `http://localhost:<port>` where the port is the port you are using.
 
 :::info
 Force flutter to run on a specific port by running.
@@ -178,11 +208,7 @@ $ flutter run -d chrome --web-port=49660
 ```
 :::
 
-Set up the actual redirect URI where the user will navigate after the sign-in. You can choose any path you want but it has to be the same in the credentials, your server, and Flutter configurations.
-
-For example, using the path `/googlesignin`.
-
-For development inside `Authorized redirect URIs` add `http://localhost:8082/googlesignin`, in production use `https://example.com/googlesignin`.
+Set up the redirect URI where the user will navigate after sign-in. For development, add `http://localhost:8082` inside `Authorized redirect URIs`. In production, use your server's domain (e.g., `https://example.com`).
 
 Then, on the `web/index.html` file, add the following to the `<head>` section:
 

docs/06-concepts/11-authentication/04-providers/02-google/02-configuration.md

@@ -67,7 +67,7 @@ final googleIdpConfig = GoogleIdpConfigFromPasswords(
 
 The default setup allows access to basic user information, such as email, profile image, and name. You may require additional access scopes, such as accessing a user's calendar, contacts, or files. To do this, you will need to:
 
-- Add the required scopes to the OAuth consent screen.
+- Add the required scopes to the [Data Access](./setup#configure-google-auth-platform) page in the Google Auth Platform.
 - Request access to the scopes when signing in. Do this by setting the `scopes` parameter of the `GoogleSignInWidget` or `GoogleAuthController`.
 
 A full list of available scopes can be found [here](https://developers.google.com/identity/protocols/oauth2/scopes).
@@ -122,3 +122,48 @@ If lightweight sign-in fails (e.g., no previous session exists or the user dismi
 :::note
 The lightweight sign-in attempt happens automatically when the controller is initialized, typically at app launch. If successful, users will be signed in without any additional interaction.
 :::
+
+### Configuring Client IDs on the App
+
+If no client IDs are provided programmatically, the underlying `google_sign_in` package falls back to reading from platform-specific configuration files (e.g., `GoogleService-Info.plist` for iOS, `google-services.json` for Android). To set them programmatically, you can use the following methods.
+
+#### Passing Client IDs in Code
+
+You can pass the client IDs directly when initializing the Google Sign-In service:
+
+```dart
+client.auth.initializeGoogleSignIn(
+  clientId: '<platform_client_id>.apps.googleusercontent.com',
+  serverClientId: '<web_client_id>.apps.googleusercontent.com',
+);
+```
+
+This approach is useful when you need different client IDs per platform and want to manage them in your Dart code.
+
+#### Using Environment Variables
+
+Alternatively, you can pass client IDs during build time using the `--dart-define` option. The Google Sign-In provider supports the following environment variables:
+
+- `GOOGLE_CLIENT_ID`: The platform-specific OAuth client ID
+- `GOOGLE_SERVER_CLIENT_ID`: The server (web application) OAuth client ID
+
+If `clientId` and `serverClientId` values are not supplied when initializing the service, the provider will automatically fetch them from these environment variables.
+
+**Example usage:**
+
+```bash
+flutter run \
+  -d "<device>" \
+  --dart-define="GOOGLE_CLIENT_ID=<platform_client_id>.apps.googleusercontent.com" \
+  --dart-define="GOOGLE_SERVER_CLIENT_ID=<web_client_id>.apps.googleusercontent.com"
+```
+
+This approach is useful when you need to:
+
+- Manage separate client IDs for different platforms (Android, iOS, Web) in a centralized way
+- Avoid committing client IDs to version control
+- Configure different credentials for different build environments (development, staging, production)
+
+:::tip
+You can also set these environment variables in your IDE's run configuration or CI/CD pipeline to avoid passing them manually each time.
+:::