Handle Members with Wix-Managed Login

After you've created a client, you can use the client to implement a login flow for your site or app's members. This allows members to access their personal content. The simplest way to create a login flow is to use a Wix-managed login page.

Prerequisites

• Create a project
• Create an OAuth app for visitors and members
• Create a client with OAuth
• Add a Wix pages domain
• Add an allowed redirect domain

Login flow

When using a Wix-managed login page, the login flow is as follows:

1. Login request: A login request is initiated from within your site or app. You prepare for redirecting users to Wix and for their eventual return to your site or app. Then you redirect them to the Wix-managed login page.
2. Managed login: The member logs in on the Wix-managed login page. After logging in, Wix redirects the member back to your site or app.
3. Login callback The member is redirected back to your site or app. You check that the member is in fact logged in.

You can also log a site member out of your site from any page.

Login request

To implement a login request, take the following steps:

1. Generate OAuth data

Use the generateOAuthData() function to generate an OAuth data object for the login.

The function takes two parameters:

• A redirect URI for the callback page. This is the URI that site members are redirected to after logging in. The redirectUri must be an allowed authorization redirect URI.
• An optional original URI. This is the URI of the login request page. You can use this URI on your callback page to redirect site members back to the place they requested to log in from.

The function returns an object containing:

• A state string that you can use to verify the login request on the callback page.
• A code verifier string. This is a randomized string to use for PKCE authentication.
• A code challenge string. This is a SHA256 hash of codeVerifier to use for PKCE authentication.
• The redirect URI and original URI that you passed as arguments.

Example return value:

2. Store the OAuth data

Store the OAuth data returned by generateOAuthData() locally. For example, you can store the data in localStorage or a cookie. You need to use this data when users are redirected back to your site or app from the Wix-managed login page.

3. Get a login URL

Use the getAuthUrl() function to get a login URL for the site member.

The function takes the object returned by generateOAuthData() as an argument. It returns a promise that resolves to an object containing a login URL for the site member.

Example return object:

4. Redirect to the Wix login page

Redirect site members to the login URL returned by getAuthUrl(). For example:

Managed login

Once you redirect site members to the Wix-managed login page, Wix takes over from there. Members log in on the Wix-managed page and Wix redirects them back to your site or app with information that you can use to verify the login was successful and use to generate member tokens to be used with a client for API calls.

Login Callback

After Wix redirects logged in members to your site or app, you need to verify the login was successful, generate member tokens, and then use those tokens with a client to make API calls on behalf of the members.

1. Get the OAuth data

Get the OAuth data that you stored locally when the login request was made.

2. Get the login results and handle errors

If the login was successful, the callback URL contains a fragment that includes code= and state=. If the login failed, the URL contains a fragment that includes error= and error_description=.

Use the parseFromUrl() function to get the fragment data from the current URL:

If the function returns an error code and message, handle it accordingly. For example, you might want to display the error description using an alert:

3. Get the site member's access and refresh tokens

Use the getMemberTokens() function to get the logged-in member's access and refresh tokens.

The function takes the following parameters:

• The authorization code string from the URL fragment.
• The state string from the URL fragment.
• The OAuth data object that you saved locally on the login request page.

The function returns an object containing the site member's access token and refresh token.

Example return object:

Use the setTokens() function to set the site member's tokens as the active tokens for the client.

Once tokens are set, every call made by your client uses these tokens. This means that the site member's data is preserved and associated with their account.

Log a member out

To log a site member out:

1. Get the member's logout URL

Use the logout() function to get a Wix-managed logout URL.

The function takes the URL that the site member is redirected to after logging out. It returns a promise that resolves to an object containing the logout URL.

2. Redirect to the logout URL

Redirect the browser to the logoutUrl to log the site member out. The browser is automatically redirected back to the originalUrl that you passed to the logout() function.