# Integrating Google Sign-In using listeners

> [!WARNING]
> **Warning:** The Google Sign-In library optionally uses FedCM APIs, and their use will become a requirement. [Conduct an impact assessment](https://developers.google.com/identity/sign-in/web/gsi-with-fedcm) to confirm that user sign-in continues to function as expected.   
>
> Support for the Google Sign-In library is deprecated, see the [Deprecation and Sunset](https://developers.google.com/identity/sign-in/web/deprecation-and-sunset) guide for more.

Listeners provide a way to automatically respond to changes in the current
user's Sign-In session. For example, after your startup method initializes the
Google Sign-In auth2 object, you can set up listeners to respond to events
like `auth2.isSignedIn` state changes, or changes in `auth2.currentUser`.

The following code demonstrates using the 2.0 client method
`listen()` to respond to changes in `auth2.isSignedIn` and `auth2.currentUser`.

    var auth2; // The Sign-In object.
    var googleUser; // The current user.


    /**
     * Calls startAuth after Sign in V2 finishes setting up.
     */
    var appStart = function() {
      gapi.load('auth2', initSigninV2);
    };


    /**
     * Initializes Signin v2 and sets up listeners.
     */
    var initSigninV2 = function() {
      auth2 = gapi.auth2.init({
          client_id: 'CLIENT_ID.apps.googleusercontent.com',
          scope: 'profile'
      });

      // Listen for sign-in state changes.
      auth2.isSignedIn.listen(signinChanged);

      // Listen for changes to current user.
      auth2.currentUser.listen(userChanged);

      // Sign in the user if they are currently signed in.
      if (auth2.isSignedIn.get() == true) {
        auth2.signIn();
      }

      // Start with the current live values.
      refreshValues();
    };


    /**
     * Listener method for sign-out live value.
     *
     * @param {boolean} val the updated signed out state.
     */
    var signinChanged = function (val) {
      console.log('Signin state changed to ', val);
      document.getElementById('signed-in-cell').innerText = val;
    };


    /**
     * Listener method for when the user changes.
     *
     * @param {GoogleUser} user the updated user.
     */
    var userChanged = function (user) {
      console.log('User now: ', user);
      googleUser = user;
      updateGoogleUser();
      document.getElementById('curr-user-cell').innerText =
        JSON.stringify(user, undefined, 2);
    };


    /**
     * Updates the properties in the Google User table using the current user.
     */
    var updateGoogleUser = function () {
      if (googleUser) {
        document.getElementById('user-id').innerText = googleUser.getId();
        document.getElementById('user-scopes').innerText =
          googleUser.getGrantedScopes();
        document.getElementById('auth-response').innerText =
          JSON.stringify(googleUser.getAuthResponse(), undefined, 2);
      } else {
        document.getElementById('user-id').innerText = '--';
        document.getElementById('user-scopes').innerText = '--';
        document.getElementById('auth-response').innerText = '--';
      }
    };


    /**
     * Retrieves the current user and signed in states from the GoogleAuth
     * object.
     */
    var refreshValues = function() {
      if (auth2){
        console.log('Refreshing values...');

        googleUser = auth2.currentUser.get();

        document.getElementById('curr-user-cell').innerText =
          JSON.stringify(googleUser, undefined, 2);
        document.getElementById('signed-in-cell').innerText =
          auth2.isSignedIn.get();

        updateGoogleUser();
      }
    }