You might choose to allow visitors to log in to your site or app with an external provider, using a custom login interface that syncs with Wix’s authentication.
Notes:
- External login with Google and Facebook are fully supported in the Wix-managed login page. When working with Google or Facebook as your external identity provider, only use this externally-managed flow if you require a custom login interface.
- See our tutorial and sample repo to Set Up an Externally-Managed Login Flow with Next.js and Github.
Complete the following steps to log a visitor into your site using an external authentication provider:
- Authorize the member with the external provider and collect their email address.
- Collect the relevant Wix member ID. To do so, check if this email address has a Wix member ID, and if not, create one.
- 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 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
- When a visitor first lands on your login interface, follow the handle visitors flow.
- When a member logs in using their external provider credentials, follow the external provider’s OAuth flow to authenticate users.
- Once the member has been authenticated, collect their email address.
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.
- 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.
Now that you have the Wix member ID, request access and refresh tokens for the member with the getMemberTokensForExternalLogin() function.
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.