To prompt users to log into your app with an account from a provider app, use the loginWithCrossAppAccount method from the useCrossAppAccounts hook:

import {usePrivy} from '@privy-io/react-auth';

function Button() {
  const {ready, authenticated} = usePrivy();
  const {loginWithCrossAppAccount} = useCrossAppAccounts();

  return (
    <button
      onClick={() => loginWithCrossAppAccount({appId: 'insert-provider-app-id'})}
      disabled={!ready || !authenticated}
    >
      Log in with [insert-provider-app-name]
    </button>
  );
}

Parameters

appId
string
required

The Privy app ID of the provider app from which you’d like a user to link their account. You can find a list of Privy app IDs for provider apps in the Cross-app ecosystem page of the Privy Dashboard.

Behavior

When loginWithCrossAppAccount is invoked, the user will be redirected to a page hosted on the domain of the provider app you specified to authorize access to your own app.

If the user successfully authorizes access, the user will be redirected back to your app, and an account of type: 'cross_app' will be added to the linkedAccounts array of their user object.

loginWithCrossAppAccount will throw an error if:

  • The user does not authorize access to your app or exits the flow prematurely.
  • The provider app you request has not opted-in to share their wallets.
  • The user does not already have an account with the provider app.

If the user is already logged in on the domain of the source appId you specify in loginWithCrossAppAccount, they will not have to login again and will only have to consent to sharing access to that account in your app.

Using the Privy login modal

You can add any provider app to the list of login options in the Privy login modal by adding "privy:" + the provider’s app ID to loginMethodsAndOrder in the Privy SDK configuration.

  <PrivyProvider
    appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ""}
    config={{
      loginMethodsAndOrder: {
        primary: ['email', 'google', 'privy:insert-provider-app-id'],
      },
      ...
    }}
  >