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.

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

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

Go to Applications → Applications and create a new app of type OIDC.

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.

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.

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 set up OneLogin SSO in your React application.