Building Hellonext | 26 July, 2022

How to integrate OneLogin with Hellonext SSO for easy authentication

We build Hellonext to help SaaS product managers centralize customer feedback and build a product roadmap that creates positive impact on customers and business growth. One of the core principles of Hellonext is to make sure your customers' experience is as seamless as possible. We wanted to remove the friction of your users giving you feedback, and the login process has to be nearly non-existent. We create this experience with Single Sign-on feature.

This guide provides step-by-step instructions on how to configure Hellonext single sign-on (SSO) redirect with OneLogin V2. This allows yours users to sign in via their OneLogin credentials. You can find the example code here.

How to integrate OneLogin SSO?

Below are the 4 basic steps that will allow you to configure Hellonext with OneLogin.

  1. Create an OpenID app in your OneLogin Application
  2. Configure the application to use Hellonext auth endpoints
  3. Write a custom login method to generate a user based SSO token
  4. Configure the SSO redirect in Hellonext

Create an OpenID app in your OneLoginApplication

  1. In the OneLogin Admin portal, click on ”Applications” and then “Add App”.
  2. Search for “OpenID Connect (OIDC)” and click on it. Type “Hellonext Inc” in the “Display Name” text box.
    Configure OneLogin SSO with Hellonext SSO
  3. If you do not want this app to be visible on your portal, turn off the “Visible in portal” toggle.
  4. Now this app will be available in the listing page.

Configure with Hellonext auth endpoints

  1. Click on the created app from the listing page and select “Configuration” in the sidebar.

  2. Fill the Login URL and the Redirect URL

    1. Login URL — This is the login page of your application. This will redirect to the OneLogin Authentication page.
    2. Redirect URI — These are the URLs that OneLogin will redirect your user to, once the authentication flow is completed. In this action, we will generate the users “sso_token” and redirect them to Hellonext.
      Configure OneLogin SSO with Hellonext SSO
  3. Now, from the SSO tab, copy the “Client ID” available at the top.

Write a custom login function to generate SSO tokens

  1. Now let’s write logic to redirect your application’s login page to OneLogin Page.

    1. First, we need to generate a OneLogin auth URL. Below is the code snippet to generate it.
      1. YOUR_CLIENT_ID — This is the client ID copied from the SSO tab of the newly created OneLogin application.
      2. YOUR_WORKSPACE_NAME — This is the name of your workspace (if your OneLogin homepage is https://hellonext.onelogin.com/oidc/2 then your workspace name is hellonext).
      3. state — This is returned along with the redirect URL. This will contain data that we need in the next step.
        1. When Hellonext redirects you to your application’s login page, there will be two parameters sent to you.
          1. domain
          2. redirect
        2. You will need to pass those two parameters to Hellonext so let’s encrypt and send them via the state.
    Configure OneLogin SSO with Hellonext SSO
    1. Once the user lands on the /login page, we redirect them to the URL generated via the snippet above. For example, the generated URL might look like,
      Configure OneLogin SSO with Hellonext SSO
  2. Once the user logs in to the OneLogin page, then OneLogin will redirect them to the redirect URL specified in the configuration.

    1. We will get the following data from OneLogin
      1. id_token — The token to get the user profile.
      2. state — The state we sent during the login process.
    2. We now decode the user profile using the jwtDecode library.
      Configure OneLogin SSO with Hellonext SSO
  3. Now from the decoded profile, we will generate the ssoToken for the user with the SSO_KEY present in the Advanced tab of the Organization Settings in your Hellonext Admin Dashboard.

Configure OneLogin SSO with Hellonext SSO
  1. After generating the user’s ssoToken, we now generate the Hellonext redirect URL.

    1. domain — This is the data that we received from the Hellonext while initiating the SSO auth which we sent as state to OneLogin.
    2. redirect — This is the data that we received from the Hellonext while initiating the SSO auth which we sent as state to OneLogin.
      Configure OneLogin SSO with Hellonext SSO
  2. Then redirect the user to the generated url. The URL might look like,

Configure OneLogin SSO with Hellonext SSO

Configure SSO Redirection in Hellonext

  1. Open you Hellonext Admin Dashboard, navigate to Organization SettingsAdvancedSingle Sign-On.
    Configure OneLogin SSO with Hellonext SSO
  2. Copy you SSO Key. This is key that you need to use while generating the SSO token for every user.
  3. Click On SSO Redirect → Configure button.
  4. In the configure dialog box, fill the redirect URL as the login URL configured in your created OpenID Connect App.
    Configure OneLogin SSO with Hellonext SSO
  5. Now, click on Test Redirect Flow.
  6. Now, you will be asked to sign in on the OneLogin page. Once you sign in, you will be redirected to your Hellonext Successfully.
  7. Turn on the Enable Single Sign-On Redirect toggle.

Let’s see how the entire flow looks like once the configuration is done.

Configure OneLogin SSO with Hellonext SSO

Last updated: August 3rd, 2022 at 3:55:27 AM GMT+0

Hellonext Blogpost Author Profile

Heertheeswaran V

Heerthees is the Head of Engineering at Hellonext. He writes about how we engineer Hellonext to be the best user feedback tool in the market.

Ready to try Hellonext?

Superpower your customer feedback loop by creating your free account on Hellonext.

Create my account now

No credit card required • Free for 14 days • Setup in <2 mins