@connectid-tools/idp-selector-react 6.8.0 → 6.10.0-alpha.0

package/CidButton.d.ts

@@ -1,8 +1,8 @@
 import './CidButton.css';
 import './global.css';
-import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, IntroTextType, LogoMode, RequiredCertification } from './types';
+import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompabilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
 type CidButtonProps = {
-    onProceed: (authorisationServerId: string) => void;
+    onProceed: (authorisationServerId: string, compabilityWarnings: CompabilityWarnings) => void;
     claims: Claim[];
     requiredClaims?: Claim[];
     rpLogoUrl?: string;
@@ -21,6 +21,10 @@ type CidButtonProps = {
     logoLockupStyle?: LogoMode;
     showInfoContent?: boolean;
     onError?: (error: string) => void;
+    forceMobile?: boolean;
+    forceIos?: boolean;
+    forceAndroid?: boolean;
+    forceIncognito?: boolean;
 };
 export declare const CidButton: React.FC<CidButtonProps>;
 export {};

package/CidButton.js

@@ -27,7 +27,14 @@ import './global.css';
 import { getCurrentUrlOrigin } from './navigator';
 import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
 import detectIncognito from './incognito';
-export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = 'Verify', size = 'regular', type, introTextType, fullProcessCollapsible = false, participantsUri = 'https://data.directory.connectid.com.au/participants', certificationStatus = 'Active', rpDataSharingDescription = 'Your details will be shared with the current website.', enableManualVerification = false, showAllParticipants = false, theme = 'dark', logoLockupStyle = 'light', showInfoContent = false, onError = () => { }, }) => {
+import { getDeviceType, isAndroid, isChromeBrowser, isIos, isSamsungBrowser } from './userAgent';
+import { hasCertification } from './certification';
+import { getCompability } from './compability';
+export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = 'Verify', size = 'regular', type, introTextType, fullProcessCollapsible = false, participantsUri = 'https://data.directory.connectid.com.au/participants', certificationStatus = 'Active', rpDataSharingDescription = 'Your details will be shared with the current website.', enableManualVerification = false, showAllParticipants = false, theme = 'dark', logoLockupStyle = 'light', showInfoContent = false, onError = () => { }, forceMobile = false, // only for testing purposes
+forceIos = false, // only for testing purposes
+forceAndroid = false, // only for testing purposes
+forceIncognito = false, // only for testing purposes
+ }) => {
     const { data: participants, error, isLoading, } = useSWR(participantsUri, () => __awaiter(void 0, void 0, void 0, function* () {
         const response = yield fetch(participantsUri);
         if (!response.ok)
@@ -112,10 +119,21 @@ export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requir
         });
         track();
     }, []);
