Wix SSO Login using Wix IDP

---

Single Sign-On (SSO) login using Wix as an Identity Provider (IDP) means users can log into Wix or any external applications using their Wix account credentials. This reduces the number of login credentials the user needs to remember and makes the login process more convenient.

Benefits of using Wix as an Identity Provider (IDP) for SSO login to your application:

• Improved User Experience: SSO provides a seamless & consistent user experience, reducing the friction associated with multiple login processes.
• User Data Management: miniOrange provides a centralized platform for managing Wix user data, making it easier to update and maintain user information.
• Reduced Development Time: Implementing SSO using Wix as an IDP eliminates the need to develop a custom authentication solution, reducing development time and cost.

  SSO + MFA Support for any Wix Plan (From Basic to Premium)

Prerequisites

• Log into miniOrange Admin Console.
• Click on Customization in the left menu of the dashboard.
• In Basic Settings, set your company domain in Organization Name textfield.
• Click Save. Once that is set, the branded login URL would be of the format https://<company_domain>.xecurify.com/moas/login

Follow the Step-by-Step Guide given below to setup SSO login using Wix IDP

1. Configure Wix to enable SSO

• Edit your wix site with Dev mode enabled.
• Create a custom login page.
• Go to Site Pages and Menu tab and click on Add Page



• Click on Blank page button



• Name it ssoLogin or anything you like and click on done button.



• Now go to the settings tab of the newly created page



• Enable the Hide from menu option



• Now for very basic we need two input fields one for email and the other one is for the password, one Login button, one error message if the username or password is wrong and loader to represent the processing.
• Steps to insert input fields:
  • Click on the Add Elements tab and navigate to the input -> text input use any of them.
  • Now drag two of them to the position you want them to be.
  • Now select one of the input field and go to settings
  • Set type to email, set Placeholder as email and make the field required. You can also add regex validating.
  
  
  
  • Now select the second input field and go to settings
  • Set the type to password and PlaceHolder also as password
• Now add a button from add element section
  • Drag the button to the suitable position ( Under the password field )
  
  
  
  • Select this button and go to the settings
  • Change the name of the button to login
• Now add text for the error message and select the type and size of text you need
  • Edit the text to username or password is incorrect or anything else you like
  • Drag the text to the appropriate position ( over the login input field )
  
  
  
• Adding a loader:
  • Download a GIF loader
  • Upload the downloaded file in images
  
  
  
  • Add that image to the page where you want your loader to be.
  
  
  
• It may look like this after all the elements are added

• Install the NPM packages and go to code packages. Then click on install packages from npm.



• Search for jsonwebtoken and click on install.



• Now, Download the code for your custom login page and go to Page Code section and paste the code from the file to the ssoLogin.js
• Replace the angle bracket in the code with the Id’s of the elements we added earlier, <jwtCallbackURL> will be replaced later.
• Now go to Public & Backend section and click on Add web module under the Backend section, name the file backend.jsw



• Now, Download for your backend.jsw file
  • Generate a private key and public certificate using this site
  • Save the certificate and it will be used later.
    • Copy the Private key to the notepad or any text editor append a new line character ( \n ) after each line except the last line.
    • Remove all the space between the lines.
    • Now your private key must be in a single line.
  • Replace the <PrivateKey> in backend.jsw with the key generated.
  • To add more details in the payload refer this.
  • To modify signOptions refer this.
  • Now, you can publish your website.

2. Configure Wix in miniOrange

• Login to miniorange admin console.
• Go to Identity Providers



• Click on Add Identity Provider.



• Navigate to the JWT tab




IdP Name	Custom Provider
Login URL	Custom login page URL of your Wix site
User Identifier	Unique attribute of a user, eg - email
JWT Signing Algorithm	Select RS256
Public Certificate	Paste the certificate saved earlier.



• Now replace the copied jwtCallbackUrl with <jwtCallbackUrl> in ssoLogin.js file
• Now publish your wix site.