# Integrate Google Identity with Nylas Connect React

Source: https://developer.nylas.com/docs/v3/auth/nylas-connect-react/use-external-idp/google/

Google Identity Services can be integrated with React using the `@react-oauth/google` package. This guide shows you how to combine `GoogleOAuthProvider` with `useNylasConnect` to let users sign in with their Google account and connect their email through Nylas.

## Before you begin

You need a Google Cloud OAuth 2.0 client and a Nylas application configured to work together.

For Google Cloud configuration steps, see the [Google vanilla guide](/docs/v3/auth/nylas-connect/use-external-idp/google/#configure-google-cloud). For Nylas Dashboard IDP settings, see the [external IDP overview](/docs/v3/auth/nylas-connect/use-external-idp/#before-you-begin).

> **Info:** 
> **The Google Cloud OAuth client on this page is for Google Sign-In only.** The email connection still runs through Nylas Hosted OAuth via your [Nylas Google connector](/docs/provider-guides/google/create-google-app/) — that's a separate set of Google OAuth credentials. The [Nylas Shared GCP App](/docs/provider-guides/google/shared-gcp-app/) — an add-on for Nylas Contract plans — lets you skip the connector-side GCP setup and Google verification entirely.

### Install dependencies

```bash
npm install @nylas/react @react-oauth/google
```

## Implementation

Wrap your app with `GoogleOAuthProvider`, then use the `GoogleLogin` component and `useNylasConnect` together. Unlike other providers, Google returns a credential through a callback rather than a hook, so you store it in component state:

```tsx

  GoogleOAuthProvider,
  GoogleLogin,
  googleLogout,
} from "@react-oauth/google";


function GoogleContent() {
  const [credential, setCredential] = useState<string | null>(null);
  const [profile, setProfile] = useState<any>(null);

  const {
    isConnected,
    connect,
    logout: disconnectEmail,
  } = useNylasConnect({
    clientId: "<NYLAS_CLIENT_ID>",
    redirectUri: window.location.origin + "/auth/callback",
    identityProviderToken: async () => credential,
  });

  const handleGoogleSuccess = (response: any) => {
    setCredential(response.credential);

    const payload = JSON.parse(atob(response.credential.split(".")[1]));
    setProfile({ name: payload.name, email: payload.email });
  };

  const handleLogout = () => {
    googleLogout();
    setCredential(null);
    setProfile(null);
  };

  return (
    <div>
      {!profile ? (
        <GoogleLogin
          onSuccess={handleGoogleSuccess}
          onError={() => console.error("Login failed")}
        />
      ) : (
        <div>
          <p>Logged in as: {profile.email}</p>
          <button onClick={handleLogout}>Log out</button>
        </div>
      )}

      {profile && !isConnected && (
        <button
          onClick={() => connect({ method: "popup", provider: "google" })}
        >
          Connect your inbox
        </button>
      )}

      {isConnected && (
        <div>
          <p>Email inbox connected</p>
          <button onClick={() => disconnectEmail()}>Disconnect</button>
        </div>
      )}
    </div>
  );
}

export default function App() {
  return (
    <GoogleOAuthProvider clientId="<GOOGLE_CLIENT_ID>">

  );
}
```

## What's next

- [Google vanilla JavaScript guide](/docs/v3/auth/nylas-connect/use-external-idp/google/) for non-React implementations
- [useNylasConnect reference](/docs/v3/auth/nylas-connect-react/usenylasconnect/) for the full hook API
- [Session management](/docs/v3/auth/nylas-connect-react/use-external-idp/#session-management) for monitoring connection state in React
- [Error handling](/docs/v3/auth/nylas-connect-react/use-external-idp/#error-handling) for handling authentication failures