{"id":20307268,"url":"https://github.com/oktadev/okta-spring-boot-angular-pwa-example","last_synced_at":"2025-07-03T00:07:17.808Z","repository":{"id":38816751,"uuid":"93014329","full_name":"oktadev/okta-spring-boot-angular-pwa-example","owner":"oktadev","description":"Angular PWA with Authentication via Okta","archived":false,"fork":false,"pushed_at":"2023-02-27T23:54:02.000Z","size":15272,"stargazers_count":9,"open_issues_count":7,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-11T15:14:46.438Z","etag":null,"topics":["angular","authentication","offline","oidc","okta","security","spring-boot"],"latest_commit_sha":null,"homepage":"https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa","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/oktadev.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}},"created_at":"2017-06-01T03:51:36.000Z","updated_at":"2023-09-29T21:35:21.000Z","dependencies_parsed_at":"2025-04-11T15:11:35.231Z","dependency_job_id":"d3f3043b-14a2-408d-84b2-24d344ac1737","html_url":"https://github.com/oktadev/okta-spring-boot-angular-pwa-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oktadev/okta-spring-boot-angular-pwa-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-spring-boot-angular-pwa-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-spring-boot-angular-pwa-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-spring-boot-angular-pwa-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-spring-boot-angular-pwa-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oktadev","download_url":"https://codeload.github.com/oktadev/okta-spring-boot-angular-pwa-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-spring-boot-angular-pwa-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263234955,"owners_count":23434920,"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","authentication","offline","oidc","okta","security","spring-boot"],"created_at":"2024-11-14T17:16:59.903Z","updated_at":"2025-07-03T00:07:17.739Z","avatar_url":"https://github.com/oktadev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spring Boot API with Angular PWA\n \nThis is an example app that shows how to add Authentication with Okta to an Angular PWA that works offline.\n\nTo see how this application was created, please read [Add Authentication to Your Angular PWA](https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa) on the Okta Developer blog.\n\nYou will need to have an [Okta Developer account](https://developer.okta.com/signup/) and your Okta settings configured to run this application.\n\n\u003e [Okta](https://developer.okta.com/) has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.\n\n* [Getting Started](#getting-started)\n* [Links](#links)\n* [Help](#help)\n* [License](#license)\n\n## Getting Started\n\nTo install this example application, run the following commands:\n\n```bash\ngit clone https://github.com/oktadeveloper/okta-spring-boot-angular-pwa-example.git\ncd okta-spring-boot-angular-pwa-example\n```\n\nThis will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.\n\nTo run the server, cd into the `server` folder and run:\n \n```bash\n./mvnw spring-boot:run\n```\n\nTo run the client, cd into the `client` folder and run:\n \n```bash\nnpm install \u0026\u0026 npm start\n```\n\n### Create Applications in Okta\n\nYou will need to [create an application in Okta](https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa#create-open-id-connect-app) to configure the Spring Boot both Angular and Spring Boot.\n\nLog in to your Okta Developer account and navigate to **Applications** \u003e **Add Application**. Click **Single-Page App**, click **Next**, and give the app a name you’ll remember (e.g., \"Angular PWA\"). Change all instances of `localhost:8080` to `localhost:4200` and click **Done**.\n\n**TIP:** Add `http://localhost:4200` as a **Logout redirect URI** so Logout functionality works in your Angular app.\n\nCopy the client ID into your `server/src/main/resources/application.properties` file. While you're in there, add a `okta.oauth2.issuer` property that matches your Okta domain. For example:\n\n```properties\nokta.oauth2.issuer=https://{yourOktaDomain}.com/oauth2/default\nokta.oauth2.clientId={clientId}\n```\n\nReplace the placeholders in `client/src/app/app.component.ts` to configure your Okta application settings (replacing `{clientId}` and `{yourOktaDomain}` with the values from your \"Angular PWA\" OIDC app).\n                            \n```typescript\nimport { JwksValidationHandler, OAuthService } from 'angular-oauth2-oidc';\n\n...\n\n  constructor(private oauthService: OAuthService) {\n    this.oauthService.redirectUri = window.location.origin;\n    this.oauthService.clientId = '{clientId}';\n    this.oauthService.scope = 'openid profile email';\n    this.oauthService.oidc = true;\n    this.oauthService.issuer = 'https://{yourOktaDomain}.com/oauth2/default';\n    this.oauthService.tokenValidationHandler = new JwksValidationHandler();\n\n    this.oauthService.loadDiscoveryDocumentAndTryLogin();\n  }\n...\n```\n\nYou'll also need to specify the `url` in `client/src/home/home.component.ts`.\n\n```typescript\nconst authClient = new OktaAuth({\n  url: 'https://{yourOktaDomain}.com',\n  issuer: 'default'\n});\n```\n\n**NOTE:** The value of `{yourOktaDomain}` should be something like `dev-123456.oktapreview.com`. Make sure you don't include `-admin` in the value!\n\nAfter making these changes, you should be able to log in with your credentials at `http://localhost:4200`.\n\nYou will be prompted to log in when you first load the client.\n\n![Angular Login Form](static/angular-login-form.png)\n\nYou can use Chrome Developer Tools to toggle offline in the Network tab and prove that it works offline.\n\n![Offline baby!](static/offline-works.png)\n\n### Deploy to the Cloud\n\nSee [deploy.sh](deploy.sh) to see how to deploy to Cloud Foundry. See [heroku.sh](heroku.sh) to see how to deploy to Heroku.\n\n### Lighthouse Score\n\nYou can see that this app scores 100 as a PWA using [Lighthouse](https://developers.google.com/web/tools/lighthouse/).\n\nCloud Foundry                                                  |  Heroku\n:-------------------------------------------------------------:|:----------------------------------------------------:\n![Lighthouse on Cloud Foundry](static/lighthouse-with-512.png) | ![Lighthouse on Heroku](static/lighthouse-heroku.png)\n\n## Links\n\nThis example uses the following libraries provided by Okta:\n\n* [Okta Spring Boot Starter](https://github.com/okta/okta-spring-boot)\n* [Okta Auth SDK](https://github.com/okta/okta-auth-js)\n\nIt also uses the following library provided by [Manfred Steyer](https://github.com/manfredsteyer):\n\n* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)\n\n## Help\n\nPlease post any questions as comments on the [blog post](https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa), or visit our [Okta Developer Forums](https://devforum.okta.com/). You can also email developers@okta.com if would like to create a support ticket. You can also hit me up on Twitter [@mraible](https://twitter.com/mraible).\n\n## License\n\nApache 2.0, see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-spring-boot-angular-pwa-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foktadev%2Fokta-spring-boot-angular-pwa-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-spring-boot-angular-pwa-example/lists"}