Enabling Enterprise Authentication in Your Bundle

Your organization’s React application has a KineticLib component wrapping most of the application. This component provides key functionality and context to the rest of the Kinetic React library. The component uses props to configure your application and then provides a render function that helps your application bootstrap essentials like authentication.

The onSso prop is a function that is only defined if an SSO security strategy is configured in your space. When the prop is defined, you can call the function to begin the enterprise login process, as shown in the example below:

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>  
);```