react-icons/fa#FaGoogle JavaScript Examples

The following examples show how to use react-icons/fa#FaGoogle. 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: index.js    From AdaptivApps-fe with MIT License 5 votes vote down vote up
LandingPage = () => {
  const classes = useStyles();
  const { loginWithRedirect } = useAuth0();
  return (
    <IconContext.Provider value={{ color: "white", size: "3rem" }}>
      <NavBar />
      <Container className={classes.container}>
        <div className={classes.box}>
          <Typography className={classes.typography}>
            Your home for Angel City Sports events and more!
          </Typography>
          <img
            className={classes.bannerImg}
            src={landingImage}
            alt="Angel City Sports"
          />
        </div>
      </Container>
      <Container className={classes.contentContainer}>
        <Box className={classes.contentIntro}>
          <Typography variant="subtitle2">Sign Up Now!</Typography>
          <Typography className={classes.contentP}>
            Sign Up Now with Facebook or Google, add your profile info, and keep
            track of Angel City Sports Games, Clinics, and other events! All the
            info you need is all in one place - The Angel City Sports App.
          </Typography>
        </Box>
        <Box className={classes.btnContainer}>
          <Button
            className={classes.btn1}
            onClick={() => loginWithRedirect({})}
          >
            <FaFacebookSquare className={classes.icon} />
            <p>Sign up with Facebook</p>
          </Button>
          <Button
            className={classes.btn2}
            onClick={() => loginWithRedirect({})}
          >
            <FaGoogle className={classes.icon} />
            <p>Sign up with Google</p>
          </Button>
          <Link
            to="privacy-policy"
            style={{ padding: "0" }}
            className={classes.privacyLink}
          >
            <p>Privacy Policy</p>
          </Link>
        </Box>
        <Link to="accessibility" className={classes.a11yLink}>
          Accessibility Statement
        </Link>
      </Container>
    </IconContext.Provider>
  );
}
Example #2
Source File: GoogleAuth.js    From devagram with GNU General Public License v3.0 5 votes vote down vote up
GoogleAuth = (props) => {
  const successResponse = (response) => {
    /**
     * This will return google data of user like emailId, name, fullname, profileUrl, GoogleId idToken etc.
     * Make backend api call according and add authType as google
     */

    console.log(response);
  };

  const failureResponse = (response) => {
    /**
     * Return error if something went wrong
     * Handle error accordingly
     */

    console.log(response);
  };

  return (
    <GoogleLogin
      clientId={process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}
      buttonText="SignIn wih google"
      onSuccess={successResponse}
      onFailure={failureResponse}
      cookiePolicy={"single_host_origin"}
      theme={"dark"}
      render={(props) => (
        <Button
          type="button"
          btnType="Google"
          disabled={props.disabled}
          onClick={props.onClick}
        >
          <FaGoogle style={{ marginRight: "0.2rem" }} />
          Login with Google
        </Button>
      )}
    />
  );
}