Custom scope on login

[philippedasilva-orizone]

Hi,

I couldn't see a way throught the component to set the scope we would want the end user to consent. Did I miss something ?

I know I could use a custom button to achieve it but I'd like to use the standard Google Sign in button.

Thanks
Best regards,

Philippe

[kasvith]

Hi Philippe,

Im not sure that its supported directly by google sadly 😢
This is the configuration used by the library to render the button. It doesn't allow to pass any additional scopes.

So sadly it seems you have to use a custom auth flow with a composable to achieve this.

But if you find any way to do this with the default google rendered button let me know, I will add that to the library

[p10tyr]

I think this implementation is only the "authentication" part of OAUTH.. not the Authorisation..

When I use the google API explorer it does a 2 step approach for my YouTube account for example. First I log into the main account.. then in the pop up it jumps to which channel I want to use

The problem is that does not happen with this plugin.. When I use hasGrantedAnyScopes it is always false.. but I have not been able to get that request to show up?

And as @philippedasilva-orizone you say. the Google Documentation does not ask for a Scope at this point.. they also talk about. But then in the documentation AFTER authentication they say

at the same time as you authenticate the user. To do this, include the other scopes that you need in the [authentication request](https://developers.google.com/identity/openid-connect/openid-connect#sendauthrequest) that you send to Google.

But they dont tell you HOW to include.. I cant believe Google Documentation is such a bloody mess.. This weekend project turned into a flippin nightmare ahha

[kasvith]

@ppumkin true. They have not even updated examples for example in Firebase Auth(which is one of their main product).
Google is really good at writing messed up docs and keeping outdated information to users :(

In this library hasGrantedAnyScopes uses underlying library method exposed by google to check any scopes

[philippedasilva-orizone]

@ppumkin Google decided on their design to split authentication and authorisation with the new Google Identity Services Sign in button and one tap approaches to make it simple and easy to provide SSO within any application: this is probably their main use case.

My current approach which isn't satisfying but works for now on my side was to handle straight authentication using GoogleSignInButton and on Success, redirect the user to a page that will handle authorization for me using a combination of Oauth rest calls directly and some hash query parsing.

For the sake of understanding it better, let me share the few pages and scripts I have to deal with both authentication and authorization (note that I'm using Quasar framework and Unocss for presentation but you should get it):

Signin page

<template>
  <QPage class="flex items-center justify-center test">
    <QCard>
      <QCardSection>
        <div class="flex flex-col items-center">
          <img src="../assets/mydopeappname-logo.svg" width="256" />
          <span class="font-thin text-5xl uppercase">My Dope App Name</span>
        </div>
      </QCardSection>
      <QSeparator inset />
      <QCardActions align="center">
          <GoogleSignInButton theme="filled_blue" ux-mode="popup" @success="onSignInSuccess" @error="onSignInError" />. 
      </QCardActions>
    </QCard>
  </QPage>
</template>

<script setup lang="ts">
import { useSessionStore } from 'src/stores/session';
import { GoogleSignInButton, type CredentialResponse } from 'vue3-google-signin';

const session = useSessionStore();

function onSignInSuccess(response: CredentialResponse) {
  session.signin(response.credential as string);
}

function onSignInError() {
  console.error('error');
}
</script>

Pinia Session store

import { acceptHMRUpdate, defineStore } from 'pinia';

interface ISessionState {
  userInfo:
    | {
        email: string;
        name: string;
        familyName: string;
        givenName: string;
        picture: string;
      }
    | undefined;
  accessToken: string | undefined;
  expiresAt: number;
}

export const useSessionStore = defineStore('session', {
  state: (): ISessionState => {
    return {
      userInfo: undefined,
      accessToken: undefined,
      expiresAt: -1,
    };
  },

  persist: { storage: sessionStorage },

  getters: {
    isUserSignedIn(): boolean {
      return this.userInfo !== undefined;
    },

    isUserAuthorized(): boolean {
      return this.accessToken !== '' && this.expiresAt !== -1 && this.expiresAt > Date.now();
    },
  },

  actions: {
    signin(jwt: string) {
      const base64Url = jwt.split('.')[1];
      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      const jsonPayload = decodeURIComponent(
        window
          .atob(base64)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          })
          .join('')
      );
      const decodedToken = JSON.parse(jsonPayload);

      this.userInfo = {
        email: decodedToken.email,
        familyName: decodedToken.family_name,
        givenName: decodedToken.given_name,
        name: decodedToken.name,
        picture: decodedToken.picture,
      };

      this.router.push('/auth');
    },

    signout() {
      if (!this.isUserSignedIn) return;

      this.$reset();
      this.router.push('/signin');
    },
  },
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useSessionStore, import.meta.hot));
}

The Auth Page where the authorization happens

<template><QPage></QPage></template>

<script setup lang="ts">
import { useSessionStore } from 'src/stores/session';
import { onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const sessionStore = useSessionStore();
const router = useRouter();
const route = useRoute();

onBeforeMount(() => {
  // If the route.hash isn't empty, then we are receiving a new access token for the current user.
  if (route.hash !== '') {
    const query = JSON.parse(
      '{"' + decodeURI(route.hash.substring(1)).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}'
    );
    sessionStore.accessToken = query.access_token;
    sessionStore.expiresAt = Number(query.expires_in) * 1000 + Date.now();
    router.push('/');
  } else {
    let oauthForm = document.createElement('form');
    oauthForm.setAttribute('method', 'GET');
    oauthForm.setAttribute('action', 'https://accounts.google.com/o/oauth2/v2/auth');
    const params = {
      client_id: import.meta.env.VITE_GOOGLE_CLIENTID,
      redirect_uri: window.location.href,
      response_type: 'token',
      scope: 'https://mail.google.com',
      include_granted_scopes: 'true',
      login_hint: sessionStore.userInfo?.email,
      state: sessionStore.userInfo?.email,
    };
    for (const p in params) {
      const input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      // @ts-expect-error 'Hack'
      input.setAttribute('value', params[p]);
      oauthForm.append(input);
    }
    document.body.appendChild(oauthForm);
    oauthForm.submit();
  }
});
</script>

