IDP Selector - React

👋 Getting Started

Install the package in your project using:

npm install @connectid-tools/idp-selector-react

Place the <CidButton> component where you want to render the ConnectID button in your page:

import { CidButton } from '@connectid-tools/idp-selector-react'

<CidButton 
  onProceed={(authorisationServerClicked: string, compatibilityWarnings: CompatibilityWarnings) => {
    /* do something here */
  }} 
  claims={['email']} 
  type="full process"
  showInfoContent
/>

Your page should render a widget similar to this 👇 And when the button is clicked a popup is displayed with Identity Providers.

⭐ CidButton Options

| option | description | type | required | default | |-----|-------------|------|----------|---------| | onProceed | Callback when Proceed button is clicked | (id: string, warnings: CompatibilityWarnings) => void | yes | - | | claims | Claims to display and request from IDP | Claim[] | yes | - | | requiredClaims | Subset of claims that must be supported | Claim[] | no (claims used if not set) | - | | label | Button label (avoid 'Sign Up') | 'Verify'|'Login'|'Sign Up'|'Age check'|'Sign up'|'Authenticate'|'Checkout' | no | 'Verify' | | size | Button size | 'regular'|'large' | no | 'regular' | | participantsUri | API URI for IDPs | string | no | 'https://data.directory.connectid.com.au/participants' | | certificationStatus | Filter IDPs by certification | 'Active'|'All' | no | 'Active' | | requiredCertifications | Filter by certifications | RequiredCertification[] | no | All certifications | | rpLogoUrl | RP logo URL (40x40) | URL | no | No logo | | rpDataSharingDescription | Explains how data is used | string | no | 'Your details will be shared with the current website.' | | enableManualVerification | Show manual verification option | boolean | no | false | | type | Widget type More | 'tiny'|'medium benefits'|'medium process'|'full benefits'|'full process' | no | undefined | | introTextType | Text above button More | 'verify-trust'|'verify-account'|'power'|'sign-up'|'bank-details-plus-personal-info'|'bank-details-only'|'verify-age' | yes if type is set | - | | fullProcessCollapsible | Collapse process items (for full process) | boolean | no | false | | showAllParticipants | Show all IDPs (testing) | boolean | no | false | | theme | Button theme | 'dark'|'light' | no | 'dark' | | logoLockupStyle | Logo theme | 'dark'|'light' | no | 'light' | | showInfoContent | Show text below button More | boolean | no | false | | onError | Called on error | () => void | no | () => {} | | showCompatibilityWarnings | Show compatibility popup More | boolean | no | false | | supportIncognito | Whether RP supports incognito mode or not (to be able to support incognito mode RP website cannot use browser storage like cookies, sessionStorage, localStorage, etc). | boolean | no | false |

CompatibilityWarnings type

export type CompatibilityWarnings = {
  mightFail: boolean
  isMobile: boolean
  isIncognito: boolean
  mobileOs: 'android' | 'ios' | 'other'
  browser: 'chrome' | 'samsung' | 'safari' | 'firefox' | 'other'
}

It returns information about the compatibility of the user's browser and device with the ConnectID flow. It includes:

• mightFail: Indicates if the flow might fail due to compatibility issues.
• isMobile: Indicates if the user is on a mobile device.
• isIncognito: Indicates if the user is browsing in incognito mode.
• mobileOs: The operating system of the mobile device, if applicable.
• browser: The browser being used by the user.

Here are the possible reasons why the flow might fail: | Scenario | Why it might fail | Suggested message | Incognito support | |---|---|---|---| | Mobile incognito (isMobile: true, isIncognito: true) | When a user is returned from the IDP app to the your RP site, the user will be returned in a new incognito tab. If your app relies on cookies, sessionStorage or localStorage it will not have access to any of the these values from the user's original tab. If your flow relies on them it will not be able to continue. | "You are using incognito mode – this may not work properly. Please switch to normal mode." | If supportIncognito is set to true, this flow will not fail. | | Android Samsung browser (isMobile: true, mobileOs: 'android', browser: 'samsung') | The Samsung browser default settings prevent the opening of App Links, meaning the IDP app may not open when the user is redirected. User may need to use an alternate browser on the mobile device, or a desktop device. | "It looks like you are using the Samsung browser which may not work properly with this provider. We suggest trying an alternate browser on your mobile, or using a desktop device." | Regardless of supportIncognito value, this flow might fail. |

