Ionic Vue Authenticate Google Users returns 401 HTTP Status response

[TadasMil]

How frequently does the bug occur?

All the time

Description

My main goal is to integrate google log in and store user details inside realm. As of now, following realm docs I'm not able to logIn user.

I've followed the guide here, and I'm not able to complete the logIn part.

I found multiple registered issues regarding this problem:

1. issue-7578
2. issue-3249
3. issue-3116
4. issue-42 - You can find even here something similar.

This 2nd issue is pretty similar to mines, but I get different response error message. This even presents to use a solution for redirect-url.

1. Is there any other way to outcome this without passing a url to Credentials.google? 2. Maybe I should authenticate user using firebase and use realm for data storage? Because its been quiet along and the issue still persists.

Any other recommendation would be appreciated 🙏

Stacktrace & log output

This is what I get after calling `await realm.logIn(credential)`:

 Uncaught (in promise) Error: Request failed (POST https://realm.mongodb.com/api/client/v2.0/app/<app-id>/auth/providers/oauth2-google/login): error fetching info from OAuth2 provider (status 401 Unauthorized)

Inside logs of realm I see this:

Error:

not found
Remote IP Address:

Can you reproduce the bug?

Yes, always

Reproduction Steps

I followed this guide to for realm login here and adopted to my env.

1. Scaffold new Ionic application.
2. Create new credentials inside google developer console (client ID).
3. Install @codetrix-studio/capacitor-google-auth complete the setup part for setting up client Id where its needed. This will retrieve google user object. For web, you want to initialize the GoogleAuth. For android, you will have to take additional setup with sha key.
4. Install realm-web and inside main.ts initialize realm app using new Realm.App({ id: appId }).
5. Setup code and run it

const signInWithGoogle = async () => {
  const response = await GoogleAuth.signIn();
  const { idToken } = response.authentication;

  const credentials = Realm.Credentials.google({ idToken });

 
  realm.logIn(credentials)
    .then((user) => {
      console.log(`Logged in with id: ${user.id}`);
    });
};

Version

What SDK flavour are you using?

Atlas Device Sync

Are you using encryption?

No, not using encryption

Platform OS and version(s)

Web, Android

Build environment

Which debugger for React Native: ..

Ionic:

   Ionic CLI       : 6.19.0 (C:\Users\name\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.2.5

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : 4.1.0
   @capacitor/core    : 4.1.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.0

System:

   NodeJS : v18.0.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.6.0
   OS     : Windows 10

Cocoapods version

No response

[kneth]

@TadasMil

Thank you for reporting. I have a couple of follow-up questions.

1. Which version of Realm Web do you use?
2. When calling GoogleAuth.initialize(), did you set grantOfflineAccess to false or true?

[TadasMil]

@kneth Sorry for a late response.

1. I'm using 1.7.1 version of realm-web.
2. I've tried both with grantOfflineAccess as true and as false.

[kneth]

I think the issue is server-side. I don't know if https://www.mongodb.com/community/forums/t/error-fetching-info-from-oauth2-provider/116780 can help you. Otherwise I suggest you raise a proper support ticket - see https://support.mongodb.com/?_ga=2.190708203.1130835416.1663574736-25634361.1661946744

[kneth]

I am closing the issue due to no updates. Please comment and reopen the issue if needed.