{"id":20307451,"url":"https://github.com/oktadev/okta-angular-sign-in-widget-example","last_synced_at":"2025-08-21T20:07:59.529Z","repository":{"id":38816835,"uuid":"85865311","full_name":"oktadev/okta-angular-sign-in-widget-example","owner":"oktadev","description":"Angular + Okta Sign-In Widget Example","archived":false,"fork":false,"pushed_at":"2023-02-02T19:33:17.000Z","size":3211,"stargazers_count":17,"open_issues_count":11,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-25T11:21:26.747Z","etag":null,"topics":["angular","angular-cli","okta"],"latest_commit_sha":null,"homepage":"https://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget","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}},"created_at":"2017-03-22T18:59:25.000Z","updated_at":"2025-02-05T02:14:50.000Z","dependencies_parsed_at":"2023-02-17T23:45:51.156Z","dependency_job_id":null,"html_url":"https://github.com/oktadev/okta-angular-sign-in-widget-example","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/oktadev%2Fokta-angular-sign-in-widget-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-sign-in-widget-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-sign-in-widget-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-sign-in-widget-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oktadev","download_url":"https://codeload.github.com/oktadev/okta-angular-sign-in-widget-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248429110,"owners_count":21101783,"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-cli","okta"],"created_at":"2024-11-14T17:17:44.495Z","updated_at":"2025-04-11T15:12:03.783Z","avatar_url":"https://github.com/oktadev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular + Okta Sign-In Widget Example \n \nThis example app shows how to use Okta's Sign-In Widget in an Angular app.\n\nPlease read [Build an Angular App with Okta's Sign-In Widget in 15 Minutes](https://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget) to see how this app was created.\n\n**Prerequisites:** [Node.js](https://nodejs.org/).\n\n*[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-angular-sign-in-widget-example.git\ncd okta-angular-sign-in-widget-example\nnpm install\n```\n\nThis will get a copy of the project installed locally, install all of its dependencies and start the app.\n\n### Create an OIDC App in Okta\n\nYou will need to [create an OIDC App in Okta](https://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget#create-an-openid-connect-app-in-okta) to get your values to perform authentication. \n\nOpenID Connect is built on top of the OAuth 2.0 protocol. It allows clients to verify the identity of the user and, as well as to obtain their basic profile information. To learn more, see [http://openid.net/connect](http://openid.net/connect/).\n\nLogin to your Okta account, or [create one](https://developer.okta.com/signup/) if you don't have one. Navigate to **Applications** and click on the **Add Application** button. Select **SPA** and click **Next**. On the next page, specify `http://localhost:4200` as a Base URI, Login redirect URI, and Logout redirect URI. Click **Done** and copy the generated `Client ID`.\n\nIn `src/app/shared/okta/okta.service.ts`, set the `baseUrl` and paste your `clientId`.\n\n```typescript\nthis.widget = new OktaSignIn({\n  baseUrl: 'https://{yourOktaDomain}',\n  clientId: '{clientId}',\n  redirectUri: 'http://localhost:4200'\n});\n```\n\n**TIP:** The value of `{yourOktaDomain}` should be something like `dev-123456.okta.com`. Make sure you don't include `-admin` in the value!\n\nAfter making these changes, you should be able to start the app (with `ng serve`) and log in with your credentials at `http://localhost:4200`.\n\n## Links\n\nThis example uses the following libraries provided by Okta:\n\n* [Okta Sign-In Widget](https://github.com/okta/okta-signin-widget)\n\n## Help\n\nPlease post any questions as comments on the [blog post](https://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget), 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.\n\n## License\n\nApache 2.0, see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-angular-sign-in-widget-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foktadev%2Fokta-angular-sign-in-widget-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-angular-sign-in-widget-example/lists"}