-    const handleOnProceed = (authorisationServerId, authorisationServerName) => {
+    const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
         analytics === null || analytics === void 0 ? void 0 : analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
         setShowPopup(false);
-        onProceed(authorisationServerId);
+        const isMobile = forceMobile || getDeviceType() === 'mobile';
+        const idpHasAppCertification = hasCertification(authorisationServerCertifications, 'Channel', 'app');
+        const compability = getCompability({
+            idpHasAppCertification,
+            isMobile,
+            isIncognito: forceIncognito || !!isIncognito,
+            isAndroid: forceAndroid || isAndroid(),
+            isIos: forceIos || isIos(),
+            isSamsungBrowser: isSamsungBrowser(),
+            isChromeBrowser: isChromeBrowser(),
+        });
+        onProceed(authorisationServerId, compability);
     };
     const handleButtonClick = () => {
         setShowPopup(true);

package/IntroText.js

@@ -5,10 +5,11 @@ import { ThemeContext } from './ThemeContext';
 const introTextContent = {
     '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.',
+    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.',
 };
 export const IntroText = ({ type }) => {
     const theme = useContext(ThemeContext);

package/Popup.d.ts

@@ -1,8 +1,8 @@
 import './global.css';
 import './Popup.css';
-import { CertificationStatus, Claim, Participant, RequiredCertification } from './types';
+import { AuthorisationServerCertification, CertificationStatus, Claim, Participant, RequiredCertification } from './types';
 type PopupProps = {
-    onProceed: (authorisationServerId: string, authorisationServerName: string) => void;
+    onProceed: (authorisationServerId: string, authorisationServerName: string, authorisationServerCertifications: AuthorisationServerCertification[]) => void;
     onCancel: () => void;
     onError?: (error: string) => void;
     claims: Claim[];

package/Popup.js

@@ -145,7 +145,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
         });
         const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
         const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
-        return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("p", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Or, use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
+        return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("p", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Or, use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
     };
     return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", ' ', _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), ' ', "to find out more."] })] }) })] }), document.querySelector('body'));
 };

package/README.md

@@ -14,7 +14,7 @@ Place the `<CidButton>` component where you want to render the ConnectID button
 import { CidButton } from '@connectid-tools/idp-selector-react'
 
 <CidButton 
-  onProceed={(authorisationServerClicked: string) => {
+  onProceed={(authorisationServerClicked: string, compabilityWarnings: CompabilityWarnings) => {
     /* do something here */
   }} 
   claims={['email']} 
@@ -31,7 +31,7 @@ Your page should render a widget similar to this 👇 And when the button is cli
 
 | key                      | description                                                                                                                                                                                                                                                                                                                                                    | type                                                                                         | required                                          | default                                                 |
 | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
-| onProceed                | Callback to be called when IDP Selector `Proceed` button is clicked                                                                                                                                                                                                                                                                                            | (authorisationServerId: string) => void                                                      | yes                                               | -                                                       |
+| onProceed                | Callback to be called when IDP Selector `Proceed` button is clicked                                                                                                                                                                                                                                                                                            | (authorisationServerId: string, compabilityWarnings: CompabilityWarnings) => void                                                      | yes                                               | -                                                       |
 | claims                   | List of claims to be displayed to the user and will be requested from IDP to be shared. If `requiredClaims` not supplied then only IDPs that support all listed `claims` will be displayed to the user.                                                                                                                                                        | Claim[]                                                                                      | yes                                               | -                                                       |
 | requiredClaims           | List of claims to be supported by IDPs. Must be a subset of `claims`. Where an RP can successfully complete their use case without all claims specified in `claims`, they can specify `requiredClaims` with the minimum list of claims needed, which will then be used for filtering and may result in additional IDP options being displayed to the customer. | Claim[]                                                                                      | no (`claims` will be used if no `requiredClaims`) | -                                                       |
 | label                    | The button label. Do not use 'Sign Up'. It is deprecated.                                                                                                                                                                                                                                                                                                      | 'Verify' \| 'Login' \| 'Sign Up' \| 'Age check' \| 'Sign up' \| 'Authenticate' \| 'Checkout' | no                                                | 'Verify'                                                |
@@ -43,7 +43,7 @@ Your page should render a widget similar to this 👇 And when the button is cli
 | rpDataSharingDescription | The text that goes under the popup title explaining how shared data will be used.                                                                                                                                                                                                                                                                              | string                                                                                       | no                                                | 'Your details will be shared with the current website.' |
 | enableManualVerification | Whether an option to verify identity manually is displayed or not.                                                                                                                                                                                                                                                                                             | boolean                                                                                      | no                                                | false                                                   |
 | type                     | The type of ConnectID button widget. [More details here](#type)                                                                                                                                                                                                                                                                                                | 'tiny' \| 'medium benefits' \| 'medium process' \| 'full benefits' \| 'full process'         | no                                                | undefined (shows only ConnectID button).                |
-| introTextType                | The text that goes above the ConnectID button. [More details here](#introTextType)                                                                                                                                                                                                                                                                                 | 'verify-trust' \| 'verify-account' \| 'power' \| 'sign-up' \| 'bank-details-plus-personal-info' \| 'bank-details-only' | yes when `type` is set.                     | -                                                 |
+| introTextType                | The text that goes above the ConnectID button. [More details here](#introTextType)                                                                                                                                                                                                                                                                                 | 'verify-trust' \| 'verify-account' \| 'power' \| 'sign-up' \| 'bank-details-plus-personal-info' \| 'bank-details-only' \| 'verify-age' | yes when `type` is set.                     | -                                                 |
 | fullProcessCollapsible   | Whether process items are collapsible or not. Only available when `type` is `full process`.                                                                                                                                                                                                                                                                    | boolean                                                                                      | no                                                | false                                                   |
 | showAllParticipants      | Show all participants regardless of any other option. **_This should only be used for testing_**.                                                                                                                                                                                                                                                              | boolean                                                                                      | no                                                | false                                                   |
 | theme                    | ConnectID button theme.                                                                                                                                                                                                                                                                                                                                        | 'dark' \| 'light'                                                                            | no                                                | 'dark'                                                  |
@@ -51,6 +51,24 @@ Your page should render a widget similar to this 👇 And when the button is cli
 | showInfoContent                  | The text that goes below the ConnectID button [More details here](#infoContent)                                                                                                                                                                                                                                               | boolean                                                                            | false                                                | false                                 |
 | onError                  | Callback to be called when there is an error fetching participants or invalid options.                                                                                                                                                                                                                                                                         | () => void                                                                                   | no                                                | () => {} // do nothing                                  |
 
+#### CompabilityWarnings type
+
+```typescript
+export type CompabilityWarnings = {
+  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.
+
 #### certificationStatus values
 
 - `Active`: only IDPs with active certification
@@ -188,6 +206,7 @@ All elements have classes that can be styled with CSS to match you brand identit
 `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.
 </details>
 
 ### <a name="infoContent"></a>infoContent option
@@ -222,6 +241,12 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 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.
 

package/certification.d.ts

@@ -1,8 +1,9 @@
-import { AuthorisationServer, CertificationStatus, Claim, Device, RequiredCertification } from './types';
+import { AuthorisationServer, AuthorisationServerCertification, CertificationProfileType, CertificationProfileVariant, CertificationStatus, Claim, Device, RequiredCertification } from './types';
 export declare const filterAuthorisationServers: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean, certificationStatus: CertificationStatus, claims: Claim[], requiredCertifications?: RequiredCertification[]) => AuthorisationServer[];
 export declare const getManualAuthorisationServer: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean) => AuthorisationServer | undefined;
 export declare const removeExpiredOrNotStartedCertifications: (authorisationServers: AuthorisationServer[]) => AuthorisationServer[];
 export declare const filterAuthorisationServerByClaims: (authorisationServers: AuthorisationServer[], claims: Claim[]) => AuthorisationServer[];
 export declare const filterAuthorisationServerByCertification: (authorisationServers: AuthorisationServer[], status: CertificationStatus, requiredCertifications?: RequiredCertification[]) => AuthorisationServer[];
 export declare const filterAuthorisationServerByDevice: (authorisationServers: AuthorisationServer[], deviceType: Device) => AuthorisationServer[];
+export declare const hasCertification: (certifications: AuthorisationServerCertification[], certificationType: CertificationProfileType, certificationVariant: CertificationProfileVariant) => boolean;
 export declare const hasStarted: (startDateStr: string) => boolean;

package/certification.js

@@ -82,6 +82,9 @@ export const filterAuthorisationServerByDevice = (authorisationServers, deviceTy
     const onlyAppAuthorisationServersIds = onlyAppAuthorisationServers.map((authorisationServer) => authorisationServer.AuthorisationServerId);
     return authorisationServers.filter((authorisationServer) => !onlyAppAuthorisationServersIds.includes(authorisationServer.AuthorisationServerId));
 };
+export const hasCertification = (certifications, certificationType, certificationVariant) => {
+    return certifications.some(({ ProfileType, ProfileVariant }) => ProfileType === certificationType && ProfileVariant === certificationVariant);
+};
 const isExpired = (expiryDateStr) => {
     const expiryDate = parseCertificationDate(expiryDateStr);
     expiryDate.setHours(23);

package/certification.test.js

@@ -1,6 +1,6 @@
 import assert from 'node:assert';
 import { describe, it } from 'node:test';
-import { filterAuthorisationServerByClaims, filterAuthorisationServerByDevice, filterAuthorisationServers, getManualAuthorisationServer, removeExpiredOrNotStartedCertifications, } from './certification';
+import { filterAuthorisationServerByClaims, filterAuthorisationServerByDevice, filterAuthorisationServers, getManualAuthorisationServer, hasCertification, removeExpiredOrNotStartedCertifications, } from './certification';
 describe('filterAuthorisationServers', () => {
     it('should return all authorisation servers if showAllParticipants is true regardless of certification status, required certifications and claims', () => {
         const authorisationServers = [
@@ -393,6 +393,35 @@ describe('filterAuthorisationServerByDevice', () => {
                 ],
             },
         ];
-        assert.deepStrictEqual(filterAuthorisationServerByDevice(authorisationServers, 'desktop'), [authorisationServers[1], authorisationServers[2]]);
+        assert.deepStrictEqual(filterAuthorisationServerByDevice(authorisationServers, 'desktop'), [
+            authorisationServers[1],
+            authorisationServers[2],
+        ]);
+    });
+});
+describe('hasCertification', () => {
+    it('should return true if certifications have channel app', () => {
+        const certifications = [
+            {
+                CertificationStartDate: '10/04/1900',
+                CertificationExpirationDate: '10/04/2099',
+                Status: 'Certified',
+                ProfileVariant: 'app',
+                ProfileType: 'Channel',
+            },
+        ];
+        assert.ok(hasCertification(certifications, 'Channel', 'app') === true);
+    });
+    it('should return false if certifications do not have channel app', () => {
+        const certifications = [
+            {
+                CertificationStartDate: '10/04/1900',
+                CertificationExpirationDate: '10/04/2099',
+                Status: 'Certified',
+                ProfileVariant: 'web',
+                ProfileType: 'Channel',
+            },
+        ];
+        assert.ok(hasCertification(certifications, 'Channel', 'app') === false);
     });
 });

package/compability.d.ts

@@ -0,0 +1,3 @@
+import { CompabilityEnvironment, CompabilityWarnings } from './types';
+export declare const getCompability: (env: CompabilityEnvironment) => CompabilityWarnings;
+export declare const getMightFail: (env: Pick<CompabilityEnvironment, "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "isSamsungBrowser" | "isChromeBrowser">) => boolean;

package/compability.js

@@ -0,0 +1,36 @@
+import { getBrowserName } from './userAgent';
+export const getCompability = (env) => {
+    const { idpHasAppCertification, isAndroid, isChromeBrowser, isIncognito, isMobile, isSamsungBrowser, isIos } = env;
+    const mightFail = getMightFail({
+        idpHasAppCertification,
+        isMobile,
+        isIncognito,
+        isAndroid,
+        isIos,
+        isSamsungBrowser,
+        isChromeBrowser,
+    });
+    return {
+        isMobile,
+        isIncognito,
+        mobileOs: isAndroid ? 'android' : isIos ? 'ios' : 'other',
+        browser: getBrowserName(),
+        mightFail,
+    };
+};
+export const getMightFail = (env) => {
+    const { idpHasAppCertification, isMobile, isIncognito, isAndroid, isChromeBrowser, isSamsungBrowser, isIos } = env;
+    if (!idpHasAppCertification || !isMobile) {
+        return false;
+    }
+    if (isIncognito && isAndroid && isChromeBrowser) {
+        return true;
+    }
+    if (isAndroid && isSamsungBrowser) {
+        return true;
+    }
+    if (isIncognito && isIos) {
+        return true;
+    }
+    return false;
+};

package/compability.test.d.ts

@@ -0,0 +1 @@
+export {};

package/compability.test.js

@@ -0,0 +1,97 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { getCompability, getMightFail } from './compability';
+describe('getCompability', () => {
+    it('should return compability warnings', () => {
+        const compability = getCompability({
+            idpHasAppCertification: true,
+            isMobile: true,
+            isIncognito: false,
+            isAndroid: false,
+            isIos: false,
+            isSamsungBrowser: false,
+            isChromeBrowser: false,
+        });
+        assert.deepStrictEqual(compability, {
+            isMobile: true,
+            isIncognito: false,
+            mobileOs: 'other',
+            browser: 'other',
+            mightFail: false
+        });
+    });
+});
+describe('getMightFail', () => {
+    it('should return false when idpHasAppCertification is false', () => {
+        const mightFail = getMightFail({
+            idpHasAppCertification: false,
+            isMobile: true,
+            isIncognito: false,
+            isAndroid: false,
+            isIos: false,
+            isSamsungBrowser: false,
+            isChromeBrowser: false,
+        });
+        assert.ok(mightFail === false);
+    });
+    it('should return false when isMobile is false', () => {
+        const mightFail = getMightFail({
+            idpHasAppCertification: true,
+            isMobile: false,
+            isIncognito: false,
+            isAndroid: false,
+            isIos: false,
+            isSamsungBrowser: false,
+            isChromeBrowser: false,
+        });
+        assert.ok(mightFail === false);
+    });
+    it('should return true when isIncognito is true, isAndroid is true, and isChromeBrowser is true', () => {
+        const mightFail = getMightFail({
+            idpHasAppCertification: true,
+            isMobile: true,
+            isIncognito: true,
+            isAndroid: true,
+            isIos: false,
+            isSamsungBrowser: false,
+            isChromeBrowser: true,
+        });
+        assert.ok(mightFail === true);
+    });
+    it('should return true when isAndroid is true and isSamsungBrowser is true', () => {
+        const mightFail = getMightFail({
+            idpHasAppCertification: true,
+            isMobile: true,
+            isIncognito: false,
+            isAndroid: true,
+            isIos: false,
+            isSamsungBrowser: true,
+            isChromeBrowser: false,
+        });
+        assert.ok(mightFail === true);
+    });
+    it('should return true when isIncognito is true and isIos is true', () => {
+        const mightFail = getMightFail({
+            idpHasAppCertification: true,
+            isMobile: true,
+            isIncognito: true,
+            isAndroid: false,
+            isIos: true,
+            isSamsungBrowser: false,
+            isChromeBrowser: false,
+        });
+        assert.ok(mightFail === true);
+    });
+    it('should return false when none of the conditions are met', () => {
+        const mightFail = getMightFail({
+            idpHasAppCertification: true,
+            isMobile: true,
+            isIncognito: false,
+            isAndroid: false,
+            isIos: false,
+            isSamsungBrowser: false,
+            isChromeBrowser: false,
+        });
+        assert.ok(mightFail === false);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.8.0",
+  "version": "6.10.0-alpha.0",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,21 +26,21 @@
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@types/node": "^22.15.14",
-    "@types/react": "^18.3.21",
+    "@types/node": "^22.15.31",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "cypress": "^13.17.0",
+    "cypress": "^14.4.1",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "replace-in-file": "^8.3.0",
     "tsx": "^4.19.4",
-    "typescript": "^5.8.3",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3"
   },
   "dependencies": {
     "react-responsive": "^10.0.1",
-    "swr": "^2.3.3"
+    "swr": "^2.3.3",
+    "vite": "^6.3.5"
   }
 }

package/types.d.ts

@@ -5,7 +5,7 @@ export type CertificationProfileType = 'TDIF Accreditation' | 'Redirect' | 'Chan
 export type CertificationProfileVariant = 'FAPI2 Adv. OP w/Private Key, PAR' | 'Identity Provider' | 'Fallback Identity Service Provider' | 'web' | 'app' | 'name' | Claim;
 export type CertificationStatus = 'Active' | 'All';
 export type RequiredCertification = 'TDIF.IDP' | 'Redirect.FAPI2';
-type AuthorisationServerCertification = {
+export type AuthorisationServerCertification = {
     Status: 'Certified' | 'Self-Certified' | 'Awaiting Certification' | 'Deprecated' | 'Rejected';
     ProfileType: CertificationProfileType;
     ProfileVariant: CertificationProfileVariant;
@@ -28,7 +28,7 @@ export type AnalyticsEvent = 'ConnectID Button Displayed' | 'ConnectID Button Cl
 export type Analytics = {
     track: (event: AnalyticsEvent, data?: Record<string, unknown>) => void;
 };
-export type IntroTextType = 'verify-trust' | 'verify-account' | 'power' | 'sign-up' | 'bank-details-plus-personal-info' | 'bank-details-only';
+export type IntroTextType = 'verify-trust' | 'verify-account' | 'power' | 'sign-up' | 'bank-details-plus-personal-info' | 'bank-details-only' | 'verify-age';
 export type CidButtonType = 'tiny' | 'medium benefits' | 'medium process' | 'full benefits' | 'full process';
 export type CidButtonTypeConfig = {
     hasIntro: boolean;
@@ -38,4 +38,19 @@ export type CidButtonTypeConfig = {
     hasHowItWorks: boolean;
     hasLearnMore: boolean;
 };
-export {};
+export type CompabilityEnvironment = {
+    isMobile: boolean;
+    isIncognito: boolean;
+    idpHasAppCertification: boolean;
+    isAndroid: boolean;
+    isIos: boolean;
+    isSamsungBrowser: boolean;
+    isChromeBrowser: boolean;
+};
+export type CompabilityWarnings = {
+    mightFail: boolean;
+    isMobile: boolean;
+    isIncognito: boolean;
+    mobileOs: 'android' | 'ios' | 'other';
+    browser: 'chrome' | 'samsung' | 'safari' | 'firefox' | 'other';
+};

package/userAgent.d.ts

@@ -1,2 +1,7 @@
 import { Device } from './types';
 export declare const getDeviceType: () => Device;
+export declare const isAndroid: () => boolean;
+export declare const isIos: () => boolean;
+export declare const isChromeBrowser: () => boolean;
+export declare const isSamsungBrowser: () => boolean;
+export declare const getBrowserName: () => "other" | "chrome" | "samsung" | "safari" | "firefox";

package/userAgent.js

@@ -8,3 +8,23 @@ export const getDeviceType = () => {
     }
     return 'desktop';
 };
+export const isAndroid = () => /Android/i.test(navigator.userAgent);
+export const isIos = () => /iPhone|iPad|iPod/i.test(navigator.userAgent);
+export const isChromeBrowser = () => /Chrome/.test(navigator.userAgent) && !/Edg|OPR|Brave/.test(navigator.userAgent);
+export const isSamsungBrowser = () => /SamsungBrowser/.test(navigator.userAgent);
+export const getBrowserName = () => {
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes('samsungbrowser')) {
+        return 'samsung';
+    }
+    if (ua.includes('firefox')) {
+        return 'firefox';
+    }
+    if (ua.includes('safari') && !ua.includes('chrome')) {
+        return 'safari';
+    }
+    if (ua.includes('chrome') || ua.includes('crios')) {
+        return 'chrome';
+    }
+    return 'other';
+};