The idea is that once authentication by google is done, I redirect the end user to the Auth page that would create a form, filled it with the required parameters so that I can make a direct consent request to google oauth server.
For the sake of simplicity, I put the dynamic form request and the response handling in the same page thus the beginning of the Auth page looking for a hash query to retrieve the access_token and its expiration.

You'll obviously need to set in your project credentials on the Google Developer Console, the authorized response URLs...

Hope it helps you and anyone going through the nightmare of a simple authentication and authorization process against google apis :p

[Quick Edit]
A little additional tip I forgot to mention: on the dynamic form, I added the current logged in user email address as the login_hint and the state so that the consent can be automatically done without google prompting any UI when the end user already consent the app and to make sure the authorization doesn't fall into another user.

[kasvith]

@philippedasilva-orizone thanks for the nice explanation. If you want to get an URL to do just authorization you can use https://vue3-google-signin.syetalabs.io/guide/using-with-electron.html#obtain-a-login-session-url to build it up for you.

You can simplify following part with that

    let oauthForm = document.createElement('form');
    oauthForm.setAttribute('method', 'GET');
    oauthForm.setAttribute('action', 'https://accounts.google.com/o/oauth2/v2/auth');
    const params = {
      client_id: import.meta.env.VITE_GOOGLE_CLIENTID,
      redirect_uri: window.location.href,
      response_type: 'token',
      scope: 'https://mail.google.com',
      include_granted_scopes: 'true',
      login_hint: sessionStore.userInfo?.email,
      state: sessionStore.userInfo?.email,
    };
    for (const p in params) {
      const input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      // @ts-expect-error 'Hack'
      input.setAttribute('value', params[p]);
      oauthForm.append(input);
    }
    document.body.appendChild(oauthForm);
    oauthForm.submit();

[p10tyr]

@kasvith Thank you for a detailed guide of code. This information should really be put in a better place for users to use and understand.

@philippedasilva-orizone I can do a PR to maybe make a "whats next" section in the guide becuase this will definatley confuse a lot of newbies.

I understand what is going on now. Google are following the OpenID specification and a lot of the even starting scopes are the ones that are required by the specification. So its not really Google directly deciding this..

But what OpendID does is split up Authentication from Authorisation very well.

The best use case for THIS plugin is a frictionless way to enable Google Authentication into your app. Thats it.. A user logs in and gives you basic consent to hold their username, maybe email. There is NOTHING else you can do from here. The purpose of this is simple. You store that user in your database so you then know who to charge or email for the service you provide. You then deal with ZERO authentication code. Google just says, yes this is this person and he logged in.. Thank you bye

GAPI on the other hand ... can use this TOKEN but it does NOT need this Authentication. You can just do the form submit but that does the redirect to Google and the redirect back to your site. ONLY this method ALLOWS SCOPES requests .

So technically I do not need this plugin because it is not suitable for GAPI (especially the restricted API's)

@kasvith your example "work around" is pretty cool though with providing the hint and if it can be "merged" into a seemless sign in process that would be EPIC!. I mean like using the JavaScript button which does not do redirects - Problem is capturing the extra scopes probably still wants the redirect for example, in my case account a@gmail.com is an authorised brand account for channel x - so it asks me what channel do you want. I may have 1 or 100 channels (authentication does not let you select that extra info.. only the Incremental Authorisation allows you to do that)

I wonder if this plugin has the scope to include the SCOPES authorisation? That is a question to @philippedasilva-orizone - Because as it is its just good for Authentication.. (probably the website / document should reflect that)

I am happy to help.. since I already been spending weeks trying to log in hahaha.. I have a working solution and we have some good examples here.

💯

[dapug]

Im not sure that its supported directly by google sadly 😢 This is the configuration used by the library to render the button. It doesn't allow to pass any additional scopes.

I think this topic warrants a revisit. True, Google has separated sign-in from auth APIs and libraries. But you can indeed bring the two together achieve sign-in and auth consent in a single user step/flow. And in fact, it's right here in Googles main example (for the people API, but applies to other apis)

https://developers.google.com/people/quickstart/js#set_up_the_sample
https://github.com/googleworkspace/browser-samples/blob/main/people/quickstart/index.html

I loaded this, ran perfectly. No problem. Not only does this approach get scopes into the sign-in process, but it also optionally lets you immediately call your API (so, ONE tap = sign-in + give consent + call API). It uses a callback from google.accounts.oauth2.initTokenClient in order to achieve that (the callback and calling of the API immediately is of course optional).

@kasvith I think vue3-google-signin should support this, as UX (friction-free auth) is super important. But even if you don't... at least devs should be aware that it is possible (me being new to google apis, I had to really hunt for hours for this, as most samples and docs out there are targeting the old unsupported way!).

[kasvith]

thanks @dapug i will take a look at this when im bit free