Handle Members with a Wix Login Page Using the JS SDK

This article explains how to implement Wix-managed member login using the JavaScript SDK.

You'll learn how to:

• Generate and store OAuth data for the login flow.
• Redirect members to the Wix login page.
• Handle the callback and exchange the authorization code for member tokens.
• Set tokens for authenticated API calls as the logged-in member.
• Refresh access tokens using the refresh token.
• Log out members using the Wix-managed logout URL.

A Wix login page is the simplest way to set up member authentication, as Wix handles the user experience and authentication process. However, you can't change the look and feel of the Wix login page. If you need a custom-branded login experience, create a custom login page or use an external identity provider.

Step 1 | Set up a Wix client

To authenticate and interact with Wix APIs, create a Wix client in your code. Install and import any relevant APIs, such as the Stores Product API.

For example:

Replace <YOUR_CLIENT_ID> with your OAuth app's Client ID from your Headless Settings.

Step 2 | Generate OAuth data

Use your Wix client to generate the data needed for the OAuth flow.

The method takes the following 2 parameters:

• redirectURI: The URL to which Wix redirects the member after login. This must exactly match one of your allowed authorization redirect URIs configured in your Headless Settings.
• originalURI: The URL where the member started the login flow. The Wix login page flow returns the member to this location after authentication.

The method returns an object with the following properties, used for OAuth 2.0 with PKCE (Proof Key for Code Exchange) security:

• state: A unique string to verify the login request.
• codeVerifier: A random string for PKCE authentication.
• codeChallenge: A SHA256 hash of codeVerifier for PKCE.
• redirectURI: The redirect URI you passed.
• originalURI: The original URI you passed.

Example:

Step 3 | Store OAuth data

Store the OAuth data securely for use after login. For example, use localStorage or a cookie:

Step 4 | Redirect members to Wix login

To redirect members to the Wix login:

1. Request the login URL from your Wix client:

   Copy

   Important: For this request to succeed, you must publish the Wix site connected to your headless project. Wix uses the published site to display the login page. To do this, open your project dashboard, select Design Site from the left panel, and then click Publish.

2. Redirect the member to the Wix login page:

   Copy

This redirects site members to the Wix login page, where Wix handles the login process.

Step 5 | Perform token exchange

Once members log in, Wix redirects them to the redirect URI you specified along with information you can use to confirm the login and generate member tokens for frontend API calls.

If the login was successful, the page's URL contains a fragment that includes code= and state=. If the login failed, the URL contains a fragment that includes error= and error_description=. When the page loads, check for these fragments. If they exist, call a handler function to perform the token exchange.

In your handler function:

1. Retrieve the stored OAuth data:

   Copy

2. Parse the page's URL:

   Copy

3. Exchange the code for tokens:

   Copy

The returned tokens object includes:

• Access token: Used to make authenticated API calls.
• Refresh token: Used to get a new access token when the current token expires.

Step 6 | Set and refresh tokens for the client

Set the tokens on your Wix client to authenticate API calls as the logged-in member:

Access tokens expire after a short time for security reasons. When this happens, you can use a refresh token to request a new access token without asking the member to log in again.

Your API layer should handle this automatically. Set up your logic to detect when an access token has expired, use the refresh token to get a new one, and then retry the original request.

Logging a member out

To log a member out:

1. Get the logout URL from your Wix client:

   Copy

2. Redirect the member to the logout URL:

   Copy

This logs the member out and redirects them back to your app.

Troubleshooting

If you encounter issues with a Wix login page, make sure that:

• You're using the correct client ID from your Headless Settings.
• The redirectUri parameter passed to generateOAuthData() is listed in your allowed authorization redirect URIs, and that the values match exactly.
• You're using a single shared client instance throughout your app (not creating new instances in components).