certificationStatus values

• Active: only IDPs with active certification
• All: All IDPs

RequiredCertification type

// TDIF.IDP = TDIF Accreditation, Identity Provider
// 'Redirect.FAPI2' = Redirect, FAPI2 Adv. OP w/Private Key, PAR
type RequiredCertification = 'TDIF.IDP' | 'Redirect.FAPI2'

// filtering participants with TDIF.IDP
<CidButton requiredCertifications={['TDIF.IDP']} />

// filtering participants with TDIF.IDP and Redirect.FAPI2
// only participants with both certification will be returned
<CidButton requiredCertifications={['TDIF.IDP', 'Redirect.FAPI2']} />

Claim type

type Claim =
| 'given_name'
| 'middle_name'
| 'family_name'
| 'phone_number'
| 'email'
| 'address'
| 'birthdate'
| 'over18'
| 'over21'
| 'over25'
| 'over65'
| 'beneficiary_account_au'
| 'beneficiary_account_au_payid'
| 'beneficiary_account_international'
| 'cba_loyalty'

// e.g.
<CidButton claims={['email', 'given_name', 'birthdate']} />

More examples

// ConnectID button with `Continue with ConnectID` label, sandbox participants URI, RP logo and claims
<CidButton
  label="Continue"
  participantsUri="https://data.directory.sandbox.connectid.com.au/participants" rpLogoUrl="https://www.nasa.gov/sites/all/themes/custom/nasatwo/images/nasa-logo.svg"
  claims={['email', 'given_name', 'birthdate', 'phone_number', 'address']}
/>

// ConnectID button loading all Identity Providers (with and without certification)
<CidButton certificationStatus="All" claims={['birthdate', 'given_name']} />

⚙️ Widgets

Type option

Tiny

• When type is not set, only ConnectID button is displayed.
• When type is set to tiny, the ConnectID plus other elements below are displayed.

Medium benefits

• medium benefits type is a variation of the tiny type. It includes the same elements as the tiny type plus a list of benefits.

Medium process

• medium process type is a variation of the medium benefits type. The only difference is a list of steps (process) instead of a list of benefits.

Full benefits

• full benefits type is a variation of the medium benefits type. It displays a bigger list of benefits.

Full process

• full process type is a variation of the full benefits type. The only difference is a list of steps (process) instead of a list of benefits.

introTextType option

[!NOTE]

The intro text is a set of pre-defined paragraphs that you need to pick from. The text is not customizable. See below. The text that goes above the ConnectID button. The text is a set of pre-defined paragraphs that you need to pick from. The text is not customizable

All elements have classes that can be styled with CSS to match you brand identity. To style the intro text "You choose how to share ...", for example, you would use the following CSS:

.cid-idp-selector-intro-text {
  font-size: 13px;
  color: blue;
}

verify-trust: ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.
verify-account: Verify your identity through an organisation you already have an account with, like your bank.
power: ConnectID gives you the power to choose how you share your details, using organisations you already trust. sign-up: ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.
bank-details-plus-personal-info: Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.
bank-details-only: Provide your preferred bank account details in a secure and simple way, without oversharing information. verify-age: Verify your age through an organisation you already have an account with, like your bank.

infoContent option

This is an optional field in addition with the widgets below the ConnectID button to either display or not display the information content.

showCompatibilityWarnings option

If set to true, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow.

logoLockup option

The SVG image below the ConnectID button has either option dark or light mode. By default it set as light mode.

[!NOTE]

The light mode logo has a transparent background.

Light mode:

Dark mode:

🚀 Release Notes

6.12.3 (Nov 21, 2025)

• vite as devDependency.

6.12.2 (Nov 11, 2025)

• Update verify manually copy.

6.12.1 (Sep 1, 2025)

• full process with detail/summary.
• full process type as list(ul/li).

6.12.1-alpha.2 (Aug 25, 2025)

• full process with detail/summary.

6.12.1-alpha.1 (Aug 25, 2025)

• full process type as list(ul/li).

6.12.0 (Aug 14, 2025)

• Update cba_loyalty claim label.

