@adonis-agora/authkit-react 0.14.0 → 0.16.0

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 (23) hide show
  1. package/build/index.d.ts +15 -1
  2. package/build/index.js +8 -1
  3. package/build/src/components/interaction_form.d.ts +298 -0
  4. package/build/src/components/interaction_form.js +6 -0
  5. package/build/src/components/magic_link_button.d.ts +8 -0
  6. package/build/src/components/magic_link_button.js +10 -0
  7. package/build/src/components/oauth_button.d.ts +296 -0
  8. package/build/src/components/oauth_button.js +13 -0
  9. package/build/src/components/passkey_button.d.ts +11 -0
  10. package/build/src/components/passkey_button.js +23 -0
  11. package/build/src/components/sign_in_button.d.ts +1 -1
  12. package/build/src/components/sign_out_button.d.ts +1 -1
  13. package/build/src/hooks/use_passkey_autofill.js +19 -26
  14. package/build/src/hooks/use_passkey_login.d.ts +12 -0
  15. package/build/src/hooks/use_passkey_login.js +25 -0
  16. package/build/src/interaction/urls.d.ts +12 -0
  17. package/build/src/interaction/urls.js +15 -0
  18. package/build/src/passkey/authenticate.d.ts +22 -0
  19. package/build/src/passkey/authenticate.js +63 -0
  20. package/build/src/utils.d.ts +1 -0
  21. package/build/src/utils.js +8 -5
  22. package/package.json +1 -1
  23. package/styles.css +135 -31
package/build/src/utils.js CHANGED
@@ -1,18 +1,21 @@
1
1
  export function deriveInitials(name, email) {
2
- const source = (name ?? '').trim();
2
+ const source = (name ?? "").trim();
3
3
  if (source) {
4
4
  const parts = source.split(/\s+/).filter(Boolean);
5
5
  if (parts.length === 1)
6
6
  return parts[0].slice(0, 2).toUpperCase();
7
7
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
8
8
  }
9
- const e = (email ?? '').trim();
9
+ const e = (email ?? "").trim();
10
10
  if (e)
11
11
  return e[0].toUpperCase();
12
- return '?';
12
+ return "?";
13
13
  }
14
14
  export function currentUrl() {
15
- if (typeof window === 'undefined')
16
- return '';
15
+ if (typeof window === "undefined")
16
+ return "";
17
17
  return window.location.pathname + window.location.search;
18
18
  }
19
+ export function buttonClass(variant, extra) {
20
+ return ["authkit-button", variant, extra].filter(Boolean).join(" ");
21
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adonis-agora/authkit-react",
3
- "version": "0.14.0",
3
+ "version": "0.16.0",
4
4
  "description": "Frontend ergonomics over AuthKit for AdonisJS + Inertia + React apps: a typed useAuth() hook, role-gating hooks and gating components.",
5
5
  "license": "MIT",
6
6
  "author": "dudousxd",
package/styles.css CHANGED
@@ -47,6 +47,17 @@
47
47
  border-color: var(--authkit-border);
48
48
  }
49
49
 
50
+ .authkit-passkey {
51
+ display: flex;
52
+ flex-direction: column;
53
+ gap: var(--authkit-gap);
54
+ }
55
+ .authkit-passkey__error {
56
+ margin: 0;
57
+ font-size: 0.85rem;
58
+ color: var(--authkit-danger);
59
+ }
60
+
50
61
  .authkit-avatar {
51
62
  display: inline-flex;
52
63
  align-items: center;
@@ -206,16 +217,16 @@
206
217
  transition: background-color 0.15s ease;
207
218
  }
208
219
  /* Cor por score, do mais fraco ao mais forte (via data-score no bar). */
