{"id":18419635,"url":"https://github.com/davebaol/oidc-angular-wso2is","last_synced_at":"2025-10-03T16:35:22.770Z","repository":{"id":38695719,"uuid":"209771075","full_name":"davebaol/oidc-angular-wso2is","owner":"davebaol","description":"Example of an Angular single-page application demonstrating OAuth2/OpenID Connect authentication using WSO2 Identity Server","archived":false,"fork":false,"pushed_at":"2023-01-07T09:57:09.000Z","size":2548,"stargazers_count":19,"open_issues_count":29,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-14T18:57:54.436Z","etag":null,"topics":["angular","authorization-flow","code-flow-pkce","implicit-flow","oauth2","oidc","openid","pkce","single-page-app","wso2-identity-server"],"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/davebaol.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}},"created_at":"2019-09-20T11:05:23.000Z","updated_at":"2025-01-30T20:24:37.000Z","dependencies_parsed_at":"2023-02-06T20:40:36.207Z","dependency_job_id":null,"html_url":"https://github.com/davebaol/oidc-angular-wso2is","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/davebaol/oidc-angular-wso2is","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davebaol%2Foidc-angular-wso2is","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davebaol%2Foidc-angular-wso2is/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davebaol%2Foidc-angular-wso2is/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davebaol%2Foidc-angular-wso2is/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davebaol","download_url":"https://codeload.github.com/davebaol/oidc-angular-wso2is/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davebaol%2Foidc-angular-wso2is/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269201296,"owners_count":24377460,"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","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"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","authorization-flow","code-flow-pkce","implicit-flow","oauth2","oidc","openid","pkce","single-page-app","wso2-identity-server"],"created_at":"2024-11-06T04:17:42.674Z","updated_at":"2025-10-03T16:35:22.722Z","avatar_url":"https://github.com/davebaol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# oidc-angular-wso2is\n\nExample of an [Angular](https://angular.io/) single-page application demonstrating [OAuth 2](https://oauth.net/2/) / [OpenID Connect (OIDC)](https://openid.net/connect/) authentication using [WSO2 Identity Server](https://wso2.com/identity-and-access-management/).\n\n\u003e :pushpin: You may want to read the article [Guidelines for OAuth 2.0 / OpenID Connect](https://www.linkedin.com/pulse/guidelines-oauth-20-openid-connect-davide-sessi/) for more information and best practices on this topic.\n\nThe entire project relies on [the `angular-oauth2-oidc` library](https://github.com/manfredsteyer/angular-oauth2-oidc) and has been successfully tested with\n- WSO2 Identity Server 5.7.0 as key manager for WSO2 API Manager 2.6.0 (both with recent WUM update)\n- WSO2 Identity Server 5.8.0\n\nThe application is supposed to look somewhat like this (click the image to enlarge it):\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"screenshot-001.png\"\u003e\n    \u003cimg alt=\"Application Screenshot\" width=\"600\" src=\"screenshot-001.png\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n## Features\nThis project supports a reach set of features.\nMost interesting ones can be found in [the core module](./src/app/core).\n\n### Main features\nMain features are strictly related to the authorization process, especially from a generic single-page application:\n- **OAuth2 grants**: Support for either [code flow](https://oauth.net/2/grant-types/authorization-code/) with [PKCE](https://oauth.net/2/pkce/) (recommended) or [implicit flow](https://oauth.net/2/grant-types/implicit/) for authorization\n- **OpenID discovery**: This process determines the location of the OpenID Provider.\n- **Silent refresh on startup**: Trying silent refresh on app startup before potentially starting a login flow gives the Identity Server the opportunity to recognize the user (typically through a cookie), so avoiding an unnecessary login.\n- **Token revocation on logout**: When this feature is enabled (see [Preparing sources](#two-preparing-sources)) the access token and its refresh token (if present) are revoked when the user logs out.\n- **Auto-login**: When this feature is enabled (see [Preparing sources](#two-preparing-sources)) the user is automatically redirected to the login page on the STS server.\n- **OpenID's external logout**\n- **Token Storage**: Using `localStorage` for storing tokens\n\n### Additional features\nThe project supports a few additional features that can help you with authentication in your Angular apps:\n- **API call interceptor**: By intercepting calls to the API's the access token is silently attached to request headers. In fact, this feature is directly provided by the [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) library itself.\n- **Route guards**: Angular's route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route: \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- **Angular modules**: core, shared, and two feature modules\n\n## Getting started\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes.\n\n### Prerequisites\n- [WSO2 Identity Server 5.7.0 or higher](https://wso2.com/identity-and-access-management/)\n- [npm](https://www.npmjs.com/get-npm)\n\n### Installing\nThe project is a standard Angular CLI application. If you open a command prompt in that directory, you can run any ng command (e.g., ng test), or use npm to install extra packages into it.\n\n#### :one: Preparing WSO2 Identity Server\n- To make the OIDC discovery process work without having to use WSO2 IS administrator credentials from the single-page app you have to unsecure the dicovery endpoint:\n  - Open the file `\u003cIS_HOME\u003e/repository/conf/identity/identity.xml`\n  - Find this line\n    ```xml\n    \u003cResource context=\"(.*)/.well-known(.*)\" secured=\"true\" http-method=\"all\"/\u003e\n    ```\n  - Set `secure` attribute to `false` and save the file\n  - Restart the WSO2 Identity Server\n- Sign in to the WSO2 Identity Server Management Console.\n- On the `Main` tab, click `Identity` \u003e `Service Providers` \u003e `Add`. Enter the Service Provider Name and optionally provide a brief description. Click \u003ckbd\u003eRegister\u003c/kbd\u003e.\n- Expand the `Inbound Authentication Configuration` section and then expand `OAuth/OpenID Connect Configuration`. Click \u003ckbd\u003eConfigure\u003c/kbd\u003e.\n  - **For authorization code grant only (recommended)**:\n    - For the `Allowed Grant Types` enable `Code`. Notice that for security reasons, especially for your production environment, this should be the only allowed grant type apart from the optional `Refresh Token` grant type.\n    - Flag the `PKCE Mandatory` checkbox in order to reject pure authorization code grant.\n    - Flag the `Allow authentication without the client secret` checkbox since single-page applications cannot guarantee the confidentiality of the client secret. \n  - **For implicit grant only (NOT recommended)**:\n    - For the `Allowed Grant Types` enable `Implicit`.\n  - Set the `Callback Url`, which is the exact location in the service provider's application where an access token would be sent. Since our single-page application has 2 callback URLs you have to use a regex pattern like `regexp=(http://localhost:4200/index.html|http://localhost:4200/silent-refresh.html)`. Notice that you must have the prefix `regexp=` before your regex pattern.\n  - Click \u003ckbd\u003eAdd\u003c/kbd\u003e. Note that client key and client secret get generated.\n- Expand the `Claim Configuration` section to specify information of the user that the application needs form the Identity Server where the service provider authenticates. Refer to [Configuring Claims for a Service Provider](https://docs.wso2.com/display/IS580/Configuring+Claims+for+a+Service+Provider).\n\n#### :two: Preparing sources\n- If you need to specify a context for your app just change the tag `\u003cbase href=\"/\"\u003e` of the file `src/index.html` with something like `\u003cbase href=\"/my/context\"\u003e`. \n- In `src/app/core/config.service.ts` properly set the following properties:\n  - `authUrl`: the URL of your authorization server (WSO2 Identity Server in our case)\n  - `apiUrl`: the URL of your API server (WSO2 API Manager in our case)\n  - `revokeTokenOnLogout`: if `true` the access token and its refresh token (if present) are revoked when the user logs out.\n  - `autoLogin`: if `true` the user is automatically redirected to the login page on the STS server.\n- In `src/app/core/auth.config.ts`:\n  - Set property `clientId` to the value of the `OAuth client key` previously generated for the service provider in WSO2 IS.\n  - Set property `responseType` according to the authorization grant you have previously chosen for the service provider in WSO2 IS: `'code'` for code flow and `''` for implicit flow.\n- Run `npm install` to install dependencies.\n- Run `ng serve` to startup a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Troubleshooting\nHere is a list of known symptoms and malfunctions with their respective solutions:\n- If you encounter a CORS issue apply solution #2 reported at https://docs.wso2.com/display/IS580/Invoking+an+Endpoint+from+a+Different+Domain\n- If you're dealing with different domains and you get `403 Forbidden` on login or logout, it's likely due to a cross-site request forgery (CSRF) issue. In file `\u003cHOME_IS\u003e/repository/conf/security/Owasp.CsrfGuard.Carbon.properties` try disabling the csrfguard filter like that\n  ```\n  org.owasp.csrfguard.Enabled = false\n  ```\n\n## License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n* The Angular application uses [the `angular-oauth2-oidc` library](https://github.com/manfredsteyer/angular-oauth2-oidc) that is certified by OpenID Foundation.\n* The project is heavily inspired by the project [sample-angular-oauth2-oidc-with-auth-guards](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavebaol%2Foidc-angular-wso2is","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavebaol%2Foidc-angular-wso2is","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavebaol%2Foidc-angular-wso2is/lists"}