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 |
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 |
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 |
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 |
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>
);
}