# Integrate Auth0 with Nylas Connect React

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

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](/docs/v3/auth/nylas-connect/use-external-idp/auth0/#configure-auth0). For Nylas Dashboard IDP settings, see the [external IDP overview](/docs/v3/auth/nylas-connect/use-external-idp/#before-you-begin).

### Install dependencies

```bash
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:

```tsx


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,
      }}
    >

  );
}
```

## Make API calls

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

```tsx
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](/docs/v3/auth/nylas-connect/use-external-idp/auth0/) 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