Google Sign In - googleUser is not defined

Question

Google Sign In - googleUser is not defined

6.3k views Asked by Alex Shaw At 22 June 2015 at 14:25

I have been following the Google sign in tutorials in order to create a login system and I am at the point where I have a sign in button that loads the widget to select sign in. Once clicked, this should load this function:

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}

However, once I select the account and sign in, nothing happens. In the developer console, when I type in "googleUser" it just says:

Uncaught ReferenceError: googleUser is not defined

Here is all of my code:

<!doctype html>
<html>
<head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <meta name="google-signin-client_id" content="451815931731-u24ino5uecga1arf65814fd72201fcmu.apps.googleusercontent.com">
  
  <title>S6C Admin Panel</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="imports.html">

  <link rel="stylesheet" href="css/signin.css">
</head>

<body unresolved>
  <core-toolbar>
    <span flex>S6C Admin Panel</span>
    <core-icon-button onclick="takeBack()" icon="arrow-back">Back to S6C Website</core-icon-button>
  </core-toolbar>
  <img id="logo" src="../s6clogo.jpg"></img>
  <center>  
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
  </center>
  <script>
    function takeBack(){
      window.location.href = "http://s6c.org";
    }
    
    function onSignIn(googleUser) {
      var profile = googleUser.getBasicProfile();
      console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      console.log('Name: ' + profile.getName());
      console.log('Image URL: ' + profile.getImageUrl());
      console.log('Email: ' + profile.getEmail());
    }
  </script>
</body>
</html>

Note running the snippet will not work

Original Q&A

There are 2 answers

**Eric Douglas** · Answer 1 · 2017-02-17 12:31:27

I was with the same problem and using Jarosław's tip I managed to solve this.

The solution:

function onSignIn() {
  const googleUser = gapi.auth2.getAuthInstance().currentUser.get();
  const profile = googleUser.getBasicProfile();

  // do stuff here
}

**user2702125** · Answer 2 · 2016-04-21 08:39:03

Try add additional meta:

<meta name="google-signin-client_id" content="451815931731-u24ino5uecga1arf65814fd72201fcmu.apps.googleusercontent.com">
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-requestvisibleactions" content="https://schema.org/AddAction" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />

and make sure in your google Api Manager, in Credential, in OAuth 2.0 client IDs, check your Authorized JavaScript origins, make sure you enter your origin site where your page running come from. if you develop in localhost add http://127.0.0.1 as your origins script.

TechQA.

Google Sign In - googleUser is not defined

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in GOOGLE-SIGNIN

Related Questions in GOOGLE-IDENTITY

Popular Questions

Popular Tags

Trending Questions