Google token string depreciated please use auth code object

[Haseebshah936]

How frequently does the bug occur?

All the time

Description

Uncaught (in promise) Error: google(<tokenString>) has been deprecated. Please use google(<authCodeObject>).
I have received this error. All tough I was following the original docs both for google one tap connect and realm. Did some digging and found that this error shows when creating realm credential for google. I am using the realm web sdk with react. This error is generating from {{bundle.dom.es.js }}at line 2386 in method derivePayload. If there is any solution or some has faced this issue before it will be grate if you can share the solution. The same issue can be recreated by using the code provided in the realm web sdk google authentication code sample.

https://www.mongodb.com/docs/realm/web/authenticate/#std-label-web-google-onetap

Stacktrace & log output

No response

Can you reproduce the bug?

Yes, always

Reproduction Steps

No response

Version

2.0.0

What SDK flavour are you using?

Atlas App Services (auth, functions, etc.)

Are you using encryption?

No, not using encryption

Platform OS and version(s)

Mac

Build environment

React

Cocoapods version

No response

[kneth]

@Haseebshah936

In order to make the API clear, we have moved from positional parameters to named parameters. From version 2.0.0 you should use

const autoCode = ...;
const creds = Realm.Credentials.google({
  authCode
});

[Haseebshah936]

const googleAuth = React.useCallback(
    async (code) => {
      const credentials = Realm.Credentials.google(code);
      console.log(credentials);
      try {
        // Authenticate the user
        const user = await realmApp.logIn(credentials);
        // `App.currentUser` updates to match the logged in user
        console.assert(user.id === realmApp.currentUser.id);
        return user;
      } catch (err) {
        console.error("Failed to log in", err);
      }
    },
    [realmApp]
  );

// Google One Tap Login
const loadScript = (src) =>
    new Promise((resolve, reject) => {
      if (document.querySelector(`script[src="${src}"]`)) return resolve();
      const script = document.createElement("script");
      script.src = src;
      script.onload = () => resolve();
      script.onerror = (err) => reject(err);
      document.body.appendChild(script);
    });

  const googleButton = useRef(null);

// loading script for google oneTap and rendering google button

  useEffect(() => {
    const src = "https://accounts.google.com/gsi/client";
    const id =
      "Client Id ;)";

    loadScript(src)
      .then(() => {
        /*global google*/
        console.log(google);
        google.accounts.id.initialize({
          client_id: id,
          callback: handleCredentialResponse,
        });
        google.accounts.id.renderButton(googleButton.current, {
          theme: "filled_blue",
          size: "large",
        });
      })
      .catch(console.error);

    return () => {
      const scriptTag = document.querySelector(`script[src="${src}"]`);
      if (scriptTag) document.body.removeChild(scriptTag);
    };
  }, []);

// Call back function triggered when google button is pressed

  async function handleCredentialResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
    googleAuth(response.credential);
  }

Here is my code which gave the error. I think I am already using this method. The code here was coming from google one tap login. I have also tested it against @react-oauth/google.

// @react-oauth/google.

const googleAuth = useGoogleLogin({
    flow: "auth-code",
    onSuccess: async ({ code }) => {
      console.log(code);
      const credentials = Realm.Credentials.google(code);
      realmApp
        .logIn(credentials)
        .then((user) => alert(`Logged in with id: ${user.id}`));
    },
    redirect_uri: "http://localhost:3000/home",
  });

[kneth]

Please try to change const credentials = Realm.Credentials.google(code) to const credentials = Realm.Credentials.google({ authCode: code })

[takameyer]

@Haseebshah936 Did the suggested change help?

[Haseebshah936]

Sorry for the delay in reply but no the suggested solution doesn't worked it returened realm auth. Quite frankly I didn't remember the exact response. But I will share it in a while.

[takameyer]

@Haseebshah936 If this doesn't work:

const credentials = Realm.Credentials.google({ authCode: code })

try this:

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

[jwing8]

