{"_id":"@edgeflare/ng-oidc","name":"@edgeflare/ng-oidc","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@edgeflare/ng-oidc","version":"0.0.1","peerDependencies":{"@angular/common":">=17.0.0","@angular/core":">=17.0.0"},"dependencies":{"tslib":"^2.3.0"},"license":"Apache-2.0","sideEffects":false,"description":"oidc-client-ts wrapper for Angular and Capacitor","keywords":["angular","oidc","capacitor"],"author":{"name":"dev@edgeflare.io","email":"dev@edgeflare.io"},"module":"fesm2022/edgeflare-ng-oidc.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/edgeflare-ng-oidc.mjs","esm":"./esm2022/edgeflare-ng-oidc.mjs","default":"./fesm2022/edgeflare-ng-oidc.mjs"}},"_id":"@edgeflare/ng-oidc@0.0.1","gitHead":"2c152650edb29d41d52abff3681179e2a342684f","_nodeVersion":"22.2.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-n6/a1hTNc/7BOngxZ03dIzeMKeFyvbRMUHHYM6JNc2N6WvYEEnSN4IzXd3mJ2xrBGOEafQOosJMu8umISADRGQ==","shasum":"024fea41b1a3015bcea2c7f49ff34dbb3b1512e4","tarball":"https://registry.npmjs.org/@edgeflare/ng-oidc/-/ng-oidc-0.0.1.tgz","fileCount":34,"unpackedSize":146927,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoiSWTYPAt/5mCNoQCErcMguAHFrMp/TQALbPYezAz9AIgSbRS7C24z5TqdEb8Ch5zI8I+uhs4ZWwpfvNfXrJXaSk="}]},"_npmUser":{"name":"edgeflareio","email":"npm@edgeflare.io"},"directories":{},"maintainers":[{"name":"edgeflareio","email":"npm@edgeflare.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-oidc_0.0.1_1723236628835_0.7345651930932278"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-09T20:50:28.730Z","0.0.1":"2024-08-09T20:50:29.102Z","modified":"2024-08-09T20:50:29.362Z"},"maintainers":[{"name":"edgeflareio","email":"npm@edgeflare.io"}],"description":"oidc-client-ts wrapper for Angular and Capacitor","keywords":["angular","oidc","capacitor"],"author":{"name":"dev@edgeflare.io","email":"dev@edgeflare.io"},"license":"Apache-2.0","readme":"# [oidc-client-ts](https://github.com/authts/oidc-client-ts) wrapper for Angular and Capacitor\n\n## 1. Install\n```shell\nnpm install oidc-client-ts @edgeflare/ng-oidc\n```\n\n## 2. Configure Angular\nUpdate `<approot>/src/app/app.config.ts`. The [example](https://github.com/edgeflare/ng-oidc/tree/main/example) directory includes a minimal app.\n\n```ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouter, Route } from '@angular/router';\nimport { UserManagerSettings } from 'oidc-client-ts';\nimport { initOidc, OIDC_ROUTES } from '@edgeflare/ng-oidc';\n\n// Define OIDC configuration\nconst oidcConfig: UserManagerSettings = {\n  authority: \"https://iam-PROJECT_ID.PROJECT_REGION.edgeflare.dev\",\n  client_id: \"CLIENT_ID\",\n  redirect_uri: \"http://localhost:4200/signin/callback\",\n  response_type: \"code\",\n  scope: \"openid profile email\",\n  post_logout_redirect_uri: \"http://localhost:4200/signout/callback\",\n  automaticSilentRenew: true,\n  silentRequestTimeoutInSeconds: 30,\n  silent_redirect_uri: \"http://localhost:4200/silent-refresh-callback.html\",\n};\n\n// Provide OIDC configuration and routes in the application configuration\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // other providers\n    ...initOidc(oidcConfig),\n    provideRouter(OIDC_ROUTES),\n    // more providers\n  ],\n};\n```\n\n![signin demo](https://raw.githubusercontent.com/edgeflare/ng-oidc/main/example/public/signin.png)\n\n*Providing* `OIDC_ROUTES` registers below routes:\n\n- `/signin/{callback,error,''}`\n- `/signout/callback`\n- `/oidc-profile`, protected by an `authGuard` supplied with `ng-oidc`\n\nSee `signinRedirect`, `signinPopup` etc examples at [http://localhost:4200/signin](http://localhost:4200/signin). It additionally provides `user` and `isAuthenticated` signals; which can be called like `user()` to get the current user, and `isAuthenticated()` to check if the user is authenticated.\n\nThe routes can be registered on parent routes other root `/`, with ng-oidc supplied components or your own.\n\n```ts\nconst myOidcRoutes: Route[] = [\n  // signin is now at /account/signin\n  { path: 'account', loadChildren: () => import(\"@edgeflare/ng-oidc\").then((m) => m.OIDC_ROUTES)},\n  // Or just the only required route. must match the `redirect_uri` in oidcConfig\n  { path: 'signin-callback', loadComponent: () => import(\"@edgeflare/ng-oidc\").then((m) => m.SigninCallbackComponent)},\n];\n\n// ...\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    ...initOidc(oidcConfig),\n    provideRouter(myOidcRoutes),\n  ],\n};\n```\n\nTo enable silent refresh, include the `<approot>/public/silent-refresh-callback.html` with below content:\n\n```html\n<script src=\"./oidc-client-ts.js\"></script>\n<script>\n  var mgr = new oidc.UserManager({ response_mode: 'query' });\n  mgr.signinSilentCallback().catch(error => {\n    console.error(error);\n  });\n</script>\n```\n\n## Features (roadmap)\n- [x] signinRedirect, signinPopup, signoutRedirect, signoutPopup\n- [x] authGuard using canActivateFn\n- [ ] signinSilent (gotta get it to work reliably)\n- [ ] [Capactior](https://github.com/ionic-team/capacitor) support for native mobile apps\n\n## Contributing / Development\nWith ~200 lines of code ng-oidc doesn't really do much except calling oidc-client-ts functions. It sets up and exposes oidc-client-ts' [UserManager](https://authts.github.io/oidc-client-ts/classes/UserManager.html) functions through an Angular service, AuthService. The function signatures used in this service are the same as those provided by `oidc-client-ts`.\n\n- `signinRedirect(args?): Promise<void>`\n- `signinPopup(args?): Promise<void>`\n- `signinPopup(args?): Promise<User>`\n\nFor advanced usage, call  `AuthService.userManagerInstance()` to get the UserManager instance. If you wanna make it better, please do! Fork the repo, make your changes, and submit a PR.\n\n## License\nApache License 2.0\n","readmeFilename":"README.md"}