Skip to main content

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

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=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-core';

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-core';
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();
}
}