6.12.0-alpha.1 (Aug 7, 2025)

• cba_loyalty claim.

6.11.0 (Aug 5, 2025)

• Handle Windows high contrast (HCM).
• Handle no claims (authentication).
• Replace participant role="img" with role="button".
• Fix popup tabbing.
• Use detectincognitojs npm package.
• Add file extension to output js files.

6.11.0-alpha.5 (Aug 5, 2025)

• Handle Windows high contrast (HCM).

6.11.0-alpha.4 (Aug 1, 2025)

• Handle no claims (authentication).

6.11.0-alpha.3 (Jul 29, 2025)

• Replace participant role="img" with role="button".
• Fix popup tabbing.

6.11.0-alpha.2 (Jul 23, 2025)

• Use detectincognitojs npm package.

6.11.0-alpha.1 (Jul 22, 2025)

• Add file extension to output js files.

6.10.0 (Jul 22, 2025)

• Remove Available on from IDP logo list image.
• Add role="img" to participant list item.
• Show border on ConnectID button when on focus.
• medium process as list.
• Fix headings.
• Set empty alt attribute for IDP logos.
• Fix bank logos alt attribute.
• Add disableAnalytics option.
• Fix analytics double loading.
• Add test support for Samsung and Chrome browsers.
• Add supportIncognito option.
• Add showCompatibilityWarnings option.
• Rename compabilityWarnings to compatibilityWarnings.
• Add compabilityWarnings to onProceed callback.

6.10.0-alpha.14 (Jul 18, 2025)

• Compatibility warning popup adjustments.

6.10.0-alpha.13 (Jul 18, 2025)

• Remove Available on from IDP logo list image.

6.10.0-alpha.12 (Jul 17, 2025)

• Add role="img" to participant list item.

6.10.0-alpha.11 (Jul 17, 2025)

• Show border on ConnectID button when on focus.

6.10.0-alpha.10 (Jul 15, 2025)

• medium process as list.

6.10.0-alpha.9 (Jul 14, 2025)

• Fix headings.

6.10.0-alpha.8 (Jun 27, 2025)

• Set empty alt attribute for IDP logos.

6.10.0-alpha.7 (Jun 27, 2025)

• Fix bank logos alt attribute.

6.10.0-alpha.6 (Jun 26, 2025)

• Add disableAnalytics option.

6.10.0-alpha.5 (Jun 25, 2025)

• Fix analytics double loading.

6.10.0-alpha.4 (Jun 20, 2025)

• Add test support for Samsung and Chrome browsers.

6.10.0-alpha.3 (Jun 20, 2025)

• Add supportIncognito option.

6.10.0-alpha.2 (Jun 17, 2025)

• Add showCompatibilityWarnings option.

6.10.0-alpha.1 (Jun 12, 2025)

• Rename compabilityWarnings to compatibilityWarnings.

6.10.0-alpha.0 (Jun 10, 2025)

• Add compabilityWarnings to onProceed callback.

6.9.0 (Jun 5, 2025)

• Add new introTextType option: verify-age.

6.8.0 (May 7, 2025)

• Show message in the IDP list when any IDP with ProfileType=Redirect and ProfileVariant=FAPI2 Adv. OP w/Private Key, PAR is not being displayed.

6.7.0 (May 5, 2025)

• Detect incognito.

6.6.0 (May 5, 2025)

• Fix benefits list (missing key).
• Update verify manually copy.
• Show 8 IDPs on mobile view without needing to scroll.

6.5.2 (Apr 30, 2025)

• Fix introTextType in README.

6.5.1 (Apr 29, 2025)

• Add alt attribute to logo lockup image.

6.5.0 (Apr 28, 2025)

• Add new introTextType options: bank-details-only and bank-details-plus-personal-info.

6.4.1 (Feb 24, 2025)

• Update README.
• Add license file to bundle.

6.4.0 (Feb 12, 2025)

• Add new introTextType option.

6.3.0 (Feb 3, 2025)

• Support over16 claim.

6.2.2 (Jan 22, 2025)

• Fix icon and text alignment.

6.2.1 (Jan 9, 2025)

• Update README example using type option.

6.2.0 (Dec 11, 2024)

• Added showInfoContent option.
• Removed name claim field.

