@criipto/verify-react 4.1.4 → 5.0.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.
- package/README.md +20 -13
- package/deploy-preview.sh +19 -0
- package/dist/index.css +223 -0
- package/dist/index.d.ts +267 -14
- package/dist/index.js +1948 -0
- package/dist/index.js.map +1 -0
- package/package.json +26 -33
- package/tsconfig.json +8 -99
- package/tsdown.config.ts +23 -0
- package/dist/__tests__/provider.test.d.ts +0 -1
- package/dist/__tests__/utils.test.d.ts +0 -1
- package/dist/components/AuthButtonGroup.d.ts +0 -10
- package/dist/components/AuthMethodButton/Logo.d.ts +0 -10
- package/dist/components/AuthMethodButton.d.ts +0 -45
- package/dist/components/AuthMethodSelector.d.ts +0 -17
- package/dist/components/Button.d.ts +0 -12
- package/dist/components/QRCode.d.ts +0 -29
- package/dist/components/SEBankIDQRCode/SEBankIDQRCode.test.d.ts +0 -1
- package/dist/components/SEBankIDQRCode.d.ts +0 -53
- package/dist/components/SEBankIDSameDeviceButton/Foreground.d.ts +0 -12
- package/dist/components/SEBankIDSameDeviceButton/Poll.d.ts +0 -12
- package/dist/components/SEBankIDSameDeviceButton/Reload.d.ts +0 -15
- package/dist/components/SEBankIDSameDeviceButton/__tests__/Foreground.test.d.ts +0 -1
- package/dist/components/SEBankIDSameDeviceButton/__tests__/Reload.test.d.ts +0 -1
- package/dist/components/SEBankIDSameDeviceButton/__tests__/strategy.test.d.ts +0 -1
- package/dist/components/SEBankIDSameDeviceButton/__tests__/usePoll.test.d.ts +0 -1
- package/dist/components/SEBankIDSameDeviceButton/shared.d.ts +0 -19
- package/dist/components/SEBankIDSameDeviceButton/usePoll.d.ts +0 -7
- package/dist/components/SEBankIDSameDeviceButton.d.ts +0 -21
- package/dist/context.d.ts +0 -61
- package/dist/criipto-verify-react.cjs.js +0 -2
- package/dist/criipto-verify-react.cjs.js.map +0 -1
- package/dist/criipto-verify-react.css +0 -298
- package/dist/criipto-verify-react.esm.js +0 -2
- package/dist/criipto-verify-react.esm.js.map +0 -1
- package/dist/device.d.ts +0 -7
- package/dist/hooks/useNow.d.ts +0 -1
- package/dist/hooks/usePageVisibility.d.ts +0 -2
- package/dist/i18n/da.d.ts +0 -19
- package/dist/i18n/de.d.ts +0 -19
- package/dist/i18n/en.d.ts +0 -19
- package/dist/i18n/fi.d.ts +0 -19
- package/dist/i18n/index.d.ts +0 -4
- package/dist/i18n/nb.d.ts +0 -19
- package/dist/i18n/nl.d.ts +0 -19
- package/dist/i18n/sv.d.ts +0 -19
- package/dist/memory-storage.d.ts +0 -1
- package/dist/provider.d.ts +0 -66
- package/dist/stories/StoryResponseRenderer.d.ts +0 -6
- package/dist/use-criipto-verify.d.ts +0 -30
- package/dist/utils.d.ts +0 -25
package/README.md
CHANGED
|
@@ -46,10 +46,10 @@ Use the `useCriiptoVerify` hook + the `AuthMethodSelector` component in your Rea
|
|
|
46
46
|
// src/App.js
|
|
47
47
|
import React from 'react';
|
|
48
48
|
import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
|
|
49
|
-
import '@criipto/verify-react/
|
|
49
|
+
import '@criipto/verify-react/index.css';
|
|
50
50
|
|
|
51
51
|
export default function App() {
|
|
52
|
-
const { result } = useCriiptoVerify();
|
|
52
|
+
const { result, error } = useCriiptoVerify();
|
|
53
53
|
|
|
54
54
|
if (result?.id_token) {
|
|
55
55
|
return <pre>{JSON.stringify(result.id_token, null, 2)}</pre>;
|
|
@@ -57,17 +57,24 @@ export default function App() {
|
|
|
57
57
|
|
|
58
58
|
return (
|
|
59
59
|
<React.Fragment>
|
|
60
|
-
{
|
|
61
|
-
<p>
|
|
62
|
-
An error occurred: {result.error} ({result.error_description}). Please try again.
|
|
63
|
-
</p>
|
|
64
|
-
) : null}
|
|
60
|
+
{error ? <p>An error occurred: {String(error)}. Please try again.</p> : null}
|
|
65
61
|
<AuthMethodSelector />
|
|
66
62
|
</React.Fragment>
|
|
67
63
|
);
|
|
68
64
|
}
|
|
69
65
|
```
|
|
70
66
|
|
|
67
|
+
Always render the `error` field from `useCriiptoVerify`. It surfaces both **configuration errors** (e.g. invalid `domain` or `clientID`, or CORS) raised when the provider mounts, and **runtime errors** raised during a login attempt (e.g. user cancellation, OAuth2 errors from the IdP). Without rendering `error`, misconfiguration and failed logins will appear silent to the user.
|
|
68
|
+
|
|
69
|
+
## CORS
|
|
70
|
+
|
|
71
|
+
The library makes fetch requests to Criipto for two reasons:
|
|
72
|
+
|
|
73
|
+
1. To load application configuration when the provider mounts.
|
|
74
|
+
2. To push the authorization request (PAR) when a user clicks a login button.
|
|
75
|
+
|
|
76
|
+
Make sure that the origin your React app runs on is included in the list of callback URLs for your application. Otherwise, both calls will fail with CORS errors.
|
|
77
|
+
|
|
71
78
|
## Sessions
|
|
72
79
|
|
|
73
80
|
If you want to use `@criipto/verify-react` for session management (rather than one-off authentication) you can configure a `sessionStore`:
|
|
@@ -102,7 +109,7 @@ You may wish to increase the "Token lifetime" setting of your Criipto Applicatio
|
|
|
102
109
|
```jsx
|
|
103
110
|
// src/App.js
|
|
104
111
|
import React from 'react';
|
|
105
|
-
import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
|
|
112
|
+
import { useCriiptoVerify, AuthMethodSelector, OAuth2Error } from '@criipto/verify-react';
|
|
106
113
|
|
|
107
114
|
export default function App() {
|
|
108
115
|
const { claims, error, isLoading } = useCriiptoVerify();
|
|
@@ -119,7 +126,11 @@ export default function App() {
|
|
|
119
126
|
<React.Fragment>
|
|
120
127
|
{error ? (
|
|
121
128
|
<p>
|
|
122
|
-
An error occured:
|
|
129
|
+
An error occured:{' '}
|
|
130
|
+
{error instanceof OAuth2Error
|
|
131
|
+
? `${error.error} (${error.error_description})`
|
|
132
|
+
: String(error)}
|
|
133
|
+
. Please try again.
|
|
123
134
|
</p>
|
|
124
135
|
) : null}
|
|
125
136
|
<AuthMethodSelector />
|
|
@@ -153,10 +164,6 @@ useEffect(() => {
|
|
|
153
164
|
}, [isLoading, isInitializing]);
|
|
154
165
|
```
|
|
155
166
|
|
|
156
|
-
## XHR/fetch caveats
|
|
157
|
-
|
|
158
|
-
The library may require to do fetch requests against Criipto to fetch application configuration. Make sure that the host that the React app runs on is included in the list of callback URLs for your application. Otherwise, you will encounter CORS errors.
|
|
159
|
-
|
|
160
167
|
## Criipto
|
|
161
168
|
|
|
162
169
|
Learn more about Criipto and sign up for your free developer account at [criipto.com](https://www.criipto.com).
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
#!/bin/bash
|
|
2
|
+
|
|
3
|
+
set -e
|
|
4
|
+
|
|
5
|
+
rm -rf deploy-preview
|
|
6
|
+
|
|
7
|
+
npm run build
|
|
8
|
+
npm run build-storybook
|
|
9
|
+
|
|
10
|
+
cd example
|
|
11
|
+
npm i
|
|
12
|
+
npm run build
|
|
13
|
+
cd ..
|
|
14
|
+
|
|
15
|
+
mkdir deploy-preview
|
|
16
|
+
mv storybook-static deploy-preview/
|
|
17
|
+
mv example/build deploy-preview/
|
|
18
|
+
|
|
19
|
+
echo '<html><p><a href="/build">Example app<a></p><p><a href="/storybook-static">Storybook</a></p></html>' > deploy-preview/index.html
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
.criipto-eid-btn {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
color: #fff;
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
text-align: start;
|
|
6
|
+
background: #604fed;
|
|
7
|
+
border: 0;
|
|
8
|
+
flex-direction: row;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 16px;
|
|
11
|
+
min-height: 60px;
|
|
12
|
+
padding: 6px 24px 6px 16px;
|
|
13
|
+
font-family: IBM Plex Sans, sans-serif;
|
|
14
|
+
font-size: 14px;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
display: flex;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media (width <= 320px) {
|
|
22
|
+
.criipto-eid-btn {
|
|
23
|
+
padding-left: 6px;
|
|
24
|
+
padding-right: 6px;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.criipto-eid-btn:hover, .criipto-eid-btn:active {
|
|
29
|
+
color: #fff;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.criipto-eid-btn .criipto-eid-logo {
|
|
33
|
+
flex-direction: row;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
justify-content: flex-end;
|
|
36
|
+
align-items: center;
|
|
37
|
+
width: 88px;
|
|
38
|
+
display: flex;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.criipto-eid-btn .criipto-eid-logo img {
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
max-height: 100%;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.criipto-eid-btn {
|
|
47
|
+
--bg-lightness-mod: 0%;
|
|
48
|
+
--bg-alpha-mod: 100%;
|
|
49
|
+
|
|
50
|
+
&:hover {
|
|
51
|
+
--bg-lightness-mod: -10%;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.criipto-eid-btn.criipto-eid-btn--fi, .criipto-eid-btn.criipto-eid-btn--uk-oneid {
|
|
56
|
+
&:hover {
|
|
57
|
+
--bg-lightness-mod: 10%;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.criipto-eid-btn.criipto-eid-btn--dk-mitid {
|
|
62
|
+
background-color: hsl(214.96 100% calc(45.1% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.criipto-eid-btn.criipto-eid-btn--se-bankid {
|
|
66
|
+
background-color: hsl(198.46 52.7% calc(29.02% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.criipto-eid-btn.criipto-eid-btn--no-bankid {
|
|
70
|
+
background-color: hsl(280 60% calc(18.63% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.criipto-eid-btn.criipto-eid-btn--no-vipps {
|
|
74
|
+
background-color: hsl(15.07 100% calc(57.06% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.criipto-eid-btn.criipto-eid-btn--itsme {
|
|
78
|
+
background-color: hsl(9.72 98.18% calc(56.86% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.criipto-eid-btn.criipto-eid-btn--fi {
|
|
82
|
+
background-color: hsl(0 0% calc(20% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.criipto-eid-btn.criipto-eid-btn--se-frejaid {
|
|
86
|
+
background-color: hsl(242.7 43.41% calc(40.2% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.criipto-eid-btn.criipto-eid-btn--uk-oneid {
|
|
90
|
+
background-color: hsl(210.94 96.97% calc(12.94% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.criipto-eid-btn.criipto-eid-btn--de-personalausweis {
|
|
94
|
+
background-color: hsl(208.57 55.26% calc(44.71% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.criipto-eid-btn.criipto-eid-btn--nl-idin {
|
|
98
|
+
background-color: hsl(196 100% calc(47.06% + var(--bg-lightness-mod)) / var(--bg-alpha-mod));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.criipto-eid-btn.criipto-eid-btn--disabled {
|
|
102
|
+
pointer-events: none;
|
|
103
|
+
--bg-alpha-mod: 30%;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.criipto-eid-btn--loading {
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
--bg-alpha-mod: 70%;
|
|
109
|
+
}
|
|
110
|
+
.criipto-se-bankid-qr {
|
|
111
|
+
background: #235971;
|
|
112
|
+
padding: 16px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.criipto-se-bankid-qr--help-text {
|
|
116
|
+
color: #fff;
|
|
117
|
+
flex-flow: row;
|
|
118
|
+
align-items: center;
|
|
119
|
+
gap: 16px;
|
|
120
|
+
padding-bottom: 16px;
|
|
121
|
+
font-family: IBM Plex Sans, sans-serif;
|
|
122
|
+
font-size: 14px;
|
|
123
|
+
display: flex;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.criipto-se-bankid-qr--help-text img {
|
|
127
|
+
height: 30px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.criipto-se-bankid-qr-canvas {
|
|
131
|
+
box-sizing: border-box;
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
background: none;
|
|
134
|
+
border: 0;
|
|
135
|
+
outline: none;
|
|
136
|
+
width: 100%;
|
|
137
|
+
margin: 0;
|
|
138
|
+
padding: 0;
|
|
139
|
+
line-height: 0;
|
|
140
|
+
display: block;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.criipto-se-bankid-qr-canvas img {
|
|
144
|
+
max-width: 100%;
|
|
145
|
+
max-height: 100%;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.criipto-se-bankid-qr-fullscreen {
|
|
149
|
+
box-sizing: border-box;
|
|
150
|
+
background: #fff;
|
|
151
|
+
border: 0;
|
|
152
|
+
width: 100svw;
|
|
153
|
+
max-width: 100svw;
|
|
154
|
+
height: 100svh;
|
|
155
|
+
max-height: 100svh;
|
|
156
|
+
margin: 0;
|
|
157
|
+
padding: 0;
|
|
158
|
+
inset: 0;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.criipto-se-bankid-qr-fullscreen .criipto-se-bankid-qr-canvas {
|
|
162
|
+
width: auto;
|
|
163
|
+
height: 100%;
|
|
164
|
+
margin: 0 auto;
|
|
165
|
+
}
|
|
166
|
+
.criipto-eid-loader {
|
|
167
|
+
box-sizing: border-box;
|
|
168
|
+
border: 3px solid #fff;
|
|
169
|
+
border-bottom-color: #0000;
|
|
170
|
+
border-radius: 50%;
|
|
171
|
+
width: 24px;
|
|
172
|
+
height: 24px;
|
|
173
|
+
margin: 0 auto;
|
|
174
|
+
animation: 1s linear infinite rotation;
|
|
175
|
+
display: inline-block;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@keyframes rotation {
|
|
179
|
+
0% {
|
|
180
|
+
transform: rotate(0);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
100% {
|
|
184
|
+
transform: rotate(360deg);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
.criipto-eid-selector {
|
|
188
|
+
flex-flow: column;
|
|
189
|
+
gap: 8px;
|
|
190
|
+
max-width: 500px;
|
|
191
|
+
padding: 20px;
|
|
192
|
+
display: flex;
|
|
193
|
+
}
|
|
194
|
+
.criipto-auth-popup-backdrop {
|
|
195
|
+
justify-content: center;
|
|
196
|
+
align-items: center;
|
|
197
|
+
width: 100%;
|
|
198
|
+
height: 100%;
|
|
199
|
+
display: flex;
|
|
200
|
+
position: absolute;
|
|
201
|
+
top: 0;
|
|
202
|
+
left: 0;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.criipto-auth-popup-backdrop-background {
|
|
206
|
+
opacity: .8;
|
|
207
|
+
z-index: 10;
|
|
208
|
+
background-color: #000;
|
|
209
|
+
width: 100%;
|
|
210
|
+
height: 100%;
|
|
211
|
+
position: absolute;
|
|
212
|
+
top: 0;
|
|
213
|
+
left: 0;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.criipto-auth-popup-backdrop-content {
|
|
217
|
+
z-index: 11;
|
|
218
|
+
color: #fff;
|
|
219
|
+
flex-direction: column;
|
|
220
|
+
align-items: center;
|
|
221
|
+
width: 350px;
|
|
222
|
+
display: flex;
|
|
223
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,267 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as _criipto_auth_js0 from "@criipto/auth-js";
|
|
3
|
+
import CriiptoAuth, { OAuth2Error, OAuth2Error as OAuth2Error$1, PKCEPublicPart, Prompt, ResponseType } from "@criipto/auth-js";
|
|
4
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region src/context.d.ts
|
|
7
|
+
type ResultSource = 'QRCode' | 'SEBankIDQrCode' | 'SEBankIDSameDeviceButton' | 'redirect' | 'popup';
|
|
8
|
+
type Result = {
|
|
9
|
+
id_token: string;
|
|
10
|
+
state?: string;
|
|
11
|
+
source?: ResultSource;
|
|
12
|
+
} | {
|
|
13
|
+
code: string;
|
|
14
|
+
state?: string;
|
|
15
|
+
source?: ResultSource;
|
|
16
|
+
} | OAuth2Error$1 | Error;
|
|
17
|
+
declare const actions: readonly ["confirm", "accept", "approve", "sign", "login"];
|
|
18
|
+
type Action = (typeof actions)[number];
|
|
19
|
+
type Claims = {
|
|
20
|
+
iss: string;
|
|
21
|
+
aud: string;
|
|
22
|
+
identityscheme: string;
|
|
23
|
+
authenticationtype: string;
|
|
24
|
+
sub: string;
|
|
25
|
+
iat: number;
|
|
26
|
+
exp: number;
|
|
27
|
+
[key: string]: string | number;
|
|
28
|
+
};
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/provider.d.ts
|
|
31
|
+
interface CriiptoVerifyProviderOptions {
|
|
32
|
+
domain: string;
|
|
33
|
+
clientID: string;
|
|
34
|
+
/**
|
|
35
|
+
* @deprecated Development use only
|
|
36
|
+
*/
|
|
37
|
+
protocol?: 'https' | 'http';
|
|
38
|
+
redirectUri?: string;
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
pkce?: PKCEPublicPart;
|
|
41
|
+
state?: string;
|
|
42
|
+
nonce?: string;
|
|
43
|
+
prompt?: Prompt;
|
|
44
|
+
scope?: string;
|
|
45
|
+
uiLocales?: string;
|
|
46
|
+
loginHint?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Enables storage and automatic fetch of tokens
|
|
49
|
+
* by utilizing browser storage and SSO silent logins.
|
|
50
|
+
* Make sure "SSO for OAuth2" is enabled on your Criipto Domain.
|
|
51
|
+
* Only works for `response: 'token'` (default)
|
|
52
|
+
*/
|
|
53
|
+
sessionStore?: Storage;
|
|
54
|
+
/**
|
|
55
|
+
* Will ammend the login_hint parameter with `action:{action}` which will adjust texsts in certain flows.
|
|
56
|
+
* Default: 'login'
|
|
57
|
+
*/
|
|
58
|
+
action?: Action;
|
|
59
|
+
/**
|
|
60
|
+
* Will ammend the login_hint parameter with `message:{base64(message)}` which will set a login/aprove message where available (Danish MitID).
|
|
61
|
+
*/
|
|
62
|
+
message?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Note: In most cases modifying this setting **is not needed**. Defaults will work with almost all React SPA cases.
|
|
65
|
+
* By default @criipto/verify-react will do PKCE on your behalf and return a jwt token.
|
|
66
|
+
* However if you wish you can disable this and get the raw `code` response by setting `response` to 'code'.
|
|
67
|
+
*/
|
|
68
|
+
response?: 'token' | 'code';
|
|
69
|
+
completionStrategy?: 'client' | 'openidprovider';
|
|
70
|
+
/**
|
|
71
|
+
* @deprecated Criipto internal use
|
|
72
|
+
*/
|
|
73
|
+
criiptoSdk?: null | string;
|
|
74
|
+
/**
|
|
75
|
+
* @deprecated Criipto internal use
|
|
76
|
+
*/
|
|
77
|
+
responseType?: ResponseType | 'code id_token';
|
|
78
|
+
/**
|
|
79
|
+
* @deprecated Criipto internal use
|
|
80
|
+
*/
|
|
81
|
+
responseMode?: 'query' | 'form_post' | 'fragment' | 'json' | 'post_message';
|
|
82
|
+
}
|
|
83
|
+
declare const CriiptoVerifyProvider: (props: CriiptoVerifyProviderOptions) => React.ReactElement;
|
|
84
|
+
//#endregion
|
|
85
|
+
//#region src/i18n/index.d.ts
|
|
86
|
+
type Language = 'en' | 'da' | 'sv' | 'nb' | 'fi' | 'de' | 'nl';
|
|
87
|
+
//#endregion
|
|
88
|
+
//#region src/components/AuthMethodButton/Logo.d.ts
|
|
89
|
+
interface AuthMethodButtonLogoProps {
|
|
90
|
+
acrValue: string;
|
|
91
|
+
/**
|
|
92
|
+
* base64 image string, e.x. data:image/png;base64,
|
|
93
|
+
* or a ReactElement
|
|
94
|
+
*/
|
|
95
|
+
logo?: React.ReactElement | string;
|
|
96
|
+
}
|
|
97
|
+
//#endregion
|
|
98
|
+
//#region src/components/AuthMethodButton.d.ts
|
|
99
|
+
type PopupParams = {
|
|
100
|
+
acrValue: string;
|
|
101
|
+
onHide: () => void;
|
|
102
|
+
};
|
|
103
|
+
type PopupOption = boolean | ((options: PopupParams) => boolean | React.ReactElement);
|
|
104
|
+
interface AuthMethodButtonComponentProps {
|
|
105
|
+
acrValue: string;
|
|
106
|
+
href?: string;
|
|
107
|
+
onClick?: React.MouseEventHandler;
|
|
108
|
+
children?: React.ReactNode;
|
|
109
|
+
'data-testid'?: string;
|
|
110
|
+
className?: string;
|
|
111
|
+
/**
|
|
112
|
+
* base64 image string, e.x. data:image/png;base64,
|
|
113
|
+
* or a ReactElement
|
|
114
|
+
*/
|
|
115
|
+
logo?: AuthMethodButtonLogoProps['logo'];
|
|
116
|
+
/**
|
|
117
|
+
* Impacts the button text rendered if no text is provided via props.children
|
|
118
|
+
*/
|
|
119
|
+
language?: Language;
|
|
120
|
+
/**
|
|
121
|
+
* Impacts the button text rendered if no text is provided via props.children
|
|
122
|
+
*/
|
|
123
|
+
action?: Action;
|
|
124
|
+
disabled?: boolean;
|
|
125
|
+
loading?: boolean;
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Display only components, does no state management and triggers no login flows on it's own
|
|
129
|
+
*/
|
|
130
|
+
declare function AuthMethodButtonComponent(props: AuthMethodButtonComponentProps): react_jsx_runtime0.JSX.Element;
|
|
131
|
+
type AuthMethodButtonContainerProps = AuthMethodButtonComponentProps & {
|
|
132
|
+
redirectUri?: string;
|
|
133
|
+
popup?: PopupOption;
|
|
134
|
+
/**
|
|
135
|
+
* Will ammend the login_hint parameter with `message:{base64(message)}` which will set a login/aprove message where available (Danish MitID).
|
|
136
|
+
*/
|
|
137
|
+
message?: string;
|
|
138
|
+
userAgent?: string;
|
|
139
|
+
};
|
|
140
|
+
declare function AuthMethodButtonContainer(props: AuthMethodButtonContainerProps): react_jsx_runtime0.JSX.Element;
|
|
141
|
+
//#endregion
|
|
142
|
+
//#region src/components/AuthMethodSelector.d.ts
|
|
143
|
+
interface AuthMethodSelectorProps {
|
|
144
|
+
acrValues?: string[];
|
|
145
|
+
language?: Language;
|
|
146
|
+
onSelect?: (acrValue: string) => void;
|
|
147
|
+
redirectUri?: string;
|
|
148
|
+
popup?: AuthMethodButtonContainerProps['popup'];
|
|
149
|
+
userAgent?: string;
|
|
150
|
+
}
|
|
151
|
+
declare function AuthMethodSelector(props: AuthMethodSelectorProps): react_jsx_runtime0.JSX.Element;
|
|
152
|
+
type SwedenProps = Omit<AuthMethodSelectorProps, 'acrValues'> & {
|
|
153
|
+
acrValues: string[];
|
|
154
|
+
};
|
|
155
|
+
declare function Sweden(props: SwedenProps): react_jsx_runtime0.JSX.Element;
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/components/AuthButtonGroup.d.ts
|
|
158
|
+
declare function AuthButtonGroup(props: {
|
|
159
|
+
children: React.ReactNode;
|
|
160
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
161
|
+
//#endregion
|
|
162
|
+
//#region src/components/QRCode.d.ts
|
|
163
|
+
declare const QRCode: React.FC<{
|
|
164
|
+
margin?: number;
|
|
165
|
+
className?: string;
|
|
166
|
+
acrValues?: string[];
|
|
167
|
+
children: (props: {
|
|
168
|
+
qrElement: React.ReactElement;
|
|
169
|
+
/**
|
|
170
|
+
* Will be true once the QR code has been scanned
|
|
171
|
+
*/
|
|
172
|
+
isAcknowledged: boolean;
|
|
173
|
+
/**
|
|
174
|
+
* Will be true if the user cancels the login on his mobile device
|
|
175
|
+
*/
|
|
176
|
+
isCancelled: boolean;
|
|
177
|
+
/**
|
|
178
|
+
* Whether or not QR codes are enabled for this Criipto Applicaiton
|
|
179
|
+
*/
|
|
180
|
+
isEnabled: boolean | undefined;
|
|
181
|
+
error: OAuth2Error$1 | Error | null;
|
|
182
|
+
retry: () => void;
|
|
183
|
+
/**
|
|
184
|
+
* A method for triggering a full screen redirect to authentication (useful if user is on mobile device already)
|
|
185
|
+
*/
|
|
186
|
+
redirect: () => Promise<void>;
|
|
187
|
+
}) => React.ReactElement;
|
|
188
|
+
}>;
|
|
189
|
+
//#endregion
|
|
190
|
+
//#region src/components/SEBankIDQRCode.d.ts
|
|
191
|
+
interface Props {
|
|
192
|
+
redirectUri?: string;
|
|
193
|
+
qrMargin?: number;
|
|
194
|
+
/**
|
|
195
|
+
* Impacts the help text
|
|
196
|
+
*/
|
|
197
|
+
language?: Language;
|
|
198
|
+
children?: (props: {
|
|
199
|
+
qrElement: React.ReactElement;
|
|
200
|
+
/**
|
|
201
|
+
* Can be rendered instead of `qrElement` if you only wish to render the qr code with no additional content.
|
|
202
|
+
* Combine with `qrMargin`.
|
|
203
|
+
*/
|
|
204
|
+
imageElement: React.ReactElement;
|
|
205
|
+
/**
|
|
206
|
+
* Will be true once the user has completed login in the app and the rest of the login flow is being processed
|
|
207
|
+
*/
|
|
208
|
+
isCompleting: boolean;
|
|
209
|
+
/**
|
|
210
|
+
* The user has clicked on the qr image element to trigger fullscreen view per https://developers.bankid.com/getting-started/qr-code#accessibility
|
|
211
|
+
*/
|
|
212
|
+
fullscreen: boolean;
|
|
213
|
+
error: OAuth2Error$1 | Error | null;
|
|
214
|
+
retry: () => void;
|
|
215
|
+
}) => React.ReactElement;
|
|
216
|
+
/** Render fallback element while loading */
|
|
217
|
+
fallback?: React.ReactElement;
|
|
218
|
+
}
|
|
219
|
+
declare function SEBankIDQrCode(props: Props): react_jsx_runtime0.JSX.Element;
|
|
220
|
+
declare namespace SEBankIDQrCode {
|
|
221
|
+
var acr_values: string;
|
|
222
|
+
}
|
|
223
|
+
//#endregion
|
|
224
|
+
//#region src/use-criipto-verify.d.ts
|
|
225
|
+
declare function useCriiptoVerify(): {
|
|
226
|
+
result: Result | null;
|
|
227
|
+
/**
|
|
228
|
+
* The claims of the decoded id_token (if available)
|
|
229
|
+
*/
|
|
230
|
+
claims: Claims | null;
|
|
231
|
+
/**
|
|
232
|
+
* Set when the provider failed to fetch configuration (e.g. invalid `domain`/`clientID`,
|
|
233
|
+
* or CORS), or when an authentication attempt failed (e.g. user cancellation, OAuth2 errors
|
|
234
|
+
* from the IdP). Always render this in your UI — failures are otherwise silent.
|
|
235
|
+
*
|
|
236
|
+
* `OAuth2Error` for IdP-returned errors, `Error` for everything else.
|
|
237
|
+
*/
|
|
238
|
+
error: Error | null;
|
|
239
|
+
loginWithRedirect: (params?: _criipto_auth_js0.RedirectAuthorizeParams) => Promise<void>;
|
|
240
|
+
loginWithPopup: (params?: _criipto_auth_js0.PopupAuthorizeParams) => Promise<void>;
|
|
241
|
+
acrValues: string[] | undefined;
|
|
242
|
+
/**
|
|
243
|
+
* Will be true when performing token exchange after redirect or during an initial SSO check
|
|
244
|
+
*/
|
|
245
|
+
isLoading: boolean;
|
|
246
|
+
/**
|
|
247
|
+
* Will be true until the first set of useEffect hooks have been called
|
|
248
|
+
*/
|
|
249
|
+
isInitializing: boolean;
|
|
250
|
+
/**
|
|
251
|
+
* Check if there is an existing SSO session.
|
|
252
|
+
*/
|
|
253
|
+
checkSession: () => Promise<void>;
|
|
254
|
+
/**
|
|
255
|
+
* Clear local session store and logout of any existing SSO session
|
|
256
|
+
*/
|
|
257
|
+
logout: (params?: {
|
|
258
|
+
redirectUri?: string;
|
|
259
|
+
state?: string;
|
|
260
|
+
}) => Promise<void>;
|
|
261
|
+
};
|
|
262
|
+
//#endregion
|
|
263
|
+
//#region src/utils.d.ts
|
|
264
|
+
declare function filterAcrValues(input: string[]): string[];
|
|
265
|
+
//#endregion
|
|
266
|
+
export { type Action, AuthMethodButtonContainer as AuthButton, AuthMethodButtonContainer as AuthMethodButton, AuthMethodButtonComponent as AuthButtonComponent, AuthButtonGroup, AuthMethodSelector, Sweden as AuthMethodSelectorSweden, CriiptoVerifyProvider, type Language, OAuth2Error, QRCode, type Result, SEBankIDQrCode as SEBankIDQRCode, actions, filterAcrValues, useCriiptoVerify };
|
|
267
|
+
//# sourceMappingURL=index.d.ts.map
|