Enabling Enterprise Authentication in Your Bundle
Learn how to add enterprise authentication to 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>
);```
Updated over 1 year ago