Integrate Auth0 with Nylas Connect React

Copy as MarkdownCurl Markdown

Open in

Auth0 provides a React SDK (@auth0/auth0-react) that integrates seamlessly with the Nylas Connect React library. This guide shows you how to combine Auth0Provider with useNylasConnect to let users sign in with Auth0 and connect their email accounts through Nylas.

Before you begin

You need an Auth0 application and a Nylas application configured to work together.

For Auth0 dashboard configuration steps, see the Auth0 vanilla guide. For Nylas Dashboard IDP settings, see the external IDP overview.

Install dependencies

npm install @nylas/react @auth0/auth0-react

Implementation

Wrap your app with Auth0Provider, then use useAuth0 to get tokens and useNylasConnect to manage the email connection:

import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
import { useNylasConnect } from '@nylas/react/connect';
import { useEffect, useState } from 'react';

function Auth0Content() {
  const { isAuthenticated, getAccessTokenSilently, loginWithPopup, logout, user } = useAuth0();

  const { isConnected, connect, logout: disconnectEmail } = useNylasConnect({
    clientId: "<NYLAS_CLIENT_ID>",
    redirectUri: window.location.origin + "/auth/callback",
    identityProviderToken: async () => {
      try {
        const token = await getAccessTokenSilently();
        return token;
      } catch {
        return null;
      }
    }
  });

  return (
    <div>
      {!isAuthenticated ? (
        <button onClick={() => loginWithPopup()}>
          Log in with Auth0
        </button>
      ) : (
        <div>
          <p>Logged in as: {user?.email}</p>
          <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
            Log out
          </button>
        </div>
      )}

      {isAuthenticated && !isConnected && (
        <button onClick={() => connect({ method: 'popup' })}>
          Connect your inbox
        </button>
      )}

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

export default function App() {
  return (
    <Auth0Provider
      domain="<AUTH0_DOMAIN>"
      clientId="<AUTH0_CLIENT_ID>"
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <Auth0Content />
    </Auth0Provider>
  );
}

Make API calls

Extract the user ID from the Auth0 token and use it to make Nylas API calls:

function EmailList() {
  const { getAccessTokenSilently } = useAuth0();
  const [emails, setEmails] = useState([]);

  useEffect(() => {
    const fetchEmails = async () => {
      const token = await getAccessTokenSilently();

      const payload = JSON.parse(atob(token.split('.')[1]));
      const userId = payload.sub;

      const response = await fetch('https://api.us.nylas.com/v3/grants/me/messages', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'X-Nylas-External-User-Id': userId
        }
      });

      const data = await response.json();
      setEmails(data.data);
    };

    fetchEmails();
  }, [getAccessTokenSilently]);

  return <div>{/* Render emails */}</div>;
}

What’s next

• Auth0 vanilla JavaScript guide for non-React implementations
• useNylasConnect reference for the full hook API
• Session management for monitoring connection state in React
• Error handling for handling authentication failures