{"id":18812413,"url":"https://github.com/warrant-dev/angular-warrant","last_synced_at":"2025-09-02T23:44:40.197Z","repository":{"id":60860737,"uuid":"539083371","full_name":"warrant-dev/angular-warrant","owner":"warrant-dev","description":"Angular Client SDK for Warrant","archived":false,"fork":false,"pushed_at":"2024-06-03T19:03:13.000Z","size":1676,"stargazers_count":5,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-09T14:33:40.512Z","etag":null,"topics":["access-control","acl","angular","authorization","javascript","permissions","rbac","role-based-access-control"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/warrant-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-20T16:20:46.000Z","updated_at":"2024-06-08T22:22:57.000Z","dependencies_parsed_at":"2024-06-03T21:50:58.780Z","dependency_job_id":"3a3ec41b-e74a-49c6-b744-a446cfa92015","html_url":"https://github.com/warrant-dev/angular-warrant","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.038461538461538436","last_synced_commit":"6c34747de33030bfe5d6f4a6bef6651b65bf5004"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fangular-warrant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fangular-warrant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fangular-warrant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fangular-warrant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warrant-dev","download_url":"https://codeload.github.com/warrant-dev/angular-warrant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223606112,"owners_count":17172610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["access-control","acl","angular","authorization","javascript","permissions","rbac","role-based-access-control"],"created_at":"2024-11-07T23:32:45.904Z","updated_at":"2024-11-07T23:32:47.105Z","avatar_url":"https://github.com/warrant-dev.png","language":"TypeScript","readme":"# @warrantdev/angular-warrant\n\n[![npm](https://img.shields.io/npm/v/@warrantdev/angular-warrant)](https://www.npmjs.com/package/@warrantdev/angular-warrant)\n\n## Overview\n\nThe Warrant Angular library provides a route guard and component for controlling access to pages and components in Angular using [Warrant](https://warrant.dev/). The library interacts directly with the Warrant API using short-lived session tokens that must be created server-side using your API key. Refer to [this guide](https://docs.warrant.dev/guides/creating-session-tokens) to see how to generate session tokens for your users.\n\n## Installation\n\nUse `npm` to install the module:\n\n```sh\nnpm install @warrantdev/angular-warrant\n```\n\n## Usage\nTo start using the SDK in your application, import `WarrantModule` and configure it with your client key:\n```javascript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n\n// Import the module from the SDK\nimport { WarrantModule } from 'angular-warrant';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n\n    // Import the module into the application, with configuration\n    WarrantModule.forRoot({\n      clientKey: \"client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E=\",\n    }),\n  ],\n\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n#### **Setting the Session Token**\nIn order to finish initializing the library and begin performing access checks in your app, you must provide a server-generated session token and set it using the `setSessionToken` method. Otherwise requests from your Angular application will be denied by the Warrant API.\n\nSet the session token using the `setSessionToken` method:\n```javascript\n// login.component.ts\nexport class LoginComponent {\n    onSubmit() {\n        this.accountService.login(this.username, this.password)\n            .subscribe(data =\u003e {\n                // NOTE: This session token must be generated\n                // server-side when logging users into your\n                // application and then passed to the client.\n                // Access check calls in this library will fail\n                // if the session token is invalid or not set.\n                this.warrantService.setSessionToken(data.warrantSessionToken);)\n            });\n    }\n}\n```\n\n### `WarrantProtectedComponent`\n`WarrantProtectedComponent` is a utility component you can wrap around markup or components that should only be accessible to users with certain privileges. It only renders the components it wraps if the user has the given warrant.\n\n```html\n// product-list.component.html\n\u003cdiv *ngFor=\"let product of products\"\u003e\n  \u003ch3\u003e\n    \u003ca [title]=\"product.name + ' details'\"\u003e\n      {{ product.name }}\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\n  \u003cwarrant-protected-component [warrantCheck]=\"product.warrantCheck\"\u003e\n    \u003cp *ngIf=\"product.description\"\u003eDescription: {{ product.description }}\u003c/p\u003e\n\n    \u003cbutton type=\"button\" (click)=\"share()\"\u003eShare\u003c/button\u003e\n\n    \u003capp-product-alerts [product]=\"product\" (notify)=\"onNotify()\"\u003e\n    \u003c/app-product-alerts\u003e\n  \u003c/warrant-protected-component\u003e\n\u003c/div\u003e\n```\n\n```javascript\n// product-list.component.ts\n@Component({\n  selector: 'app-product-list',\n  templateUrl: './product-list.component.html',\n  styleUrls: ['./product-list.component.css'],\n})\nexport class ProductListComponent {\n  products = [\n    {\n      id: 1,\n      name: 'Phone XL',\n      price: 799,\n      description: 'A large phone with one of the best screens',\n      warrantCheck: {\n        warrants: [\n          {\n            objectType: 'item',\n            objectId: 'phone_xl',\n            relation: 'viewer',\n          },\n        ],\n      }\n    }\n  ];\n}\n```\n\n### `WarrantGuard`\n`WarrantGuard` is an Angular route guard you can use to protect your routes behind a warrant. You can pass the warrants to check in the `data` property, which includes support for multiple warrants.\n\n```javascript\nimport { WarrantModule, WarrantGuard } from '@warrantdev/angular-warrant';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    ReactiveFormsModule,\n    RouterModule.forRoot([\n      {\n        path: '',\n        component: ProductListComponent,\n        canActivate: [WarrantGuard],\n        data: {\n          warrantCheck: {\n            warrants: [\n              {\n                objectType: 'role',\n                objectId: 'owner',\n                relation: 'member',\n              },\n            ],\n          },\n        },\n      },\n    ]),\n    WarrantModule.forRoot({\n      clientKey: 'YOUR_CLIENT_KEY',\n    }),\n  ],\n  declarations: [\n    AppComponent,\n    TopBarComponent,\n    ProductListComponent,\n    ProductAlertsComponent,\n  ],\n  bootstrap: [AppComponent],\n})\n```\n\n## Support for Multiple Warrants\n\n`warrants` contains the list of warrants evaluted to determine if the user has access. If `warrants` contains multiple warrants, the `op` parameter is required and specifies how the list of warrants should be evaluated.\n\n**AnyOf** specifies that the access check request will be authorized if *any of* the warrants are matched and will not be authorized otherwise.\n\n**AllOf** specifies that the access check request will be authorized if *all of* the warrants are matched and will not be authorized otherwise.\n\n```javascript\nimport { WarrantCheckOp } from '@warrantdev/angular-warrant';\n\n// User is authorized if they are a 'viewer' of item `protected_item` OR a 'viewer' of store `protected_store`\nexport class ProductListComponent {\n  products = [\n    {\n      id: 1,\n      name: 'Phone XL',\n      price: 799,\n      description: 'A large phone with one of the best screens',\n      warrantCheck: {\n        op: WarrantCheckOp.AnyOf,\n        warrants: [\n          {\n            objectType: 'item',\n            objectId: 'protected_item',\n            relation: 'viewer',\n          },\n          {\n            objectType: 'store',\n            objectId: 'protected_store',\n            relation: 'viewer',\n          },\n        ],\n      }\n    },\n  ];\n}\n```\n\n## Notes\nWe’ve used a random Client Key in these code examples. Be sure to replace it with your\n[actual Client Key](https://app.warrant.dev) to\ntest this code through your own Warrant account.\n\nFor more information on how to use the Warrant API, please refer to the\n[Warrant API reference](https://docs.warrant.dev).\n\n## TypeScript support\n\nThis package includes TypeScript declarations for Warrant.\n\nNote that we may release new [minor and patch](https://semver.org/) versions of\n`@warrantdev/angular-warrant` with small but backwards-incompatible fixes to the type\ndeclarations. These changes will not affect Warrant itself.\n\n## Warrant Documentation\n\n- [Warrant Docs](https://docs.warrant.dev/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarrant-dev%2Fangular-warrant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarrant-dev%2Fangular-warrant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarrant-dev%2Fangular-warrant/lists"}