{"id":50747000,"url":"https://github.com/zitadel/angular-auth","last_synced_at":"2026-06-10T22:01:46.593Z","repository":{"id":61794496,"uuid":"555267196","full_name":"zitadel/angular-auth","owner":"zitadel","description":"Official Zitadel auth integration for Angular.","archived":false,"fork":false,"pushed_at":"2026-05-30T07:49:10.000Z","size":1100,"stargazers_count":12,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-05-30T09:15:33.121Z","etag":null,"topics":["angular","auth","authentication","authn","authorization","authz","iam","identity","login","nodejs","sso","typescript","zitadel"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@zitadel/angular-auth","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zitadel.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":"2022-10-21T08:48:15.000Z","updated_at":"2026-05-30T08:30:05.000Z","dependencies_parsed_at":"2026-03-02T03:11:02.879Z","dependency_job_id":null,"html_url":"https://github.com/zitadel/angular-auth","commit_stats":null,"previous_names":["zitadel/angular-auth"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/zitadel/angular-auth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fangular-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fangular-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fangular-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fangular-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zitadel","download_url":"https://codeload.github.com/zitadel/angular-auth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fangular-auth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34172196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"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":["angular","auth","authentication","authn","authorization","authz","iam","identity","login","nodejs","sso","typescript","zitadel"],"created_at":"2026-06-10T22:01:42.874Z","updated_at":"2026-06-10T22:01:46.584Z","avatar_url":"https://github.com/zitadel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Auth\n\nAn [Angular](https://angular.dev/) integration that provides seamless\nauthentication for single-page applications using OpenID Connect with the\nAuthorization Code flow and PKCE, session management, and idiomatic Angular\nstandalone providers, signals, guards, and interceptors.\n\nThis integration brings the power and flexibility of OIDC to Angular\napplications with full TypeScript support, built on top of\n[`oidc-client-ts`](https://github.com/authts/oidc-client-ts), and an API\nsurface compatible with `@edgeflare/ngx-oidc`.\n\n### Why?\n\nModern single-page applications require robust, secure, and flexible\nauthentication systems. Integrating OIDC and session management with an\nAngular application requires careful consideration of the browser redirect\nlifecycle, silent token renewal, and TypeScript integration.\n\nHowever, a direct integration isn't always straightforward. Different types\nof applications or deployment scenarios might warrant different approaches:\n\n- **Browser Redirect Lifecycle:** OIDC sign-in operates through full browser\n  navigations to the identity provider and back. A proper integration should\n  detect the authorization response on return, complete the code exchange, and\n  clean the authorization parameters from the URL automatically.\n- **Reactive Auth State:** Angular components need to react to authentication\n  state without boilerplate. The `AuthService` exposes `user`,\n  `isAuthenticated`, and `authError` as signals suitable for template control\n  flow.\n- **Route Protection:** Many applications need to gate routes behind\n  authentication. `authGuard` is a `CanActivateFn` that redirects\n  unauthenticated users to sign in before a route activates.\n- **Token Attachment:** Protected API calls need a bearer token. The\n  `authzTokenInterceptor` attaches the current access token to outgoing\n  `HttpClient` requests automatically.\n\nThis integration, `@zitadel/angular-auth`, aims to provide the flexibility to\nhandle such scenarios. It allows you to leverage the OIDC ecosystem while\nmaintaining Angular best practices, ultimately leading to a more effective and\nless burdensome authentication implementation.\n\n## Installation\n\nInstall using NPM by using the following command:\n\n```sh\nnpm install @zitadel/angular-auth oidc-client-ts\n```\n\n## Usage\n\nTo use this integration, spread `provideZitadelAuth()` into your application\nproviders. It registers the `AuthService`, an `HttpClient` configured with the\nbearer-token interceptor, and the pre-built `ZITADEL_ROUTES`.\n\n```ts\n// src/main.ts\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideZitadelAuth } from '@zitadel/angular-auth';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideZitadelAuth({\n      authority: 'https://example.zitadel.cloud',\n      client_id: 'my-client-id',\n      redirect_uri: 'http://localhost:4200/auth/callback',\n      post_logout_redirect_uri: 'http://localhost:4200/',\n      scope: 'openid profile email offline_access',\n    }),\n  ],\n});\n```\n\n#### Using the Authentication System\n\nThe integration provides several injectables, functions, and components for\nhandling authentication:\n\n**Core Utilities:**\n\n- `provideZitadelAuth(config)` (alias `initOidc`): Registers the\n  `AuthService`, the `authzTokenInterceptor`, and the `ZITADEL_ROUTES`\n- `AuthService`: Exposes the `user`, `isAuthenticated`, and `authError`\n  signals plus `signinRedirect`/`signinPopup`/`signinSilent`/`signoutRedirect`/\n  `signoutPopup` and callback handlers\n- `authGuard`: A `CanActivateFn` that redirects to sign-in when unauthenticated\n- `authzTokenInterceptor`: An `HttpInterceptorFn` that attaches the bearer token\n- `OIDC_CONFIG_TOKEN`: The `InjectionToken` carrying the OIDC configuration\n\n**Bundled UI Components:**\n\n- `SignIn`, `SignInCallback`, `SignInError`, `SignOutCallback`, `Account`\n  (selectors `zitadel-signin`, `zitadel-signin-callback`,\n  `zitadel-signin-error`, `zitadel-signout-callback`, `zitadel-account`)\n\n**Bundled Routes:**\n\n- `ZITADEL_ROUTES`: A ready-made `Route[]` under the `/auth` prefix\n  (`auth/signin`, `auth/callback`, `auth/error`, `auth/logout/callback`,\n  `auth/account` — the last guarded by `authGuard`)\n\n**Basic Usage in a Component:**\n\n```ts\nimport { Component, inject } from '@angular/core';\nimport { AuthService } from '@zitadel/angular-auth';\n\n@Component({\n  selector: 'app-nav',\n  standalone: true,\n  template: `\n    @if (auth.isAuthenticated()) {\n      \u003cspan\u003eHello {{ auth.user()?.profile?.sub }}\u003c/span\u003e\n      \u003cbutton (click)=\"auth.signoutRedirect()\"\u003eLog out\u003c/button\u003e\n    } @else {\n      \u003cbutton (click)=\"auth.signinRedirect()\"\u003eLog in\u003c/button\u003e\n    }\n  `,\n})\nexport class NavComponent {\n  protected readonly auth = inject(AuthService);\n}\n```\n\n**Protecting a Route:**\n\n```ts\nimport { Routes } from '@angular/router';\nimport { authGuard } from '@zitadel/angular-auth';\n\nexport const routes: Routes = [\n  {\n    path: 'dashboard',\n    loadComponent: () =\u003e import('./dashboard.component'),\n    canActivate: [authGuard],\n  },\n];\n```\n\n##### Example: Advanced Configuration with Multiple Providers\n\n`provideZitadelAuth()` mounts `ZITADEL_ROUTES` for you. When you maintain your\nown router, you can instead compose the bundled routes alongside your\napplication routes:\n\n```ts\n// src/app/app.routes.ts\nimport { Routes } from '@angular/router';\nimport { ZITADEL_ROUTES } from '@zitadel/angular-auth';\n\nexport const routes: Routes = [\n  { path: '', loadComponent: () =\u003e import('./home.component') },\n  ...ZITADEL_ROUTES,\n];\n```\n\nWith the bundle mounted, configure your Zitadel application's redirect URIs to\n`[origin]/auth/callback` and post-logout redirect to\n`[origin]/auth/logout/callback`.\n\n## Known Issues\n\n- **Client-Side Only:** This integration runs entirely in the browser and\n  performs the Authorization Code flow with PKCE. It does not require, and does\n  not provide, a server-side session store.\n- **Callback URLs:** Your Zitadel application must be configured with the\n  correct redirect URI matching `redirect_uri` (e.g. `[origin]/auth/callback`)\n  and post-logout redirect URI matching `post_logout_redirect_uri`.\n- **TypeScript Version:** The Angular compiler does not yet support TypeScript\n  6, so this package builds against TypeScript 5.8 (the rest of the toolchain\n  and the Node 24 runtime are unchanged).\n- **No Client Secret:** PKCE public clients must never be configured with a\n  client secret; do not ship one in browser-exposed environment variables.\n\n## Useful links\n\n- **[oidc-client-ts](https://github.com/authts/oidc-client-ts):** The\n  underlying OIDC client this integration builds on.\n- **[Angular](https://angular.dev/):** The framework this integration targets.\n\n## Contributing\n\nIf you have suggestions for how this integration could be improved, or\nwant to report a bug, open an issue — we'd love all and any contributions.\n\n## License\n\nApache-2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fangular-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzitadel%2Fangular-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fangular-auth/lists"}