@descope/angular-sdk 0.0.0-next-5d0760a4-20240722 → 0.0.0-next-0e292820-20250415

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 (60) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +711 -11
  3. package/{esm2022 → dist/esm2022}/environment.mjs +2 -2
  4. package/dist/esm2022/lib/components/access-key-management/access-key-management.component.mjs +67 -0
  5. package/dist/esm2022/lib/components/applications-portal/applications-portal.component.mjs +75 -0
  6. package/dist/esm2022/lib/components/audit-management/audit-management.component.mjs +70 -0
  7. package/dist/esm2022/lib/components/descope/descope.component.mjs +191 -0
  8. package/dist/esm2022/lib/components/role-management/role-management.component.mjs +70 -0
  9. package/dist/esm2022/lib/components/sign-in-flow/sign-in-flow.component.mjs +56 -0
  10. package/dist/esm2022/lib/components/sign-up-flow/sign-up-flow.component.mjs +56 -0
  11. package/dist/esm2022/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.mjs +56 -0
  12. package/dist/esm2022/lib/components/user-management/user-management.component.mjs +70 -0
  13. package/dist/esm2022/lib/components/user-profile/user-profile.component.mjs +78 -0
  14. package/dist/esm2022/lib/descope-auth.module.mjs +83 -0
  15. package/{esm2022 → dist/esm2022}/lib/services/descope-auth.guard.mjs +1 -1
  16. package/dist/esm2022/lib/services/descope-auth.service.mjs +145 -0
  17. package/dist/esm2022/lib/services/descope.interceptor.mjs +51 -0
  18. package/dist/esm2022/lib/types/types.mjs +6 -0
  19. package/{esm2022 → dist/esm2022}/lib/utils/constants.mjs +1 -1
  20. package/dist/esm2022/lib/utils/helpers.mjs +27 -0
  21. package/{esm2022 → dist/esm2022}/public-api.mjs +2 -1
  22. package/{fesm2022 → dist/fesm2022}/descope-angular-sdk.mjs +263 -80
  23. package/dist/fesm2022/descope-angular-sdk.mjs.map +1 -0
  24. package/{lib → dist/lib}/components/access-key-management/access-key-management.component.d.ts +3 -1
  25. package/dist/lib/components/applications-portal/applications-portal.component.d.ts +24 -0
  26. package/{lib → dist/lib}/components/audit-management/audit-management.component.d.ts +3 -1
  27. package/{lib → dist/lib}/components/descope/descope.component.d.ts +8 -1
  28. package/{lib → dist/lib}/components/role-management/role-management.component.d.ts +3 -1
  29. package/{lib → dist/lib}/components/sign-in-flow/sign-in-flow.component.d.ts +7 -1
  30. package/{lib → dist/lib}/components/sign-up-flow/sign-up-flow.component.d.ts +7 -1
  31. package/{lib → dist/lib}/components/sign-up-or-in-flow/sign-up-or-in-flow.component.d.ts +7 -1
  32. package/{lib → dist/lib}/components/user-management/user-management.component.d.ts +3 -1
  33. package/{lib → dist/lib}/components/user-profile/user-profile.component.d.ts +6 -2
  34. package/{lib → dist/lib}/descope-auth.module.d.ts +2 -1
  35. package/{lib → dist/lib}/services/descope-auth.service.d.ts +7 -6
  36. package/{lib → dist/lib}/types/types.d.ts +3 -1
  37. package/{public-api.d.ts → dist/public-api.d.ts} +1 -0
  38. package/package.json +74 -25
  39. package/esm2022/lib/components/access-key-management/access-key-management.component.mjs +0 -61
  40. package/esm2022/lib/components/audit-management/audit-management.component.mjs +0 -61
  41. package/esm2022/lib/components/descope/descope.component.mjs +0 -156
  42. package/esm2022/lib/components/role-management/role-management.component.mjs +0 -61
  43. package/esm2022/lib/components/sign-in-flow/sign-in-flow.component.mjs +0 -44
  44. package/esm2022/lib/components/sign-up-flow/sign-up-flow.component.mjs +0 -44
  45. package/esm2022/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.mjs +0 -44
  46. package/esm2022/lib/components/user-management/user-management.component.mjs +0 -61
  47. package/esm2022/lib/components/user-profile/user-profile.component.mjs +0 -66
  48. package/esm2022/lib/descope-auth.module.mjs +0 -77
  49. package/esm2022/lib/services/descope-auth.service.mjs +0 -154
  50. package/esm2022/lib/services/descope.interceptor.mjs +0 -51
  51. package/esm2022/lib/types/types.mjs +0 -6
  52. package/esm2022/lib/utils/helpers.mjs +0 -27
  53. package/fesm2022/descope-angular-sdk.mjs.map +0 -1
  54. /package/{environment.d.ts → dist/environment.d.ts} +0 -0
  55. /package/{esm2022 → dist/esm2022}/descope-angular-sdk.mjs +0 -0
  56. /package/{index.d.ts → dist/index.d.ts} +0 -0
  57. /package/{lib → dist/lib}/services/descope-auth.guard.d.ts +0 -0
  58. /package/{lib → dist/lib}/services/descope.interceptor.d.ts +0 -0
  59. /package/{lib → dist/lib}/utils/constants.d.ts +0 -0
  60. /package/{lib → dist/lib}/utils/helpers.d.ts +0 -0
