Handle Members with a Custom Login Page

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 app or site.

Once you've created a client, you can implement a direct login flow as described here.

Prerequisites

• Create a project
• Create an OAuth app for visitors and members
• Create a client with OAuth
• 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.

Import the members module

In addition to the Wix SDK client, import the following module:

Check if a member is logged in

Use the loggedIn() function to check if the current site visitor is a logged-in site member. If so, you can use members.getCurrentMember() to retrieve the member's details.

For example:

Sign up a new member

To register a new member using an email address and password the site visitor provides, call the register() function.

The register() function initiates a new member registration and returns a promise that resolves to an object containing the state of the login operation.

• The email parameter contains the email address the site visitor provides.
• The password parameter contains the password the site visitor provides.

Log in a member

To log in an existing member using an email address and password the site visitor provides, call the login() function.

The login() function initiates a member login and returns a promise that resolves to an object containing the state of the login operation.

• The email parameter contains the email address the site visitor provides.
• The password parameter contains the password the site visitor provides.

reCAPTCHA

You can use reCAPTCHA with both the register() and login() functions 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, such as react-google-recaptcha 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() or login() function with the appropriate reCAPTCHA token returned to your reCAPTCHA implementation.

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

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

Login states

Both the login() and register() functions return a promise that resolves to an object containing the state of the login operation.

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

Make sure your code handles each of these loginState values:

• FAILURE: Login was unsuccessful. Learn how to handle login errors.
• EMAIL_VERIFICATION_REQUIRED: Login requires email verification. Learn how to process verification.
• OWNER_APPROVAL_REQUIRED: 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.

Handle login errors

If the loginState property of the object returned by a call to login() or a call to register() is FAILURE, the login was unsuccessful.

In this case, the returned object may also have an errorCode property indicating what went wrong. Use the errorCode value to determine how to handle the error in your code:

• invalidEmail: The email address provided is invalid.
• invalidPassword: The password provided is invalid.
• resetPassword: The member needs to reset their password. To handle this, send a password-reset email.
• emailAlreadyExists: The visitor attempted to sign up as a new member using an email address belonging to an existing member.

Process verification

If the loginState property of the object returned by a call to login() or a call to register() is EMAIL_VERIFICATION_REQUIRED, an email containing a verification code is sent automatically to the member's email address.

To complete the login process, use the processVerification() function.

The processVerification() function continues the login process when a member is required to provide a verification code. It returns a promise that resolves to an object containing the state of the login operation.

• The verificationCode parameter contains the verification code sent to the member by email.
• There is no need to pass the member's email address or password, since these were provided when calling login() or calling register().

Get the site member's access and refresh tokens

If the loginState property of the object returned by a call to login(), a call to register(), or a call to processVerification() is SUCCESS, the member has been successfully logged in.

In this case, the returned object contains a data property. Within the data property, the sessionToken property contains a session token. Call the client's getMemberTokensForDirectLogin() function with this session token to get the logged-in member's access and refresh tokens:

The getMemberTokensForDirectLogin() function takes a session token as a parameter and 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 access and refresh tokens as the active tokens for the client:

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

Example

The following example code logs in a user with login() and gets access and refresh tokens for the logged-in member with getMemberTokensForDirectLogin(). It then stores the refresh token in a cookie, which can be accessed to authenticate the member in future:

Send a password-reset email

Call the sendPasswordResetEmail() function to enable a member to reset their password.

The sendPasswordResetEmail() function sends a member an email containing a customized link to a Wix-managed page where the member can set a new password for their account.

• The email parameter contains the member's email address.
• The redirectUri parameter contains the full URL to redirect the member to after they change their password. The redirectUri must be an allowed authorization redirect URI.

Log a member out

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

1. Get the member's logout URL

From any page on your site, use the logout() function to log a site member out:

The function takes the URL of the page 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.