Integrate Auth0 with @nylas/react

Auth0 provides a React SDK (@auth0/auth0-react) that integrates seamlessly with the @nylas/react. 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

useAuth0() returns the authenticated user alongside the token getter, so the component has everything it needs without touching the JWT. Take the ID from user.sub.

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

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

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

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

    if (user) fetchEmails();
  }, [getAccessTokenSilently, user]);

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

Two headers do the work. Authorization carries your identity provider’s access token, and X-Nylas-External-User-Id carries the user’s sub claim, which is the same ID your application already stores. Nylas resolves /v3/grants/me to the mailbox linked to that ID, so no grant_id appears in the request.

The same 2 headers work across the Email, Calendar, and Contacts endpoints. Swap /messages for /events or /contacts and nothing else changes. For how the linkage is established, and when to use it instead of storing grant IDs, see use your own user IDs instead of grant IDs.

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