Handle Members with Externally-Managed Login

You might choose to allow members to log in to your site or app with an external provider, using a custom login interface that syncs with Wix’s authentication.

Complete the following steps to log a visitor into your site using an external authentication provider:

1. Authorize the member with the external provider and collect their email address.
2. Collect the relevant Wix member ID. To do so, check if this email address has a Wix member ID, and if not, create one.
3. Request and store access and refresh tokens for the Wix member ID.

Once the member is logged in, you can redirect them to your home page.

Before you begin

Before getting started, make sure you have the following:

• A Wix account
• An account with an external identity provider
• A Wix site or Wix Headless project
• A Wix API Key with Members & Contacts permission
• An OAuth App for visitors and members
• A Client with OAuth
• A custom login interface

Step 1 | Authenticate with the external provider and collect the member’s email address

1. When a visitor first lands on your login interface, follow the handle visitors flow.
2. When a member logs in using their external provider credentials, follow the external provider’s OAuth flow to authenticate users.
3. Once the member has been authenticated, collect their email address.

Step 2 | Collect a Wix member ID

Once you have the member’s email addresses, you can check if any of them are associated with a Wix member ID using the Members API.

// ...
const { items } = await wixAdminClient.members
    .queryMembers()
    .eq("loginEmail", email)
    .find();
}

• If an associated Wix member ID exists, collect it to pass in the next step.
• If no associated Wix member ID exists, create a member for them and collect the returned ID.

Note that creating members without explicit registration is an admin function. Make sure to use a WixClient with an API key that has permission to create members.

Step 3 | Request and store Wix access and refresh tokens

Now that you have the Wix member ID, request access and refresh tokens for the member with the getMemberTokensForExternalLogin() function.

// ...
 const memberTokens =
    await wixClient.auth.getMemberTokensForExternalLogin(
      member._id,
      <YOUR_API_KEY>
    );

Note that getting access and refresh tokens is an admin function. Make sure to use the WixClient with your OAuth app that created this visitor, along with an API key that has permission to create member access tokens, to save the visitor’s activity from before they logged in.

Now all that’s left is to store the tokens for later.

See also

• Set Up an Externally-Managed Login Flow with Next.js and Github
• Handle members with Wix-managed login