> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Wix-Managed Login Using the REST API ## Article: Handle Members with Wix-Managed Login ## Article Link: https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/wix-login-page/wix-managed-login-using-the-rest-api.md ## Article Content: # Handle Members with a Wix Login Page Using the REST API > **Note:** This article is only relevant for [self-managed headless projects](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/about-self-managed-headless.md). This article explains how to implement [Wix-managed member login](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/wix-login-page/about-wix-login-pages.md) using the REST API. You'll learn how to: - Generate and store security data for the login flow. - Redirect members to the Wix login page. - Handle the callback and exchange the authorization code for member tokens. - 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](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/custom-login-page/custom-login/custom-login-using-the-rest-api.md). > **Note:** Wix login pages use the OAuth 2.0 protocol with PKCE (Proof Key for Code Exchange) for secure authentication. If you're new to these concepts, see [OAuth 2.0 and PKCE explained](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-proof-key-for-code-exchange-pkce). ## Step 1 | Prepare security data Before redirecting a member to login on a Wix login page you need to prepare the following: - A redirect URI for the callback page. This is the URI that the site member is redirected to after logging in. The `redirectUri` must be an [allowed authorization redirect URI](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/add-allowed-authorization-redirect-uris.md). - The **Client ID** of your OAuth app. You can find this value in your [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings#). If you haven't created an OAuth app yet, see [Create an OAuth App for Visitors and Members](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/about-authentication.md) to set one up. - A [PKCE code verifier and code challenge](https://www.oauth.com/oauth2-servers/pkce/authorization-request/). These are used to prevent [CSRF attacks](https://en.wikipedia.org/wiki/Cross-site_request_forgery) and authorization code injection attacks. - An [OAuth2 state parameter](https://auth0.com/docs/secure/attack-protection/state-parameters) used to mitigate [CSRF attacks](https://en.wikipedia.org/wiki/Cross-site_request_forgery). ## Step 2 | Store security data Store the code verifier, code challenge, and state parameter locally. For example, you can store 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 login page. ## Step 3 | Get a login URL Call [Create Redirect Session](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md) to get a login URL for the site member.
**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**.
When calling [Create Redirect Session](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md), send the following parameters, which include the data you [prepared earlier](#step-1--prepare-security-data): - **`redirectUri`**: The redirect URI to your login callback. The `redirectUri` must be an [allowed authorization redirect URI](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/add-allowed-authorization-redirect-uris.md). - **`clientId`**: The **Client ID** of your OAuth app, which can be found in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings). - **`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. > **Note:** In the request header, use the [access token](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/visitors/handle-visitors-using-the-rest-api.md) of the current visitor for authorization. ```shell curl --location 'https://www.wixapis.com/_api/redirects-api/v1/redirect-session' \ --header 'authorization: ' \ --header 'content-type: application/json' \ --data '{ "auth": { "authRequest": { "redirectUri": "https://example-nextjs.vercel.app/callback", "clientId": "", "codeChallenge": "JNU5gZmEjgVL2eXfgSmU1JS2E202k4rkq4u3M_drdCY", "codeChallengeMethod": "S256", "responseMode": "fragment", "responseType": "code", "scope": "offline_access", "state": "Zq2yfJM1S7n35VnBhdMeOQyXQW7UkE2Qv7fdPLL419o" } } }' ``` The response includes: - **`id`**: Redirect session ID. - **`fullUrl`**: A URL to the Wix login page. ```json { "redirectSession": { "id": "83cab021-c3de-47b9-afa2-e93602e38b09", "fullUrl": "https://mysite.com/example/_api/oauth2/authorize?clientId=e345..." } } ``` ## Step 4 | Redirect to the Wix login page Redirect the site member to the login URL returned by [Create Redirect Session](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md). This redirects site members to the Wix login page, where Wix handles the login process. ## Step 5 | Handle the callback Once members log in, Wix redirects them back to your site or app along with information you can use to confirm the login and generate member tokens for frontend API calls. In your callback handler: 1. Get the OAuth data that you [stored locally](#step-2--store-security-data) before making the login request. Remember, this security data includes a code verifier, code challenge, and state parameter. 1. 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. 1. Check that the `state` value is the same as the state value you retrieved from local storage. 1. Use the `code` to [generate member tokens](#step-6--generate-member-tokens). ## Step 6 | Generate member tokens Generate new member tokens by calling [Retrieve Tokens](https://dev.wix.com/docs/api-reference/business-management/headless/authentication/retrieve-tokens.md). When calling [Retrieve Tokens](https://dev.wix.com/docs/api-reference/business-management/headless/authentication/retrieve-tokens.md), send the following parameters: - **`clientId`**: The **Client ID** of your OAuth app, which can be found in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings). - **`grantType`**: Set as `"authorization_code"` to get member tokens with an authorization code. - **`redirectUri`**: The same URI passed when calling the [Create Redirect Session](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md). The `redirectUri` must be an [allowed authorization redirect URI](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/add-allowed-authorization-redirect-uris.md). - **`code`**: The code you retrieved from the URL fragment in the previous step. - **`codeVerifier`**: The code verifier you retrieved from local storage in the previous step. ```shell curl --location 'https://www.wixapis.com/oauth2/token' \ --data '{ "clientId": "", "grantType": "authorization_code", "redirectUri": "https://example-nextjs.vercel.app/callback", "code": "OLI79QEL", "codeVerifier": "bRGwKp1zdrSY_3A_GRvK2JI9Iq2MykDV5NjXk3tcQn4" }' ``` The response includes: - **`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. ```json { "access_token": "OauthNG.JWS.eyJraWQiOi1JzdUpwSCIsImFsZyI6IkhTMjU2In0...", "token_type": "Bearer", "expires_in": 14400, "refresh_token": "JWS.eyJraWQiOiJ1SEJzdUpwSCIsImFsZyI6IkhTMjU2In0..." } ``` Once you have tokens, you can use them to make [authenticated calls to APIs](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/oauth/make-rest-api-calls-using-oauth.md) on behalf of the current member. ## Logging a member out To log a member out, call `Redirect Session` to get a logout URL, and then redirect the member to that URL. When calling `Redirect Session`, send the following parameters: - **`clientId`**: The **Client ID** of your OAuth app, which can be found in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings). - **`postFlowUrl`**: Where the member will be redirected after logging out. ```shell curl --location 'https://www.wixapis.com/_api/redirects-api/v1/redirect-session' \ --header 'content-type: application/json' \ --header 'authorization: ' \ --data '{ "logout": { "clientId": "" }, "callbacks": { "postFlowUrl": "https://mysite.com/" } }' ``` The response includes: - **`id`**: Redirect session ID. - **`fullUrl`**: A URL to the Wix login page. 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 [Create Redirect Session](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md). ## Troubleshooting If you encounter issues with a Wix login page, make sure that: - You're using the correct client ID. - The `redirectUri` parameter passed to `Redirect Session` is listed in your [allowed authorization redirect URIs](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/add-allowed-authorization-redirect-uris.md), and that the values match exactly. - You haven't set a custom login URL in your OAuth app settings. The **login URL** field should be empty when using Wix-managed login. A login URL is only required for [custom login pages](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/custom-login-page/about-custom-login-pages.md). ## See also - [Handle Visitors](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/visitors/handle-visitors-using-the-rest-api.md) - [Handle Members with a Custom Login Page](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/custom-login-page/custom-login/custom-login-using-the-rest-api.md)