Usage with Google API's and firebase

[kpoman]

Hello,
Is there an example of using, say, calendar api with this lib ? And also, something that would use Firebase Google Auth together with this one ? How should they behave or interact ?
Thank you

[kasvith]

Hi, to use calendar API add the relevant scope with a custom button.

Once you obtains the token, use it with firebase for IDP https://firebase.google.com/docs/auth/web/google-signin#expandable-2

[kpoman]

I tried adding the scopes as options, as you suggested, and the login then asks for that consent, so apparently it is ok.
I suppose you add/create the script tag for example here:

const createScriptTag = () => {
  const scriptTag = document.createElement("script");
  scriptTag.src = "https://accounts.google.com/gsi/client";
  scriptTag.async = true;
  scriptTag.defer = true;

  return scriptTag;
};

Creating/loading these scripts make a global object available. They mention this: TokenClient.requestAccessToken() ... also google object. Where are they when using this lib ? Thank you very much for any clues !

[kasvith]

its globally available (https://vue3-google-signin.syetalabs.io/composables/use-gsi-script.html)
But its not available on type declarations. I will update it in next versions.

For now you can just use any kind of methods like google.accounts.oauth2.initTokenClient

[kasvith]

@kpoman this library calls that method for you when using useTokenClient(https://github.com/syetalabs/vue3-google-signin/blob/9e8767b9a7dd8cf4b3131bab1fb8c40f9c5015e4/src/composables/useTokenClient.ts#L113)

[ap-1]

Ok, with a custom button, I get this response: {access_token: 'ya29.a0Aa4xrXPFwWt119bUFyT-BHt97mezLlg3N5uDfsyK59s…cwaCgYKATASARMSFQEjDvL9fm4_qR5hWg9VOEN_pNo0eg0165', token_type: 'Bearer', expires_in: 3599, scope: 'email profile https://www.googleapis.com/auth/driv…id https://www.googleapis.com/auth/userinfo.email', authuser: '0', …}

while with default GoogleSigninButton I had previously this:

{clientId: '1096883906711-640q91a8l0hhu6cuhepba42g2g2ju25k.apps.googleusercontent.com', credential: 'eyJhbGciOiJSUzI1NiIsImtpZCI6ImJhMDc5YjQyMDI2NDFlNT…1_XpGl7dwdKT-jT65ACxg64KviNd6140fWABQo96A5AIIalzA', select_by: 'btn'} which I was using for a Firebase Login with Credential. Any way to convert the access token to a firebase-compatible credential ? Also, I tried adding scope with scopes: 'bla bla bla' but it didnt add them on the callback. Which option sets it ? Finally, in google docs they say one can call API, be it with a global google object, or GoogleAuth, or gapi, etc.. but none of those objects are available when I use this lib !

@kpoman You can still use GoogleAuthProvider.credential with an access_token

static credential(idToken?: string | null, accessToken?: string | null): OAuthCredential;

Try this:

GoogleAuthProvider.credential(null, access_token);

(from https://firebase.google.com/docs/reference/js/auth.googleauthprovider#googleauthprovidercredential)

[kasvith]

But its not available on type declarations. I will update it in next versions.

Now its also available as global typings

[ap-1]

As @kasvith instructed, you can use a custom button using useTokenClient to specify the calendar scope. Then, authenticate to Firebase using GoogleAuthProvider.credential:

const handleOnSuccess = (response: AuthCodeFlowSuccessResponse) => {
    const credential = GoogleAuthProvider.credential(null, response.access_token);
    const result = await signInWithCredential(getAuth(), credential);

    // then do what you want with the result e.g.
    const user = result.user;
};

[kasvith]

thanks @ap-1 i didnt know about GoogleAuthProvider.credential(null, token)