Handle Members with Wix-Managed Login

Share your feedback
Reach out to us with feedback and suggestions to improve the Wix Headless experience, and join the Headless channel of the Devs on Wix Discord community to discuss features and connect with our growing community of developers.

You may want 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.

If you to prefer to create a custom login experience, see Handle Members with Custom Login

Prerequisites

Login flow

When using a Wix-managed login page, the code you need to write is split between several parts:

  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. Prepare for a redirect session

Before redirecting a member to login on a Wix-managed login page you need to prepare the following:

2. Store security data

Store the code verifier, code challenge, and state parameter locally. For example, you can store the them 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 Redirect Session endpoint to get a login URL for the site member.

When calling the Redirect Session endpoint, send the following parameters, which include the data you prepared earlier:

  • redirectUri: There redirect URI to your login callback. The redirectUri must be an allowed authorization redirect URI.
  • clientId: Your OAuth app client ID.
  • codeChallenge: PKCE code challenge string.
  • codeChallengeMethod: Use "S256".
  • responseMode: Use "fragment". The state and code will be returned in the URL used to reach the login callback in a URL fragment.
  • responseType: Use "code".
  • scope: Use "offline_access".
  • state: A state parameter.
Copy
1
curl --location 'https://www.wixapis.com/_api/redirects-api/v1/redirect-session' \
2
--header 'authorization: <ACCESS_TOKEN>' \
3
--header 'content-type: application/json' \
4
--data '{
5
"auth": {
6
"authRequest": {
7
"redirectUri": "https://example-nextjs.vercel.app/callback",
8
"clientId": "<CLIENT_ID>",
9
"codeChallenge": "JNU5gZmEjgVL2eXfgSmU1JS2E202k4rkq4u3M_drdCY",
10
"codeChallengeMethod": "S256",
11
"responseMode": "fragment",
12
"responseType": "code",
13
"scope": "offline_access",
14
"state": "Zq2yfJM1S7n35VnBhdMeOQyXQW7UkE2Qv7fdPLL419o"
15
}
16
}
17
}'

The Redirect Session endpoint responds with:

  • id: Redirect session ID.
  • fullUrl: A URL to the Wix-managed login page.
Copy
1
{
2
"redirectSession": {
3
"id": "83cab021-c3de-47b9-afa2-e93602e38b09",
4
"fullUrl": "https://mysite.com/example/_api/oauth2/authorize?clientId=e345..."
5
}
6
}

4. Redirect to the Wix login page

Redirect the site member to the login URL returned by the Redirect Session endpoint.

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 for API calls.

Login callback

Once a site member logs in on the Wix login page, they are redirected to the callback page. To implement a callback page, take the following steps:

1. Get security data

Get the security data that you stored locally before making the login request. Remember, this security data includes a code verifier, code challenge, and state parameter.

2. Get the login results and handle errors

If the login was successful, the URL of the callback page contains a fragment that includes code= and state=. Parse the URL to retrieve the code and state values.

Check that the state value is the same as the state value you retrieved from local storage.

Use the code to generate member tokens.

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

Generate new member tokens using the Token endpoint.

When calling the Token endpoint, send the following parameters:

Copy
1
curl --location 'https://www.wixapis.com/oauth2/token' \
2
--data '{
3
"clientId": "<CLIENT_ID>",
4
"grantType": "authorization_code",
5
"redirectUri": "https://example-nextjs.vercel.app/callback",
6
"code": "OLI79QEL",
7
"codeVerifier": "bRGwKp1zdrSY_3A_GRvK2JI9Iq2MykDV5NjXk3tcQn4"
8
}'

The Token endpoint responds with:

  • access_token: An access token used to authorize API calls.
  • expires_in: The number of seconds before the access token expires. Access tokens expire after 4 hours (14,400 seconds).
  • refresh_token: A refresh token used to get a new access token.
Copy
1
{
2
"access_token": "OauthNG.JWS.eyJraWQiOi1JzdUpwSCIsImFsZyI6IkhTMjU2In0...",
3
"token_type": "Bearer",
4
"expires_in": 14400,
5
"refresh_token": "JWS.eyJraWQiOiJ1SEJzdUpwSCIsImFsZyI6IkhTMjU2In0..."
6
}

Once you have tokens, you can use them to make authenticated calls to APIs on behalf of the current member.

Log a member out

To log a site member out, take the following steps:

1. Get the member's logout URL

Use the Redirect Session endpoint to get a logout URL for the site member.

When calling the Redirect Session endpoint, send the following parameters:

  • clientId: Your OAuth app client ID.
  • postFlowUrl: Where the member will be redirected after logging out.
Copy
1
curl --location 'https://www.wixapis.com/_api/redirects-api/v1/redirect-session' \
2
--header 'content-type: application/json' \
3
--header 'authorization: <ACCESS_TOKEN>' \
4
--data '{
5
"logout": {
6
"clientId": "<CLIENT_ID>"
7
},
8
"callbacks": {
9
"postFlowUrl": "https://mysite.com/"
10
}
11
}'

The Redirect Session endpoint responds with:

  • id: Redirect session ID.
  • fullUrl: A URL to the Wix-managed login page.

2. Redirect to the logout URL

Redirect the browser to the returned fullUrl to log the site member out. The browser is automatically redirected back to the postFlowUrl that you passed to the Redirect Session endpoint.

Was this helpful?
Yes
No