Issues with the event firing in the Polymer component for google-signin?

I recently set up a new starter-kit project using polymer-cli 1.7 and I'm attempting to incorporate Google authentication utilizing the google-signin element.

Although the sign in button appears and works for signing in, the signedIn property isn't being properly configured while the expected events (e.g. is-authorized-changed) are not triggering.

The event is-authorized-changed seems to fire twice upon initial page loading but fails to trigger again either when signing in or out.

...
<link rel="import" href="../bower_components/google-signin/google-signin.html">
...
<dom-module id="cx-dashboard">
  <template>
    <style>
      ...
    </style>

    <app-location route="{{route}}"></app-location>
    <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>
    <app-drawer-layout fullbleed force-narrow="true">
      <!-- Drawer content -->
      <app-drawer>
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">

          <a name="view1" href="/view1">View1</a>
          <a name="view2" href="/view2">View2</a>
        </iron-selector>
      </app-drawer>
      <!-- Main content -->
      <app-header-layout has-scrolling-region>
        <app-header condenses reveals effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
            <div main-title>Dashboard</div>
            {{signedIn}}
            <google-signin client-id="my-client-id" hosted-domain="mydomain"
            signed-in="{{signedIn}}"></google-signin>
          </app-toolbar>
        </app-header>
        <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main">
          <my-view1 name="view1"></my-view1>
          <my-view2 name="view2"></my-view2>
          <my-view3 name="view3"></my-view3>
          <my-view404 name="view404"></my-view404>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>
  </template>
  <script>
    Polymer({
      is: 'cx-dashboard',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        }
      },
      listeners: {
        'is-authorized-changed': '_handleAuthChange',
        'google-signin-success': '_signInSuccess',
        'google-signed-out': '_signedOut',
        'google-signin-aware-success': '_signInSuccess'
      },
      observers: [
        '_routePageChanged(routeData.page)'
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      },
      _signInNecessary: function() {
        console.log('_signInNecessary')
      },
      _signInSuccess: function() {
        console.log('_signInSuccess')
      },
      _signedOut: function() {
        console.log('_signedOut')
      },
      _handleAuthChange: function(event) {
        console.log('_handleAuthChange', event)
      }
    });
  </script>
</dom-module>

Answer №1

I realized that the issue stemmed from not setting up the proper port in the Google control center.

Hats off to @tony19 for providing a helpful demonstration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a GIF file using Node.js leads to a corrupted image

I have been experimenting with creating a simple GIF. I followed the example provided in this NPM library for guidance. Despite my efforts, every time I generate the GIF, it appears as a corrupted image file. CODE const CanvasGifEncoder = require('ca ...

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

An HTML form featuring various submit buttons for accomplishing different tasks

After searching extensively, I have come across solutions that are similar but not quite right for my specific situation. Here's what currently works for me: <script type="text/javascript"> function performTask1(a, b) { window.open('intern ...

Unable to access property 'map' of undefined - having trouble mapping data retrieved from Axios request

When working with React, I have encountered an issue while trying to fetch data from an API I created. The console correctly displays the response, which is a list of user names. However, the mapping process is not functioning as expected. Any insights or ...

What is the best way to generate a search link after a user has chosen their search criteria on a webpage?

In my search.html file, I have set up a form where users can input their search criteria and click the search button to find information within a database of 1000 records. The HTML part is complete, but I am unsure how to create the action link for the for ...

Attempting to transmit checkbox data in jade

I am currently developing an app with Express, Node.js, and Mongo. I have encountered an issue while passing checkbox values to my database. My goal is to only pass the values of checked checkboxes back to the database. In my index.jade file, I attempted ...

Caution: It is not possible to make changes to a component (`App`) during the rendering of another component (`History

I am currently in the process of creating a tic tac toe game, but I'm encountering an error that is preventing me from updating the history. Despite following a tutorial on skillshare.com and mirroring the steps exactly, the error persists. I must men ...

Error: The combination of 0 and .... is invalid and cannot be used as a function

I am currently in the process of developing a next.js application using Material-ui. I have been attempting to integrate material-ui into my project. Following guidance from the official GitHub page, I have copied the _app.js , _document.js , theme.js fil ...

Using Stringify to modify the value of a particular array in Local Storage

Uncertain of the accuracy of my question, but I am attempting to modify a value within a localstorage array. This is what my localstorage currently contains: [{"id":"item-1","href":"google.com","icon":"google.com"}, {"id":"item-2","href":"youtube.com","i ...

Adding a border to the <area> element: A step-by-step guide

Can a border be added around an <area> element? This would be useful for testing an imagemap, however the following code does not achieve the desired effect: area { outline: 1px solid red; border: 1px solid red; } ...

Jquery's ajax function is failing to execute the server side function

I have a specific structure for my solution: My goal is to execute the recommendationProcess function from CTL_RateRecommendationDetails.ascx.cs in CTL_RateRecommendationDetails.ascx Therefore, I wrote the following code: $.ajax({ type: "POST", ...

Tips on viewing class object values within the `useEffect` hook

App.js import React, { useRef, useEffect } from "react"; import Token from "./Token"; export default function App() { const tokenRef = useRef(new Token()); useEffect(() => { console.log("current index of token: ", ...

What is the best way to utilize Gulp and Browserify for my JavaScript application?

Looking to modernize my app with a new build system and I could use some guidance. It seems like I need to shift my approach in a few ways. Here's the current structure of my app: /src /components /Base /App.jsx /Pages.jsx /. ...

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

Ways to display console.log output in VS Code?

Sorry if this question is a bit unclear, but I'm struggling to figure out how to display the results from my console.log (line 14) in the console/terminal. I want to see the random RGB values generated for each column every time I click the button, bu ...

Automatic line breaks within a JavaScript code can be achieved by using

I need help formatting this text: hello everyone. My name is PETER. hahahah ahahah .... If I have a fixed width, how can I automatically line break the text to look like this: hello everyone. My name is PETER. hahahah ahahah ...

Executing a function every time a prop is updated within the component

I have a prop named transcript in one of my components. Whenever I speak a voice intent, it gets updated. I want to execute a function every time the transcript changes and pass the transcript as an argument. In this code snippet, I attempted to use an On ...

list of key combinations in a ul element

I programmed a list of world states in PHP using an unordered list (<ul>): $WORLD_STATES = array( "France", "Germany", "Greece", "Greenland", "United Kingdom", "United States", "Uruguay" ...

Should we store $(this) in jQuery's cache, or leave it be?

When dealing with a selector such as $(this), does the act of creating and reusing a reference actually have a noticeable impact on performance? I find it more efficient to create references for jQuery selectors that are used repeatedly within the same sc ...

Handling exceptions in Node.js is an essential part of writing reliable

Just a quick question: I seem to be dealing with an incorrect endpoint, and every time I run the code below, it results in an exception being thrown client.post("http://WrongEndPoint", [], function (data, response) { console.log("data:", data, "respo ...