6.1.1 (Dec 5, 2024)

• Fix screen reader focus for greyed out tile.

6.1.0 (Dec 2, 2024)

• Widget release for tiny, medium and full sizes options.
• Add logoLockupStyle option.

6.0.0 (Nov 27, 2024)

• Breaking change:
  • Updated both intro text and types.
• Updated URL link for ConnectID use case.
• Updated full process type.

5.5.2 (Nov 20, 2024)

• Update IDP container to show 4.5 tiles.

5.5.1 (Nov 5, 2024)

• Add charcoal colour to button info.

5.5.0 (Oct 10, 2024)

• Add fullProcessCollapsible option.

5.4.1 (Oct 10, 2024)

• Fix tiny spacing.

5.4.0 (Oct 9, 2024)

• Add full process type.

5.3.0 (Oct 8, 2024)

• Add full benefits type.

5.2.1 (Oct 8, 2024)

• Replace how does it work with learn more on medium process option.

5.2.0 (Oct 4, 2024)

• Add medium process type.

5.1.0 (Oct 3, 2024)

• Add medium benefits type.
• Fix info icon shrinking.

5.0.1 (Oct 3, 2024)

• Use SVG info icon.
• Fix margins.

5.0.0 (Oct 2, 2024)

• Add type option.
• Add introText option.
• Breaking change:
  • showIdpLogoList option was removed. Use type instead.

4.13.1 (Sep 9, 2024)

• Take into account certification start date when filtering by certifications.

4.13.0 (Sep 5, 2024)

• Add showIdpLogoList option.

4.12.3 (Sep 4, 2024)

• Update beneficiary_account_au claim label.

4.12.2 (Sep 4, 2024)

• Change ConnectID button font weight.

4.12.1 (Aug 2, 2024)

• Replace jest with Node native test runner.

4.12.0 (Aug 2, 2024)

• Add Authenticate, Sign up, Checkout, Login button labels.

4.11.1 (Jul 23, 2024)

• Set font color on IDP name, "What's ConnectID" section and manual verification link.

4.11.0 (Jul 12, 2024)

• Announce to screen readers when there is an error loading participants.

4.10.0 (Jul 9, 2024)

• Announce to screen readers when loading participants is displayed.

4.9.5 (Jul 9, 2024)

• Fix Details requested losing focus on Enter.

4.9.4 (Jul 8, 2024)

• Manual provider not working on keyboard Enter key.

4.9.3 (Jun 18, 2024)

• rp_sub_brand is set with window.location.hostname

4.9.2 (Jun 5, 2024)

• Change participants loader from skeleton to text plus spinner.

4.9.1 (May 29, 2024)

• Fix error message in mobile view.

4.9.0 (May 22, 2024)

• Display ConnectID button while participants is loaded (rather than wait participants to show the button).
• Fix claims being centered on certain screen sizes.
• Infobox size updated to be dynamic.

4.8.8 (May 20, 2024)

• Improve confirm identity button contrast.

4.8.7 (May 20, 2024)

• Make popup dot animation finite.

4.8.6 (May 16, 2024)

• Trap focus inside popup.

4.8.5 (May 15, 2024)

• Make Details requested accessible by keyboard.

4.8.4 (May 14, 2024)

• Use li for lists.

4.8.3 (May 13, 2024)

• Change all tabindex to 0.

4.8.2 (May 13, 2024)

• Add <title> and role to ConnectID logo.

4.8.1 (May 13, 2024)

• Add aria-label to popup close button.

4.8.0 (Mar 12, 2023)

• Add onError callback option.
• Set ConnectID button type="button".

4.7.1 (Jan 29, 2024)

• Send url origin instead of full url when posting rp_sub_brand event.

4.7.0 (Jan 11, 2023)

• Send rp_sub_brand, idp_name, source and link_url event properties.

4.6.0 (Dec 12, 2023)

• Add Link to External page clicked event.

4.5.2 (Dec 11, 2023)

• Rename existing analytics event names.

4.5.1 (Nov 1, 2023)

• Fix button label responsiveness.

4.5.0 (Oct 26, 2023)

• Add requiredClaims option so that RPs can specify the minimum set of claims an IDP must support to be considered as a candidate to use for the flow.

4.4.3 (Oct 20, 2023)

