Breaking News: Grepper is joining You.com. Read the official announcement!

login with google in react

Add Answer

30_Savaliya Denish answered on December 25, 2021 Popularity 10/10 Helpfulness 3/10

answer login with google in react

related react google login

related react-google-login

login with google in react

Comment

import React, { useState } from "react";
import google from './assets/images/google.png'
import './assets/css/all.css'
import './assets/css/bootstrap.min.css'
import './assets/css/responsive.css'
import './assets/css/style.css'
import ReactDOM from "react-dom";
import { GoogleLogin, GoogleLogout } from "react-google-login";
const GoogleLoginPage = () => {
  const client_id =
    "233345635594-km0tlqqrv2difnjgovf2jn11sgg7117c.apps.googleusercontent.com";
  const [showLoginButton, setLoginButton] = useState(true);
  const [showLogoutButton, setLogoutButton] = useState(false);
  const loginHandler = (res) => {
    console.log("res", res.profileObj);
    console.log("this is my")
    setLoginButton(false);
    setLogoutButton(true);
  };
  const failureHandler = (res) => {
    console.log("login failed", res);
  };
  const logoutHandler = (res) => {
    alert("logout sucessfully");
    setLoginButton(true);
    setLogoutButton(false);
  };
  return (
    <>
      {showLoginButton && (
        <>
          {/* <GoogleLogin
              className="google-item"            
              clientId={client_id}
              onSuccess={loginHandler}
              onFailure={failureHandler}
              cookiePolicy={"single_host_origin"}
            /> */}
          <GoogleLogin
            clientId={client_id}
            render={(renderProps) => (
              <button
                className="btn button btn-outline"
                onClick={renderProps.onClick}
                // disabled={renderProps.disabled}
              >
                <img src={google} /> Sign Up with Google
              </button>
            )}
            onSuccess={loginHandler}
            onFailure={failureHandler}
            cookiePolicy={"single_host_origin"}
          />
        </>
      )}
      {showLogoutButton && (
        <GoogleLogout
          clientId={client_id}
          render={(renderProps) => (
            <button
              className="btn button btn-outline"
              onClick={renderProps.onClick}
              // disabled={renderProps.disabled}
            >
              <img src={google} /> logout 
            </button>
          )}
          onLogoutSuccess={logoutHandler}
        ></GoogleLogout>
      )}
    </>
  );
};
export default GoogleLoginPage;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Mar 04 2022

30_Savaliya Denish

0 Answers Avg Quality 2/10

Closely Related Answers

react google login

Comment

npm install react-google-login

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: www.npmjs.com

Tags: react-google-login react-google-logi

Link to this answer
Share Copy Link

Contributed on Apr 28 2022

Disgusted Dogfish

0 Answers Avg Quality 2/10

react google login

Comment

-1

// npm install react-google-login

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';


const responseGoogle = (response) => {
  console.log(response);
}

ReactDOM.render(
  <GoogleLogin
    clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 25 2021

Adventurous Armadillo

0 Answers Avg Quality 2/10

react-google-login

Comment

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';

import { gapi } from "gapi-script";


const responseGoogle = (response) => {
  console.log(response);
}

ReactDOM.render(
  <GoogleLogin
    clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 11 2022

Testy Turkey

0 Answers Avg Quality 2/10

login with google in react

Contents

More Related Answers

login with google in react

Closely Related Answers

react google login

react google login

react-google-login

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.