Felipe Castillo
Felipe Castillo

Reputation: 567

Angular/capacitor sign in with google throws error 10

I have been trying to implement the google sign in function on my android application, I'm going to show all the steps I've followed to do so

My app is an angular project that uses capacitor js, on my google cloud console account I have performed the next steps:

  1. Created an OAuth 2.0 android credential
  2. Added the sha-1 of my app, I did so by using ./gradlew signingReport
  3. Added the package name of my app, just like it was defined in my capacitor.config.ts file
  4. Created an OAuth 2.0 web application credential
  5. Created a secrent client

To handle the sign in proccess on my app I am also using the @codetrix-studio/capacitor-google-auth package, I'm initializing it with my android client id

async ngOnInit(): Promise<any> {
    AOS.init({
      once: true
    });

    const deviceInfo = await Device.getInfo();

      GoogleAuth.initialize({
        clientId: 'my-android-clientid.apps.googleusercontent.com',
        scopes: ['profile', 'email'],
        grantOfflineAccess: true
      });


  }
};

And also using the same client in my configuration file capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.test.test',
  appName: 'test',
  webDir: 'dist',
  server: {
    androidScheme: 'https'
  },
  plugins: {
    GoogleAuth: {
      scopes: ["profile", "email"],
      androidClientId: 'my-android-clientid.apps.googleusercontent.com',
      serverClientId: 'my-android-clientid.apps.googleusercontent.com',
      clientId: 'my-android-clientid.apps.googleusercontent.com',
      forceCodeForRefreshToken: true
    }
  }

Also I've put the client id in the strings.xml file

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">test</string>
    <string name="title_activity_main">test</string>
    <string name="package_name">Package-name</string>
    <string name="custom_url_scheme">com.test.test</string>
    <string name="server_client_id">my-android-clientid.apps.googleusercontent.com</string>

</resources>

My backend service uses laravel and laravel socialite to authenticate the users, in the .env file I have the next credentials

GOOGLE_CLIENT_ID=my-android-clientid.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=MY-SECRET

Now every time I run the app using android studio I am able to see the google sign in modal and type my credentials, however after doing so I get

“Something went wrong” with code “10”

Can I use the google sign in functionality locally or do I have to upload my project to google play console? please appreciate any help

Upvotes: 0

Views: 571

Answers (1)

Felipe Castillo
Felipe Castillo

Reputation: 567

I've managed to solve the problem, since I am using capacitor 5.7.3, "@capacitor/core": "^5.7.3" the problem was that the package was not generating the "capacitor.config.json" file, in new versions of capacitor it only uses the capacitor.config.ts one but for some reason it was causing the problem in my project, so in order to solve the problem make sure that you are placing the capacitor.config.json next to the capacitor.config.ts file, the structure must be the next one

{
    "appId": "com.test.test",
    "appName": "the name of your app",
    "webDir": "dist",
    "server": {
      "androidScheme": "https"
    },
    "plugins": {
      "GoogleAuth": {
        "scopes": ["profile", "email"],
        "androidClientId": "your-web-platform-id",
        "serverClientId": "your-web-platform-id",
        "clientId": "your-web-platform-id",
        "forceCodeForRefreshToken": true
      }
    }
  }

also remember to use your web client_id in the strings.xml file

<string name="server_client_id">Your Web Client ID</string>

You can find more info in this article

Upvotes: 0

Related Questions