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

package/CidButton.d.ts

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

package/CidButton.js

@@ -29,8 +29,8 @@ import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
 import detectIncognito from './incognito';
 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
+import { getCompatibility } from './compatibility';
+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 = () => { }, showCompatibilityWarnings = false, forceMobile = false, // only for testing purposes
 forceIos = false, // only for testing purposes
 forceAndroid = false, // only for testing purposes
 forceIncognito = false, // only for testing purposes
@@ -119,12 +119,18 @@ forceIncognito = false, // only for testing purposes
         });
         track();
     }, []);
+    const getCompatibilityConfirmText = (compatibilityWarnings) => {
+        if (compatibilityWarnings.mobileOs === 'android' && compatibilityWarnings.browser === 'samsung') {
+            return 'It looks like you are using Samsung Browser. This generally will not work - we suggest using Chrome and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
+        }
+        return 'It looks like you are in incognito mode. This generally will not work - we suggest switching out of incognito mode and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
+    };
     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);
         const isMobile = forceMobile || getDeviceType() === 'mobile';
         const idpHasAppCertification = hasCertification(authorisationServerCertifications, 'Channel', 'app');
-        const compability = getCompability({
+        const compatibility = getCompatibility({
             idpHasAppCertification,
             isMobile,
             isIncognito: forceIncognito || !!isIncognito,
@@ -133,7 +139,17 @@ forceIncognito = false, // only for testing purposes
             isSamsungBrowser: isSamsungBrowser(),
             isChromeBrowser: isChromeBrowser(),
         });
-        onProceed(authorisationServerId, compability);
+        if (showCompatibilityWarnings && compatibility.mightFail) {
+            const confirmText = getCompatibilityConfirmText(compatibility);
+            if (confirm(confirmText)) {
+                onProceed(authorisationServerId, compatibility);
+            }
+            else {
+                setShowPopup(true);
+            }
+            return;
+        }
+        onProceed(authorisationServerId, compatibility);
     };
     const handleButtonClick = () => {
         setShowPopup(true);

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, compabilityWarnings: CompabilityWarnings) => {
+  onProceed={(authorisationServerClicked: string, compatibilityWarnings: CompatibilityWarnings) => {
     /* 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, compabilityWarnings: CompabilityWarnings) => void                                                      | yes                                               | -                                                       |
+| onProceed                | Callback to be called when IDP Selector `Proceed` button is clicked                                                                                                                                                                                                                                                                                            | (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => 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'                                                |
@@ -50,11 +50,12 @@ Your page should render a widget similar to this 👇 And when the button is cli
 | logoLockupStyle          | Logo lockup theme                                                                                                                                                                                                                                                                                                                                              | 'dark' \| 'light'                                                                            | no                                                | 'light'                                                 |
 | 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                                  |
+| showCompatibilityWarnings | Whether to show compatibility warnings or not. If set to `true` a popup with compatibility message will show up after an IDP is selected (if conditions are met) [More details here](#showCompatibilityWarnings)                                                                                                                                                                                                                       | boolean                                                                                      | no                                                | false                                                   |
 
-#### CompabilityWarnings type
+#### CompatibilityWarnings type
 
 ```typescript
-export type CompabilityWarnings = {
+export type CompatibilityWarnings = {
   mightFail: boolean
   isMobile: boolean
   isIncognito: boolean
@@ -219,6 +220,16 @@ This is an optional field in addition with the widgets below the ConnectID butto
 ![](/images/readme_below_button.png 'Below information content')
 </details>
 
+### <a name="showCompatibilityWarnings"></a>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 and the user can decide whether they want to proceed or not.
+
+<details> 
+  <summary>Show compatibility warnings</summary>
+
+![](/images/readme_compatibility_warnings.png 'Compatibility warnings')
+</details>
+
 
 ### <a name="logoLockupStyle"></a>logoLockup option
 
@@ -241,6 +252,12 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 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.
 

package/compability.test.js

@@ -1,9 +1,9 @@
 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({
+import { getCompatibility, getMightFail } from './compatibility';
+describe('getCompatibility', () => {
+    it('should return compatibility warnings', () => {
+        const compatibility = getCompatibility({
             idpHasAppCertification: true,
             isMobile: true,
             isIncognito: false,
@@ -12,7 +12,7 @@ describe('getCompability', () => {
             isSamsungBrowser: false,
             isChromeBrowser: false,
         });
-        assert.deepStrictEqual(compability, {
+        assert.deepStrictEqual(compatibility, {
             isMobile: true,
             isIncognito: false,
             mobileOs: 'other',

package/compatibility.d.ts

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

package/{compability.js → compatibility.js}

@@ -1,5 +1,5 @@
 import { getBrowserName } from './userAgent';
-export const getCompability = (env) => {
+export const getCompatibility = (env) => {
     const { idpHasAppCertification, isAndroid, isChromeBrowser, isIncognito, isMobile, isSamsungBrowser, isIos } = env;
     const mightFail = getMightFail({
         idpHasAppCertification,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.10.0-alpha.0",
+  "version": "6.10.0-alpha.2",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,16 +26,16 @@
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@types/node": "^22.15.31",
+    "@types/node": "^22.15.32",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "cypress": "^14.4.1",
+    "cypress": "^14.5.0",
     "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",
+    "tsx": "^4.20.3",
     "typescript": "^5.8.3"
   },
   "dependencies": {

package/types.d.ts

@@ -38,7 +38,7 @@ export type CidButtonTypeConfig = {
     hasHowItWorks: boolean;
     hasLearnMore: boolean;
 };
-export type CompabilityEnvironment = {
+export type CompatibilityEnvironment = {
     isMobile: boolean;
     isIncognito: boolean;
     idpHasAppCertification: boolean;
@@ -47,7 +47,7 @@ export type CompabilityEnvironment = {
     isSamsungBrowser: boolean;
     isChromeBrowser: boolean;
 };
-export type CompabilityWarnings = {
+export type CompatibilityWarnings = {
     mightFail: boolean;
     isMobile: boolean;
     isIncognito: boolean;

package/compability.d.ts

@@ -1,3 +0,0 @@
-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;