anthonyjgrove / react-google-login Goto Github PK

View Code? Open in Web Editor NEW

1.8K 1.8K 424.0 4.73 MB

A React Google Login Component

Home Page: https://anthonyjgrove.github.io/react-google-login

License: MIT License

JavaScript 100.00%

googe google-api google-authentication google-login googleapiclient googleauth googleuser react react-google-login

react-google-login's People

Contributors

Stargazers

Watchers

Forkers

leibowitz notbrianzach batusai513 sebastialonso kwkhaw roelbarreto abelhabel dstarcev adamcbrewer jcb-k nic peterkaleta deankim07 gmccrackin jazib wonism taewo beausmith taniman eipplusone charlesseek delwiv vishal0203 kamleshchandnani svetlanasavchenko nealgriffin jrodan tomtwo jimvercoelen json2d oztune imtmh mbilesanmi kombucha victorhqc arunshan rshergold itsakt rizal76 bbtran tarnadas iippis haseebq zer0tonin hanji83 getgamba bornastimac jtibbetts vermuz srijancse-zz bambanghariantosianturi vanitax migolo eskalacja simplejoysolutions kdeenanauth bitwiselabs shirk3y mcd-50 quangrau maxifjaved talha131 samzoll22 efortes alekhurst curology stephensong danielpro4 ankitc1010 miguelgimenezgimenez berekuk rom10 trycom hprobotic devendralaulkar marek-novy portxchange yorunohikage sammui-ailabs ajmath alon7 kahtim subodhkumar armandoassuncao akornmeier serabakpak alagappansp91 summitnetworks riley-steele-parsons cooray theomjones brave-coder9 jessestuart thevahidal bfbechlin divyanshutomar essedi alinzk survivant trendingtechnology

react-google-login's Issues

Getting errors when running the npm command

Hey,

I am trying to add your component to my project but I keep getting errors when running the npm command.

I run:

npm install react-google-login

But get these errors:

`C:\Users\ajohnson\Documents\Workspace\react-sandbox>npm install react-google-login
npm WARN package.json [email protected] No repository field.
npm http GET https://registry.npmjs.org/react-google-login
npm http 304 https://registry.npmjs.org/react-google-login
npm http GET https://registry.npmjs.org/types/react
npm http 404 https://registry.npmjs.org/types/react
npm ERR! 404 Not Found
npm ERR! 404
npm ERR! 404 'types/react' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'react-google-login'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.

npm ERR! System Windows_NT 10.0.14393
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\ProgramData\chocolatey\lib\npm\tools\node_modules\npm\bin\npm-cli.js" "install" "react-google-login"
npm ERR! cwd C:\Users\ajohnson\Documents\Workspace\react-sandbox
npm ERR! node -v v7.2.1
npm ERR! npm -v 1.4.9
npm ERR! code E404
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\Users\ajohnson\Documents\Workspace\react-sandbox\npm-debug.log
npm ERR! not ok code 0`

Am I doing something wrong or need to install something else?

Thanks

closing google auth window doesn't invoke onFailure

When clicking on login button, but closing the google popup which asks you to choose an account for authentication, it doesn't trigger onFailure callback, not onSuccess callback.

500 error raised please help

ExternallyVisibleError

This warning might be coming about because of my particular usage, but it looks like it might have to do with the way gapi is being initialised inside the GoogleLogin component itself:

Uncaught gapi.auth2.ExternallyVisibleError: gapi.auth2 has been initialized with different options. Consider calling gapi.auth2.getAuthInstance() instead of gapi.auth2.init().

Offline authentication

Hi,
I am trying to use your package for offline authentication with google. Here is my code:

<GoogleLogin
                    clientId="760259110602-gv2f226boajvj4pem4c51g0un6rml55j.apps.googleusercontent.com"
                    buttonText="Login with Google"
                    offline ={true}
                    callback={this.responseGoogle} />,

I do receive a code back in the response, however when I try to use that same code server side and exchange it for a token, google returns "Error fetching OAuth2 access token,'redirect_ui_mismatch'"
The strange thing is that if I just use their textbook example and plug the following into an html file:

<script>
    function start() {
        gapi.load('auth2', function () {
            auth2 = gapi.auth2.init({
                client_id: '760259110602-gv2f226boajvj4pem4c51g0un6rml55j.apps.googleusercontent.com',
                // Scopes to request in addition to 'profile' and 'email'
                scope: ''
            });
        });
    }
</script>


<button id="signinButton">Sign in with Google</button>
<script>
    $('#signinButton').click(function () {
        // signInCallback defined in step 6.
        auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then(signInCallback);
    });
