We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions
Subscriptions
Breadcrumbs

How do I configure, style, and conditionally show social, SSO, and OIDC login in Piano Identity Management templates?

1. Where social login is configured

Social login providers are enabled in the Piano dashboard. The visible social buttons render into your Piano ID login page, Piano ID register page, Piano ID register confirm page, and Piano ID profile in My Account templates via <social-sign-in> and per-provider components (<facebook-signin>, <google-signin>, <twitter-signin>, <linkedin-signin>, <apple-sign-in>).

For My Account, each provider has a social-group block with showIf<Provider>Available directives, a social-icon, a connection caption, and <provider-link> / <provider-unlink> buttons.

2. Show the post-social registration confirm page

If your Identity Management Registration confirm page does not appear after social login, mark at least one custom field as required - this forces the confirm page to render after social registration so you can collect required consents. Revert to default and reapply customizations if behavior remains broken.

3. Style social login buttons

Rounded vs Branded modes

Two out-of-the-box styles, controlled by the CSS class on <social-sign-in>:

  • Rounded (default): .round-social-button / .social-button-icon selectors.

  • Branded: opt in by adding social-buttons-component to <social-sign-in>. Target .branded-social-button. Branded buttons include built-in labels, so ::after content is unnecessary.

<!-- Switch to branded mode -->
<social-sign-in class="social-buttons-component"></social-sign-in>

Rectangular buttons with "Continue with X" labels (rounded mode)

Add to Identity Management Layout → CSS:

.round-social-button{
  width: 80% !important;
  border-radius: 0% !important;
  margin:5px !important;
}
.round-social-button.google::after{
  content: "Continue with Google" !important;
  padding-left: 50px !important;
}
.round-social-button.google{
  background-repeat: no-repeat !important;
  background-position: 20% !important;
}
.round-social-button.facebook::after{
  content: "Continue with Facebook" !important;
  padding-left: 50px !important;
}
.round-social-button.facebook{
  background-repeat: no-repeat !important;
  background-position: 20% !important;
}
.round-social-button.twitter::after{
  content: "Continue with Twitter" !important;
  padding-left: 50px !important;
}
.round-social-button.twitter{
  background-repeat: no-repeat !important;
  background-position: 20% !important;
}

Adjust:

  • background-position - icon position (left-to-right)

  • padding-left - text position inside the button

  • width / margin - button size and spacing

Branded buttons - per-provider styling 

.branded-social-button {
  border-width: 4px;
  background-color: #ff3300;
}

.branded-social-button.google {
  font-size: 1.25rem;
  color: #ff3300;
}

Remove ::after selectors when switching from rounded to branded - branded buttons include their own labels.

Full custom branded look - Facebook + Google with inline SVG icons

Add social-buttons-component to <social-sign-in>, then add to Identity Management Layout → CSS:

