Authenticating Guests

Guests visiting your custom storefront use authentication and authorization in a different form. A single-use authorization token lets them answer questions and blocks other visitors from seeing or editing their form.

This section will explain how your gateway service, or Quote Start service, will create a new application form for new visitors. It will also show how to securely redirect and manage the visitor's authentication and authorization.

Quote Start service

Since visitors to your storefront will not have a Bold Penguin username and password, a Quote Start or "gateway" service hosted by you will create application forms for visitors. The service will communicate securely with Bold Penguin using service-to-service authentication. To configure authentication for your service, you will need:

• gateway client ID
• gateway client secret
• Bold Penguin tenant ID

Important: You should never include the gateway client ID or secret in your storefront front-end application. A separate SDK client ID only will be provided by Bold Penguin to configure the SDK in your front-end application.

Read more from the Bold Penguin API documentation on authenticating your gateway service and creating new application forms.

Authenticate visitors

As of SDK version 6.4.15, Bold Penguin handles this type of authentication. The following content is informational only and will be removed at a later date.

When a visitor comes to your storefront, your gateway services will create a new application form. A successful response to the gateway will include a redirect_url. The redirect will contain two important search parameters:

• token : an authentication token that identifies the visitor
• token_id : a single-use authorization token that allows the user to answer the application form

Example:

https://example.com/auth/callback?token=5090a554-e42e-40af-973b-805b8c449fce&token_id=7aa33a65-b933-4652-9aac-58f74d2dbd73

• https://example.com/auth/callback : The redirect URL to your application. This URL is decided by you! Share the redirect URL you'd like to use with Bold Penguin to configure it for your storefront.
• ?token_type=guest: indicates guest authentication
• &token=5090a554-e42e-40af-973b-805b8c449fce : the authentication token
• &token_id=7aa33a65-b933-4652-9aac-58f74d2dbd73 : the single-use authorization token_id

import { refreshSetup, setItem } from '@boldpenguin/sdk';

const params = new URLSearchParams(window.location.search);
const token = params.get('token');
const token_id = params.get('token_id');

setItem('token', token);
setItem('token_id', token_id);

refreshSetup().then(
  //...
);

// src/app/components/auth-callback.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { refreshSetup, setItem } from '@boldpenguin/sdk';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { ConfigService } from '../services/config.service';

@Component({
  selector: 'app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styleUrls: ['./auth-callback.component.scss'],
})
export class AuthCallbackComponent implements OnInit, OnDestroy {
  unsubscribe$ = new Subject<void>();

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private configService: ConfigService,
  ) {}

  ngOnInit(): void {
    this.listenForAppId();
    this.route.queryParams
      .pipe(
        filter(params => params.token),
        takeUntil(this.unsubscribe$),
      )
      .subscribe(params => {
        const { token, token_id } = params;
        setItem('token', token);
        setItem('token_id', token_id);
        refreshSetup(this.configService.config).then(
          //...
        );
      });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}