{"id":17162161,"url":"https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards","last_synced_at":"2025-05-16T04:04:22.344Z","repository":{"id":36073477,"uuid":"137413530","full_name":"jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards","owner":"jeroenheijmans","description":"Basic example of how to integrate the angular-oauth2-oidc library in an Angular SPA utilizing AuthGuards.","archived":false,"fork":false,"pushed_at":"2025-04-30T18:27:54.000Z","size":7663,"stargazers_count":270,"open_issues_count":8,"forks_count":114,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-13T09:15:00.631Z","etag":null,"topics":["angular","angular-oauth2-oidc","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeroenheijmans.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-14T21:59:14.000Z","updated_at":"2025-03-29T07:16:47.000Z","dependencies_parsed_at":"2024-03-29T00:37:16.871Z","dependency_job_id":"c24d8ce1-75b9-4abf-bacb-71377a5c56f0","html_url":"https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeroenheijmans","download_url":"https://codeload.github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"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":["angular","angular-oauth2-oidc","typescript"],"created_at":"2024-10-14T22:44:50.533Z","updated_at":"2025-05-16T04:04:22.327Z","avatar_url":"https://github.com/jeroenheijmans.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Example angular-oauth2-oidc with AuthGuard\n\nThis repository shows a basic Angular CLI application with [the `angular-oauth2-oidc` library](https://github.com/manfredsteyer/angular-oauth2-oidc) and Angular AuthGuards.\n\n[![Lint-Build-Test](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/actions/workflows/ci-workflow.yml/badge.svg)](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/actions/workflows/ci-workflow.yml)\n\n## ⚠ Third-party Cookies\n\n**TLDR 👉 See [my \"SPA Necromancy\" blogpost for all options and workarounds known to me](https://infi.nl/nieuws/spa-necromancy/).**\n\nBrowser vendors are implementing increasingly strict rules around cookies.\nThis is increasingly problematic for SPA's with their Identity Server on a third-party domain.\nMost notably **problems occur if the \"silent refresh via an iframe\" technique is used**.\n\nThis repository uses that technique currently, [starting with a `silentRefresh()`](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/blob/36316ee1971a8a8160033f55ba7eabe14f7d3add/src/app/core/auth.service.ts#L106-L109).\nThis will fire up an iframe to load an IDS page with `noprompt`, hoping cookies get sent along to so the IDS can see if a user is logged in.\n\n[Safari will block cookies from being sent](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/), prompting a leading OAuth/OpenID community member to write \"[SPAs are dead!?](https://leastprivilege.com/2020/03/31/spas-are-dead/)\".\nIn fact, if you fire up this sample repository on `localhost`, which talks to `demo.duendesoftware.com` (another domain!), and use it in Safari: you will notice that the silent refresh technique already fails!\n\nFor reference, see [issue #40](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/issues/40), or [my blogpost that explains workarounds and solutions](https://infi.nl/nieuws/spa-necromancy/).\n\n## Features\n\n⚠ To see **the Implicit Flow** refer to [the `implicit-flow` branch](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/tree/implicit-flow) (which might be getting outdated, since Code Flow is now the recommended flow).\n\nThis demonstrates:\n\n- Use of **the Code+PKCE Flow** (so no JWKS validation)\n- Async but mandatory bootstrapping (via an `APP_INITIALIZER`) before the rest of the app can run\n- Modules (core, shared, and two feature modules)\n- An auth guard that forces you to login when navigating to protected routes\n- An auth guard that just prevents you from navigating to protected routes\n- Asynchronous loading of login information (and thus async auth guards)\n- Using `localStorage` for storing tokens (use at your own risk!)\n- Loading IDS details from its discovery document\n- Trying refresh on app startup before potientially starting a login flow\n- OpenID's external logout features\n\nMost interesting features can be found in [the core module](./src/app/core).\n\n## Implicit Flow\n\nIf you need an example of the _Implicit Flow_ check out [the last commit with that flow](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/commit/3c95d8891b4c086d5cd109d05cdd66171ef4b960) or even earlier versions.\nFor new applications Code+PKCE flow is recommended for JavaScript clients, and this example repository now demonstrates this as the main use case.\n\n## Usage\n\nThis repository has been scaffolded with the Angular 5 CLI, then later upgraded to newer versions of the Angular CLI.\nTo use the repository:\n\n1. Clone this repository\n1. Run `npm ci` to get the exact locked dependencies\n1. Run `npm run start` (or `start-with-ssl`) to get it running on [http://localhost:4200](http://localhost:4200) (or [https://localhost:4200](https://localhost:4200))\n\nThis connects to the [demo Duende IdentityServer instance](https://demo.duendesoftware.com/) also used in the library's examples.\nThe **credentials** and ways of logging in are disclosed on the login page itself (as it's only a demo server).\n\nYou could also connect to your own IdentityServer by changing `auth-config.ts`.\nNote that your server must whitelist both `http://localhost:4200/index.html` and `http://localhost:4200/silent-refresh.html` for this to work.\n\nYou can run the end-to-end tests using:\n\n1. Run `npx playwright install` to grab the Playwright browsers\n2. Run `npm run test` to run the specs\n\n## Differences between Identity Server options\n\n**This repository demonstrates features using https://demo.duendesoftware.com (Duende IdentityServer)**.\nThere are various other server side solutions available, each with their own intricacies.\nThis codebase does not keep track itself of the specifics for each other server side solution.\nInstead, we recommend you look for specific guidance for other solutions elsewhere.\nHere are some potential starting points you could consider:\n\n- IdenitityServer4\n  - This sample itself uses IDS4\n- Auth0\n  - [github.com/jeroenheijmans/sample-auth0-angular-oauth2-oidc](https://github.com/jeroenheijmans/sample-auth0-angular-oauth2-oidc): Angular 6 and Auth0 integration\n- Keycloak\n  - No samples or tutorials yet\n- Okta\n  - No samples or tutorials yet\n- Azure AD\n  - [Community-provided steps listed in a (closed) GitHub issue](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/issues/119)\n- ...\n\nFeel free to open an issue and PR if you want to add additional pieces of guidance to this section.\n\n## Example\n\nThe application is supposed to look somewhat like this:\n\n![Application Screenshot](screenshot-001.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeroenheijmans%2Fsample-angular-oauth2-oidc-with-auth-guards/lists"}