SAML SSO from 3rd Party Portal users to React Portal hosted on Azure App Service registered in ADB2C

[sureshrajamani23]

Hi Team,

We have developed a React SPA Portal called (Learner Portal). It is hosted on Azure App Service and registered in Azure ADB2C for Authentication.

ADB2C is configured to have Sign In & Signup flow for user registration and sign in.

So User can able to register and login which is working fine.

Now the requirement is, our customer company has portal called XYZ.com. XYZ.com has its own Auth Provider. Employees of customer company will login to XYZ.com with their own credentials. Now we need to allow users who logged in to XYZ.com Portal, should be able to login to our Learner portal using SAML SSO. Basically there will be a link displayed in XYZ.com portal after user login. Then User can click on the link should SSO with our Learner Portal with asking user to login again.

Can anyone please provide some detailed steps to achieve this requirement.

Thanks,

Suresh Rajamani

[#2]

Hi @sureshrajamani23,

here is a more detailed answer to your question, adapted to the specific technologies and use case you mentioned:

Prerequisites:

• An Azure AD B2C tenant
• A React SPA Learner Portal
• An XYZ.com portal that supports SAML-based SSO

Azure AD B2C Configuration:

1. Sign in to the Azure portal and navigate to your Azure AD B2C tenant.
2. Under User attributes, collect and store the User Attributes you need to synchronize between XYZ.com and your Learner Portal. You may need to contact your XYZ.com administrator to obtain these attributes.
3. Under Identity providers, set up SAML-based authentication and configure your SAML identity provider. You may need to collect the metadata or configuration details from XYZ.com's SAML configuration.
4. Configure a custom policy in ADB2C that specifies how SAML authentication should be handled. You can use the built-in SAML policy as a starting point.

Learner Portal Configuration:

1. Update your React SPA Learner Portal to use the SAML-based authentication flow provided by Azure AD B2C. You can use the Azure AD B2C SDK for React to simplify this process.
2. In your application, you'll need to configure SAML-based authentication settings, including the identity provider's metadata or configuration details.
3. Ensure that your application can handle the user attributes synchronized from XYZ.com via SAML.

Integration with XYZ.com:

1. To enable SSO from XYZ.com to your Learner Portal, you need to set up a link or button on the XYZ.com portal that initiates the SAML SSO process.
2. In XYZ.com, create a link or button that directs users to your Learner Portal's SSO endpoint. This link should include the SAML RelayState parameter, which will tell Azure AD B2C where to redirect the user after they have successfully authenticated.
3. You may also need to configure XYZ.com to trust the SAML assertions that are issued by Azure AD B2C.

Testing:

1. Test the SSO flow thoroughly to ensure that users who are already logged in on XYZ.com are seamlessly logged into your Learner Portal without needing to enter their credentials again.
2. You can use the Azure AD B2C Test Lab to simulate the SSO flow and troubleshoot any issues.

User Data Synchronization:

1. Ensure that user data synchronized from XYZ.com to your Learner Portal is accurate and secure. You may need to map attributes between the two systems to maintain consistency.
2. You can use the Azure AD B2C User Sync feature to automate the synchronization of user data.

Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.

If the post was useful in other ways, please consider giving it Like.

Kindest regards,

Leon Pavesic
(LinkedIn)

[#3]

@LeonPavesic ,

Thanks for detailing this process. Sorry the delay response.

But i need some sample code which you mentioned in "Integration with XYZ.com" and also What would be the SSO endpoint and how it integrates with ADB2C.

Thanks,

Suresh Rajamani