Identity Management Functions

There are a number of Identity Management functions you can use to configure the default settings of your login/registration screens and control the behavior of Identity Management templates. They include:

`tp.pianoId.init()`	This function allows you to configure Identity Management's default settings. Available settings are discussed below.
`tp.pianoId.show()`	This function triggers any Identity Management screen you want to show. The screen shown depends on how the `screen` parameter is set.
`tp.pianoId.showForm()`	This function triggers a Custom form.*
`tp.pianoId.loginByToken()`	This function logs in a user by setting a token into a cookie. This method is useful for scenarios where you need to authenticate a user without displaying a login page, such as when using the Generate user token endpoint. It is particularly beneficial for integrations where the user token is generated and validated on the backend. It takes a single argument, the user token, and upon successful login, the `loggedIn` callback is triggered. However, it is important to note that the loginSuccess callback is not triggered in this case and the `__utp` cookie is created as a session cookie, and this behavior cannot be altered.
`tp.pianoId.logout()`	This function makes the user logout. It is typically used to create a logout button for logged in users. You can pass in a callback as a parameter if you would like an event to occur following the logout. If the checkout is single-step or passwordless, the user is redirected back to the offer after logout.
`tp.pianoId.getUser()`	This function allows you to retrieve additional information about a logged in user. More details are available here.
`tp.pianoId.updateUser()`	This function allows you to update the first and last name of a user. For example, `tp.pianoId.updateUser({ firstName: "Test", lastName: "User" })`. If either the first or last name properties are not defined, they will get an empty string value.
`tp.pianoId.isUserValid()`	This function returns `true` if a user is logged in and returns `false` if a user is logged out. It's typically used to determine whether to show a user a login or logout button.
`tp.pianoId.loadExtendedUser`	This function returns a current user's custom field. Once received, the user profile data will be passed via the `extendedUserLoaded` callback. By default, only the custom fields in the My Account form will be returned. To return a specific set of fields read this section.
`tp.pianoId.getLang()`	This function returns the user's language. For example if the language is set to American English, the response would be `"en_US"`.

*The format would look like this tp.pianoId.showForm({formName: 'formName', templateId: 'templateId', variantId: 'variantId'}), where you would insert the form_id of the custom form as the value for the formName, the Piano ID Custom Form template ID as the value for the templateId and if available, a variant ID of this template as the variantId. You could also specify if the form should not be shown in case a user has already filled in all custom field values included in the form using hideIfComplete: true.

The tp.pianoId.init() function allows you to override several default Identity Management parameters while the tp.pianoId.show() function allows you to trigger various Identity Management behaviors. The parameters for these functions include:

Parameter	Description
`iframeUrl`	The url of the Identity Management deployment host. You need to change this parameter only if you have configured a dedicated domain for SSO support with Piano. If you are using an app on the EU dashboard, the URL would be https://id-eu.piano.io, on the AP dashboard, the URL would be https://id-ap.piano.io, and on the AU dashboard, the URL would be https://id-au.piano.io.*
`disableSignUp`	If this parameter is set to `true` the ability to register will be disabled (only login will be allowed.) This may be necessary if you're running Piano JavaScript within a mobile application. The default value is `false`.
`resetPasswordToken`	This token is created when a user wants to perform a password reset. This parameter is typically used with the `tp.pianoId.show()` function to enable password resets.
`displayMode`	The display mode of the Identity Management templates. The default value is `modal`. Other accepted values are `inline` and `popup`. The `popup` value creates a new pop-up window with a distinct URL whereas modal creates a pop-up modal on the page the user is viewing.
`screen`	Specify the Identity Management screen to show. Possible values include `login` for the login screen, `register` for the registration screen, `restore` for the screen where a user can request a password reset email, and `new_password` for the password reset screen.
`containerSelector`	If you're using an inline template, this is the container selector.
`width`	The width of `popup` and `modal` templates. The default is 320px.
`height`	The height of `popup` and `modal` templates. The default is 460px.
`loggedIn`	This callback is fired when a user logs in.
`loggedOut`	This callback is fired when a user logs out.
`loginSuccess`	This callback is fired when a user successfully logs in.
`registrationSuccess`	This callback is fired when a user successfully signs up a new account.
`profileUpdate`	This callback is fired when a user updates their profile via My Account as well as when a user profile is updated during a custom form submission.
`langChange`	This callback is fired when a user changes their default language.
`loginDisplayed`	This callback is fired when the login screen is presented.
`registerDisplayed`	This callback is fired when the registration screen is presented.
`loginFailed`	This callback is fired upon an unsuccessful login attempt.
`registrationFailed`	This callback is fired upon an unsuccessful registration attempt.

*For example like this:

  tp.push(["init", function () {
         tp.pianoId.init({
           iframeUrl:"https://id-eu.piano.io"
          });  
        tp.experience.init()
    }]);

Here's what a configured version of tp.pianoId.init() might look like:

tp = window.tp || [];
tp.push(['setUsePianoIdUserProvider', true]);
tp.push(["init", function() {
    tp.pianoId.init({
        displayMode: 'inline',
        containerSelector: '#login-form',
        loggedIn: function(data) {
            console.log('user ', data.user, ' logged in with token', data.token);
        },
        loggedOut: function() {
            console.log('user logged out');
        }
    });
}]);

And here's what a configured version of tp.pianoId.show() might look like:

tp = window.tp || [];
tp.push(['setUsePianoIdUserProvider', true]);
tp.push(["init", function() {
    tp.pianoId.show({
        disableSignUp: true,
        displayMode: 'inline',
        screen: 'login',
        containerSelector: '#login-form',
        loggedIn: function(data) {
            console.log('user ', data.user, ' logged in with token', data.token);
        },
        loggedOut: function() {
            console.log('user logged out');
        }
    });
}]);

Another property that can be utilized for the tp.pianoId.show function is observeContainer.

tp.pianoId.show({
  ...
  observeContainer: true
})

The observeContainer property enables observing the Identity Management container size changing for inline mode templates. It is helpful if you want to pre-initiate inline Identity Management templates inside an invisible container element.

To get custom field data from a logged-in user:

Create a custom form.
Add the required fields in the custom form.
Use the form_name parameter in the call to loadExtendedUser.

tp = window.tp || [];
tp.pianoId.loadExtendedUser({
    extendedUserLoaded: function (data) {
        for (var i in data.custom_field_values) {
            var fieldName = data.custom_field_values[i].field_name;
            var fieldValue = data.custom_field_values[i].value;            
            console.log("Field " + fieldName + " has value " + fieldValue);
        }
    }, formName: 'new_form'
});

Last updated: July 03, 2026

Parameter

Description