Login with a global wallet

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

​

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.

​

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'],
      },
      ...
    }}
  >

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

import {usePrivy, useLoginWithCrossApp} from '@privy-io/expo';

function LoginWithCrossAppButton() {
  const {ready, user} = usePrivy();
  const {loginWithCrossApp} = useLoginWithCrossApp();

  return (
    <Button
      onPress={() => loginWithCrossApp({appId: 'insert-provider-app-id'})}
      disabled={!ready || !!user}
    >
      Log in with [insert-provider-app-name]
    </Button>
  );
}

When loginWithCrossApp is invoked, an in-app browser will open for 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 linked_accounts array of their user object.

loginWithCrossApp 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.