• Home
• App Integrations
• Single Sign-On Integrations
• React Single Sign-On

React Single Sign-On SSO

---

This solution allows you to setup Single Sign-On into React. It allows setting up JWT SSO.You can allow your users to Single Sign-On into React by verifying Identity with your existing compliant Identity Provider. This is done using JSON Web Token (JWT) tokens and it can be easily integrated with React built in any framework or language.

Prerequisites

• Download the JWT-connector.
• Copy the JWT-connector to the src folder of your project.
• Install all the dependencies.
  npm install --save base64url jsrsasign jssha utf8

Follow the Step-by-Step Guide given below for React Single Sign-On (SSO)

1. Configure React in miniOrange

• Login to miniOrange Dashboard and click on Apps >> Add an Application.



• Click on Create App button in JWT box.



• Select ReactJS option.



• Enter the name of your application and the redirect URL to the page where the JWT token is verified and click on Save.

Custom App Name	The name of your react application.
Redirect-URL	Enter the app URL where you want to handle the JWT token.
Identity Source	You need to select the user store or the external IDP where the user accounts will be stored.




• If you click on edit for your application you can see the Single Sign-On URL. You will need this URL in the following steps so save it accordingly.



• Click on Select dropdown >> Certificate beside your newly added app to download the certificate needed to verify the JWT token on your react app.

2. Configure SSO in React

• Select a component that will be responsible for verifying the JWT token most preferably the login component.
  
• Import the JWTBuilder class from the jwt-connector. From the path to which it was moved in step 1 of Pre-requisites.
import { JWTBuilder } from './path/to/jwt-connector';
• You can add a button on your login screen to redirect to the SSO URL. You can get this SSO URL from step 1 of Configure your application in miniOrange.
<button> onClick={sso}>Single Sign On</button> function sso() { window.location.href = window.location.href = ‘’; // example:https://login.xecurify.com/moas/broker/login/jwt/277898?client_id=AbIVW8A MNTBzg2o7&redirect_uri=http://localhost:3000/login; }

• On Clicking the SSO button the user will be redirected to the miniOrange portal for authentication.
• Then the JWT token is returned to your application to the redirect URL you have set while adding your application in miniOrange. In the following steps, we will be verifying this token and retrieving the user details.
• You need to add the x509 certificate that you can get in step 1 ‘configure your application in miniOrange ’.
const Login = () => { // The SearchParams hook lets us work with the query string of a URL. let [searchParams, setSearchParams] = useSearchParams(); const cert = "< PLACE YOUR CERTIFICATE STRING HERE >"; var verified = false; // Gets the id_token parameter from the query URL let jwt = searchParams.get("id_token"); if (jwt) { var jwtBuilder = new JWTBuilder(); // Initialize the JWT jwtBuilder.parseJwt(jwt); // set the secret that was shared by your IdP jwtBuilder.setSecret(cert); try { // Compare the hashed jwt with the one received verified = jwtBuilder.verifyJwt(); } catch (error) { console.error(error); } } useEffect(() => { if (verified) { // Once you find the JWT is verified, you can go ahead and get the data from JWT let user = jwtBuilder.getPayload(); let username=user.username; let email=user.email; // You can create a user session here if required and navigate to the home page } }, [verified]);

• Now if the token is verified, the payload which consists of the User details can be saved in local storage or serialized into a User Class and the user now verified can be redirected to the home screen of your application.

3. Test SSO Configuration

Test SSO login to your React account with miniOrange IdP:

Using IDP Initiated Login

• Login to miniOrange IdP using your credentials.



• On the Dashboard, click on React application which you have added, to verify SSO configuration.

5. Single Logout (Optional)

If you want to ensure that all sessions (SP and IDP) for a user are properly closed, you can configure Single Logout with the steps below.

A. Configure miniOrange with IdP SLO endpoint:

• Go to the Identity Provider tab and edit the configured Identity Provider.
• Find the option Single Logout URL and configure the SLO URL provided by your IdP.

B. Configure IdP with miniOrange SLO endpoint:

• Configure your Identity Provider with below Single logout endpoint.
  https://login.xecurify.in/moas/broker/login/saml_logout/<your-customer-id>
• You can find the SSO Binding option to configure the logout binding type to either REDIRECT or POST.

C. Configure your JWT application with SLO endpoint:

• Configure your JWT application with below Single logout endpoint.
  https://login.xecurify.in/moas/broker/login/jwt/logout/<your-customer-id>?redirect_uri=<redirect-url>
  
  

  your-customer-id	You have to add your miniOragne account customer ID here.
  redirect-url	This should be replaced with the logout URL of your JWT application.

External References

• Mobile Apps Single Sign-On
• Nodejs Single Sign-On
• Angular Single Sign-On
• Ionic Single Sign-On