package/README.md CHANGED
@@ -1,21 +1,721 @@
1
- # AngularSdk
1
+ # Descope SDK for Angular
2
2
 
3
- This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
3
+ The Descope SDK for Angular provides convenient access to the Descope for an application written on top of Angular. You can read more on the [Descope Website](https://descope.com).
4
4
 
5
- ## Code scaffolding
5
+ ## Requirements
6
6
 
7
- Run `ng generate component component-name --project angular-sdk` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-sdk`.
7
+ - The SDK supports Angular version 16 and above.
8
+ - A Descope `Project ID` is required for using the SDK. Find it on the [project page in the Descope Console](https://app.descope.com/settings/project).
8
9
 
9
- > Note: Don't forget to add `--project angular-sdk` or else it will be added to the default project in your `angular.json` file.
10
+ ## Installing the SDK
10
11
 
11
- ## Build
12
+ Install the package with:
12
13
 
13
- Run `ng build angular-sdk` to build the project. The build artifacts will be stored in the `dist/` directory.
14
+ ```bash
15
+ npm i --save @descope/angular-sdk
16
+ ```
14
17
 
15
- ## Running unit tests
18
+ Add Descope type definitions to your `tsconfig.ts`
16
19
 
17
- Run `ng test angular-sdk` to execute the unit tests via [Karma](https://karma-runner.github.io).
20
+ ```
21
+ "compilerOptions": {
22
+ "typeRoots": ["./node_modules/@descope"],
23
+ <other options>
24
+ }
25
+ ```
18
26
 
19
- ## Further help
27
+ ## Usage
20
28
 
21
- To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
29
+ ### NgModule - Import `DescopeAuthModule` to your application
30
+
31
+ `app.module.ts`
32
+
33
+ ```ts
34
+ import { NgModule } from '@angular/core';
35
+ import { BrowserModule } from '@angular/platform-browser';
36
+
37
+ import { AppComponent } from './app.component';
38
+ import { DescopeAuthModule } from '@descope/angular-sdk';
39
+
40
+ @NgModule({
41
+ declarations: [AppComponent],
42
+ imports: [
43
+ BrowserModule,
44
+ DescopeAuthModule.forRoot({
45
+ projectId: '<your_project_id>'
46
+ })
47
+ ],
48
+ bootstrap: [AppComponent]
49
+ })
50
+ export class AppModule {}
51
+ ```
52
+
53
+ ### Standalone Mode - Configure Descope SDK for your application
54
+
55
+ `main.ts`
56
+
57
+ ```ts
58
+ import { bootstrapApplication } from '@angular/platform-browser';
59
+ import { AppComponent } from './app/app.component';
60
+ import { DescopeAuthConfig } from '@descope/angular-sdk';
61
+
62
+ bootstrapApplication(AppComponent, {
63
+ providers: [
64
+ { provide: DescopeAuthConfig, useValue: { projectId: '<your_project_id>' } }
65
+ ]
66
+ }).catch((err) => console.error(err));
67
+ ```
68
+
69
+ ### Use Descope to render specific flow
70
+
71
+ You can use **default flows** or **provide flow id** directly to the descope component
72
+
73
+ #### 1. Default flows
74
+
75
+ `app.component.html`
76
+
77
+ ```angular2html
78
+ <descope-sign-in-flow
79
+ (success)="onSuccess($event)"
80
+ (error)="onError($event)"
81
+ (ready)="onReady()"
82
+ ></descope-sign-in-flow>
83
+ <!-- Optionally, you can show/hide loading indication until the flow page is ready -->
84
+ <div
85
+ *ngIf="isLoading"
86
+ class="loading-indicator"
87
+ style="display: flex; justify-content: center; align-items: center;"
88
+ >
89
+ Loading...
90
+ </div>
91
+ ```
92
+
93
+ `app.component.ts`
94
+
95
+ ```ts
96
+ import { Component } from '@angular/core';
97
+
98
+ @Component({
99
+ selector: 'app-root',
100
+ templateUrl: './app.component.html'
101
+ })
102
+ export class AppComponent {
103
+ // Optionally, you can show/hide loading indication until the flow page is ready
104
+ // See usage in onReady() method and the html template
105
+ isLoading = true;
106
+
107
+ onSuccess(e: CustomEvent) {
108
+ console.log('SUCCESSFULLY LOGGED IN', e.detail);
109
+ }
110
+
111
+ onError(e: CustomEvent) {
112
+ console.log('ERROR FROM LOG IN FLOW', e.detail);
113
+ }
114
+
115
+ onReady() {
116
+ this.isLoading = false;
117
+ }
118
+ }
119
+ ```
120
+
121
+ #### 2. Provide flow id
122
+
123
+ ```angular2html
124
+ <descope
125
+ flowId="<your_flow_id>"
126
+ (success)="<your_success_function>"
127
+ (error)="<your_error_function>"
128
+ <!-- theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light"
129
+ theme="dark"
130
+
131
+ locale can be any supported locale which the flow's screen translated to, if not provided, the locale is taken from the browser's locale.
132
+ locale="en"
133
+
134
+ debug can be set to true to enable debug mode
135
+ debug="true"
136
+
137
+ tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant
138
+ tenant=<tenantId>
139
+
140
+ Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user)
141
+ redirectUrl=<redirectUrl>
142
+
143
+ telemetryKey=<telemtry_key>
144
+
145
+ autoFocus can be true, false or "skipFirstScreen". Default is true.
146
+ - true: automatically focus on the first input of each screen
147
+ - false: do not automatically focus on screen's inputs
148
+ - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
149
+ autoFocus="skipFirstScreen"
150
+
151
+ validateOnBlur can be true or false. Default is false.
152
+ - true: Trigger input validation upon blur, in addition to the validation on submit
153
+ - false: do not trigger input validation upon blur
154
+
155
+ restartOnError can be true or false. Default is false.
156
+ - true: In case of flow version mismatch, will restart the flow if the components version was not changed
157
+ - false: Will not auto restart the flow in case of a flow version mismatch
158
+
159
+ errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
160
+ NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
161
+ Example:
162
+ errorTransformer = (error: { text: string; type: string }): string => {
163
+ const translationMap: { [key: string]: string } = {
164
+ SAMLStartFailed: 'Failed to start SAML flow'
165
+ };
166
+ return translationMap[error.type] || error.text;
167
+ };
168
+ ...
169
+ errorTransformer={errorTransformer}
170
+
171
+ form is an object the initial form context that is used in screens inputs in the flow execution.
172
+ Used to inject predefined input values on flow start such as custom inputs, custom attributes and other inputs.
173
+ Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.".
174
+ NOTE: form is not required. If not provided, 'form' context key will be empty before user input.
175
+ Example:
176
+ form={{ email: "predefinedname@domain.com", firstName: "test", "customAttribute.test": "aaaa", "myCustomInput": 12 }}
177
+
178
+ client is an object the initial client context in the flow execution.
179
+ Keys passed can be accessed in flows actions and conditions prefixed with "client.".
180
+ NOTE: client is not required. If not provided, context key will be empty.
181
+ Example:
182
+ client={{ version: "1.2.0" }}
183
+
184
+ Use a custom style name or keep empty to use the default style.
185
+ styleId="my-awesome-style"
186
+
187
+ Set a CSP nonce that will be used for style and script tags.
188
+ nonce="rAnd0m"
189
+
190
+ Clear screen error message on user input.
191
+ dismissScreenErrorOnInput=true
192
+
193
+ logger is an object describing how to log info, warn and errors.
194
+ NOTE: logger is not required. If not provided, the logs will be printed to the console.
195
+ Example:
196
+ const logger = {
197
+ info: (title: string, description: string, state: any) => {
198
+ console.log(title, description, JSON.stringify(state));
199
+ },
200
+ warn: (title: string, description: string) => {
201
+ console.warn(title);
202
+ },
203
+ error: (title: string, description: string) => {
204
+ console.error('OH NOO');
205
+ },
206
+ }
207
+ ...
208
+ logger={logger}-->
209
+ ></descope>
210
+ ```
211
+
212
+ ### `onScreenUpdate`
213
+
214
+ A function that is called whenever there is a new screen state and after every next call. It receives the following parameters:
215
+
216
+ - `screenName`: The name of the screen that is about to be rendered
217
+ - `context`: An object containing the upcoming screen context
218
+ - `next`: A function that, when called, continues the flow execution
219
+ - `ref`: A reference to the descope-wc node
220
+
221
+ The function can be sync or async, and should return a boolean indicating whether a custom screen should be rendered:
222
+
223
+ - `true`: Render a custom screen
224
+ - `false`: Render the default flow screen
225
+
226
+ This function allows rendering custom screens instead of the default flow screens.
227
+ It can be useful for highly customized UIs or specific logic not covered by the default screens
228
+
229
+ To render a custom screen, its elements should be appended as children of the `descope` component
230
+
231
+ Usage example:
232
+
233
+ ```javascript
234
+ function onScreenUpdate(screenName, context, next, ref) {
235
+ if (screenName === 'My Custom Screen') {
236
+ return true;
237
+ }
238
+
239
+ return false;
240
+ }
241
+ ```
242
+
243
+ #### Standalone Mode
244
+
245
+ All components in the sdk are standalone, so you can use them by directly importing them to your components.
246
+
247
+ ### Use the `DescopeAuthService` and its exposed fields (`descopeSdk`, `session$`, `user$`) to access authentication state, user details and utilities
248
+
249
+ This can be helpful to implement application-specific logic. Examples:
250
+
251
+ - Render different components if current session is authenticated
252
+ - Render user's content
253
+ - Logout button
254
+
255
+ `app.component.html`
256
+
257
+ ```angular2html
258
+ <p *ngIf="!isAuthenticated"> You are not logged in</p>
259
+ <button *ngIf="isAuthenticated" (click)="logout()">LOGOUT</button>
260
+ <p>User: {{userName}}</p>
261
+ ```
262
+
263
+ `app.component.ts`
264
+
265
+ ```ts
266
+ import { Component, OnInit } from '@angular/core';
267
+ import { DescopeAuthService } from '@descope/angular-sdk';
268
+
269
+ @Component({
270
+ selector: 'app-home',
271
+ templateUrl: './app.component.html',
272
+ styleUrls: ['./app.component.scss']
273
+ })
274
+ export class AppComponent implements OnInit {
275
+ isAuthenticated: boolean = false;
276
+ userName: string = '';
277
+
278
+ constructor(private authService: DescopeAuthService) {}
279
+
280
+ ngOnInit() {
281
+ this.authService.session$.subscribe((session) => {
282
+ this.isAuthenticated = session.isAuthenticated;
283
+ });
284
+ this.authService.user$.subscribe((descopeUser) => {
285
+ if (descopeUser.user) {
286
+ this.userName = descopeUser.user.name ?? '';
287
+ }
288
+ });
289
+ }
290
+
291
+ logout() {
292
+ this.authService.descopeSdk.logout();
293
+ }
294
+ }
295
+ ```
296
+
297
+ ### Session Refresh
298
+
299
+ `DescopeAuthService` provides `refreshSession` and `refreshUser` methods that triggers a single request to the Descope backend to attempt to refresh the session or user. You can use them whenever you want to refresh the session/user. For example you can use `APP_INITIALIZER` provider to attempt to refresh session and user on each page refresh:
300
+
301
+ `app.module.ts`
302
+
303
+ ```ts
304
+ import { APP_INITIALIZER, NgModule } from '@angular/core';
305
+ import { BrowserModule } from '@angular/platform-browser';
306
+ import { AppComponent } from './app.component';
307
+ import { DescopeAuthModule, DescopeAuthService } from '@descope/angular-sdk';
308
+ import { zip } from 'rxjs';
309
+
310
+ export function initializeApp(authService: DescopeAuthService) {
311
+ return () => zip([authService.refreshSession(), authService.refreshUser()]);
312
+ }
313
+
314
+ @NgModule({
315
+ declarations: [AppComponent],
316
+ imports: [
317
+ BrowserModule,
318
+ DescopeAuthModule.forRoot({
319
+ projectId: '<your_project_id>'
320
+ })
321
+ ],
322
+ providers: [
323
+ {
324
+ provide: APP_INITIALIZER,
325
+ useFactory: initializeApp,
326
+ deps: [DescopeAuthService],
327
+ multi: true
328
+ }
329
+ ],
330
+ bootstrap: [AppComponent]
331
+ })
332
+ export class AppModule {}
333
+ ```
334
+
335
+ #### Standalone Mode Note:
336
+
337
+ You can use the same approach with `APP_INITIALIZER` in standalone mode, by adding it to `providers` array of the application.
338
+
339
+ ### Descope Interceptor
340
+
341
+ You can also use `DescopeInterceptor` to attempt to refresh session on each HTTP request that gets `401` or `403` response:
342
+
343
+ `app.module.ts`
344
+
345
+ ```ts
346
+ import { NgModule } from '@angular/core';
347
+ import { BrowserModule } from '@angular/platform-browser';
348
+ import { AppComponent } from './app.component';
349
+ import {
350
+ HttpClientModule,
351
+ provideHttpClient,
352
+ withInterceptors
353
+ } from '@angular/common/http';
354
+ import { DescopeAuthModule, descopeInterceptor } from '@descope/angular-sdk';
355
+
356
+ @NgModule({
357
+ declarations: [AppComponent],
358
+ imports: [
359
+ BrowserModule,
360
+ HttpClientModule,
361
+ DescopeAuthModule.forRoot({
362
+ projectId: '<your_project_id>',
363
+ pathsToIntercept: ['/protectedPath']
364
+ })
365
+ ],
366
+ providers: [provideHttpClient(withInterceptors([descopeInterceptor]))],
367
+ bootstrap: [AppComponent]
368
+ })
369
+ export class AppModule {}
370
+ ```
371
+
372
+ `DescopeInterceptor`:
373
+
374
+ - is configured for requests that urls contain one of `pathsToIntercept`. If not provided it will be used for all requests.
375
+ - attaches session token as `Authorization` header in `Bearer <token>` format
376
+ - if requests get response with `401` or `403` it automatically attempts to refresh session
377
+ - if refresh attempt is successful, it automatically retries original request, otherwise it fails with original error
378
+
379
+ **For more SDK usage examples refer to [docs](https://docs.descope.com/build/guides/client_sdks/)**
380
+
381
+ ### Session token server validation (pass session token to server API)
382
+
383
+ When developing a full-stack application, it is common to have private server API which requires a valid session token:
384
+
385
+ ![session-token-validation-diagram](https://docs.descope.com/static/SessionValidation-cf7b2d5d26594f96421d894273a713d8.png)
386
+
387
+ Note: Descope also provides server-side SDKs in various languages (NodeJS, Go, Python, etc). Descope's server SDKs have out-of-the-box session validation API that supports the options described bellow. To read more about session validation, Read [this section](https://docs.descope.com/build/guides/gettingstarted/#session-validation) in Descope documentation.
388
+
389
+ You can securely communicate with your backend either by using `DescopeInterceptor` or manually adding token to your requests (ie. by using `DescopeAuthService.getSessionToken()` helper function)
390
+
391
+ ### Helper Functions
392
+
393
+ You can also use the following helper methods on `DescopeAuthService` to assist with various actions managing your JWT.
394
+
395
+ - `getSessionToken()` - Get current session token.
396
+ - `getRefreshToken()` - Get current refresh token.
397
+ - `isAuthenticated()` - Returns boolean whether user is authenticated
398
+ - `refreshSession` - Force a refresh on current session token using an existing valid refresh token.
399
+ - `refreshUser` - Force a refresh on current user using an existing valid refresh token.
400
+ - `isSessionTokenExpired(token = getSessionToken())` - Check whether the current session token is expired. Provide a session token if is not persisted.
401
+ - `isRefreshTokenExpired(token = getRefreshToken())` - Check whether the current refresh token is expired. Provide a refresh token if is not persisted.
402
+ - `getJwtRoles(token = getSessionToken(), tenant = '')` - Get current roles from an existing session token. Provide tenant id for specific tenant roles.
403
+ - `getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions.
404
+ - `getCurrentTenant(token = getSessionToken())` - Get current tenant id from an existing session token (from the `dct` claim).
405
+
406
+ ### Refresh token lifecycle
407
+
408
+ Descope SDK is automatically refreshes the session token when it is about to expire. This is done in the background using the refresh token, without any additional configuration.
409
+
410
+ If the Descope project settings are configured to manage tokens in cookies.
411
+ you must also configure a custom domain, and set it as the `baseUrl` in `DescopeAuthModule`.
412
+
413
+ ### Descope Guard
414
+
415
+ `angular-sdk` provides a convenient route guard that prevents from accessing given route for users that are not authenticated:
416
+
417
+ ```ts
418
+ import { NgModule } from '@angular/core';
419
+ import { RouterModule, Routes } from '@angular/router';
420
+ import { HomeComponent } from './home/home.component';
421
+ import { ProtectedComponent } from './protected/protected.component';
422
+ import { descopeAuthGuard } from '@descope/angular-sdk';
423
+ import { LoginComponent } from './login/login.component';
424
+
425
+ const routes: Routes = [
426
+ {
427
+ path: 'step-up',
428
+ component: ProtectedComponent,
429
+ canActivate: [descopeAuthGuard],
430
+ data: { descopeFallbackUrl: '/' }
431
+ },
432
+ { path: 'login', component: LoginComponent },
433
+ { path: '**', component: HomeComponent }
434
+ ];
435
+
436
+ @NgModule({
437
+ imports: [RouterModule.forRoot(routes, { enableTracing: false })],
438
+ exports: [RouterModule]
439
+ })
440
+ export class AppRoutingModule {}
441
+ ```
442
+
443
+ If not authenticated user tries to access protected route they will be redirected to `descopeFallbackUrl`
444
+
445
+ ### Token Persistence
446
+
447
+ Descope stores two tokens: the session token and the refresh token.
448
+
449
+ - The refresh token is either stored in local storage or an `httpOnly` cookie. This is configurable in the Descope console.
450
+ - The session token is stored in either local storage or a JS cookie. This behavior is configurable via the `sessionTokenViaCookie` prop in the `DescopeAuthModule` module.
451
+
452
+ However, for security reasons, you may choose not to store tokens in the browser. In this case, you can pass `persistTokens: false` to the `DescopeAuthModule` module. This prevents the SDK from storing the tokens in the browser.
453
+
454
+ Notes:
455
+
456
+ - You must configure the refresh token to be stored in an `httpOnly` cookie in the Descope console. Otherwise, the refresh token will not be stored, and when the page is refreshed, the user will be logged out.
457
+ - You can still retrieve the session token using the `session` observable of `DescopeAuthService`.
458
+ - The session token cookie is set to [`SameSite=Strict; Secure;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) by default.
459
+ If you need to customize this, you can set `sessionTokenViaCookie={sameSite: 'Lax', secure: false}` (if you pass only `sameSite`, `secure` will be set to `true` by default).
460
+
461
+ ### Last User Persistence
462
+
463
+ Descope stores the last user information in local storage. If you wish to disable this feature, you can pass `storeLastAuthenticatedUser: false` to the `DescopeAuthModule` module. Please note that some features related to the last authenticated user may not function as expected if this behavior is disabled.
464
+
465
+ ### Widgets
466
+
467
+ Widgets are components that allow you to expose management features for tenant-based implementation. In certain scenarios, your customers may require the capability to perform managerial actions independently, alleviating the necessity to contact you. Widgets serve as a feature enabling you to delegate these capabilities to your customers in a modular manner.
468
+
469
+ Important Note:
470
+
471
+ - For the user to be able to use the widget, they need to be assigned the `Tenant Admin` Role.
472
+
473
+ #### User Management
474
+
475
+ The `UserManagement` widget will let you embed a user table in your site to view and take action.
476
+
477
+ The widget lets you:
478
+
479
+ - Create a new user
480
+ - Edit an existing user
481
+ - Activate / disable an existing user
482
+ - Reset an existing user's password
483
+ - Remove an existing user's passkey
484
+ - Delete an existing user
485
+
486
+ Note:
487
+
488
+ - Custom fields also appear in the table.
489
+
490
+ ###### Usage
491
+
492
+ ```html
493
+ <user-management tenant="tenant-id" widgetId="user-management-widget" />
494
+ ```
495
+
496
+ Example:
497
+ [Manage Users](./projects/demo-app/src/app/manage-users/manage-users.component.html)
498
+
499
+ #### Role Management
500
+
501
+ The `RoleManagement` widget will let you embed a role table in your site to view and take action.
502
+
503
+ The widget lets you:
504
+
505
+ - Create a new role
506
+ - Change an existing role's fields
507
+ - Delete an existing role
508
+
509
+ Note:
510
+
511
+ - The `Editable` field is determined by the user's access to the role - meaning that project-level roles are not editable by tenant level users.
512
+ - You need to pre-define the permissions that the user can use, which are not editable in the widget.
513
+
514
+ ###### Usage
515
+
516
+ ```html
517
+ <role-management tenant="tenant-id" widgetId="role-management-widget" />
518
+ ```
519
+
520
+ Example:
521
+ [Manage Roles](./projects/demo-app/src/app/manage-roles/manage-roles.component.html)
522
+
523
+ #### AccessKeyManagement
524
+
525
+ The `AccessKeyManagement` widget will let you embed an access key table in your site to view and take action.
526
+
527
+ The widget lets you:
528
+
529
+ - Create a new access key
530
+ - Activate / deactivate an existing access key
531
+ - Delete an exising access key
532
+
533
+ ###### Usage
534
+
535
+ ```html
536
+ <!-- admin view: manage all tenant users' access keys -->
537
+ <access-key-management
538
+ tenant="tenant-id"
539
+ widgetId="access-key-management-widget"
540
+ />
541
+
542
+ <!-- user view: mange access key for the logged-in tenant's user -->
543
+ <access-key-management
544
+ tenant="tenant-id"
545
+ widgetId="user-access-key-management-widget"
546
+ />
547
+ ```
548
+
549
+ Example:
550
+ [Manage Access Keys](./projects/demo-app/src/app/manage-access-keys/manage-access-keys.component.html)
551
+
552
+ #### AuditManagement
553
+
554
+ The `AuditManagement` widget will let you embed an audit table in your site.
555
+
556
+ ###### Usage
557
+
558
+ ```html
559
+ <audit-management tenant="tenant-id" widgetId="audit-management-widget" />
560
+ ```
561
+
562
+ Example:
563
+ [Manage Audit](./projects/demo-app/src/app/manage-audit/manage-audit.component.html)
564
+
565
+ #### UserProfile
566
+
567
+ The `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.
568
+
569
+ The widget lets you:
570
+
571
+ - Update user profile picture
572
+ - Update user personal information
573
+ - Update authentication methods
574
+ - Logout
575
+
576
+ ###### Usage
577
+
578
+ ```angular2html
579
+ <user-profile widgetId="user-profile-widget"
580
+ (logout)="<your_logout_function>"
581
+ />
582
+ ```
583
+
584
+ Example:
585
+ [My User Profile](./projects/demo-app/src/app/my-user-profile/my-user-profile.component.html)
586
+
587
+ #### ApplicationsPortal
588
+
589
+ The `ApplicationsPortal` lets you embed an applications portal component in your app and allows the logged-in user to open applications they are assigned to.
590
+
591
+ ###### Usage
592
+
593
+ ```angular2html
594
+ <applications-portal widgetId="applications-portal-widget" />
595
+ ```
596
+
597
+ Example:
598
+ [My User Profile](./projects/demo-app/src/app/my-applications-portal/my-applications-portal.component.html)
599
+
600
+ ## Code Example
601
+
602
+ You can find an example angular app in the [examples folder](./projects/demo-app).
603
+
604
+ ### Setup
605
+
606
+ To run the examples, create `environment.development.ts` file in `environments` folder.
607
+
608
+ ```ts
609
+ import { Env } from './conifg';
610
+
611
+ export const environment: Env = {
612
+ descopeProjectId: '<your_project_id>'
613
+ };
614
+ ```
615
+
616
+ Find your Project ID in the [Descope console](https://app.descope.com/settings/project).
617
+
618
+ ### Run Example
619
+
620
+ Run the following command in the root of the project to build and run the example:
621
+
622
+ ```bash
623
+ pnpm i && npm start
624
+ ```
625
+
626
+ ### Example Optional Env Variables
627
+
628
+ See the following table for customization environment variables for the example app:
629
+
630
+ | Env Variable | Description | Default value |
631
+ | -------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------- |
632
+ | descopeFlowId | Which flow ID to use in the login page | **sign-up-or-in** |
633
+ | descopeBaseUrl | Custom Descope base URL | None |
634
+ | descopeBaseStaticUrl | Custom Descope base static URL | None |
635
+ | descopeTheme | Flow theme | None |
636
+ | descopeLocale | Flow locale | Browser's locale |
637
+ | descopeRedirectUrl | Flow redirect URL for OAuth/SSO/Magic Link/Enchanted Link | None |
638
+ | descopeTenantId | Flow tenant ID for SSO/SAML | None |
639
+ | descopeDebugMode | **"true"** - Enable debugger</br>**"false"** - Disable flow debugger | None |
640
+ | descopeStepUpFlowId | Step up flow ID to show to logged in user (via button). e.g. "step-up". Button will be hidden if not provided | None |
641
+ | descopeTelemetryKey | **String** - Telemetry public key provided by Descope Inc | None |
642
+ | descopeBackendUrl | Url to your test backend app in case you want to test e2e | None |
643
+
644
+ Example `environment.development.ts` file:
645
+
646
+ ```ts
647
+ import { Env } from './conifg';
648
+
649
+ export const environment: Env = {
650
+ descopeProjectId: '<your_project_id>',
651
+ descopeBaseUrl: '<your_base_url>',
652
+ descopeBaseStaticUrl: '<your_base_static_url>',
653
+ descopeFlowId: 'sign-in',
654
+ descopeDebugMode: false,
655
+ descopeTheme: 'os',
656
+ descopeLocale: 'en_US',
657
+ descopeRedirectUrl: '<your_redirect_url>',
658
+ descopeTelemetryKey: '<your_telemetry_key>',
659
+ descopeStepUpFlowId: 'step-up',
660
+ descopeBackendUrl: 'http://localhost:8080/protected'
661
+ };
662
+ ```
663
+
664
+ ## Troubleshooting
665
+
666
+ If you encounter warning during build of your application:
667
+
668
+ ```
669
+ ▲ [WARNING] Module 'lodash.get' used by 'node_modules/@descope/web-component/node_modules/@descope/core-js-sdk/dist/index.esm.js' is not ESM
670
+ ```
671
+
672
+ add `lodash.get` to allowed CommonJS dependencies in `angular.json`
673
+
674
+ ```json
675
+ "architect": {
676
+ "build": {
677
+ "builder": "@angular-devkit/build-angular:browser",
678
+ "options": {
679
+ "allowedCommonJsDependencies": ["lodash.get"],
680
+ <other_options>
681
+ }
682
+ <other_config>
683
+ }
684
+ <other_config>
685
+ }
686
+ ```
687
+
688
+ ## FAQ
689
+
690
+ ### I updated the user in my backend, but the user / session token are not updated in the frontend
691
+
692
+ The Descope SDK caches the user and session token in the frontend. If you update the user in your backend (using Descope Management SDK/API for example), you can call `me` / `refresh` from `descopeSdk` member of `DescopeAuthService` to refresh the user and session token. Example:
693
+
694
+ ```ts
695
+ import { DescopeAuthService } from '@descope/angular-sdk';
696
+
697
+ export class MyComponent {
698
+ // ...
699
+ constructor(private authService: DescopeAuthService) {}
700
+
701
+ handleUpdateUser() {
702
+ myBackendUpdateUser().then(() => {
703
+ this.authService.descopeSdk.me();
704
+ // or
705
+ this.authService.descopeSdk.refresh();
706
+ });
707
+ }
708
+ }
709
+ ```
710
+
711
+ ## Learn More
712
+
713
+ To learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/).
714
+
715
+ ## Contact Us
716
+
717
+ If you need help you can email [Descope Support](mailto:support@descope.com)
718
+
719
+ ## License
720
+
721
+ The Descope SDK for Angular is licensed for use under the terms and conditions of the [MIT license Agreement](./LICENSE).