Enterprise Authentication via Front-End Bundle

If your organization uses OAuth, SSO, or other enterprise login systems, you can configure authentication directly from your front-end bundle using the Kinetic React library. This allows your portal to securely connect to the Kinetic Platform without requiring users to log in through the Management Console.

⚠️

Pre-requisite: Before implementing front-end authentication, make sure your platform admin has configured:

• Trusted Domains and Frame Origins
• OAuth Clients in the Space Console

Setting Up Authentication in the Front-End

The @kineticdata/react library uses the KineticLib provider to manage authentication automatically. To enable OAuth-based enterprise login, you'll pass the appropriate configuration options as props.

Basic Configuration

<KineticLib
  authentication={{
    strategy: 'oauth',
    clientId: 'your-client-id',
    redirectUri: 'http://localhost:3000/#/OAuthCallback',
  }}
>
  {/* Your portal components */}
</KineticLib>

 

Example: Auth Setup with Local Dev

<KineticLib
  authentication={{
    strategy: 'oauth',
    clientId: 'dev-client',
    redirectUri: 'http://localhost:3000/#/OAuthCallback',
  }}
>
  {({ initialized, loggedIn, loginProps }) => (
    !initialized ? (
      <div>Loading...</div>
    ) : !loggedIn ? (
      <LoginScreen {...loginProps} />
    ) : (
      <App />
    )
  )}
</KineticLib>

Supported Authentication Strategies

Handling SSO Redirects with onSso

The onSso prop allows you to hook into the authentication flow after a successful Single Sign-On (SSO) login but only if SSO is configured for your Kinetic space.

⚠️

Note: The onSso function is only available when your space is using an SSO-based security strategy (e.g., SAML, OpenID Connect). If SSO is not enabled in your platform settings, this prop will be undefined.

When SSO is enabled, the Kinetic React library will provide an onSso handler that you can call to begin the enterprise login process. After the login is complete, the prop also supports a callback to run custom logic such as redirecting users, capturing login analytics, or initializing user-specific state.

Example: Function called to begin the enterprise login process

const MyLoginForm = ({
  onChangeUsername,  
  onChangePassword,  
  onLogin,  
  onSso,  
  error,  
  password,  
  pending,  
  username,  
}) => (

  <form>
    {/* Your normal form inputs would go here.
        You should use the onChange* methods and their data counterparts.
      */}


{/* This is a normal login button, which uses the provided onLogin action.

    Note: onLogin takes 2 potential arguments: onLogin(event, callback). The
          callback function is only called in the event of a successful
          authentication attempt.
  */}
<button disabled={pending} type="submit" onClick={onLogin}>
  Login
</button>

{/* The system performs a "preflight" request when it loads in order to
    determine what security strategies are currently enabled. This allows
    us to provide an onSso function when SSO-styled strategies such as
    SAML are enabled.
  */}
{onSso && (
  <button disabled={pending} onClick={() => onSso()} type="button">
    Enterprise Single Sign-On
  </button>
)}


  </form>
);

const MyApp = () => (  
  <KineticLib>  
    {({  
      serverError,  
      initialized,  
      timedOut,  
      loggedIn,  
      loginProps: loginProps,  
    }) => (!loggedIn ? \<MyLoginForm {...loginProps} /> : <MyApplication />)}  
  </KineticLib>  
);```
 

Example: Triggering Login and Redirecting After SSO

<KineticLib
  authentication={{
    strategy: 'oauth',
    clientId: 'portal-client',
    redirectUri: 'https://myportal.com/#/OAuthCallback',
  }}
  onSso={({ profile }) => {
    console.log('User logged in as:', profile.username);
    window.location.replace('/dashboard');
  }}
>
  {/* Portal routes and logic */}
</KineticLib>

 

When to Use onSso

• To trigger SSO login from a custom button or logic screen
• To run logic after login (e.g., redirecting or initializing user preferences)
• To support seamless login flows in enterprise environments

💡

Once the user is authenticated, the onSso handler will provide access to their profile and space data. You can use this to tailor the portal experience to their role or identity.

Tips for a Smooth Auth Experience

• Make sure the redirect URI exactly matches what's defined in your OAuth client settings
• During local development, add http://localhost:3000 to your Trusted Resource Domains and Frame Domains
• Use the loginProps returned by the KineticLib to control your custom login experience or redirect logic
• For advanced workflows, you can also access the current user or space via the context:

const { kinetic } = useContext(KineticContext);
console.log(kinetic.profile.username);

Troubleshooting

• Blank screen after login? Double-check that the redirectUri is properly whitelisted in your OAuth client configuration and matches the route where your React app initializes.
• 401 or 403 errors? Ensure the authenticated user has access to the target Kapp, form, or space. Also verify that your API calls include the appropriate include values (e.g., ['values', 'details']) to return the expected data.

Related Topics

• Enabling Single Sign-On Authentication
• Set Up Your React Dev Environment