Skip to content
Docs
or

Integrate Google Identity with Nylas Connect React

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

Section titled “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. For Nylas Dashboard IDP settings, see the external IDP overview.

Install dependencies

Section titled “Install dependencies”
npm install @nylas/react @react-oauth/google

Implementation

Section titled “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:

import { GoogleOAuthProvider, GoogleLogin, googleLogout } from '@react-oauth/google';
import { useNylasConnect } from '@nylas/react/connect';
import { useState } from 'react';


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>">
      <GoogleContent />
    </GoogleOAuthProvider>
  );
}

What’s next

Section titled “What’s next”