@atlasauth/svelte 0.1.3 → 0.1.5
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 +24 -24
- package/dist/accessors.d.ts +5 -0
- package/dist/accessors.js +3 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @atlasauth/svelte
|
|
2
2
|
|
|
3
3
|
The official **Svelte / SvelteKit** SDK for Atlas — the Svelte peer of
|
|
4
|
-
[`@
|
|
4
|
+
[`@atlasauth/react`](../react). Same surface, expressed the Svelte way: a client
|
|
5
5
|
installed through **context**, reactive auth state exposed as **stores**, and
|
|
6
6
|
`.svelte` **components** for the common flows.
|
|
7
7
|
|
|
8
|
-
It wraps [`@
|
|
8
|
+
It wraps [`@atlasauth/js`](../js), the framework-agnostic browser client, exactly as
|
|
9
9
|
the React SDK does — so both frameworks drive the same FAPI endpoints through one
|
|
10
10
|
implementation and cannot diverge in what the server sees.
|
|
11
11
|
|
|
@@ -21,7 +21,7 @@ implementation and cannot diverge in what the server sees.
|
|
|
21
21
|
## Install
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
|
-
pnpm add @
|
|
24
|
+
pnpm add @atlasauth/svelte
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
Peer dependencies: `svelte >= 4`. `@sveltejs/kit` is an **optional** peer, needed
|
|
@@ -38,10 +38,10 @@ component which also paints the appearance tokens onto a host-DOM wrapper.
|
|
|
38
38
|
```svelte
|
|
39
39
|
<!-- src/routes/+layout.svelte -->
|
|
40
40
|
<script lang="ts">
|
|
41
|
-
import { AtlasProvider } from '@
|
|
41
|
+
import { AtlasProvider } from '@atlasauth/svelte';
|
|
42
42
|
</script>
|
|
43
43
|
|
|
44
|
-
<AtlasProvider publishableKey="pk_live_…" frontendApi="https://your-instance
|
|
44
|
+
<AtlasProvider publishableKey="pk_live_…" frontendApi="https://your-instance-fapi.atlasauth.net">
|
|
45
45
|
<slot />
|
|
46
46
|
</AtlasProvider>
|
|
47
47
|
```
|
|
@@ -50,7 +50,7 @@ Or imperatively, from any component's `<script>`:
|
|
|
50
50
|
|
|
51
51
|
```svelte
|
|
52
52
|
<script lang="ts">
|
|
53
|
-
import { initAtlas } from '@
|
|
53
|
+
import { initAtlas } from '@atlasauth/svelte';
|
|
54
54
|
const atlas = initAtlas({ publishableKey: 'pk_live_…' });
|
|
55
55
|
</script>
|
|
56
56
|
```
|
|
@@ -73,7 +73,7 @@ live. They mirror the React hooks one-to-one:
|
|
|
73
73
|
|
|
74
74
|
```svelte
|
|
75
75
|
<script lang="ts">
|
|
76
|
-
import { getUser, getAuth } from '@
|
|
76
|
+
import { getUser, getAuth } from '@atlasauth/svelte';
|
|
77
77
|
const user = getUser();
|
|
78
78
|
const auth = getAuth();
|
|
79
79
|
|
|
@@ -97,7 +97,7 @@ The raw stores are also on the client: `useAtlas().user`, `.session`,
|
|
|
97
97
|
|
|
98
98
|
### 3. Components
|
|
99
99
|
|
|
100
|
-
Mirror `@
|
|
100
|
+
Mirror `@atlasauth/react`'s `components.tsx`:
|
|
101
101
|
|
|
102
102
|
| Component | Purpose |
|
|
103
103
|
| ----------------------- | ------------------------------------------------------------- |
|
|
@@ -114,7 +114,7 @@ Mirror `@atlas/react`'s `components.tsx`:
|
|
|
114
114
|
|
|
115
115
|
```svelte
|
|
116
116
|
<script lang="ts">
|
|
117
|
-
import { SignedIn, SignedOut, SignIn, UserButton, Protect } from '@
|
|
117
|
+
import { SignedIn, SignedOut, SignIn, UserButton, Protect } from '@atlasauth/svelte';
|
|
118
118
|
</script>
|
|
119
119
|
|
|
120
120
|
<SignedOut><SignIn /></SignedOut>
|
|
@@ -132,7 +132,7 @@ Mirror `@atlas/react`'s `components.tsx`:
|
|
|
132
132
|
|
|
133
133
|
### Theming & i18n
|
|
134
134
|
|
|
135
|
-
Same as `@
|
|
135
|
+
Same as `@atlasauth/react`: pass `appearance` (design tokens + per-element class
|
|
136
136
|
overrides — components render in the host DOM, no iframe, so Tailwind/CSS just
|
|
137
137
|
work) and `localization` (a flat i18n catalog, merged over `en-US`) to
|
|
138
138
|
`initAtlas` / `<AtlasProvider>`.
|
|
@@ -148,19 +148,19 @@ work) and `localization` (a flat i18n catalog, merged over `en-US`) to
|
|
|
148
148
|
|
|
149
149
|
## SvelteKit SSR
|
|
150
150
|
|
|
151
|
-
The server helper lives at the separate `@
|
|
152
|
-
on `@
|
|
151
|
+
The server helper lives at the separate `@atlasauth/svelte/server` entry (it depends
|
|
152
|
+
on `@atlasauth/backend` and must never enter a browser bundle). It verifies the
|
|
153
153
|
session JWT **locally at the edge** — the JWKS is cached in-process, so a warm
|
|
154
154
|
server verifies with no network round-trip.
|
|
155
155
|
|
|
156
156
|
### `hooks.server.ts`
|
|
157
157
|
|
|
158
158
|
```ts
|
|
159
|
-
import { handleAtlas } from '@
|
|
159
|
+
import { handleAtlas } from '@atlasauth/svelte/server';
|
|
160
160
|
|
|
161
161
|
export const handle = handleAtlas({
|
|
162
|
-
jwksUrl: 'https://your-instance
|
|
163
|
-
issuer: 'https://your-instance
|
|
162
|
+
jwksUrl: 'https://your-instance-fapi.atlasauth.net/.well-known/jwks.json',
|
|
163
|
+
issuer: 'https://your-instance-fapi.atlasauth.net',
|
|
164
164
|
// authorizedParties: ['https://app.example.com'], // optional azp allowlist
|
|
165
165
|
});
|
|
166
166
|
```
|
|
@@ -172,7 +172,7 @@ This resolves the session once per request and stashes it on
|
|
|
172
172
|
|
|
173
173
|
```ts
|
|
174
174
|
// +layout.server.ts
|
|
175
|
-
import { getServerAuth } from '@
|
|
175
|
+
import { getServerAuth } from '@atlasauth/svelte/server';
|
|
176
176
|
|
|
177
177
|
export const load = (event) => {
|
|
178
178
|
const auth = getServerAuth(event);
|
|
@@ -182,7 +182,7 @@ export const load = (event) => {
|
|
|
182
182
|
|
|
183
183
|
```ts
|
|
184
184
|
// a protected +page.server.ts
|
|
185
|
-
import { getServerAuth } from '@
|
|
185
|
+
import { getServerAuth } from '@atlasauth/svelte/server';
|
|
186
186
|
import { error } from '@sveltejs/kit';
|
|
187
187
|
|
|
188
188
|
export const load = (event) => {
|
|
@@ -198,13 +198,13 @@ export const load = (event) => {
|
|
|
198
198
|
|
|
199
199
|
`getServerAuth(event).has(condition)` answers a condition without throwing;
|
|
200
200
|
`.protect(condition)` asserts it (throwing `ForbiddenError`). Both use the shared
|
|
201
|
-
`@
|
|
201
|
+
`@atlasauth/authz` primitive — the same one `<Protect>` evaluates in the browser — so
|
|
202
202
|
a check reads identically on the client, here, and in the React/Next SDKs.
|
|
203
203
|
|
|
204
204
|
For strong typing of `event.locals.auth`, add to `src/app.d.ts`:
|
|
205
205
|
|
|
206
206
|
```ts
|
|
207
|
-
import type { ServerAuth } from '@
|
|
207
|
+
import type { ServerAuth } from '@atlasauth/svelte/server';
|
|
208
208
|
declare global {
|
|
209
209
|
namespace App {
|
|
210
210
|
interface Locals {
|
|
@@ -218,13 +218,13 @@ export {};
|
|
|
218
218
|
## Development
|
|
219
219
|
|
|
220
220
|
```bash
|
|
221
|
-
pnpm --filter @
|
|
222
|
-
pnpm --filter @
|
|
223
|
-
pnpm --filter @
|
|
221
|
+
pnpm --filter @atlasauth/svelte build # svelte-package → dist/
|
|
222
|
+
pnpm --filter @atlasauth/svelte typecheck # svelte-check
|
|
223
|
+
pnpm --filter @atlasauth/svelte test # vitest (jsdom + @testing-library/svelte)
|
|
224
224
|
```
|
|
225
225
|
|
|
226
226
|
Tests cover the context init, the reactive stores, and `<SignedIn>`/`<SignedOut>`
|
|
227
|
-
(with `@
|
|
227
|
+
(with `@atlasauth/js` mocked).
|
|
228
228
|
|
|
229
229
|
## License
|
|
230
230
|
|
package/dist/accessors.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type Readable } from 'svelte/store';
|
|
2
2
|
import { type FlowState, type ProviderToken } from '@atlasauth/js';
|
|
3
|
+
import { type AuthStatus } from './context';
|
|
3
4
|
import { type ProtectCondition } from './protect';
|
|
4
5
|
import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
|
|
5
6
|
/**
|
|
@@ -35,6 +36,10 @@ export declare function getSession(): Readable<UseSession>;
|
|
|
35
36
|
export interface UseAuth {
|
|
36
37
|
isLoaded: boolean;
|
|
37
38
|
isSignedIn: boolean;
|
|
39
|
+
/** Three-state auth status (`loading` | `signed_in` | `signed_out`); same source as isLoaded/isSignedIn. */
|
|
40
|
+
status: AuthStatus;
|
|
41
|
+
/** The active session, or null while loading or signed out. */
|
|
42
|
+
session: AtlasSession | null;
|
|
38
43
|
userId: string | null;
|
|
39
44
|
sessionId: string | null;
|
|
40
45
|
orgId: string | null;
|
package/dist/accessors.js
CHANGED
|
@@ -20,9 +20,11 @@ export function getSession() {
|
|
|
20
20
|
}
|
|
21
21
|
export function getAuth() {
|
|
22
22
|
const atlas = useAtlas();
|
|
23
|
-
return derived([atlas.status, atlas.claims], ([$status, $claims]) => ({
|
|
23
|
+
return derived([atlas.status, atlas.session, atlas.claims], ([$status, $session, $claims]) => ({
|
|
24
24
|
isLoaded: $status !== 'loading',
|
|
25
25
|
isSignedIn: $status === 'signed_in',
|
|
26
|
+
status: $status,
|
|
27
|
+
session: $session,
|
|
26
28
|
userId: $claims?.sub ?? null,
|
|
27
29
|
sessionId: $claims?.sid ?? null,
|
|
28
30
|
orgId: $claims?.org_id ?? null,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlasauth/svelte",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"svelte": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"./package.json": "./package.json"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@atlasauth/js": "0.
|
|
25
|
-
"@atlasauth/backend": "0.
|
|
24
|
+
"@atlasauth/js": "0.4.0",
|
|
25
|
+
"@atlasauth/backend": "0.3.0",
|
|
26
26
|
"@atlasauth/authz": "0.1.1"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|