209
- .authkit-strength__bar[data-score='1'] .authkit-strength__segment--filled {
220
+ .authkit-strength__bar[data-score="1"] .authkit-strength__segment--filled {
210
221
  background: var(--authkit-danger);
211
222
  }
212
- .authkit-strength__bar[data-score='2'] .authkit-strength__segment--filled {
223
+ .authkit-strength__bar[data-score="2"] .authkit-strength__segment--filled {
213
224
  background: #f5a524;
214
225
  }
215
- .authkit-strength__bar[data-score='3'] .authkit-strength__segment--filled {
226
+ .authkit-strength__bar[data-score="3"] .authkit-strength__segment--filled {
216
227
  background: #d6c20a;
217
228
  }
218
- .authkit-strength__bar[data-score='4'] .authkit-strength__segment--filled {
229
+ .authkit-strength__bar[data-score="4"] .authkit-strength__segment--filled {
219
230
  background: #2fb344;
220
231
  }
221
232
  .authkit-strength__label {
@@ -246,8 +257,14 @@
246
257
  font-size: 0.875rem;
247
258
  color: var(--authkit-fg);
248
259
  }
249
- .authkit-orgswitcher__trigger:disabled { opacity: 0.6; cursor: default; }
250
- .authkit-orgswitcher__chevron { font-size: 0.65rem; color: var(--authkit-muted); }
260
+ .authkit-orgswitcher__trigger:disabled {
261
+ opacity: 0.6;
262
+ cursor: default;
263
+ }
264
+ .authkit-orgswitcher__chevron {
265
+ font-size: 0.65rem;
266
+ color: var(--authkit-muted);
267
+ }
251
268
  .authkit-orgswitcher__menu {
252
269
  position: absolute;
253
270
  top: calc(100% + 4px);
@@ -256,7 +273,7 @@
256
273
  background: var(--authkit-bg);
257
274
  border: 1px solid var(--authkit-border);
258
275
  border-radius: var(--authkit-radius);
259
- box-shadow: 0 4px 16px rgba(0,0,0,.1);
276
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
260
277
  z-index: 50;
261
278
  overflow: hidden;
262
279
  }
@@ -273,31 +290,118 @@
273
290
  color: var(--authkit-fg);
274
291
  text-align: left;
275
292
  }
276
- .authkit-orgswitcher__item:hover { background: color-mix(in srgb, var(--authkit-primary) 8%, transparent); }
277
- .authkit-orgswitcher__item--active { font-weight: 600; }
278
- .authkit-orgswitcher__item-name { flex: 1; }
279
- .authkit-orgswitcher__item-role { font-size: 0.75rem; color: var(--authkit-muted); margin-left: 0.5rem; }
293
+ .authkit-orgswitcher__item:hover {
294
+ background: color-mix(in srgb, var(--authkit-primary) 8%, transparent);
295
+ }
296
+ .authkit-orgswitcher__item--active {
297
+ font-weight: 600;
298
+ }
299
+ .authkit-orgswitcher__item-name {
300
+ flex: 1;
301
+ }
302
+ .authkit-orgswitcher__item-role {
303
+ font-size: 0.75rem;
304
+ color: var(--authkit-muted);
305
+ margin-left: 0.5rem;
306
+ }
280
307
 
281
308
  /* ─── OrganizationProfile ──────────────────────────────────────────────── */
282
- .authkit-org-profile { display: flex; flex-direction: column; gap: var(--authkit-gap); }
283
- .authkit-org-profile__header { margin-bottom: 0.5rem; }
284
- .authkit-org-profile__name { font-weight: 600; font-size: 1rem; color: var(--authkit-fg); }
285
- .authkit-org-profile__slug { font-size: 0.8rem; color: var(--authkit-muted); }
286
- .authkit-org-profile__section-title { font-size: 0.85rem; font-weight: 600; color: var(--authkit-fg); margin-bottom: 0.4rem; }
287
- .authkit-org-profile__members { display: flex; flex-direction: column; gap: 0.25rem; }
288
- .authkit-org-profile__member { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--authkit-border); }
289
- .authkit-org-profile__member:last-child { border-bottom: none; }
290
- .authkit-org-profile__member-info { display: flex; flex-direction: column; }
291
- .authkit-org-profile__member-email { font-size: 0.875rem; color: var(--authkit-fg); }
292
- .authkit-org-profile__member-role { font-size: 0.75rem; color: var(--authkit-muted); }
293
- .authkit-org-profile__invite-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }
294
- .authkit-org-profile__empty { font-size: 0.875rem; color: var(--authkit-muted); }
309
+ .authkit-org-profile {
310
+ display: flex;
311
+ flex-direction: column;
312
+ gap: var(--authkit-gap);
313
+ }
314
+ .authkit-org-profile__header {
315
+ margin-bottom: 0.5rem;
316
+ }
317
+ .authkit-org-profile__name {
318
+ font-weight: 600;
319
+ font-size: 1rem;
320
+ color: var(--authkit-fg);
321
+ }
322
+ .authkit-org-profile__slug {
323
+ font-size: 0.8rem;
324
+ color: var(--authkit-muted);
325
+ }
326
+ .authkit-org-profile__section-title {
327
+ font-size: 0.85rem;
328
+ font-weight: 600;
329
+ color: var(--authkit-fg);
330
+ margin-bottom: 0.4rem;
331
+ }
332
+ .authkit-org-profile__members {
333
+ display: flex;
334
+ flex-direction: column;
335
+ gap: 0.25rem;
336
+ }
337
+ .authkit-org-profile__member {
338
+ display: flex;
339
+ align-items: center;
340
+ gap: 0.5rem;
341
+ padding: 0.3rem 0;
342
+ border-bottom: 1px solid var(--authkit-border);
343
+ }
344
+ .authkit-org-profile__member:last-child {
345
+ border-bottom: none;
346
+ }
347
+ .authkit-org-profile__member-info {
348
+ display: flex;
349
+ flex-direction: column;
350
+ }
351
+ .authkit-org-profile__member-email {
352
+ font-size: 0.875rem;
353
+ color: var(--authkit-fg);
354
+ }
355
+ .authkit-org-profile__member-role {
356
+ font-size: 0.75rem;
357
+ color: var(--authkit-muted);
358
+ }
359
+ .authkit-org-profile__invite-form {
360
+ display: flex;
361
+ flex-direction: column;
362
+ gap: 0.4rem;
363
+ margin-top: 0.75rem;
364
+ }
365
+ .authkit-org-profile__empty {
366
+ font-size: 0.875rem;
367
+ color: var(--authkit-muted);
368
+ }
295
369
 
296
370
  /* ─── KeyRotation ──────────────────────────────────────────────────────────── */
297
- .authkit-keys { display: flex; flex-direction: column; gap: var(--authkit-gap); }
298
- .authkit-keys__title { font-size: 1rem; font-weight: 600; color: var(--authkit-fg); margin: 0 0 0.5rem; }
299
- .authkit-keys__stats { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0 0 0.5rem; font-size: 0.875rem; }
300
- .authkit-keys__stats dt { color: var(--authkit-muted); }
301
- .authkit-keys__stats dd { margin: 0; color: var(--authkit-fg); }
302
- .authkit-keys__retire { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--authkit-fg); cursor: pointer; }
303
- .authkit-keys__loading { color: var(--authkit-muted); font-size: 0.9rem; }
371
+ .authkit-keys {
372
+ display: flex;
373
+ flex-direction: column;
374
+ gap: var(--authkit-gap);
375
+ }
376
+ .authkit-keys__title {
377
+ font-size: 1rem;
378
+ font-weight: 600;
379
+ color: var(--authkit-fg);
380
+ margin: 0 0 0.5rem;
381
+ }
382
+ .authkit-keys__stats {
383
+ display: grid;
384
+ grid-template-columns: max-content 1fr;
385
+ gap: 0.2rem 0.75rem;
386
+ margin: 0 0 0.5rem;
387
+ font-size: 0.875rem;
388
+ }
389
+ .authkit-keys__stats dt {
390
+ color: var(--authkit-muted);
391
+ }
392
+ .authkit-keys__stats dd {
393
+ margin: 0;
394
+ color: var(--authkit-fg);
395
+ }
396
+ .authkit-keys__retire {
397
+ display: flex;
398
+ align-items: center;
399
+ gap: 0.4rem;
400
+ font-size: 0.875rem;
401
+ color: var(--authkit-fg);
402
+ cursor: pointer;
403
+ }
404
+ .authkit-keys__loading {
405
+ color: var(--authkit-muted);
406
+ font-size: 0.9rem;
407
+ }