Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "components"

Index

Interfaces

Variables

Functions

Variables

Const GoogleAuthConsumer

GoogleAuthConsumer: ExoticComponent<ConsumerProps<IOAuthState>> = GoogleAuthContext.Consumer
example

Get notified when a user has logged in successfully by wrapping the GoogleButton component within the GoogleAuth provider. For example:

   import {
      GoogleAuth
  } from "react-google-oauth2";

  <GoogleAuth>
  {({isAuthenticated}) => {
      // isAuthenticated will get set to true when a user has successfully logged in.
      console.log("value: ", isAuthenticated); // value: true or false
      return <GoogleButton
                // options...
              />
  }}
  </GoogleAuth>

Functions

Const GoogleAuth

  • GoogleAuth(props: any): Element

GoogleButton

  • GoogleButton(props: TypeGoogleButton): Element
  • example

    Quick Start:

    First create an options object that implements an IAuthorizationOptions type. Check the IAuthorizationOptions and IAuthorizationBase types for all required properties. Then, pass the options to the GoogleButton component.

     const options:  = {
     clientId: (process.env.CLIENT_ID as string),
      redirectUri: "http://localhost:3000",
      scopes: ["openid", "profile", "email"],
      includeGrantedScopes: true,
      accessType: "offline",
  };

  <GoogleButton
        placeholder="demo/search.png"
        options={options}
        apiUrl="http://localhost:5000/google_login"
  />

    Parameters

    • props: TypeGoogleButton

      see IGoogleButton

    Returns Element

setPrompt

  • Parameters

    • setOptions: Function
    • Optional options: IAuthorizationOptions

      If for example your user updates their email in your app & you redirect them to the login again, Google will by default skip the Google email select screen & log you in with your existing credentials. To stop this happening you can use the following function:

       setPrompt("select_account");

      Below is an example with setPrompt function resetting your

        const sso_options: IAuthorizationOptions = {
     clientId: "<CLIENT_ID>",
     redirectUri: `http://localhost:3000/login`,
     scopes: ["openid", "profile", "email"],
     accessType: "offline",
  };

      Then in your login component, it could look like this:

        <GoogleAuth>
  <GoogleAuthConsumer>
  {({ responseState, isAuthenticated, setPrompt }: IOAuthState) => {
    if (!isAuthenticated) {
        // Here we are using Lodash fp to get our prompt value
        // passed from the React Router location API e.g:
        // history.push({ pathname: "/login", {prompt: "select_account"});
        const prompt = fp.get("state.prompt", location);
        if (prompt) {
           // this will now set sso_option.prompt = "select_account"
           // for this login attempt, then the auto login flow will
          // continue as normal
            setPrompt(prompt);
        }
        return <StyledGoogleButton>
                <GoogleButton
                    defaultStyle={false}
                    options={sso_option}
                    apiUrl="http://localhost:3000/users/login"
                >Login</GoogleButton>
            </StyledGoogleButton>;
       } else {
            if (responseState?.accessToken && isOAuthLoggedIn()) {
                updateShouldFetch(isOAuthLoggedIn());
                if (staff) {
                   return <Redirect to="/staff"/>;
                } else {
                    return null;
                }
            }
           return null;
        }
         }}
     </GoogleAuthConsumer>
  </GoogleAuth>

    Returns (Anonymous function)

Generated using TypeDoc