How to Configure OneLogin SSO in a React App

What is SSO?

Single Sign-On (SSO) is a method that allows users to log in to multiple applications and websites using one set of credentials, such as a username and password, instead of having to authenticate separately for each application. In this tutorial, we’ll walk through OneLogin SSO integration React, a common approach for simplifying authentication in modern web apps.

Let’s Get Started with the Configuration: How to Configure OneLogin in a React App

This step-by-step guide focuses on OneLogin SSO integration React developers can follow to set up secure login functionality quickly.

Step 1: Create a Free Account on OneLogin

Visit OneLogin to create a free account (Note: You need a business account to register, and the account is valid free for only 30 days as per current website terms). You can also visit the developer site for documentation.

Step 2: Log in and Access the Admin Panel

After successful login, click on the Administration tab.

Step 3: Set Up Branding

Navigate to Settings → Branding. Under Branding, you can upload your company logo, set a background image or color, and preview the portal view.

Step 4: Create or Manage Users

Go to Users → Users to view existing users or create a new one. You can also register users via an OIDC app.

Step 5: Add Custom Fields (Optional)

Navigate to Users → Custom User Fields if you want to create custom fields for your users.

Step 6: Activate or Deactivate Users

You can enable or disable a user using the simple toggle button available on the user’s profile.

Step 7: Create an OIDC App for SSO

To implement OneLogin SSO integration React applications typically require, you need to create an OIDC application in the OneLogin dashboard.

Step 8: Configure OIDC Application

In the Configuration tab of your OIDC app, set the Login URL and Redirect URL according to your React app.

Step 9: Get Your Client ID

Go to the SSO tab inside the OIDC application to copy the Client ID for later use.

Step 10: Download the Sample React App

Visit the OneLogin React quickstart guide at developers.onelogin.com/quickstart/authentication/react to download the sample React app and follow setup instructions. This guide is extremely helpful when working on OneLogin SSO integration React projects.

Step 11: Configure Your App in oidcApi.js

Set your parameters in the React app’s oidcApi.js file:

• Issuer URL
• Client ID
• Redirect URL

These should match the settings you configured in the OIDC app to complete the OneLogin SSO integration React process.

Step 12: Enable Self-Registration (Optional)

If you want new users to sign up using OneLogin, go to Users → Self Registration and create a new profile. You’ll need to add public-signup to the URL. Hitting this URL will open the registration form.

Step 13: Configure MFA (Multi-Factor Authentication)

Go to Policies and create a new user policy. Under that policy, visit the MFA tab.

• Set OTP (One-Time Password) requirement for all or selected users.
• Decide how frequently OTP should be required.

Step 14: Assign MFA to Users

If you opted for specific users, go to Users → Authentication → User Security Policy and assign your new policy.

And That’s It!

You’ve now successfully completed the OneLogin SSO integration in your React application, enabling a seamless and secure login experience for users across platforms. This OneLogin SSO integration React approach is ideal for scalable, secure enterprise applications.