• Manual verification button label is no longer bold on mobile.

4.4.2 (Oct 19, 2023)

• Popup dots animation.

4.4.1 (Oct 10, 2023)

• Display claims in two columns on mobile.

4.4.0 (Aug 9, 2023)

• Add analytics.

4.3.0 (Aug 4, 2023)

• Add button size option.

4.2.4 (Aug 1, 2023)

• Update claim labels.

4.2.3 (Jul 31, 2023)

• Update ConnectID button styles.

4.2.2 (Jun 29, 2023)

• Update manual verification copy.

4.2.1 (Jun 29, 2023)

• Update What is ConnectID copy.

4.2.0 (Jun 22, 2023)

• Add theme option.

4.1.0 (May 22, 2023)

• showAllParticipants option.

4.0.2 (May 22, 2023)

• Fix filter by device.

4.0.1 (May 15, 2023)

• Fix filter by claims.

4.0.0 (May 11, 2023)

• Breaking change:
  • Filter IDPs that supports all claims option.
  • claims is required.

3.0.0 (May 10, 2023)

• Breaking change:
  • certificationStatus="Active" now returns only authorisation servers that have at least one certification with ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR' (needs to be Status === 'Certified' and CertificationExpirationDate not expired as well).
  • Removed Inactive from certificationStatus.
• Filter authorisation servers by certification channel (app and web).

2.1.1 (Apr 28, 2023)

• Compile to ES6.

2.1.0 (Apr 26, 2023)

• Handle only one manual IDP use case.

2.0.0 (Mar 30, 2023)

• Update claims:
  • beneficiary_account_au replaces beneficiary_account.
  • beneficiary_account_au_payid replaces pay_id.
  • New claim beneficiary_account_international.
• Fix claims toggle on mobile.

1.7.0 (Mar 14, 2023)

• Add claims: 'over18', 'over21', 'over25', 'over65', 'beneficiary_account', 'pay_id'.

1.6.5 (Mar 13, 2023)

• Active certificationStatus will only return Certified authorisation servers. Previously, it was returning Self-Certified as well.

1.6.4 (Feb 28, 2023)

• Fix IDP container height and add scrollbar.

1.6.3 (Feb 21, 2023)

• Change IDP error message layout.

1.6.2 (Feb 21, 2023)

• auto-fit claims on mobile (482px width).
• Reduce margin between details and providers on mobile (482px width).
• Increase font size of providers on mobile (482px width).
• Center logos, title and description on mobile (482px width).

1.6.1 (Feb 20, 2023)

• Fix manual identity provider ProfileVariant (Fallback Identity Service Provider).

1.6.0 (Feb 20, 2023)

• Roobert font.

1.5.3 (Feb 17, 2023)

• Fix What is ConnectID section layout.
• Fix RP logo size on mobile (482px width).

1.5.2 (Feb 9, 2023)

• Wrap claims and IDPs into white box on mobile (482px width).

1.5.1 (Feb 7, 2023)

• Manual verification on mobile (482px width).

1.5.0 (Feb 7, 2023)

• Collapse claims on mobile (482px width).
• Smaller fonts for titles on mobile (482px width).

1.4.2 (Feb 3, 2023)

• Sort claims: name, given_name, middle_name, family_name, birthdate, email, address, phone_number.

1.4.1 (Feb 2, 2023)

• Minor layout changes.

1.4.0 (Feb 2, 2023)

• Add enableManualVerification option. See CidButton Options.

1.3.2 (Jan 30, 2023)

• Fix popup position.

1.3.1 (Jan 25, 2023)

• Fix claims width.

1.3.0 (Jan 25, 2023)

• New participant layout.
• Remove Cancel and Proceed buttons.

1.2.0 (Jan 25, 2023)

• Add What is ConnectID? section.
• Remove My bank is not listed.

1.1.0 (Jan 24, 2023)

• Add popup close button.
• Fix claims list on small screens.

1.0.0 (Jan 24, 2023)

• New layout.
• New prop rpDataSharingDescription. See CidButton Options.
• Breaking changes:
  • new button label values.

type CidButtonLabel = 'Verify' | 'Sign Up' | 'Age check'

0.4.5 (Jan 6, 2023)

• Starting point.

Back to top