{"id":49425209,"url":"https://github.com/MadeByRaymond/ngx-secure-storage","last_synced_at":"2026-05-13T18:01:19.681Z","repository":{"id":352932142,"uuid":"1213415173","full_name":"MadeByRaymond/ngx-secure-storage","owner":"MadeByRaymond","description":"Angular service for encrypting, securely storing and retrieving app browser storage","archived":false,"fork":false,"pushed_at":"2026-04-21T18:07:54.000Z","size":72,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-21T20:14:48.783Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MadeByRaymond.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-17T11:01:22.000Z","updated_at":"2026-04-21T18:03:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/MadeByRaymond/ngx-secure-storage","commit_stats":null,"previous_names":["madebyraymond/ngx-secure-storage"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/MadeByRaymond/ngx-secure-storage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadeByRaymond%2Fngx-secure-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadeByRaymond%2Fngx-secure-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadeByRaymond%2Fngx-secure-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadeByRaymond%2Fngx-secure-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MadeByRaymond","download_url":"https://codeload.github.com/MadeByRaymond/ngx-secure-storage/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadeByRaymond%2Fngx-secure-storage/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32891966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-04-29T09:00:40.638Z","updated_at":"2026-05-13T18:01:19.633Z","avatar_url":"https://github.com/MadeByRaymond.png","language":"TypeScript","funding_links":["https://img.buymeacoffee.com/button-api/?text=Buy%20Me%20a%20Smoothie\u0026emoji=","https://www.buymeacoffee.com/MadeByRaymond"],"categories":["Third Party Components"],"sub_categories":["Storage"],"readme":"# ngx-secure-storage\n\n\u003e A lightweight, SSR-compatible Angular service to securely store, retrieve, and manage encrypted data in `localStorage` and `sessionStorage` using AES encryption.\n\n![npm](https://img.shields.io/npm/v/ngx-secure-storage)\n![Angular](https://img.shields.io/badge/angular-compatible-brightgreen)\n![NPM Downloads](https://img.shields.io/npm/d18m/ngx-secure-storage)\n![License](https://img.shields.io/npm/l/ngx-secure-storage)\n\n**The best way to quickly integrate secure, encrypted client-side storage in Angular.**\n\nNote that this package has been optimized to work best with Angular, but you can still use [secure-storage-ts](https://www.npmjs.com/package/secure-storage-ts) for your project if you prefer to work with vanilla JS/TS.\n\n---\n\n## ๐Ÿš€ Features\n\n- โœ… **AES Encryption:** Secures data under the hood using `crypto-es`. Alongside `PBKDF2` key derivation, with dynamically generated, unique, *per-item salts and IVs*, for enterprise-grade security.\n- โœ… **TTL (Time-To-Live):** Set expiry times on your storage items. They automatically clear out when expired!\n- โœ… **SSR-Compatible:** Safely verifies the browser environment before accessing storage.\n- โœ… **Smart Dev Mode:** Auto-detects `localhost` to optionally bypass encryption for easier debugging.\n- โœ… **Storage Routing:** Easily route specific keys permanently to `sessionStorage`.\n- โœ… **Prefixing:** Auto-appends prefixes to keys to prevent collisions with other apps.\n- โœ… **Automatic Parsing:** Built-in JSON stringify and parse support for complex objects.\n\n---\n\n## ๐Ÿ“ฆ Installation\n\nSince this package relies on `crypto-es` for robust encryption, ensure you install it as well _(however for NPM 7+, peer-dependencies should be installed automatically)_:\n\n```bash\nnpm install ngx-secure-storage\n```\n\n---\n\n## ๐Ÿ”ง Setup\nYou can configure the service globally by providing the `SECURE_STORAGE_CONFIG` token in your `AppModule` (or `app.config.ts` for standalone applications).\n\n```ts\nimport { StorageConfig, SECURE_STORAGE_CONFIG } from 'ngx-secure-storage';\n\n@NgModule({\n providers: [\n {\n provide: SECURE_STORAGE_CONFIG,\n useValue: {\n encryptionKey: environment.storageKey, // Your secret AES key\n prefix: 'MY_APP_',\n disableInDev: true, // Bypasses encryption on localhost or when isDev is true\n alwaysUseSessionStorageSet: ['PAYMENT_INFO', 'TEMP_TOKEN'],\n // ...other configuration settings\n } as StorageConfig\n }\n ]\n})\nexport class AppModule {}\n```\n\nOr for standalone applications, in `app.config.ts`:\n\n```ts\nimport { StorageConfig, SECURE_STORAGE_CONFIG } from 'ngx-secure-storage';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n // ... other angular providers\n {\n provide: SECURE_STORAGE_CONFIG,\n useValue: {\n encryptionKey: environment.storageKey, // Your secret AES key\n // ...other configuration settings\n } as StorageConfig\n },\n ],\n};\n```\n### Additional Configurations:\nConfiguration settings can be provided to customize how data is encrypted and stored:\n\n| Property | Description | Required? | Default |\n|------------------------------|-------------------------------------------------------------------------------------------------------------|-----------|-------------------------|\n| `encryptionKey` | The secret key used for AES encryption. If left empty, encryption is bypassed. | Yes | `''` |\n| `disableInDev` | If true, bypasses encryption entirely when running in a development environment, or when `isDev` is `true`. | optional | `false` |\n| `isDev` | Flags the environment as dev. If omitted, the service auto-detects based on localhost or loopback IPs. | optional | _Auto-detected_ |\n| `isBrowser` | Explicitly set if the app is in a browser. If omitted, it defaults to checking Angular's `PLATFORM_ID`. | optional | _Auto-detected_ |\n| `prefix` | A prefix appended to all storage keys to prevent collisions. | optional | `__` |\n| `alwaysUseSessionStorageSet` | An array of exact keys that should always be forced into `sessionStorage` instead of `localStorage`. | optional | `[]` |\n\n\u003ci\u003e๐Ÿ’ก Tip: Importing `StorageConfig` in your useValue ensures type-safety and IntelliSense autocompletion when setting configuration properties.\u003c/i\u003e\n\n---\n\n## ๐Ÿง  Usage\n\nInject the service into your components or other services to easily store and retrieve data.\n```ts\nimport { SecureStorageService } from 'ngx-secure-storage';\n\nexport class StorageComponent {\n stored_data;\n\n constructor(private storage: SecureStorageService) { }\n\n storeData(key:string, data:any){\n this.storage.store(key, data, false, 3600000);\n }\n\n getData(key:string){\n this.stored_data = this.storage.retrieve(key);\n }\n\n deleteData(key:string){\n this.storage.delete(key);\n this.stored_data = null;\n }\n\n clearDataStore() {\n this.storage.clearAll();\n }\n}\n```\n\n---\n\n### Full Usage Example:\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { SecureStorageService } from 'ngx-secure-storage';\n\n@Component({\n selector: 'app-user-profile',\n template: `...`\n})\nexport class UserProfileComponent implements OnInit {\n\n constructor(private storage: SecureStorageService) {}\n\n ngOnInit() {\n // 1. Store a simple string\n this.storage.store('USER_THEME', 'dark');\n\n // 2. Store a complex object WITH a Time-To-Live (expires in 1 hour)\n const userData = { name: 'Daniel', role: 'Admin' };\n this.storage.store('USER_DATA', userData, {\n ttl: 3600000, // Time-to-live in milliseconds\n });\n\n // 3. Retrieve and automatically parse the JSON object\n // (If 1 hour has passed, this will automatically delete the item and return null)\n const retrievedUser = this.storage.retrieve('USER_DATA');\n console.log(retrievedUser?.name); // 'Daniel'\n }\n\n logout() {\n // 4. Delete data\n this.storage.delete('USER_DATA');\n this.storage.delete('USER_THEME');\n }\n\n cleanup() {\n // 5. Clear out all items that have passed their TTL expiry\n this.storage.clearExpired();\n\n // OR: Safely wipe all keys created by this service (ignores other app data)\n this.storage.clearAll();\n }\n}\n```\n\n---\n\n## ๐Ÿ”‘ Methods\n\n| Method | Parameters | Description |\n|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|\n| store(`...params`) | - `key` - The unique identifier for the data. The config prefix is automatically appended. \u003cbr/\u003e\u003cbr/\u003e- `value` - The raw data or object to store. \u003cbr/\u003e\u003cbr/\u003e- `useSessionStorage` - Set to `true` to save to _sessionStorage_. If `false`, it defaults to _localStorage_ (unless the key is in `alwaysUseSessionStorageSet`). \u003cbr/\u003e\u003cbr/\u003e- `ttl` - Time-to-live in milliseconds. Item will be deleted after this duration. | Encrypts and saves data. \u003cbr/\u003e\u003cbr/\u003eYou can also just pass the `options` object which accepts `{ useSessionStorage, ttl }`, after the `value` params |\n| retrieve(`...params`) | - `key` - The unique identifier of the stored data. \u003cbr/\u003e\u003cbr/\u003e- `useSessionStorage` - Set to `true` to force reading from _sessionStorage_. If `false`, it defaults to _localStorage_ (unless the key is in `alwaysUseSessionStorageSet`). | Retrieves and decrypts data. Auto-deletes and returns null if the item's TTL has expired. |\n| delete(`...params`) | `key` - The unique identifier of the data to remove (without the prefix). | Removes the specified key from both localStorage and sessionStorage. |\n| clearExpired() | _none_ | Scans all service-defined storage items and permanently removes any that have passed their TTL. Returns a Promise. |\n| clearAll(`...params`) | `entireStorage` - Choose if you want the entire local and session storage to be cleared. \u003cbr/\u003eDefault is `false` so only keys defined by this service are removed/cleared. | Removes all storage items. Defaults to false (only clears items with your configured prefix). If true, runs a global .clear() on all browser storage. |\n\n---\n\n## โš™๏ธ Configuration Summary\n\n| Feature | Customizable | Default Behavior |\n|----------------|----------------------------------|----------------------------------------------------------------------------------------------------------------------------------|\n| Encryption | โœ… `encryptionKey` | Encrypts via `crypto-es` AES, `PBKDF2` key derivation, dynamic (unique) salts and Initialization Vectors (IVs) per storage item. |\n| Dev Mode | โœ… `disableInDev`, `isDev` | Auto-detects `localhost` / `127.0.0.1` |\n| Storage Target | โœ… `alwaysUseSessionStorageSet` | Defaults to `localStorage` unless overridden |\n| SSR Safety | โœ… `isBrowser` | Uses Angular's `@Inject(PLATFORM_ID)` |\n\n---\n\n## ๐Ÿงช Development\n\n```bash\n# Run tests\nng test ngx-secure-storage\n\n# Build for production\nng build ngx-secure-storage\n```\n\n---\n\n## ๐Ÿ”ง Troubleshooting\n\nIf you are getting an error like this:\n\n``\nModule not found: Error: Can't resolve 'crypto-es' in ...\n``.\n\nSimply install the `crypto-es` package and this would be resolved:\n```bash\nnpm install crypto-es\n```\n\nThe reason is that for older npm version `NPM \u003c 7`, peer-dependencies may not install automatically. \n\nOr if you install packages using the flags `--legacy-peer-deps` or `--force`, this would essentially tell npm\nto fallback to an earlier (legacy) version which does not automatically install peer-dependencies. You would \nhave to now manually define the peer deps from the package to install. In this case `crypto-es`.\n\n---\n\n## ๐Ÿ”’ License\n\nApache-2.0 ยฉ MadeByRaymond (Daniel Obiekwe)\n\n---\n\n## โค๏ธ Support\n\nIf you find this package helpful, you can support our projects here:\n\n[![Buy Me a Smoothie](https://img.buymeacoffee.com/button-api/?text=Buy%20Me%20a%20Smoothie\u0026emoji=๐Ÿน\u0026slug=MadeByRaymond\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Comic\u0026outline_colour=000000\u0026coffee_colour=ffffff)](https://www.buymeacoffee.com/MadeByRaymond)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMadeByRaymond%2Fngx-secure-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMadeByRaymond%2Fngx-secure-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMadeByRaymond%2Fngx-secure-storage/lists"}