I'm running into the same issue. I tried changing the parameter from a string (which worked prior to 2.0) to an object, testing both authCode and idToken as properties, however I keep getting the following error: TypeError: (intermediate value).google is not a function

The documentation stills refers to passing in a string in the example provided on https://www.mongodb.com/docs/realm/web/authenticate/#std-label-web-login-google

[Haseebshah936]

Sorry for the delay in reply.
I have received this error after trying idToken
error fetching info from OAuth2 provider (status 401) at MongoDBRealmError.fromRequestAndResponse
and this when using authCode:
error exchanging access code with OAuth2 provider (status 401) at MongoDBRealmError.fromRequestAndResponse

[takameyer]

Ok, we will investigate this further. I'll update here when we have something to report.

[Haseebshah936]

ok

[jwing8]

I think the issue may have been introduced in 1.6.0 or later because I was able to get this working in 1.5.1 but none of the later versions.

[takameyer]

@Haseebshah936 The changes made to 2.0.0 are visible here:
8472cb0#diff-ece863e03f42ffef7e48ed9ec9afb7386df3abf7022aea3c1552c7837fda6b75
Basically we are letting you decide from the application code which authentication string you want to set. In your case, idToken should be the correct one.

That being said, I don't see anything in our code that would cause you to start receiving authentication errors. Perhaps there is an issue with the configuration. Can you verify that everything is setup correctly in App Services?

@jwing8 Your error looks quite different than what is reported here. Can you make a separate issue and show some example code, as well as what versions of realm-web you are using.

[takameyer]

We wrote a small test application that you can use as an example to authorize:
https://codesandbox.io/s/realm-web-google-auth-vanilla-ujkc0o

You can replace the app-id with yours. If everything is properly configured, both in Atlas and in Google, it should work.

[Haseebshah936]

@takameyer Here are the App services setting

More over on trying the sandbox version you provided the google button disappears when i replaced the realm id in index.html with my app id. I tried adding the url to the app setting as allowed but it throughs error that the origin not allowed any idea about that would also be help full.

[takameyer]

@Haseebshah936 You will have to configure the request origins, both in atlas and in google dashboard, for the sandbox application (https://ujkc0o.csb.app/). In any case, carefully review our Atlas documentation and google's documentation on how to setup google authentication.
Specifically this section should be correctly set in order to avoid 401 errors.

[Srujan1527]

@takameyer @kneth @Haseebshah936 @timanglade
can u explain how to get the auth code with a sample example

[matt2legit]

I've tried the idToken and authCode on web and no matter what I'm getting a 401 error. What makes this even more bizarre is that it works just fine with the authCode in React Native. The code's look similar on both, so I don't understand why it's not working on web.

[matt2legit]

I finally got it to work by turning on OpenID Connect and using the idToken.

I still don't understand why the authCode doesn't work on web or why metadata doesn't save when it's available in the idToken. As a work around, I used jwt_decode to extract it from the idToken and saved it to customData as suggested on another issues.

FWIW, I think most of the issues/improvements are needed server side and not with the realm-js library. Where is the best place to provide that feedback?

[Srujan1527]

`You can pass redirectUri like below instead of authCode(If you don't have)

    const redirectUri = "http://localhost:3000";

    const credentials = Realm.Credentials.google({
      redirectUrl: redirectUri,
    });
    console.log(credentials);
 

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

[jwing8]

We wrote a small test application that you can use as an example to authorize: https://codesandbox.io/s/realm-web-google-auth-vanilla-ujkc0o

You can replace the app-id with yours. If everything is properly configured, both in Atlas and in Google, it should work.

This example helped me resolve my issue. Apparently I wasn't destructuring the idToken properly, so user error on my part (no additional config or passing in of redirectUrl needed). Thank you very much for providing the sandbox example.

[takameyer]

Closing since this is not an issue we can fix. Google auth is not straightforward to implement and its easy to mess up. If you are having issues, please consult our forums or talk to your MongoDB representative.