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 >> Login and Registration Branding in the left menu of the dashboard.
- In Basic Settings, set the Organization Name as the custom_domain name.
- Click Save. Once that is set, the branded login URL would be of the format
https://<custom_domain>.xecurify.com/moas/login
![Setting up Branding URL](/images/template-images/ad-custom-branding.webp)
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
![Wix IDP - Blank Page button](/images/wix/blank-page-button.webp)
- Name it ssoLogin or anything you like and click on done button.
![Wix IDP - Site Menu Detail](/images/wix/site-menu-detail.webp)
- Now go to the settings tab of the newly created page
![Wix IDP - Settings Tab](/images/wix/settings-tab.webp)
- 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.
![Login with your Wix credentials](/images/wix/login-with-wix.webp)
- 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 )
![Drag Button](/images/wix/drag-button.webp)
- 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 )
![Drag Text](/images/wix/drag-text.webp)
- Adding a loader:
- Download a GIF loader
- Upload the downloaded file in images
![Upload Downloaded Image file](/images/wix/upload-downloaded-image.webp)
- Add that image to the page where you want your loader to be.
![Login Page](/images/wix/login-page.webp)
- 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.
![Install packages from npm](/images/wix/install-packages.webp)
- Search for jsonwebtoken and click on install.
![Install jsonwebtoken](/images/wix/install-jsonwebtoken.webp)
- 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
![Public and Backend section](/images/wix/public-and-backend-section.webp)
- 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
![miniOrange IdP](/images/wix/miniorange-idp.webp)
- Click on Add Identity Provider.
![Add IdP](/images/wix/add-idp.webp)
- Navigate to the JWT tab
![JWT section](/images/wix/jwt-section.webp)
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.