</script>`

the code I receive back is valid and allows me to exchange for a token properly afterwards, which means it's definitely not a config issue in the google developer panel. I looked through your code, and you seem to be properly passing "messagepost" for redirect_uri, so I have no clue what may be causing the problem. Any thoughts?
Thank you

Empty given_name and family_name

Before I could decode given_name and family_name from the id_token. Now those fields are not included anymore.

Is it a regression ?

Can you publish 2.5.1?

Hi!

I'm having the same issue as #19

Can you publish 2.5.1 to npm?

Thanks!

Supply a login_hint

It would be good if we could supply a loginHint parameter to autofill an email address in the popup.

Google JS API Endpoint has changed

The Google JS API endpoint seems to have changed. The new endpoint should be //apis.google.com/js/client:platform.js

I was getting issues saying window.gapi.load is not a function – it seemed only to initialise with a .plus method.

Here's the reference (second script tag down).

npm install error

When I try to install this as an npm module, it hangs. Here is the ouput of npm i -ddd react-google-login:

npm info it worked if it ends with ok
npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'i',
npm verb cli   '-ddd',
npm verb cli   'react-google-login' ]
npm info using [email protected]
npm info using [email protected]
npm sill loadCurrentTree Starting
npm sill install loadCurrentTree
npm sill install readLocalPackageData
npm sill fetchPackageMetaData react-google-login
npm sill fetchNamedPackageData react-google-login
npm sill mapToRegistry name react-google-login
npm sill mapToRegistry using default registry
npm sill mapToRegistry registry https://registry.npmjs.org/
npm sill mapToRegistry data Result {
npm sill mapToRegistry   raw: 'react-google-login',
npm sill mapToRegistry   scope: null,
npm sill mapToRegistry   escapedName: 'react-google-login',
npm sill mapToRegistry   name: 'react-google-login',
npm sill mapToRegistry   rawSpec: '',
npm sill mapToRegistry   spec: 'latest',
npm sill mapToRegistry   type: 'tag' }
npm sill mapToRegistry uri https://registry.npmjs.org/react-google-login
npm verb request uri https://registry.npmjs.org/react-google-login
npm verb request no auth needed
npm info attempt registry request try #1 at 12:12:43
npm verb request id c61dda370c56c277
npm verb etag W/"58a0d936-12e17"
npm verb lastModified Sun, 12 Feb 2017 21:52:54 GMT
npm http request GET https://registry.npmjs.org/react-google-login
npm http 304 https://registry.npmjs.org/react-google-login
npm verb headers { date: 'Tue, 14 Feb 2017 11:12:42 GMT',
npm verb headers   via: '1.1 varnish',
npm verb headers   'cache-control': 'max-age=300',
npm verb headers   etag: 'W/"58a0d936-12e17"',
npm verb headers   age: '224',
npm verb headers   connection: 'keep-alive',
npm verb headers   'x-served-by': 'cache-hhn1528-HHN',
npm verb headers   'x-cache': 'HIT',
npm verb headers   'x-cache-hits': '1',
npm verb headers   'x-timer': 'S1487070762.663772,VS0,VE0',
npm verb headers   vary: 'Accept-Encoding' }
npm sill get cb [ 304,
npm sill get   { date: 'Tue, 14 Feb 2017 11:12:42 GMT',
npm sill get     via: '1.1 varnish',
npm sill get     'cache-control': 'max-age=300',
npm sill get     etag: 'W/"58a0d936-12e17"',
npm sill get     age: '224',
npm sill get     connection: 'keep-alive',
npm sill get     'x-served-by': 'cache-hhn1528-HHN',
npm sill get     'x-cache': 'HIT',
npm sill get     'x-cache-hits': '1',
npm sill get     'x-timer': 'S1487070762.663772,VS0,VE0',
npm sill get     vary: 'Accept-Encoding' } ]
npm verb etag https://registry.npmjs.org/react-google-login from cache
npm verb get saving react-google-login to C:\Users\myuser\AppData\Roaming\npm-cache\registry.npmjs.org\react-google-login\.cache.json
npm verb correctMkdir C:\Users\myuser\AppData\Roaming\npm-cache correctMkdir not in flight; initializing
npm sill install normalizeTree
npm sill loadCurrentTree Finishing
npm sill loadIdealTree Starting
npm sill install loadIdealTree
npm sill cloneCurrentTree Starting
npm sill install cloneCurrentTreeToIdealTree
npm sill cloneCurrentTree Finishing
npm sill loadShrinkwrap Starting
npm sill install loadShrinkwrap
npm sill loadShrinkwrap Finishing
npm sill loadAllDepsIntoIdealTree Starting
npm sill install loadAllDepsIntoIdealTree
npm sill resolveWithNewModule [email protected] checking installable status
npm sill cache add args [ 'react-google-login', null ]
npm verb cache add spec react-google-login
npm sill cache add parsed spec Result {
npm sill cache add   raw: 'react-google-login',
npm sill cache add   scope: null,
npm sill cache add   escapedName: 'react-google-login',
npm sill cache add   name: 'react-google-login',
npm sill cache add   rawSpec: '',
npm sill cache add   spec: 'latest',
npm sill cache add   type: 'tag' }
npm sill addNamed react-google-login@latest
npm verb addNamed "latest" is being treated as a dist-tag for react-google-login
npm info addNameTag [ 'react-google-login', 'latest' ]
npm sill mapToRegistry name react-google-login
npm sill mapToRegistry using default registry
npm sill mapToRegistry registry https://registry.npmjs.org/
npm sill mapToRegistry data Result {
npm sill mapToRegistry   raw: 'react-google-login',
npm sill mapToRegistry   scope: null,
npm sill mapToRegistry   escapedName: 'react-google-login',
npm sill mapToRegistry   name: 'react-google-login',
npm sill mapToRegistry   rawSpec: '',
npm sill mapToRegistry   spec: 'latest',
npm sill mapToRegistry   type: 'tag' }
npm sill mapToRegistry uri https://registry.npmjs.org/react-google-login
npm verb addNameTag registry:https://registry.npmjs.org/react-google-login not in flight; fetching
npm verb get https://registry.npmjs.org/react-google-login not expired, no request
npm sill addNameTag next cb for react-google-login with tag latest
npm sill addNamed [email protected]
npm verb addNamed "2.8.1" is a plain semver version for react-google-login
npm sill cache afterAdd [email protected]
npm verb afterAdd C:\Users\myuser\AppData\Roaming\npm-cache\react-google-login\2.8.1\package\package.json not in flight; writing
npm verb correctMkdir C:\Users\myuser\AppData\Roaming\npm-cache correctMkdir not in flight; initializing
npm verb afterAdd C:\Users\myuser\AppData\Roaming\npm-cache\react-google-login\2.8.1\package\package.json written
npm sill fetchNamedPackageData @types/react
npm sill mapToRegistry name @types/react
npm sill mapToRegistry scope (from package name) @types
npm verb mapToRegistry no registry URL found in name for scope @types
npm sill mapToRegistry using default registry
npm sill mapToRegistry registry https://registry.npmjs.org/
npm sill mapToRegistry data Result {
npm sill mapToRegistry   raw: '@types/react',
npm sill mapToRegistry   scope: '@types',
npm sill mapToRegistry   escapedName: '@types%2freact',
npm sill mapToRegistry   name: '@types/react',
npm sill mapToRegistry   rawSpec: '',
npm sill mapToRegistry   spec: 'latest',
npm sill mapToRegistry   type: 'tag' }
npm sill mapToRegistry uri https://registry.npmjs.org/@types%2freact
npm verb request uri https://registry.npmjs.org/@types%2freact
npm verb request no auth needed
npm info attempt registry request try #1 at 12:12:43
npm verb etag "589e46af-d1c0"
npm http request GET https://registry.npmjs.org/@types%2freact
npm http 304 https://registry.npmjs.org/@types%2freact
npm verb headers { date: 'Tue, 14 Feb 2017 11:12:42 GMT',
npm verb headers   via: '1.1 varnish',
npm verb headers   'cache-control': 'max-age=0',
npm verb headers   etag: '"589e46af-d1c0"',
npm verb headers   age: '0',
npm verb headers   connection: 'keep-alive',
npm verb headers   'x-served-by': 'cache-hhn1528-HHN',
npm verb headers   'x-cache': 'MISS',
npm verb headers   'x-cache-hits': '0',
npm verb headers   'x-timer': 'S1487070762.911420,VS0,VE533',
npm verb headers   vary: 'Accept-Encoding' }
npm sill get cb [ 304,
npm sill get   { date: 'Tue, 14 Feb 2017 11:12:42 GMT',
npm sill get     via: '1.1 varnish',
npm sill get     'cache-control': 'max-age=0',
npm sill get     etag: '"589e46af-d1c0"',
npm sill get     age: '0',
npm sill get     connection: 'keep-alive',
npm sill get     'x-served-by': 'cache-hhn1528-HHN',
npm sill get     'x-cache': 'MISS',
npm sill get     'x-cache-hits': '0',
npm sill get     'x-timer': 'S1487070762.911420,VS0,VE533',
npm sill get     vary: 'Accept-Encoding' } ]
npm verb etag https://registry.npmjs.org/@types%2freact from cache
npm verb get saving @types/react to C:\Users\myuser\AppData\Roaming\npm-cache\registry.npmjs.org\_40types_252freact\.cache.json
npm verb correctMkdir C:\Users\myuser\AppData\Roaming\npm-cache correctMkdir not in flight; initializing
npm sill pickManifestFromRegistryMetadata spec * tag latest versions [ '0.14.14-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.15-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.20-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.21-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.22-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.23-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.24-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.25-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.26-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.27',
npm sill pickManifestFromRegistryMetadata   '0.14.28',
npm sill pickManifestFromRegistryMetadata   '0.14.29',
npm sill pickManifestFromRegistryMetadata   '0.14.30',
npm sill pickManifestFromRegistryMetadata   '0.14.31',
npm sill pickManifestFromRegistryMetadata   '0.14.32',
npm sill pickManifestFromRegistryMetadata   '0.14.33',
npm sill pickManifestFromRegistryMetadata   '0.14.34',
npm sill pickManifestFromRegistryMetadata   '0.14.35',
npm sill pickManifestFromRegistryMetadata   '0.14.36',
npm sill pickManifestFromRegistryMetadata   '0.14.37',
npm sill pickManifestFromRegistryMetadata   '0.14.38',
npm sill pickManifestFromRegistryMetadata   '0.14.39',
npm sill pickManifestFromRegistryMetadata   '0.14.40',
npm sill pickManifestFromRegistryMetadata   '0.14.41',
npm sill pickManifestFromRegistryMetadata   '0.14.42',
npm sill pickManifestFromRegistryMetadata   '0.14.43',
npm sill pickManifestFromRegistryMetadata   '0.14.44',
npm sill pickManifestFromRegistryMetadata   '0.14.45',
npm sill pickManifestFromRegistryMetadata   '0.14.46',
npm sill pickManifestFromRegistryMetadata   '0.14.47',
npm sill pickManifestFromRegistryMetadata   '0.14.48',
npm sill pickManifestFromRegistryMetadata   '0.14.49',
npm sill pickManifestFromRegistryMetadata   '0.14.50',
npm sill pickManifestFromRegistryMetadata   '0.14.51',
npm sill pickManifestFromRegistryMetadata   '0.14.52',
npm sill pickManifestFromRegistryMetadata   '0.14.53',
npm sill pickManifestFromRegistryMetadata   '0.14.54',
npm sill pickManifestFromRegistryMetadata   '0.14.55',
npm sill pickManifestFromRegistryMetadata   '0.14.56',
npm sill pickManifestFromRegistryMetadata   '0.14.57',
npm sill pickManifestFromRegistryMetadata   '0.0.0',
npm sill pickManifestFromRegistryMetadata   '15.0.0',
npm sill pickManifestFromRegistryMetadata   '15.0.1',
npm sill pickManifestFromRegistryMetadata   '15.0.2',
npm sill pickManifestFromRegistryMetadata   '15.0.3',
npm sill pickManifestFromRegistryMetadata   '15.0.4',
npm sill pickManifestFromRegistryMetadata   '15.0.5',
npm sill pickManifestFromRegistryMetadata   '15.0.6',
npm sill pickManifestFromRegistryMetadata   '15.0.7',
npm sill pickManifestFromRegistryMetadata   '15.0.8',
npm sill pickManifestFromRegistryMetadata   '15.0.9' ]
npm sill resolveWithNewModule @types/[email protected] checking installable status
npm sill cache add args [ '@types/react@*', null ]
npm verb cache add spec @types/react@*
npm sill cache add parsed spec Result {
npm sill cache add   raw: '@types/react@*',
npm sill cache add   scope: '@types',
npm sill cache add   escapedName: '@types%2freact',
npm sill cache add   name: '@types/react',
npm sill cache add   rawSpec: '*',
npm sill cache add   spec: '*',
npm sill cache add   type: 'range' }
npm sill addNamed @types/react@*
npm verb addNamed "*" is a valid semver range for @types/react
npm sill addNameRange { name: '@types/react', range: '*', hasData: false }
npm sill mapToRegistry name @types/react
npm sill mapToRegistry scope (from package name) @types
npm verb mapToRegistry no registry URL found in name for scope @types
npm sill mapToRegistry using default registry
npm sill mapToRegistry registry https://registry.npmjs.org/
npm sill mapToRegistry data Result {
npm sill mapToRegistry   raw: '@types/react',
npm sill mapToRegistry   scope: '@types',
npm sill mapToRegistry   escapedName: '@types%2freact',
npm sill mapToRegistry   name: '@types/react',
npm sill mapToRegistry   rawSpec: '',
npm sill mapToRegistry   spec: 'latest',
npm sill mapToRegistry   type: 'tag' }
npm sill mapToRegistry uri https://registry.npmjs.org/@types%2freact
npm verb addNameRange registry:https://registry.npmjs.org/@types%2freact not in flight; fetching
npm verb get https://registry.npmjs.org/@types%2freact not expired, no request
npm sill addNameRange number 2 { name: '@types/react', range: '*', hasData: true }
npm sill addNameRange versions [ '@types/react',
npm sill addNameRange   [ '0.14.14-alpha',
npm sill addNameRange     '0.14.15-alpha',
npm sill addNameRange     '0.14.20-alpha',
npm sill addNameRange     '0.14.21-alpha',
npm sill addNameRange     '0.14.22-alpha',
npm sill addNameRange     '0.14.23-alpha',
npm sill addNameRange     '0.14.24-alpha',
npm sill addNameRange     '0.14.25-alpha',
npm sill addNameRange     '0.14.26-alpha',
npm sill addNameRange     '0.14.27',
npm sill addNameRange     '0.14.28',
npm sill addNameRange     '0.14.29',
npm sill addNameRange     '0.14.30',
npm sill addNameRange     '0.14.31',
npm sill addNameRange     '0.14.32',
npm sill addNameRange     '0.14.33',
npm sill addNameRange     '0.14.34',
npm sill addNameRange     '0.14.35',
npm sill addNameRange     '0.14.36',
npm sill addNameRange     '0.14.37',
npm sill addNameRange     '0.14.38',
npm sill addNameRange     '0.14.39',
npm sill addNameRange     '0.14.40',
npm sill addNameRange     '0.14.41',
npm sill addNameRange     '0.14.42',
npm sill addNameRange     '0.14.43',
npm sill addNameRange     '0.14.44',
npm sill addNameRange     '0.14.45',
npm sill addNameRange     '0.14.46',
npm sill addNameRange     '0.14.47',
npm sill addNameRange     '0.14.48',
npm sill addNameRange     '0.14.49',
npm sill addNameRange     '0.14.50',
npm sill addNameRange     '0.14.51',
npm sill addNameRange     '0.14.52',
npm sill addNameRange     '0.14.53',
npm sill addNameRange     '0.14.54',
npm sill addNameRange     '0.14.55',
npm sill addNameRange     '0.14.56',
npm sill addNameRange     '0.14.57',
npm sill addNameRange     '0.0.0',
npm sill addNameRange     '15.0.0',
npm sill addNameRange     '15.0.1',
npm sill addNameRange     '15.0.2',
npm sill addNameRange     '15.0.3',
npm sill addNameRange     '15.0.4',
npm sill addNameRange     '15.0.5',
npm sill addNameRange     '15.0.6',
npm sill addNameRange     '15.0.7',
npm sill addNameRange     '15.0.8',
npm sill addNameRange     '15.0.9' ] ]
npm sill pickManifestFromRegistryMetadata spec * tag latest versions [ '0.14.14-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.15-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.20-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.21-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.22-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.23-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.24-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.25-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.26-alpha',
npm sill pickManifestFromRegistryMetadata   '0.14.27',
npm sill pickManifestFromRegistryMetadata   '0.14.28',
npm sill pickManifestFromRegistryMetadata   '0.14.29',
npm sill pickManifestFromRegistryMetadata   '0.14.30',
npm sill pickManifestFromRegistryMetadata   '0.14.31',
npm sill pickManifestFromRegistryMetadata   '0.14.32',
npm sill pickManifestFromRegistryMetadata   '0.14.33',
npm sill pickManifestFromRegistryMetadata   '0.14.34',
npm sill pickManifestFromRegistryMetadata   '0.14.35',
npm sill pickManifestFromRegistryMetadata   '0.14.36',
npm sill pickManifestFromRegistryMetadata   '0.14.37',
npm sill pickManifestFromRegistryMetadata   '0.14.38',
npm sill pickManifestFromRegistryMetadata   '0.14.39',
npm sill pickManifestFromRegistryMetadata   '0.14.40',
npm sill pickManifestFromRegistryMetadata   '0.14.41',
npm sill pickManifestFromRegistryMetadata   '0.14.42',
npm sill pickManifestFromRegistryMetadata   '0.14.43',
npm sill pickManifestFromRegistryMetadata   '0.14.44',
npm sill pickManifestFromRegistryMetadata   '0.14.45',
npm sill pickManifestFromRegistryMetadata   '0.14.46',
npm sill pickManifestFromRegistryMetadata   '0.14.47',
npm sill pickManifestFromRegistryMetadata   '0.14.48',
npm sill pickManifestFromRegistryMetadata   '0.14.49',
npm sill pickManifestFromRegistryMetadata   '0.14.50',
npm sill pickManifestFromRegistryMetadata   '0.14.51',
npm sill pickManifestFromRegistryMetadata   '0.14.52',
npm sill pickManifestFromRegistryMetadata   '0.14.53',
npm sill pickManifestFromRegistryMetadata   '0.14.54',
npm sill pickManifestFromRegistryMetadata   '0.14.55',
npm sill pickManifestFromRegistryMetadata   '0.14.56',
npm sill pickManifestFromRegistryMetadata   '0.14.57',
npm sill pickManifestFromRegistryMetadata   '0.0.0',
npm sill pickManifestFromRegistryMetadata   '15.0.0',
npm sill pickManifestFromRegistryMetadata   '15.0.1',
npm sill pickManifestFromRegistryMetadata   '15.0.2',
npm sill pickManifestFromRegistryMetadata   '15.0.3',
npm sill pickManifestFromRegistryMetadata   '15.0.4',
npm sill pickManifestFromRegistryMetadata   '15.0.5',
npm sill pickManifestFromRegistryMetadata   '15.0.6',
npm sill pickManifestFromRegistryMetadata   '15.0.7',
npm sill pickManifestFromRegistryMetadata   '15.0.8',
npm sill pickManifestFromRegistryMetadata   '15.0.9' ]
npm sill addNamed @types/react@latest
npm verb addNamed "latest" is being treated as a dist-tag for @types/react
npm info addNameTag [ '@types/react', 'latest' ]
npm sill mapToRegistry name @types/react
npm sill mapToRegistry scope (from package name) @types
npm verb mapToRegistry no registry URL found in name for scope @types
npm sill mapToRegistry using default registry
npm sill mapToRegistry registry https://registry.npmjs.org/
npm sill mapToRegistry data Result {
npm sill mapToRegistry   raw: '@types/react',
npm sill mapToRegistry   scope: '@types',
npm sill mapToRegistry   escapedName: '@types%2freact',
npm sill mapToRegistry   name: '@types/react',
npm sill mapToRegistry   rawSpec: '',
npm sill mapToRegistry   spec: 'latest',
npm sill mapToRegistry   type: 'tag' }
npm sill mapToRegistry uri https://registry.npmjs.org/@types%2freact
npm verb addNameTag registry:https://registry.npmjs.org/@types%2freact already in flight; waiting
npm sill addNameTag next cb for @types/react with tag latest
npm sill addNamed @types/[email protected]
npm verb addNamed "15.0.9" is a plain semver version for @types/react
npm sill cache afterAdd @types/[email protected]
npm verb afterAdd C:\Users\myuser\AppData\Roaming\npm-cache\@types\react\15.0.9\package\package.json not in flight; writing
npm verb correctMkdir C:\Users\myuser\AppData\Roaming\npm-cache correctMkdir not in flight; initializing
npm verb afterAdd C:\Users\myuser\AppData\Roaming\npm-cache\@types\react\15.0.9\package\package.json written
npm sill loadAllDepsIntoIdealTree Finishing
npm sill loadIdealTree Finishing
npm sill currentTree [email protected]
npm sill idealTree [email protected]
npm sill idealTree +-- @types/[email protected]
npm sill idealTree `-- [email protected]
npm sill generateActionsToTake Starting
npm sill install generateActionsToTake
npm sill generateActionsToTake Finishing
npm sill diffTrees action count 2
npm sill diffTrees add @types/[email protected]
npm sill diffTrees add [email protected]
npm sill decomposeActions action count 16
npm sill decomposeActions fetch @types/[email protected]
npm sill decomposeActions extract @types/[email protected]
npm sill decomposeActions test @types/[email protected]
npm sill decomposeActions preinstall @types/[email protected]
npm sill decomposeActions build @types/[email protected]
npm sill decomposeActions install @types/[email protected]
npm sill decomposeActions postinstall @types/[email protected]
npm sill decomposeActions finalize @types/[email protected]
npm sill decomposeActions fetch [email protected]
npm sill decomposeActions extract [email protected]
npm sill decomposeActions test [email protected]
npm sill decomposeActions preinstall [email protected]
npm sill decomposeActions build [email protected]
npm sill decomposeActions install [email protected]
npm sill decomposeActions postinstall [email protected]
npm sill decomposeActions finalize [email protected]
npm sill runTopLevelLifecycles Starting
npm sill executeActions Starting
npm sill install executeActions
npm sill doSerial global-install 0
npm sill doParallel fetch 2
npm verb correctMkdir C:\Users\myuser\AppData\Roaming\npm-cache\_locks correctMkdir not in flight; initializing
npm verb lock using C:\Users\myuser\AppData\Roaming\npm-cache\_locks\staging-0ec845a5045f16a0.lock for C:\Users\myuser\react-google-login-bug\node_modules\.staging
npm sill doParallel extract 2
npm sill extract @types/[email protected]
npm sill extract [email protected]
npm verb unbuild node_modules\.staging\@types\react-792e2059
npm verb unbuild node_modules\.staging\react-google-login-bb8ed12e
npm sill gentlyRm C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059 is being purged from base C:\Users\myuser\react-google-login-bug
npm verb gentlyRm don't care about contents; nuking C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059
npm verb tar unpack C:\Users\myuser\AppData\Roaming\npm-cache\@types\react\15.0.9\package.tgz
npm verb tar unpacking to C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059
npm sill gentlyRm C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059 is being purged
npm verb gentlyRm don't care about contents; nuking C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059
npm sill gunzTarPerm modes [ '777', '666' ]
npm sill gentlyRm C:\Users\myuser\react-google-login-bug\node_modules\.staging\react-google-login-bb8ed12e is being purged from base C:\Users\myuser\react-google-login-bug
npm verb gentlyRm don't care about contents; nuking C:\Users\myuser\react-google-login-bug\node_modules\.staging\react-google-login-bb8ed12e
npm verb tar unpack C:\Users\myuser\AppData\Roaming\npm-cache\react-google-login\2.8.1\package.tgz
npm verb tar unpacking to C:\Users\myuser\react-google-login-bug\node_modules\.staging\react-google-login-bb8ed12e
npm sill gentlyRm C:\Users\myuser\react-google-login-bug\node_modules\.staging\react-google-login-bb8ed12e is being purged
npm verb gentlyRm don't care about contents; nuking C:\Users\myuser\react-google-login-bug\node_modules\.staging\react-google-login-bb8ed12e
npm sill gunzTarPerm modes [ '777', '666' ]
npm sill gunzTarPerm extractEntry README.md
npm sill gunzTarPerm extractEntry package.json
npm sill gunzTarPerm modified mode [ 'package.json', 420, 438 ]
npm sill gunzTarPerm extractEntry index.d.ts
npm sill gunzTarPerm extractEntry package.json
npm sill gunzTarPerm extractEntry types-metadata.json
npm sill gunzTarPerm extractEntry .npmignore
npm sill gunzTarPerm modified mode [ '.npmignore', 420, 438 ]
npm sill gunzTarPerm extractEntry README.md
npm sill gunzTarPerm modified mode [ 'README.md', 420, 438 ]
npm sill gunzTarPerm extractEntry webpack.config.dist.js
npm sill gunzTarPerm modified mode [ 'webpack.config.dist.js', 493, 511 ]
npm sill gunzTarPerm extractEntry webpack.config.dev.js
npm sill gunzTarPerm modified mode [ 'webpack.config.dev.js', 420, 438 ]
npm sill gunzTarPerm extractEntry demo/index.js
npm sill gunzTarPerm modified mode [ 'demo/index.js', 420, 438 ]
npm sill gunzTarPerm extractEntry demo/index.html
npm sill gunzTarPerm modified mode [ 'demo/index.html', 420, 438 ]
npm sill gunzTarPerm extractEntry dist/google-login.js
npm sill gunzTarPerm modified mode [ 'dist/google-login.js', 420, 438 ]
npm sill gunzTarPerm extractEntry dist/google-login.js.map
npm sill gunzTarPerm modified mode [ 'dist/google-login.js.map', 420, 438 ]
npm sill gunzTarPerm extractEntry .eslintrc
npm sill gunzTarPerm modified mode [ '.eslintrc', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/.nakignore
npm sill gunzTarPerm modified mode [ '.c9/.nakignore', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/preview-https:/react-google-login-th3legend.c9users.io
npm sill gunzTarPerm modified mode [ '.c9/metadata/preview-https:/react-google-login-th3legend.c9users.io',
npm sill gunzTarPerm   420,
npm sill gunzTarPerm   438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/tab0
npm sill gunzTarPerm modified mode [ '.c9/metadata/tab0', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/package.json
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/package.json', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/README.md
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/README.md', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/webpack.config.dev.js
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/webpack.config.dev.js', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/.eslintrc
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/.eslintrc', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/demo/index.js
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/demo/index.js', 420, 438 ]
npm sill gentlyRm C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059\node_modules is being purged
npm verb gentlyRm don't care about contents; nuking C:\Users\myuser\react-google-login-bug\node_modules\.staging\@types\react-792e2059\node_modules
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/index.d.ts
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/index.d.ts', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/src/index.js
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/src/index.js', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/metadata/workspace/test/google_test.js
npm sill gunzTarPerm modified mode [ '.c9/metadata/workspace/test/google_test.js', 420, 438 ]
npm sill gunzTarPerm extractEntry .c9/project.settings
npm sill gunzTarPerm modified mode [ '.c9/project.settings', 420, 438 ]
[              ....] | extract:@types/react: sill gunzTarPerm modified mode [ '.c9/project.settings', 420, 438 ]

Login does not persist

The vanilla Google Login button persists, so it would make sense that this component has the same behavior.

Add fallback element?

I was trying to use this component and with my implementation, no element gets selected here:
https://github.com/anthonyjgrove/react-google-login/blob/master/src/google.js#L32

Adding a fallback fixes the problem:
const element = d.getElementsByTagName(s)[0] || document.body

Do you have any opinions about this (fallback or document.body)? I can submit a PR.

Cross-client authentication with Backend.

Hi, thanks for this! I have a react front-end using your module to login to Google API (YouTube). Seems to work great, the callback method gets access_token, id_token, user info, etc.

I also have my own backend server that I also want to give access to the user's YouTube data. The backend is Rails API-only, and I communicate with it using JSON-API from the React client running on a different server. I haven't been able to set this up though...

I tried sending the access_token to the backend server and using that, But I get a forbidden error "code"=>403, "message"=>"Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup." --- although I believe this message really means the authentication isn't setup correctly in any number of ways. I the front and backend are using different client_id's under the same GoogleAPI project.

I tried using react-google-login with offline='true', but this just gets an offline code and doesn't seem to help me.

I may need to add my server's client Id to the scope like this: audience:server:client_id:123SERVER123.apps.googleusercontent.com but this results in invalid scope.

I think I need something called a one-time token and give that to the server, as described in this stack overflow. Can that be done with react-google-login?

Thanks for any advice!

@types/react is not in the npm registry

Im trying to install this component, but I get the error:

npm ERR! node v4.1.1
npm ERR! npm v4.0.2
npm ERR! code E404

npm ERR! 404 no such package available : @types/react
npm ERR! 404
npm ERR! 404 '@types/react' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'react-google-login'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

I tried installing "@types/react" with the command:

npm install "@types/react" --save

but no luck.

How do I get rid of this problem?

Disabled state style

Hi,

Would be possible to define style(s) for disabled state? E.g. making button semi transparent to notify user that it's not ready to use, yet?

It would match behavior of keppelen/react-facebook-login:
https://github.com/keppelen/react-facebook-login/blob/master/src/facebook.js#L181

type: "tokenFailed", google signup is not working

I am trying to signup using this package, but it is showing USER_LOGGED_OUT error.
Please help me to figure out problem.

Invariant Violation : I am getting this error.

I am trying to use the react google login , but i am running in to some issues . The Error is bundle.js:3104 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofLogin.
and
bundle.js:3104 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofLogin

This may be because because of the usage issue . I may not have imported properly too . Any help is very much appreciated.

var React = require('react')
var GoogleLogin = require('react-google-login');

var Login = React.createClass({
 responseGoogle:function(e){
        console.log("resonse from google",e);
    },
    render: function() {
            return <div className="form-horizontal">
            {function() {
                if (!this.state.error) return;
                return <div className="alert alert-danger">{this.state.error}</div>
            }.bind(this)()}
<GoogleLogin
    clientId={"ZZZZZZZZZZZZZZZ-XXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com"}
    buttonText={"Login"}
    callback={this.responseGoogle} />
        </div>
    }
})
module.exports = Login;

This is part of my Code Snippet.

Object keys has changed

Hello,

This day I tried to connect through Google with this package, and return object's key has changed.

Old Key	New Key	Detail
el	El	Google ID
hg	Zi	Token Details
wc	w3	Profile Detail

Did you guys have this issue ?

Changes in GAPI v2

Can you please update the component to take in this extra prop: 'fetch_basic_profile'

It is now required to work-around the issue mentioned here:
google/google-api-javascript-client#266 (comment)

Thanks

Offline access is always requested

When using the default component settings, or even when explicitly setting the offline={false} prop, the "X would like to have offline access" permission is always presented to the user in the Google OAuth dialog. Is there any way to get rid of this?

Using version 2.5.8.

"Cannot read property 'parentNode' of undefined"

Disable Login Button until google javascript is loaded

Loading google javascripts may take a moment or even few seconds in slow connection.
If User clicks login button before that we are getting error,

Cannot read property 'auth2' of undefined

Can you disable login button, until window.gapi.auth2 is available ? I hope google will have callback on load.
I can also provide pull request, if you are interested.
Thanks for the contribution to community.

Unnecessary <div>...</div> container.

May be it will be better to render just button without innder div container, because it may break custom markup.

Constantly closing login window

Hi guys, I'm implementing react-google-login to my app and it seems there's a problem somewhere in library. Here is my code:

_layoutDumb.jsx

import React from 'react';
import { Route, Link } from 'react-router-dom';
import { Container, Segment, Button, Input, Icon } from 'semantic-ui-react';
import GoogleLogin from 'react-google-login';

import _appSmart from 'smart/_app.jsx';

export default (props) => {
    return (
        <div>
            <Route exact path='/' render={() => {
                return (
                    <div className='_ login form'>
                        <GoogleLogin
                            clientId='714689519066-v5g1o9hehsg1kko7jgpdrre7kojlahi1.apps.googleusercontent.com'
                            onSuccess={props.googleResponse}
                            onFailure={props.googleResponse}
                            autoLoad={true}
                            style={{}}
                            className='ui google plus large button' >
                            <Icon name='google' /> Přihlásit
                        </GoogleLogin>
                    </div>
                );
            }} />
            <Route path='/app' component={_appSmart} />
        </div>
    );
}

_layoutSmart.jsx

import React from 'react';
import update from 'react-addons-update';

import _layoutDumb from 'dumb/_layout.jsx';

export default class extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            googleResponse: (response) => { console.log(response); }
        };
    }

    render() {
        return (
            _layoutDumb(this.state)
        );
    }
}

I'm able to login within the popup login window and grant application permission to get user data/info and then the window automatically closes and I get an error Object {error: "popup_closed_by_user"}. Since then I get this exact same error every time I click on login button.
Is it a problem of library?

License File

I want to use this in my project but I don't see any license. Can you please add a license?

apis.google.com/js/client:platform.js not found

apis.google.com/js/client:platform.js not found issue when I trigger the button

Auth code

How can I request auth code, so I can do authentication and authorization at the same time?

Pass through of disabled prop

I am unable to set a disabled state for the button through a prop:

disabled={true}

Would it be possible to add this feature?
Thanks.

gapi client not loading

Hi,

This package has worked swimmingly for me in the past, but has recently stopped working as it does not load gapi in the window, such that the following:

index.js(31)

      window.gapi.load('auth2', () => {

returns this error:

Uncaught TypeError: Cannot read property 'load' of undefined
    at HTMLScriptElement.<anonymous> (google-login.js:1)

I've also tried using the module in a test boilerplate project and it still has this issue. The script is inserting itself before the first script element in document.scripts but it's not loading. Any ideas?

onSuccess sometimes accidently invoked

Step to reproduce:

Make sure you logged in to Google with several accounts
Login using react-google-login.
Remove current logged in token (not the Google one, something like, our program's cookie, etc).
Login again using react-google-login.
After relogin, i monitored the network, onSuccess event are accidently invoked, soonly after i clicked "Login with Google". Logged in using current account.

Prevent double click

Hi @anthonyjgrove, great repo !

Is there a way to prevent double click, - and so, double call to Google - by catching an event object on onRequest() method ?

// Prevent new click if loading var is true
<GoogleLogin
    onRequest={(e) => {
        loading &&
        e.preventDefault()
    }}
>
    Sign In with Google
</GoogleLogin>

Or by creating a new attribute :

// Disable new click if loading var is true
<GoogleLogin
    disabled={loading}
>
    Sign In with Google
</GoogleLogin>

default tag value (button) results in submit cb if used inside a form

trying to use it with redux-form/immutable, here some code samples:
FormComponent:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm, initialize } from 'redux-form/immutable';
import { fromJS } from 'immutable';
import Divider from '../../../common/Divider/Divider';
import renderInputControl from '../../../common/InputControl';
import SocialLogin from '../../../common/SocialLogin/SocialLogin';
import { loginFaceBook, loginGoogle } from './actions';
import validate from './validate';

class SignUpForm extends Component {
    static propTypes = {
        initializeForm: PropTypes.func,
        stepName: PropTypes.string,
        handleFaceBookLogin: PropTypes.func,
        handleGoogleLogin: PropTypes.func,
        handleSubmit: PropTypes.func,
        submitting: PropTypes.bool
    };

    componentDidMount() {
        this.props.initializeForm();
    };

    shouldComponentUpdate(nextProps) {
        const {name, email} = this.props;

        if (name !== nextProps.name || email !== nextProps.email) {
            this.props.initializeForm();
            return true;
        }
        return false;
    };

    showResults = values =>
        new Promise(resolve => {
            setTimeout(() => {  // simulate server latency
                window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
                resolve();
            }, 500);
        });

    render() {
        const { stepName, handleFaceBookLogin, handleGoogleLogin, handleSubmit, submitting } = this.props;
        return (
            <form onSubmit={handleSubmit(this.showResults)} className={`${stepName}__form`}>
                <SocialLogin
                    blockName={stepName}
                    faceBookCB={handleFaceBookLogin}
                    googleCB={handleGoogleLogin}/>
                <Divider
                    blockName={stepName}
                    text='or'/>
                <Field name='name' type='text' component={renderInputControl} label='Full Name'/>
                <Field name='email' type='email' component={renderInputControl} label='Email'/>
                <Field name='password' type='password' component={renderInputControl} label='Password'/>
                <Field name='tel' type='tel' component={renderInputControl} label='Phone Number'/>
                <button type='submit' disabled={submitting}>Sign Up</button>
            </form>
        );
    }

}

SignUpForm = reduxForm({
    form: 'signUpForm',
    validate
})(SignUpForm);

let signUpFormStateValues;

const mapStateToProps = state => {
    return signUpFormStateValues = state.get('signup').toJS();
};

const mapDispatchToProps = (dispatch) => ({
    initializeForm: () => dispatch(initialize('signUpForm', fromJS(signUpFormStateValues))),
    handleFaceBookLogin: (response) => dispatch(loginFaceBook(response)),
    handleGoogleLogin: (response) => dispatch(loginGoogle(response))
});

export default connect(mapStateToProps, mapDispatchToProps)(SignUpForm);

SocialLogin:

import React, { PropTypes } from 'react';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';

import facebook from '../../../assets/icons/facebook.svg';
import google from '../../../assets/icons/google.svg';
import { FB_APP_ID, GOOGLE_CLIENT_ID } from '../../../config';
import Icon from '../Icon/Icon';

const SocialLogin = ({ blockName = '' , faceBookCB, googleCB}) => {
    const SocialLoginClassName = blockName ? `${blockName}__social-login` : 'social-login';

    return (
        <div className={SocialLoginClassName}>
            <FacebookLogin
                appId={FB_APP_ID}
                fields="name,email,picture"
                scope="email,public_profile,user_friends"
                tag="button"
                cssClass="card__button card__button--facebook"
                icon={<Icon size='lg' glyph={facebook}/>}
                textButton="Login with Facebook"
                callback={faceBookCB}
                reAuthenticate={false}>
            </FacebookLogin>
            <GoogleLogin
                clientId={GOOGLE_CLIENT_ID}
                className='card__button card__button--google'
                offline={false}
                onSuccess={googleCB}
                onFailure={googleCB}>
                <Icon size='lg' glyph={google}/>
                <span className='card__button-text'>Login with Google</span>
            </GoogleLogin>
        </div>
    );
};

SocialLogin.propTypes = {
    blockName: PropTypes.string,
    faceBookCB: PropTypes.func.isRequired,
    googleCB: PropTypes.func.isRequired
};

export default SocialLogin;

if I change tag to 'a' then it doesn't fire forms onSubmit cb. there is another problem since my reducer which should return me part of responce onSuccess doesn't return it, but that's probably anothe story.

Log In not working

For some reason all of a sudden log in using this component has stopped this morning. I see that they are deprecating webview logins today, however, I took a peek at the code and it doesn't seem to be using webviews.

Steps to reproduce:
1- pull this repo
2- install it
3- run npm run start
4- try logging in via google

The behaviour i'm seeing is the pop up window shows a 500 error message. Closing sends a "modal window closed" error message to the onFailure callback.

how to logout the logged in user

Is there any method for logout of the logged in user

could you add icon property like react-facebook-login

could you add icon property like react-facebook-login?
icon="fa-facebook"

https://github.com/keppelen/react-facebook-login

Usage Login for multiple scopes on a single page

Hi,

I am trying to manage a login for different scopes on a single page.

For example; login for google analytics, adwords and search console.

I added 3 GoogleLogin component, all with there own scope, but when I click on one of the buttons it will refer to the same scope.

So I am wondering, the way the GoogleLogin component work, if it's even possible.

components

Always the same, no matter which button is clicked

apis.google.com/js/client:platform.js script loads every time component is shown

<script id="google-login" src="//apis.google.com/js/client:platform.js" gapi_processed="true"></script>

I'm using google login button within my custom stateless component. Every time I enter my login subpage, new script is added to DOM.

import React from 'react';
import GoogleLogin from 'react-google-login';
import { RaisedButton } from 'material-ui';

const GoogleLoginButton = ({ clientId, userLoginSuccess, userLoginFailure }) => (
    < GoogleLogin
        clientId={clientId}
        onSuccess={response =>
            userLoginSuccess({ token: response.tokenId })
        }
        onFailure={userLoginFailure} >

        < RaisedButton
            label="Login with google"
            fullWidth
            backgroundColor="#dd4b39"
            labelColor="#fff"
        />

    < /GoogleLogin>
);

export default GoogleLoginButton;

Can't get refresh token

I followed the instructions and used "approvalPermit=force"

<GoogleLogin
        clientId={clientId}
        buttonText="Login"
        approvalPrompt="force"
        onSuccess={this.onSuccess}
        onFailure={this.onFailure}
/>

But it doesn't actually prompt for approval and therefore doesn't return a refresh token.
I checked the API documentation (Google API), and it doesn't seems to support the "permit" option. Instead, they offer reloadAuthResponse in order to get a "refreshed" token.
Any other option?

Google Login not working with Microsoft Edge in surface

TypeError: googleUser.getBasicProfile is not a function. (In 'googleUser.getBasicProfile()', 'googleUser.getBasicProfile' is undefined)

List of what returned values mean?

Can you post some documentation on what the return values actually mean. I followed the example and I get data like

WE
El:"10262112414141281913506"
hg:Object
wc:PG
proto:Object

I can sort of figure out what some of the stuff means but others I got no clue. I am trying to figure out what is the "offline token" that I can store in my db and compare against in the future.

responseType is not being passed

responseType is there in the props; but i dont see it is mapped to the params.

style parameter not setting backgroundImage

I tried using the style parameter and I couldn't get my image to appear. We originally had this as a static setting this using CSS where it worked. We now want it be inline style set dynamically to be our image server host from our env variables.

<GoogleLogin
              clientId={process.env.GOOGLE_ID}
              buttonText="Log in with Google"
              className="btn icon-btn btn-block space-1 signup-login-form__btn-xl btn-large btn-google"
              style={{backgroundImage: `url(${process.env.IMAGE_HOST}Google_-G-_Logo.png)`}}
              onSuccess={this.responseGoogle}
              onFailure={this.responseGoogle}
            />

not able to fire required url

I want to fire up the following URL using the "react-google-login"

https://accounts.google.com/o/oauth2/v2/auth?client_id=CLIENT_ID.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fadsense.readonly&response_type=code&access_type=offline&redirect_uri=http%3A%2F%2Flocalhost%3A8090%2Fapi%2Fv0%2Fauth%2FauthCode

I tried all the possible ways to get the above but no luck. Please help me out.

Catch login failure error

auth2.signIn() should catch any errors thrown. e.g when hostedDomain does not match an error is thrown, but is not caught in the callback function.

Suggestion is to rename callback prop to onSuccess and add an onFailure prop

FYI: Should also rename cssClass to className to be consistent with the rest of the React.

autologin

when i login, and then just refresh the page, the onSuccess is not called after the refresh. i think it should be called, same way as it happens with google's example.

Add TypeScript definitions.

It would be nice to have typescript definitions right in the project.

Add `onRequest` method

State management libraries like Redux typically process three events in auth sequences similar to react-google-login. Any kind of first attempt will emit a REQUEST action, which can be used to show a loading symbol or prepare the program to accept auth details. Then a SUCCESS or FAILURE action will come after.

I would like to add onRequest to the component in addition to onSuccess and onFailure so I can dispatch a request action in Redux.

If you feel that this is an appropriate addition, I can submit a pull request.

    <GoogleLogin
      clientId="*"
      onSuccess={this.props.onLoginSuccess}
      onFailure={this.props.onLoginFailure}
      onRequest={this.props.onLoginRequest}
    />

It would be easy to implement this feature. Simply add onRequest as a prop that accepts a function. Then call this function at the beginning of the onBtnClick() method on line 65 of src/google.js

Add new prop for "prompt" option

An addition of a new prop setting "prompt" field can be helpful.
Expected options:

none
login
consent
select_account
to be set in options field of gapi

Use as link wrapper around another button component

Thanks for making this, it's been a huge help!

Would it be possible to either:

Expose a separate component, or
Allow the insertion of a child component into the current component

Either of which would allow the functionality of the login button to be exposed, without having to use the actual button element that this component creates. Currently if I want to use my own button I would need to override the existing styles of this component, which means I don't have full control over the styles, and there could be some styles I'd forget to override. Using my own elements as the button body would make aesthetic control much easier.

The idea being that I could use this component like this:

<GoogleLogin
    clientId="xxxxxxx"
    buttonText="Login"
    onSuccess={func}
    onFailure={func}>
    <MyButton />
</GoogleLogin>

which would not change the way <MyButton /> looks but would give it all the functionality of its parent component.

Would this be at all possible? If the owner or maintainers like this idea I'd be more than happy to have a go at creating a pull request myself.

Possible to open the Google Sign In redirect url in the same tab?

Is it possible to not launch a pop-up but instead redirect to Google in the same browser tab? I tried looking at the Google Sign-In docs as well to see if there was something to toggle, but doesn't seem to mention this.