react-google-login#GoogleLogout JavaScript Examples

The following examples show how to use react-google-login#GoogleLogout. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: logout.jsx    From MERN-Gurujii-dev with MIT License 6 votes vote down vote up 
render() {
    return (
      <div>
        <GoogleLogout
          clientId='245240540416-fs5i5j4omlae8ifjcffuai5717amq8if.apps.googleusercontent.com'
          buttonText='Signout'
          onLogoutSuccess={this.onSuccess}
          onFailure={this.onFail}
          theme='dark'
        />
      </div>
    );
  }
Example #2
Source File: Logout.js    From react-google-authentication with MIT License 6 votes vote down vote up 
function Logout() {
  const onSuccess = () => {
    console.log('Logout made successfully');
    alert('Logout made successfully ✌');
  };

  return (
    <div>
      <GoogleLogout
        clientId={clientId}
        buttonText="Logout"
        onLogoutSuccess={onSuccess}
      ></GoogleLogout>
    </div>
  );
}
Example #3
Source File: Test.js    From Screencast with MIT License 4 votes vote down vote up 
export default function TemporaryDrawer() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const classes = useStyles();
  const [Log, setLog] = useState(false);
  const [state, setState] = React.useState({
    left: false
  });
  const handleClose = () => {
    setAnchorEl(null);
  };
  useEffect(() => {

    setLog(localStorage.getItem("email"));

  }, []);

  const logout = () => {
    //FB.logout();
    //clearTimeout(localStorage.getItem("interval_id"));
    
    console.log("Lady")
    if(localStorage.getItem('start')<Date.now())
    {

      localStorage.removeItem('email');
      
      Router.push('/')
    }
    else
    {

      localStorage.removeItem('email');
      
      Router.reload('/')
    }
  };


  const toggleDrawer = (anchor, open) => (event) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const list = (anchor) => (
    <div
      className={clsx(classes.list)}
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
      <ListItem button key='Home'>
          <Link href={Log ? "/game" : "/"}>
            <ListItemText primary='Home'
            disableTypography
            primary={<Typography style={{ color: '#FFFFFF', fontFamily:"'Russo One', sans-serif", fontSize:18 }}>Home</Typography>} />
           
          </Link>
        </ListItem>

       

        <ListItem button key='Leaderboard'>
          <Link href='/leaderboard'>
            <ListItemText primary='Leaderboard'
            disableTypography
            primary={<Typography style={{ color: '#FFFFFF', fontFamily:"'Russo One', sans-serif", fontSize:18 }}>Leaderboard</Typography>} />
          </Link>
        </ListItem>

        {Log && (
          <div className="userDetails-wrapper">
            <div className="details-wrapper">
              <GoogleLogout
                render={(renderProps) => (
                  <div className={classes.root}>
                    <Link href="/">
                      <MenuItem onClick={logout}><Typography style={{ color: '#FFFFFF', fontFamily:"'Russo One', sans-serif", fontSize:18 }}>Logout</Typography></MenuItem>
                    </Link>
                  </div>
                )}
                onLogoutSuccess={logout}
              />
            </div>
            <div className="bar" />
            <div className="stand" />
          </div>
        ) }
            
          


      </List>
    </div>
  );
  console.log("return b4 menu")
  return (
    <div>
      {['left'].map((anchor) => (
        <React.Fragment key={anchor}>
          <Button onClick={toggleDrawer(anchor, true)}><MenuIcon style={{ color: "#fff" }} /></Button>
          <Drawer
            id="fade-menu"
            TransitionComponent={Fade}
            marginThreshold="0px"
            anchorOrigin={{ vertical: "top", horizontal: "left" }}
            anchorPosition={{ left: "0", top: "0" }}
            transformOrigin={{ top: "0px", left: "0px" }}
            style={{ fontFamily: "'Russo One', sans-serif", backgroundColor: "rgba(0,0,0,0.5)" }}
            PaperProps={{
              style: {
                
                top: 0,
                left: 0,
                background:"rgba(3, 3, 65, 0.8)",

borderRadius:"0px",
                color: "white",
                marginTop: "0",
                paddingTop: ["0px"],
                width: "300px",
                maxHeight: "100%",

              },
            }}
            anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
            {list(anchor)}
            <MenuItem onClick={handleClose}>
              <Rules >Rules</Rules>
            </MenuItem>
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}
Example #4
Source File: NavBar.js    From talk4free with MIT License 4 votes vote down vote up 
render() {
    const checkLogin = () => {
      if (this.state.isSignedIn) {
        return (
          <React.Fragment>
            <Dropdown>
              <Dropdown.Toggle
                className="ml-5"
                variant="primary"
                id="dropdown-basic"
              >
                {this.state.userName}
                {this.state.isSignedIn ? (
                  <Image
                    src={this.state.imageUrl}
                    style={{ width: "35px" }}
                    roundedCircle
                  />
                ) : (
                  ""
                )}
              </Dropdown.Toggle>

              <Dropdown.Menu className="ml-5">
                <Dropdown.Item>
                  {" "}
                  <GoogleLogout
                    clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                    render={renderProps => (
                      <Button
                        variant="secondary"
                        onClick={renderProps.onClick}
                        disabled={renderProps.disabled}
                      >
                        {" "}
                        Logout
                      </Button>
                    )}
                    buttonText="Logout"
                    onLogoutSuccess={this.logout}
                  ></GoogleLogout>
                </Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </React.Fragment>
        );
      } else {
        return (
          <GoogleLogin
            clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
            render={renderProps => (
              <React.Fragment>
                <Button
                  variant="primary"
                  className="ml-5"
                  id="signInBtn"
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  {this.state.isSignedIn ? this.state.userName : "Sign In"}
                  <FaSignInAlt />
                </Button>
              </React.Fragment>
            )}
            buttonText="Login"
            onSuccess={this.responseGoogle}
            onFailure={this.responseGoogle}
            isSignedIn={true}
            cookiePolicy={"single_host_origin"}
          />
        );
      }
    };
    return (
      <Navbar bg="dark" variant="dark" fixed="top">
        <Container>
          <Navbar.Brand href="#home">
            <Image src={require("./logo5x5.png")} />
            Talk4Free
          </Navbar.Brand>
          <Nav className="ml-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Rooms</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
          {checkLogin()}
        </Container>
      </Navbar>
    );
  }