@hotosm/hanko-auth 0.5.1 → 0.5.4
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 +59 -53
- package/dist/hanko-auth.esm.js +938 -1039
- package/dist/hanko-auth.iife.js +35 -32
- package/dist/hanko-auth.umd.js +35 -32
- package/package.json +8 -9
- package/src/hanko-auth.styles.ts +6 -6
- package/src/hanko-auth.ts +39 -20
- package/src/hanko-i18n-en.ts +2 -2
- package/src/hanko-i18n-es.ts +2 -2
- package/src/hanko-i18n-fr.ts +2 -2
- package/src/hanko-i18n-pt.ts +2 -2
- package/src/hanko-translations.ts +20 -5
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# Web Component: `<hotosm-auth>`
|
|
2
2
|
|
|
3
|
-
Lit-based web component for HOTOSM SSO authentication with Hanko and
|
|
3
|
+
Lit-based web component for HOTOSM SSO authentication with Hanko and
|
|
4
|
+
OpenStreetMap integration.
|
|
4
5
|
|
|
5
6
|
## Installation
|
|
6
7
|
|
|
@@ -56,57 +57,57 @@ export function AuthButton({ hankoUrl, onLogin }) {
|
|
|
56
57
|
|
|
57
58
|
### Core
|
|
58
59
|
|
|
59
|
-
| Attribute
|
|
60
|
-
|
|
|
61
|
-
| `hanko-url` | string | `window.location.origin` | Login service URL
|
|
62
|
-
| `base-path` | string | `""`
|
|
63
|
-
| `auth-path` | string | `/api/auth/osm`
|
|
60
|
+
| Attribute | Type | Default | Description |
|
|
61
|
+
| - | - | - | - |
|
|
62
|
+
| `hanko-url` | string | `window.location.origin` | Login service URL |
|
|
63
|
+
| `base-path` | string | `""` | Base URL for OSM OAuth endpoints |
|
|
64
|
+
| `auth-path` | string | `/api/auth/osm` | OSM auth endpoints path |
|
|
64
65
|
|
|
65
66
|
### Behavior
|
|
66
67
|
|
|
67
|
-
| Attribute
|
|
68
|
-
|
|
|
69
|
-
| `osm-required`
|
|
70
|
-
| `osm-scopes`
|
|
71
|
-
| `auto-connect`
|
|
72
|
-
| `verify-session` | boolean | `false`
|
|
68
|
+
| Attribute | Type | Default | Description |
|
|
69
|
+
| - | - | - | - |
|
|
70
|
+
| `osm-required` | boolean | `false` | Require OSM connection |
|
|
71
|
+
| `osm-scopes` | string | `"read_prefs"` | OSM scopes (space-separated) |
|
|
72
|
+
| `auto-connect` | boolean | `false` | Auto redirect to OSM OAuth |
|
|
73
|
+
| `verify-session` | boolean | `false` | Verify session on return flow |
|
|
73
74
|
|
|
74
75
|
### Display
|
|
75
76
|
|
|
76
|
-
| Attribute
|
|
77
|
-
|
|
|
78
|
-
| `show-profile`
|
|
79
|
-
| `display-name`
|
|
80
|
-
| `lang`
|
|
81
|
-
| `button-variant` | string
|
|
82
|
-
| `button-color`
|
|
83
|
-
| `display`
|
|
77
|
+
| Attribute | Type | Default | Description |
|
|
78
|
+
| - | - | - | - |
|
|
79
|
+
| `show-profile` | boolean | `false` | Show full profile |
|
|
80
|
+
| `display-name` | string | `""` | Override display name |
|
|
81
|
+
| `lang` | string | `"en"` | Locale (e.g., "en", "es", "fr"), fallback "en" |
|
|
82
|
+
| `button-variant` | string | `"filled"` | `filled`, `outline`, or `plain` |
|
|
83
|
+
| `button-color` | string | `"primary"` | `primary`, `neutral`, or `danger` |
|
|
84
|
+
| `display` | string | `"default"` | `default` (avatar) or `bar` mode |
|
|
84
85
|
|
|
85
86
|
### Redirects
|
|
86
87
|
|
|
87
|
-
| Attribute
|
|
88
|
+
| Attribute | Type | Default | Description |
|
|
88
89
|
| ----------------------- | ------ | ------- | -------------------------- |
|
|
89
|
-
| `redirect-after-login`
|
|
90
|
-
| `redirect-after-logout` | string | `""`
|
|
90
|
+
| `redirect-after-login` | string | `""` | URL after successful login |
|
|
91
|
+
| `redirect-after-logout` | string | `""` | URL after logout |
|
|
91
92
|
|
|
92
93
|
### Cross-app
|
|
93
94
|
|
|
94
|
-
| Attribute
|
|
95
|
+
| Attribute | Type | Default | Description |
|
|
95
96
|
| ------------------- | ------ | ------- | ----------------------------- |
|
|
96
|
-
| `mapping-check-url` | string | `""`
|
|
97
|
-
| `app-id`
|
|
97
|
+
| `mapping-check-url` | string | `""` | URL to check user mapping |
|
|
98
|
+
| `app-id` | string | `""` | App identifier for onboarding |
|
|
98
99
|
|
|
99
100
|
## Events
|
|
100
101
|
|
|
101
102
|
The component dispatches the following custom events:
|
|
102
103
|
|
|
103
|
-
| Event
|
|
104
|
+
| Event | Detail | When |
|
|
104
105
|
| --------------- | ---------------------- | --------------------------- |
|
|
105
|
-
| `hanko-login`
|
|
106
|
-
| `osm-connected` | `{ osmData: OSMData }` | OSM account linked
|
|
107
|
-
| `osm-skipped`
|
|
108
|
-
| `auth-complete` | `{}`
|
|
109
|
-
| `logout`
|
|
106
|
+
| `hanko-login` | `{ user: HankoUser }` | User logged in |
|
|
107
|
+
| `osm-connected` | `{ osmData: OSMData }` | OSM account linked |
|
|
108
|
+
| `osm-skipped` | `{}` | User skipped OSM connection |
|
|
109
|
+
| `auth-complete` | `{}` | Auth flow complete |
|
|
110
|
+
| `logout` | `{}` | User logged out |
|
|
110
111
|
|
|
111
112
|
### Event Handling Example
|
|
112
113
|
|
|
@@ -129,9 +130,12 @@ auth.addEventListener("logout", () => {
|
|
|
129
130
|
|
|
130
131
|
## Flash Prevention (localStorage cache)
|
|
131
132
|
|
|
132
|
-
On remount (e.g. React navigation), the component checks `localStorage` for a
|
|
133
|
+
On remount (e.g. React navigation), the component checks `localStorage` for a
|
|
134
|
+
cached user under the key `hotosm-auth-user`. If found, it skips the loading
|
|
135
|
+
spinner and renders immediately with the cached user.
|
|
133
136
|
|
|
134
|
-
The component reads from this key but does not write to it. The host app is
|
|
137
|
+
The component reads from this key but does not write to it. The host app is
|
|
138
|
+
responsible for keeping it in sync:
|
|
135
139
|
|
|
136
140
|
```js
|
|
137
141
|
// Write on login
|
|
@@ -145,7 +149,8 @@ auth.addEventListener("logout", () => {
|
|
|
145
149
|
});
|
|
146
150
|
```
|
|
147
151
|
|
|
148
|
-
If the key is absent (first visit, after logout, or cleared storage), the
|
|
152
|
+
If the key is absent (first visit, after logout, or cleared storage), the
|
|
153
|
+
component falls back to its normal loading flow - no change in behavior.
|
|
149
154
|
|
|
150
155
|
## Usage Modes
|
|
151
156
|
|
|
@@ -194,7 +199,8 @@ Customize the login button appearance with `button-variant` and `button-color`:
|
|
|
194
199
|
|
|
195
200
|
### Bar Mode
|
|
196
201
|
|
|
197
|
-
Shows a full-width bar with avatar, email, and chevron arrow (ideal for mobile
|
|
202
|
+
Shows a full-width bar with avatar, email, and chevron arrow (ideal for mobile
|
|
203
|
+
drawers/menus):
|
|
198
204
|
|
|
199
205
|
```html
|
|
200
206
|
<hotosm-auth
|
|
@@ -226,26 +232,26 @@ The component uses Shadow DOM and can be customized using CSS custom properties.
|
|
|
226
232
|
|
|
227
233
|
#### Whole component
|
|
228
234
|
|
|
229
|
-
| Property
|
|
230
|
-
|
|
|
231
|
-
| `--font-family`
|
|
232
|
-
| `--font-weight`
|
|
235
|
+
| Property | Description | Default |
|
|
236
|
+
| - | - | - |
|
|
237
|
+
| `--font-family` | Font family for all text | `system-ui` |
|
|
238
|
+
| `--font-weight` | Font weight for all text | `500` |
|
|
233
239
|
|
|
234
240
|
#### Login button
|
|
235
241
|
|
|
236
|
-
| Property
|
|
237
|
-
|
|
|
238
|
-
| `--login-btn-margin`
|
|
239
|
-
| `--login-btn-padding`
|
|
240
|
-
| `--login-btn-bg-color`
|
|
241
|
-
| `--login-btn-hover-bg-color`
|
|
242
|
-
| `--login-btn-border-radius`
|
|
243
|
-
| `--login-btn-text-color`
|
|
244
|
-
| `--login-btn-text-size`
|
|
245
|
-
| `--login-btn-font-family`
|
|
246
|
-
| `--login-btn-font-weight`
|
|
247
|
-
|
|
248
|
-
|
|
242
|
+
| Property | Description | Default |
|
|
243
|
+
| - | - | - |
|
|
244
|
+
| `--login-btn-margin` | Margin around the login button | `0` |
|
|
245
|
+
| `--login-btn-padding` | Padding inside button | `x-small ...` |
|
|
246
|
+
| `--login-btn-bg-color` | Button bg color | `var(--hot-color-primary-1000)` |
|
|
247
|
+
| `--login-btn-hover-bg-color` | Hover bg | `primary-900` |
|
|
248
|
+
| `--login-btn-border-radius` | Button radius | `radius-medium` |
|
|
249
|
+
| `--login-btn-text-color` | Button text color | `white` |
|
|
250
|
+
| `--login-btn-text-size` | Button text size | `var(--hot-font-size-medium)` |
|
|
251
|
+
| `--login-btn-font-family` | Button font family | from `--font-family` |
|
|
252
|
+
| `--login-btn-font-weight` | Button font weight | from `--font-weight` |
|
|
253
|
+
|
|
254
|
+
### Example
|
|
249
255
|
|
|
250
256
|
```css
|
|
251
257
|
hotosm-auth {
|