Authenticating Agents

SSO Integration for custom terminals (SSO only)

For agencies who have an existing identity access management (IAM) provider, logging in using a single sign-on (SSO) solution has many benefits:

User experience : Bold Penguin users do not have to maintain another set of login credentials. User access is streamlined as users are automatically logged in via SSO.

Security : Enterprise cybersecurity is improved by using SSO and reducing the number of username / password combinations, thus reducing the number of potential attack entry points.

The steps to setup an SSO integration with Bold Penguin are:

1. Agency has an IAM provider that supports SAML 2.0 protocol. Several common identity providers with SAML integrations are:

   • Microsoft Active Directory
   • Google SSO
   • Okta
   • OneLogin
   • Auth0

2. Bold Penguin has created an enterprise subscription tenant, and has identified and mapped permissions into the Bold Penguin system.

3. Customer has created a new SAML application within their IAM tool.

To learn more, see Bold Penguin documentation on SSO and SAML.

Create and distribute user credentials

If your users will sign in with a Bold Penguin username and password, the steps to create and distribute Bold Penguin credentials are:

• Bold Penguin has reached out to at least one of your principal users with their login credentials: a username with a temporary password. For more help with this step, please reach out to your Bold Penguin Program Manager.
• Principal users have created additional accounts (username and temporary password) for any additional agents.

Detect if the user is logged in

Your application will need to know whether the user has already signed in. This check is the same whether users sign in with SAML or credentials.

Start by observing changes to the Bold Penguin Redux store:

import { BehaviorSubject } from 'rxjs';
import { getStore } from '@boldpenguin/sdk';

const bpState$ = new BehaviorSubject(null);
const bpStore = getStore();

bpStore.subscribe(() => {
  bpState$.next(bpStore.getState());
});

Next, use a selector to check if the user is authenticated:

import { defaultIfEmpty, map, skipWhile } from 'rxjs/operators';
import { isSdkAuthenticated, isUserAuthenticated } from '@boldpenguin/sdk';

const isUserAuthenticated$ = bpState$.pipe(
  // start by assuming the user is not logged in
  defaultIfEmpty(false),
  // wait for SDK to finish configuration
  skipWhile((_state) => !isSdkConfigured(state)),
  // once configured, is user logged in?
  map((_state) => isUserAuthenticated(_state))
);

The Bold Penguin SDK Redux Selector documentation provides additional reference for these selectors:

• isSdkConfigured
• isUserAuthenticated

Lastly, use the observable boolean in your application to configure your application to show the login or logout component.

Login your users

In November 2021, Bold Penguin soft-launched a new unified login page. The new login page supports both SAML and credentials, and uses cookie-based authentication for easy, secure communication with Bold Penguin services. Choosing this method, users have fewer prompts for login to enjoy other tools from Bold Penguin.

In the example below, the agent clicks the “Login” button and will be redirected to a Bold Penguin login page. Once successful, the now-authenticated agent will be redirected back to your application page.

// src/app/services/sdk-config.js
import { getStore } from '@boldpenguin/sdk';
export const getConfig = () => getStore().getState().config;

// src/app/components/Login.jsx​
import React from 'react';
import { loginWithCookie } from '@boldpenguin/sdk';
import { getConfig } from '../../services/sdk-config';

export const Login = () => {
  const handleLogin = () => {
    const config = getConfig();
    loginWithCookie(config);
  }
  return (
    <button onClick={handleLogin}>Login<button>
  )
}

// src/app/services/config.service.ts
import { Injectable } from '@angular/core';
import { IUnknownCoreOptions } from '@boldpenguin/sdk';

@Injectable()
export class ConfigService {
    getConfig(): IUnknownCoreOptions {
        return (window as any).BpSdk.getState().config;
    }
} 

// src/app/components/login/login.component.ts
import { Component, OnInit } from '@angular/core';
import { loginWithCookie } from '@boldpenguin/sdk';
import { ConfigService } from '../../services/config.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent {
    constructor(private configService: ConfigService) {}

    handleLogin() {
        const config = this.configService.getConfig();
        loginWithCookie(config);
    }
}

Login with SSO (legacy)

If using legacy token-based authentication with SSO, use the login method instead:

import { login } from '@boldpenguin/sdk';

login({
    config
})

Login with credentials (legacy)

If using legacy token-based authentication with Bold Penguin credentials, use the loginWithUsernameAndPassword method instead:

import { loginWithUsernameAndPassword } from '@boldpenguin/sdk';

loginWithUsernameAndPassword({
    config,
    username,
    password
})

Logout your users

After logging out a user, your application should redirect or reload the page as needed to keep your application secure.

// src/app/components/Logout.jsx​
import React from 'react';
import { logout, getConfig } from '@boldpenguin/sdk';
import { getConfig } from '../../services/sdk-config'; // see login example

export const Logout = () => {
  const handleLogout = () => {
    const config = getConfig();
    logout(config);
  }
  return (
    <button onClick={handleLogout}>Logout<button>
  )
}

// src/app/components/logout/logout.component.ts
import { Component, OnInit } from '@angular/core';
import { logout } from '@boldpenguin/sdk';
import { ConfigService } from '../../services/config.service'; // see login example

@Component({
  selector: 'app-logout',
  templateUrl: './logout.component.html',
  styleUrls: ['./logout.component.scss'],
})
export class LogoutComponent {
    constructor(private configService: ConfigService) {}

    handleLogout() {
        const config = this.configService.getConfig();
        logout(config);
    }
}