Handle Members with a Custom Login Page

You may want to implement a login flow for your site or app's members. This allows members to access their personal content.

Wix Headless offers the ability to redirect visitors to a Wix-managed page for handling member login. However, you might prefer to create your own custom login page as part of your external site or app as described here.

Prerequisites

• Create a project
• Create an OAuth app for visitors and members
• Add an allowed authorization redirect URI
• Set the login URL

Create a frontend login component

Create a frontend login/sign-up component for the site or app you are building on the platform of your choice. Ensure that your UI prompts visitors for an email address and password.

Sign up a new member

To register a new member using an email address and password the site visitor provides, call the Register V2 endpoint.

When calling the Register V2 endpoint, send the following parameters:

• loginId.email: Registering member's email address.
• password: Registering member's password.
• [profile]: Registering member's profile.

The Register V2 endpoint initiates a new member registration and returns a response containing the state of the registration operation and associated tokens.

The Register V2 endpoint's response contains the following:

• state: The current state of the registration process. Use this state value to determine the next step in the registration process.
• sessionToken: If the state value is 'SUCCESS', use the sessionToken to get the site members tokens.
• stateToken: If the state value is not 'SUCCESS'. You will need to use the stateToken to continue the registration process.

Log in a member

To log in an existing member using an email address and password the site visitor provides, call the Login V2 endpoint.

When calling the Login V2 endpoint, send the following parameters:

• loginId.email: Member's email address.
• password: Member's password.

The Login V2 endpoint initiates a member login and returns a response containing the state of the login operation and associated tokens.

The Login V2 endpoint's response contains the following:

• state: The current state of the login process. Use this state value to determine the next step in the login process.
• sessionToken: If the state value is 'SUCCESS', use the sessionToken to get the site members tokens.
• stateToken: If the state value is not 'SUCCESS'. You will need to use the stateToken to continue the login process.

reCAPTCHA

You can use reCAPTCHA with both the Register V2 and Login V2 endpoints to protect your site or app from fraud and abuse.

Enable reCAPTCHA

Start by enabling reCAPTCHA on the Signup & Login Security page of your project dashboard.

Implement reCAPTCHA

Once reCAPTCHA is enabled for your project, use a 3rd-party library to implement the reCAPTCHA or choose to implement it yourself.

You can choose to always require reCAPTCHA verification or only require it for suspected bots.

• To always require reCAPTCHA verification, use a visible site key when loading the reCAPTCHA script.
• To only require reCAPTCHA verification for suspected bots, use an invisible site key when loading the reCAPTCHA script.

Use reCAPTCHA to register or login

After implementing a reCAPTCHA, call the Register V2 or Login V2 endpoint with the appropriate reCAPTCHA token returned to your reCAPTCHA implementation.

When always requiring reCAPTCHA verification, send the token using the captchaTokens.Recaptcha property.

When only requiring reCAPTCHA verification for suspected bots, send the token using the captchaTokens.InvisibleRecaptcha property.

Login states

Both the Login V2 and Register V2 endpoints return a response containing the state of the login operation.

The state property of the response object indicates the login status. For example, if the above examples are successful, state is SUCCESS.

Make sure your code handles each of these state values:

• REQUIRE_EMAIL_VERIFICATION: Login requires email verification. This occurs when you try to register a new member with an email address belonging to an existing contact. In this case, you need to verify the email address.
• REQUIRE_OWNER_APPROVAL: After registration, this indicates site owner approval is required to complete registration for the new member. Handle this by informing the visitor that their membership is pending. Whenever the site owner approves their membership, the member can log in.
• SUCCESS: This indicates login was completed successfully. You can now get the site member's access and refresh tokens.

Verify email address

If the loginState property of the object returned by a call to Register V2 is REQUIRE_EMAIL_VERIFICATION, an email containing a verification code is sent automatically to the member's email address.

To complete the login process, use the Verify During Authentication endpoint.

When calling the Verify During Authentication endpoint, send the following parameters:

• code: The code received in the verification email.
• stateToken: The state token received in response to calling the Register V2 endpoint.

The Verify During Authentication endpoint's response contains the following:

• state: The current state of the login process. Use this state value to determine the next step in the login process.
• sessionToken: If the state value is 'SUCCESS', use the sessionToken to get the site members tokens.
• stateToken: If the state value is not 'SUCCESS'. You will need to use the stateToken to continue the login process.

Get the site member's access and refresh tokens

If the state property of the object returned by a call to Login V2, a call to Register V2, or a call to Verify During Authentication is SUCCESS, the member has been successfully logged in.

In this case, the response object contains a sessionToken property. Use the sessionToken to call the Redirect Session endpoint to get the logged-in member's access and refresh tokens. Before calling Redirect Session, you will need to prepare some information to be used in the call.

Prepare for a redirect session

Before you call the Redirect Session endpoint, you need to prepare the following:

• Your OAuth app client ID. You can retrieve this from the Headless Settings menu in the dashboard. If you haven't created an OAuth app yet, see Create an OAuth App for Visitors and Members to set one up.
• A PKCE code verifier and code challenge. These are used to prevent CSRF attacks and authorization code injection attacks.
• An OAuth2 state parameter used to mitigate CSRF attacks.

Get an authorization URL

Use the Redirect Session endpoint to get an authorization URL for the site member.

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

• clientId: Your OAuth app client ID.
• codeChallenge: PKCE code challenge string.
• codeChallengeMethod: Use "S256".
• responseMode: Use "web_message".
• responseType: Use "code".
• scope: Use "offline_access".
• state: A state parameter.
• sessionToken: The session token received from a call to Login V2, a call to Register V2, or a call to Verify During Authentication.

The Redirect Session endpoint responds with:

• id: Redirect session ID.
• fullUrl: An authorization URL.

Authorize member

Once you have an authorization URL, you can use it to authorize a member before requesting their access and refresh tokens.

To perform an authorization:

1. Open the authorization URL in an iframe.
2. Listen for a postMessage from the iframe. It will include a state parameter and a code.
3. Check that the state value is the same as the state value you passed when getting the authorization URL.
4. Use the code to generate member tokens.

Generate member tokens

After performing authorization, you have a code that you can use to generate access and refresh tokens for the logged-in member. Generate new member tokens using the Token endpoint.

When calling the Token endpoint, send the following parameters:

• clientId: The client ID of the OAuth app your project is using.
• grantType: Set as "authorization_code" to get member tokens with an authorization code.
• code: The code you received in the authorization.
• codeVerifier: The code verifier you prepared for the redirect session.

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.

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

Send a password-reset email

Call the Send Recovery Email endpoint to enable a member to reset their password.

When calling the Send Recovery Email endpoint, send the following parameters:

• email: Email address to send the recovery email to.
• redirect.url: The full URL to redirect the member to after they change their password. The redirect.url must be an allowed authorization redirect URI.
• redirect.clientId: The client ID of the OAuth app your project is using.

The Send Recovery Email endpoint responds with an empty response on success.

Log a member out

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

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.

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.

Profile

The profile object contains the following properties: