0

I am trying to implement login with google for web. I was able to do a basic implementation using JavaScript as shown in documentation. But I am not able to get onSignIn invoked when it is inside a react component.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="google-signin-client_id" content="xxx.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <title>Dashboard</title>
</head>
<body>
    <div id="app"></div>
</body>

component file - login.jsx

import React from 'react';
import PropTypes from "prop-types";
import styles from "../../../stylesheets/Layout/main.css";
import Logo from './logo';

class LoginPage extends React.Component {

    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()); // This is null if the 'email' scope is no
    }

    render() {

        return (
            <div className="centered">
                <Logo className="login-logo" />
                <div>
                    <div className="g-signin2" data-onsuccess={this.onSignIn}></div>
                </div>
                <div>
                    <p className="login-text">
                        Login with Google account
                    </p>
                </div>
            </div>
        );
    }
}


export default LoginPage;
Manjit Kumar
  • 1,221
  • 1
  • 19
  • 28
  • 1
    Possible solution http://stackoverflow.com/questions/31610461/using-google-sign-in-button-with-react – m.rohail.akram May 08 '17 at 13:49
  • 1
    Link in your comment works if I replace `className="g-signin2"` to `id="g-signin2"`. Thanks. – Manjit Kumar May 08 '17 at 15:57
  • This video explains Google, facebook and linked In login with reactjs https://youtu.be/9MhLHkf7Ifs. Provided with a sample application explaining the code. It might help someone :-) – Prem Aug 04 '17 at 14:18

0 Answers0