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.
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