button.round-social-button {
  flex-grow: 1;
  border-radius: 0 !important;
}
.social-button-icon.facebook {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3f5b96 !important;
  background-image: none !important;
}
.social-button-icon.facebook::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='60.734' height='60.733' style='' xml:space='preserve'%3E%3Crect id='backgroundrect' width='100%25' height='100%25' x='0' y='0' fill='none' stroke='none'/%3E%3Cg class='currentLayer' style=''%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id='svg_1' class='selected' fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M57.378,0.001H3.352C1.502,0.001,0,1.5,0,3.353v54.026c0,1.853,1.502,3.354,3.352,3.354h29.086V37.214h-7.914v-9.167h7.914 v-6.76c0-7.843,4.789-12.116,11.787-12.116c3.355,0,6.232,0.251,7.071,0.36v8.198l-4.854,0.002c-3.805,0-4.539,1.809-4.539,4.462 v5.851h9.078l-1.187,9.166h-7.892v23.52h15.475c1.852,0,3.355-1.503,3.355-3.351V3.351C60.731,1.5,59.23,0.001,57.378,0.001z' id='svg_2' fill='%23ffffff' fill-opacity='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.social-button-icon.facebook::after {
  content: "Facebook";
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
}
.social-button-icon.google {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4588f1 !important;
  background-image: none !important;
}
.social-button-icon.google::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' version='1.1'%3E%3Crect id='backgroundrect' width='100%25' height='100%25' x='0' y='0' fill='none' stroke='none'/%3E%3Cg class='currentLayer' style=''%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id='brand' stroke='none' stroke-width='1' fill='%23ffffff' fill-rule='evenodd' class='selected' fill-opacity='1'%3E%3Cg id='google' fill='%23ffffff' fill-rule='nonzero' fill-opacity='1'%3E%3Cpath d='M11.99,13.9 L11.99,10.18 L21.35,10.18 C21.49,10.81 21.6,11.4 21.6,12.23 C21.6,17.94 17.77,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 C14.7,2 16.96,2.99 18.69,4.61 L15.85,7.37 C15.13,6.69 13.87,5.89 12,5.89 C8.69,5.89 5.99,8.64 5.99,12.01 C5.99,15.38 8.69,18.13 12,18.13 C15.83,18.13 17.24,15.48 17.5,13.91 L11.99,13.91 L11.99,13.9 Z' id='Shape' fill='%23ffffff' fill-opacity='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.social-button-icon.google::after {
  content: "Google";
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
}

Then in Piano ID register page and Piano ID login page templates, replace:

<social-sign-in></social-sign-in>

with:

<social-sign-in class="social-buttons-component"></social-sign-in>

Replace the icon image directly 

.social-buttons-icons-inside .social-button .btn.facebook i,
.btn.facebook::before {
  background-image: url("data:image/svg+xml;base64,…");
  /* or */
  background-image: url("https://your-cdn/icon.svg");
}

Prefer SVG. Base64 data URI is convenient when you cannot host externally.

Reorder social buttons 

.apple { order: -1; }   /* move Apple to the top */

My Account social icons

Edit .social-icon styles in Piano ID profile in My Account → CSS.

4. Customize OIDC button text and the social title

OIDC button text (dynamic via MutationObserver) 

<custom-script>
  const obSocialButtons = new MutationObserver(() => {
    const socialButtons = document.querySelectorAll(".social-button-title");
    if (socialButtons.length > 0) {
      socialButtons.forEach(el => el.textContent = el.textContent.replace("Facebook", "Meta"));
      obSocialButtons.disconnect();
    }
  });
  obSocialButtons.observe(document.body, { subtree: true, childList: true });
</custom-script>

5. Conditionally show or hide social login per platform

The recommended mechanism is the stage value + the showIfStage / hideIfStage directives.

The stage value is supplied via:

  • A URL parameter (e.g. ?stage=app, ?stage=mobile, ?stage=iosApp, ?stage=android-device)

  • Your Identity Management initialization (recommended default on web):

tp.pianoId.init({ stage: 'web' });

Hide social login on the mobile app, keep on web 

<div hideIfStage="app">
  <!-- social login buttons / markup -->
</div>

The app should load the Identity Management form with stage=app.

Show social login only on web (allow-list) 

<div showIfStage="web">
  <!-- social login buttons / markup -->
</div>

Hide a specific provider on a specific platform

Hide Google on iOS apps via CSS in a stage-scoped block:

<div showIfStage="iosApp">
  <style>
    .social-button-icon.google {
      display: none !important;
    }
  </style>
</div>

Angular wrapper workaround (extra _ngcontent attributes):

.social-buttons-wrapper.app .social-button-icon.google {
  display: none;
}

Hide Apple sign-in on Android via per-button directive:

<div *showIfSocialAuthAvailable class="social-wrapper">
  <div class="social-buttons-wrapper">
    <facebook-signin></facebook-signin>
    <google-signin></google-signin>
    <twitter-signin></twitter-signin>
    <linkedin-signin></linkedin-signin>
    <apple-sign-in *hideIfStage="'android-device'"></apple-sign-in>
  </div>
  <div class="divider"><t>or</t></div>
