Hello there!
Need Help? We are right here!
Need Help? We are right here!
Search Results:
×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.
npm install --save base64url jsrsasign jssha utf8
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, OpenLDAP, AWS etc), Identity Providers (like Microsoft Entra ID, Okta, AWS), and many more. You can configure your existing directory/user store or add users in miniOrange.
| 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. |
import { JWTBuilder } from './path/to/jwt-connector';
<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;
}
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]);
Test SSO login to your React account with miniOrange IdP:
Contact us or email us at idpsupport@xecurify.com and we'll help you setting it up in no time.
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Okta, Shibboleth, Ping, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more. You can configure your existing directory/user store or add users in miniOrange.
1. Create User in miniOrange
2. Bulk Upload Users in miniOrange via Uploading CSV File.
Here's the list of the attributes and what it does when we enable it. You can enable/disable accordingly.
| Attribute | Description |
|---|---|
| Activate LDAP | All user authentications will be done with LDAP credentials if you Activate it |
| Fallback Authentication | If LDAP credentials fail then user will be authenticated through miniOrange |
| Enable administrator login | On enabling this, your miniOrange Administrator login authenticates using your LDAP server |
| Show IdP to users | If you enable this option, this IdP will be visible to users |
| Sync users in miniOrange | Users will be created in miniOrange after authentication with LDAP |
Attribute Name sent to SP = organization
Attribute Name from IDP = company
Set up AD as External Directory configuration is complete.
Note: Refer our guide to setup LDAP on windows server.
miniOrange integrates with various external user sources such as directories, identity providers, and etc.
Contact us or email us at idpsupport@xecurify.com and we'll help you setting it up in no time.
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:
B. Configure IdP with miniOrange SLO endpoint:
https://login.xecurify.in/moas/broker/login/saml_logout/<your-customer-id>
C. Configure your JWT application with SLO 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. |
