Identity Management JavaScript Settings

Identity Management initialization

To initialize Identity Management, you'll need to set the setUsePianoIdUserProvider boolean on the tp global object to true. Like so:

tp.push(["setUsePianoIdUserProvider", true ]);

You do not need to set the userRef or pass Piano any additional information. We will determine if the user is logged in or not and present the appropriate login or registration modals necessary for checkout to proceed.

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.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.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.

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 or you are using an app on the EU dashboard, where the URL would be https://id-eu.piano.io, the AP dashboard, where the URL would be https://id-ap.piano.io, or the AU dashboard, where 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');
        }
    });
}]);

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

Identity Management password reset JavaScript

You will need to add this JavaScript to the password reset landing page in order for the password reset template to appear when a user clicks a link within a password reset email:

tp.push(['init', function() {
    // Password can be reset only if user is anonymous
    if (!tp.user.isUserValid()) {
        // If URL has reset_token parameter
        var tokenMatch = location.search.match(/reset_token=([A-Za-z0-9]+)/);
        if (tokenMatch) {
            // Get value of the token
            var token = tokenMatch[1];
            // Present password reset form with the found token
            tp.pianoId.show({
                'resetPasswordToken': token, loggedIn: function () {
                    // Once user logs in - refresh the page
                    location.reload();
                }
            });
        }
    }
}]);

Last updated: July 03, 2026

Identity Management initialization

Identity Management functions

Parameter

Description

Identity Management password reset JavaScript