AuthorizeButton

Description

Renders a Google Analytics sign-in button allowing the user to sign in with their Google account.

This component is rendered by the Google Analytics Embed API into a container on the page.

After signing in, the onSignIn handler is called. This handler can be used to update the view once signed in. The handler is not called if already signed in.

To check if the user is already authorized, you can use the useAnalyticsApi hook. A full example is available below.

The Google Analytics Embed API will only render the sign-in button once per page load. A refresh button will be shown when the original button's container is disposed of by React. Clicking that button reloads the current page.

This component wraps the useAuthorize hook from react-use-analytics-api.

See related SignOutButton.

Usage

import { AuthorizeButton } from "react-analytics-charts";

<AuthorizeButton
  gapi={gapi}
  authOptions={{
    clientId:
      "123456789012-abc123def456ghi789jkl012mno345p.apps.googleusercontent.com",
  }}
  onSignIn={signInHandler}
/>

Props

Note: Expand each prop for more information.

Styling

This component renders as either one or two divs, depending on if a refresh page button is visible.

• The authorize button is in a div with the class name gapi-authorize-container. Inspect the DOM to see what Google renders there.

  .gapi-authorize-container {
    /* Custom styles */
  }

• The refresh button is in a div with the class name analytics-refresh-button-container. This contains the button element for refreshing the page.

  .analytics-refresh-button-container button {
    /* Custom styles */
  }

Example

Below is an example showing the full authorization flow from signed out to signed in, and vice versa.

Although not necessary if using an AnalyticsDashboard, if you want, you can use the useAnalyticsApi hook to check if the user is authorized.

import * as React from "react";
import { useAnalyticsApi } from "react-use-analytics-api";
import { AuthorizeButton, SignOutButton } from "react-analytics-charts";

export function AuthExample() {
  const { gapi, authorized } = useAnalyticsApi();
  return (
    <div>
      {!authorized && (
        <div>
          Not authorized. Sign in here:{" "}
          <AuthorizeButton
            gapi={gapi}
            authOptions={{
              clientId:
                "123456789012-abc123def456ghi789jkl012mno345p.apps.googleusercontent.com",
            }}
          />
        </div>
      )}
      {authorized && (
        <div>
          We're authorized! <SignOutButton gapi={gapi} />
        </div>
      )}
    </div>
  );
}