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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CidButton.d.ts +1 -0
  2. package/CidButton.js +17 -1
  3. package/README.md +14 -0
  4. package/package.json +4 -4
package/CidButton.d.ts CHANGED
@@ -21,6 +21,7 @@ type CidButtonProps = {
21
21
  logoLockupStyle?: LogoMode;
22
22
  showInfoContent?: boolean;
23
23
  onError?: (error: string) => void;
24
+ showCompatibilityWarnings?: boolean;
24
25
  forceMobile?: boolean;
25
26
  forceIos?: boolean;
26
27
  forceAndroid?: boolean;
package/CidButton.js CHANGED
@@ -30,7 +30,7 @@ import detectIncognito from './incognito';
30
30
  import { getDeviceType, isAndroid, isChromeBrowser, isIos, isSamsungBrowser } from './userAgent';
31
31
  import { hasCertification } from './certification';
32
32
  import { getCompatibility } from './compatibility';
33
- 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
33
+ 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
34
34
  forceIos = false, // only for testing purposes
35
35
  forceAndroid = false, // only for testing purposes
36
36
  forceIncognito = false, // only for testing purposes
@@ -119,6 +119,12 @@ forceIncognito = false, // only for testing purposes
119
119
  });
120
120
  track();
121
121
  }, []);
122
+ const getCompatibilityConfirmText = (compatibilityWarnings) => {
123
+ if (compatibilityWarnings.mobileOs === 'android' && compatibilityWarnings.browser === 'samsung') {
124
+ 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.';
125
+ }
126
+ 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.';
127
+ };
122
128
  const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
123
129
  analytics === null || analytics === void 0 ? void 0 : analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
124
130
  setShowPopup(false);
@@ -133,6 +139,16 @@ forceIncognito = false, // only for testing purposes
133
139
  isSamsungBrowser: isSamsungBrowser(),
134
140
  isChromeBrowser: isChromeBrowser(),
135
141
  });
142
+ if (showCompatibilityWarnings && compatibility.mightFail) {
143
+ const confirmText = getCompatibilityConfirmText(compatibility);
144
+ if (confirm(confirmText)) {
145
+ onProceed(authorisationServerId, compatibility);
146
+ }
147
+ else {
148
+ setShowPopup(true);
149
+ }
150
+ return;
151
+ }
136
152
  onProceed(authorisationServerId, compatibility);
137
153
  };
138
154
  const handleButtonClick = () => {
package/README.md CHANGED
@@ -50,6 +50,7 @@ Your page should render a widget similar to this 👇 And when the button is cli
50
50
  | logoLockupStyle | Logo lockup theme | 'dark' \| 'light' | no | 'light' |
51
51
  | showInfoContent | The text that goes below the ConnectID button [More details here](#infoContent) | boolean | false | false |
52
52
  | onError | Callback to be called when there is an error fetching participants or invalid options. | () => void | no | () => {} // do nothing |
53
+ | 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 |
53
54
 
54
55
  #### CompatibilityWarnings type
55
56
 
@@ -219,6 +220,16 @@ This is an optional field in addition with the widgets below the ConnectID butto
219
220
  ![](/images/readme_below_button.png 'Below information content')
220
221
  </details>
221
222
 
223
+ ### <a name="showCompatibilityWarnings"></a>showCompatibilityWarnings option
224
+
225
+ 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.
226
+
227
+ <details>
228
+ <summary>Show compatibility warnings</summary>
229
+
230
+ ![](/images/readme_compatibility_warnings.png 'Compatibility warnings')
231
+ </details>
232
+
222
233
 
223
234
  ### <a name="logoLockupStyle"></a>logoLockup option
224
235
 
@@ -241,6 +252,9 @@ The SVG image below the ConnectID button has either option dark or light mode. B
241
252
 
242
253
  ## 🚀 Release Notes
243
254
 
255
+ ### 6.10.0-alpha.2 (Jun 17, 2025)
256
+ - Add `showCompatibilityWarnings` option.
257
+
244
258
  ### 6.10.0-alpha.1 (Jun 12, 2025)
245
259
  - Rename `compabilityWarnings` to `compatibilityWarnings`.
246
260
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@connectid-tools/idp-selector-react",
3
- "version": "6.10.0-alpha.1",
3
+ "version": "6.10.0-alpha.2",
4
4
  "description": "React component for IDP Selector.",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -26,16 +26,16 @@
26
26
  "homepage": "https://github.com/connectid-tools/idp-selector-react",
27
27
  "devDependencies": {
28
28
  "@babel/preset-typescript": "^7.27.1",
29
- "@types/node": "^22.15.31",
29
+ "@types/node": "^22.15.32",
30
30
  "@types/react": "^18.3.23",
31
31
  "@types/react-dom": "^18.3.7",
32
- "cypress": "^14.4.1",
32
+ "cypress": "^14.5.0",
33
33
  "jest-environment-jsdom": "^29.7.0",
34
34
  "prettier": "^3.5.3",
35
35
  "react": "^18.3.1",
36
36
  "react-dom": "^18.3.1",
37
37
  "replace-in-file": "^8.3.0",
38
- "tsx": "^4.19.4",
38
+ "tsx": "^4.20.3",
39
39
  "typescript": "^5.8.3"
40
40
  },
41
41
  "dependencies": {