React-google-login: Constantly closing login window

Created on 3 Apr 2017  路  8Comments  路  Source: anthonyjgrove/react-google-login

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?

Most helpful comment

Add Authorized JavaScript origins in the following order if you are using localhost :

screen shot 2017-07-17 at 8 32 33 am

Note that you need to add one with port and one without port. Replace the port with your :P

All 8 comments

So, I've just solved the issues. Problem was, origin url was not allowed, but instead of getting not valid origin error, the window auto closed and I got popup closed by user error.

I am having the same issue. I have origin url correctly setup, after I login and grant permissions the windows closes and I receive {error: "popup_closed_by_user"}

@camslaz can you paste in how you have the component setup?

I have the same error.

Here is my configuration:
[email protected]

<GoogleLoginComponent
                clientId="17197425356-c7v22c3kasiir0vjllj5g6sl1gsf07v8.apps.googleusercontent.com"
                buttonText="G+"
                className="google-login"
                autoLoad={true}
                onSuccess={this.onGoogleResponse}
                onFailure={this.onGoogleFailure}
            />

I've added my dev server URL(http://localhost:8050/) in the origin setting

Every time a popup window close instantly with error {error: "popup_closed_by_user"} after I've logged in the Google

I've found that this error arise when google chrome blocks popup window

@1755 did you find any solution for this ?

@shishircc It was caused because AdBlok(or Google Chrome) has blocked popups

Add Authorized JavaScript origins in the following order if you are using localhost :

screen shot 2017-07-17 at 8 32 33 am

Note that you need to add one with port and one without port. Replace the port with your :P

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ethanny2 picture ethanny2  路  4Comments

zoripong picture zoripong  路  7Comments

pogran picture pogran  路  4Comments

bradeac picture bradeac  路  4Comments

SSR
rlancer picture rlancer  路  8Comments