</div>

Add a custom script that detects Android and loads Identity Management with stage=android-device.

Hide Google via MutationObserver (workaround)

In Identity Management Layout:

<custom-script>
const obSocialButtons = new MutationObserver(() => {
  const googleButton = document.querySelector(".social-button-icon.google");
  if (googleButton) {
    googleButton.style.display = "none";
    obSocialButtons.disconnect();
  }
});
obSocialButtons.observe(document.body, { subtree: true, childList: true });
</custom-script>

In Piano ID profile in My Account:

<custom-script>
const obSocialButtons = new MutationObserver(() => {
  const googleButton = document.querySelector("[showifgoogleavailable]");
  if (googleButton) {
    googleButton.style.display = "none";
    obSocialButtons.disconnect();
  }
});
obSocialButtons.observe(document.body, { subtree: true, childList: true });
</custom-script>

Stage troubleshooting

Symptom

What to check

Social login is hidden everywhere.

Confirm your website experience is not being loaded with stage=app (or whichever value you're using for mobile).

Social login still shows in the app.

Confirm the app is actually passing stage=app when loading the Identity Management form, and that the template wraps the correct social-login markup inside the hideIfStage or showIfStage container.

Behavior differs between entry points.

If some entry points set stage and others don't, prefer hideIfStage for "default show on web, hide on app", and set a web default via tp.pianoId.init({ stage: 'web' }).

Removing Google login entirely for mobile

  • Use hideIfStage for the Google button per app/stage.

  • Inform users first - they will need to reset their password and choose another login method.

  • Apple ID as a replacement carries specific requirements - see Apple ID setup docs.

  • Reports of users logging in via Google may be available as a custom report (contact your account manager - may incur cost).

Apple ID conditional display (shadow DOM caveat)

Apple sign-in lives inside a Shadow DOM. Combine CSS media queries with Piano stage directives, or use JavaScript to manipulate the shadow root. Target the parent component / container class. Gate on environment (app vs web) and device.

Hiding social login in the iOS SDK

The iOS SDK does not directly support disabling specific providers. Workaround: inject JavaScript into the SDK webview to hide elements. Test thoroughly - this manipulates client-side behavior.

6. My Account: ensure Google + Apple components are present 

<!-- Google -->
<div showIfGoogleAvailable class="social-group clearfix">
  <div class="social-caption">
    <i class="social-icon google"></i> Google
  </div>
  <span showIfGoogleLinked class="social-linked"><t>Account connected</t></span>
  <div class="social-buttons">
    <google-unlink><t>Disconnect</t></google-unlink>
    <google-link><t>Connect account</t></google-link>
  </div>
</div>

<!-- Apple -->
<div showIfAppleAvailable class="social-group clearfix">
  <div class="social-caption">
    <i class="social-icon apple"></i> Apple
  </div>
  <span showIfAppleLinked class="social-linked"><t>Account connected</t></span>
  <div class="social-buttons">
    <apple-unlink><t>Disconnect</t></apple-unlink>
    <apple-link><t>Connect account</t></apple-link>
  </div>
</div>

Back up before editing. If Apple Connect markup is missing, reset to default to restore it.

7. OIDC icon in My Account

Insert the documented OIDC block into Piano ID profile in My Account. Visibility of specific OIDC options is not controlled inline; toggle each via the OIDC business configuration's Activate setting. See the OIDC configuration docs for the exact snippet and configuration-field reference.

8. OAuth login template

Same Piano ID login page template serves both OAuth and standard logins. Branch behavior with showIfOauth / hideIfOauth directives - useful for adjusting input fields, button sizes, and text only in the OAuth flow without affecting the modal login. Test before deploying.

9. Translate "Sign in with" and other social text

Translations for shared social phrases are propagated into Localization in the dashboard within a few business days.

10. Branded authentication message (whitelabeling)

To replace the default "Piano" branding shown during social-login authentication transitions, configure domain whitelabeling. See the whitelabeling docs for setup steps and requirements.

Last updated: