---
title: "SSO Login & Registration"
slug: "sso-login-registration"
updated: 2026-05-15T06:40:11Z
published: 2026-06-23T10:52:16Z
canonical: "help.frisbii.com/sso-login-registration"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.
# SSO Login & Registration
The Frisbii Media JavaScript SDK includes a built-in SSO object — `plenigo.SSO` — for embedding login, registration, and password reset flows directly in an iframe on your page. All flows fire the same `plenigo.LoginSuccess` event on completion.
---
## Installation
The SDK installation is identical to the checkout. Place the script at the end of `<body>` and add a container element for the iframe:
```plaintext
```
---
## The `LoginSuccess` event
All SSO flows — login, register, and forgot password — complete by firing `plenigo.LoginSuccess`. The event detail contains a `customerSession` string that you pass to your backend to create a server-side session.
```javascript
document.addEventListener("plenigo.LoginSuccess", function(e) {
console.info("Session:", e.detail.customerSession);
// Send the session to your backend to create a server-side session
location.href = "/start-session/?session=" + e.detail.customerSession;
});
```
See [Sessions & Transfer Tokens](/frisbii-media/docs/sessions-transfer-tokens) for the server-side session creation.
---
## Registration
```javascript
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
console.info("Event is: " + e.type);
console.info(e);
console.info("Custom data is: ", e.detail);
// here we redirect to a new page
location.href = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId:"plenigoLogin" // the DOM element you want to put the iframe in
};
new plenigo.SSO(config).register();
```
---
## Login
```javascript
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
console.info("Event is: " + e.type);
console.info(e);
console.info("Custom data is: ", e.detail);
// here we redirect to a new page
location.href = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId:"plenigoLogin" // the DOM element you want to put the iframe in
};
new plenigo.SSO(config).login();
```
---
## Forgot password
```javascript
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
console.info("Event is: " + e.type);
console.info(e);
console.info("Custom data is: ", e.detail);
// here we redirect to a new page
location.href = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId:"plenigoLogin" // the DOM element you want to put the iframe in
};
new plenigo.SSO(config).forgotPassword();
```
To pre-fill the email address in the forgot password form:
```javascript
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
email: "john.doe@example.com" // use config attribute email to set the email address in password forgot form
};
new plenigo.SSO(config).forgotPassword();
```
---
## Additional config options
The following optional properties can be added to the config object for any SSO flow:
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `email` | `string` | `''` | Pre-fills the email address in login, registration, or forgot password forms. |
| `source` | `string` | `'plenigoSSO'` | A label for the registration origin. Useful for filtering users by where they signed up. |
| `showTabs` | `boolean` | `false` | Displays login and registration as tabs at the top of the iframe so the user can switch between them. |
```javascript
var config = {
elementId: "plenigoLogin",
email: "john.doe@example.com",
source: "news-website",
showTabs: true
};
new plenigo.SSO(config).login();
```
---