{"id":20307433,"url":"https://github.com/oktadev/okta-angular-microfrontend-example","last_synced_at":"2025-10-07T21:41:25.010Z","repository":{"id":103823979,"uuid":"487848611","full_name":"oktadev/okta-angular-microfrontend-example","owner":"oktadev","description":"Starter code + completed project for micro-frontends using Webpack 5 and Module Federation plugin in Angular and sharing authenticated state","archived":false,"fork":false,"pushed_at":"2023-01-04T20:48:58.000Z","size":156,"stargazers_count":26,"open_issues_count":0,"forks_count":15,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-11T15:15:01.843Z","etag":null,"topics":["angular","microfrontends","oidc"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"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":"2022-05-02T13:09:10.000Z","updated_at":"2025-03-30T12:17:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"ec119494-08c9-47d9-8943-a52ba75cde87","html_url":"https://github.com/oktadev/okta-angular-microfrontend-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oktadev/okta-angular-microfrontend-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-microfrontend-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-microfrontend-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-microfrontend-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-microfrontend-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oktadev","download_url":"https://codeload.github.com/oktadev/okta-angular-microfrontend-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-angular-microfrontend-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278854216,"owners_count":26057419,"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-10-07T02:00:06.786Z","response_time":59,"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","microfrontends","oidc"],"created_at":"2024-11-14T17:17:42.577Z","updated_at":"2025-10-07T21:41:25.004Z","avatar_url":"https://github.com/oktadev.png","language":"TypeScript","readme":"# Angular Micro Frontend Example\n\nThis repository shows you how to set up micro frontends using Webpack 5 and Module Federation plugin in Angular and share authenticated state across the project. Please read [How to Build Micro Frontends Using Module Federation in Angular][blog] to see how it was created.\n\nThis repo accompanies the posts for the Angular micro-frontend series. The starter project is in the `main` branch. The completed code for the first post is in the `local` branch.\n\n**Prerequisites**\n\n* Node 16\n* Okta CLI\n* Angular CLI\n* GitHub account\n* Vercel account\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 run this example, run the following commands:\n\n```bash\ngit clone https://github.com/oktadev/okta-angular-microfrontend-example.git\ncd okta-angular-microfrontend-example\nnpm ci\n```\n\n### Create an OIDC Application in Okta\n\nCreate a free developer account with the following command using the [Okta CLI](https://cli.okta.com):\n\n```shell\nokta register\n```\n\nIf you already have a developer account, use `okta login` to integrate it with the Okta CLI.\n\nProvide the required information. Once you register, create a client application in Okta with the following command:\n\n```shell\nokta apps create\n```\n\nYou will be prompted to select the following options:\n- Type of Application: **2: SPA**\n- Redirect URI: `http://localhost:4200/login/callback`\n- Logout Redirect URI: `http://localhost:4200`\n\nThe application configuration will be printed to your screen:\n\n```shell\nOkta application configuration:\nIssuer:    https://\u003cOKTA_DOMAIN\u003e.okta.com/oauth2/default\nClient ID: \u003cCLIENT_ID\u003e\n```\n\nIn Okta dashboard, navigate to **Directory** \u003e **People** and populate \"department\" field for your user with either a `1` or `2`. Navigate to **Security** \u003e **API** and add \"department\" custom claim to your application Authorization Server ID token by mapping it to `user.profile.department`. The tutorial walks you through this process.\n\nUpdate `projects/shell/src/app/app.module.ts` with your Okta settings.\n\n```ts\nconst oktaAuth = new OktaAuth({\n    clientId: '{yourClientID}',\n    issuer: 'https://{yourOktaDomain}/oauth2/default',\n    redirectUri: window.location.origin + '/login/callback'\n});\n```\n\nStart the app by running\n\n```shell\nnpm run run:all\n```\n\n### Recreate this starter\n\nYou can recreate this starter project structure yourself. Here are the central Angular CLI, npm, and shell commands. The commands to add Tailwind CSS and each Angular component is skipped.\n\n```shell\nnpx @angular/cli@13 new okta-angular-microfrontend-example --create-application false --minimal\ncd okta-angular-microfrontend-example\nng generate application shell --routing --style css --inline-style\nng generate component products --project shell\nng generate component products/product --project shell --flat\nng generate library shared\nng generate interface product --project shared\nng generate service products --project shared\nng generate service basket --project shared\n\nng generate application mfe-basket --routing --style css --inline-style\nng generate component home --project mfe-basket\nng generate module basket --project mfe-basket --routing --route basket --module app\n\nng add @angular-architects/module-federation --project shell --port 4200\nng add @angular-architects/module-federation --project mfe-basket --port 4201\n```\n\n## Links\n\nThis example uses the following open source libraries from Okta:\n\n* [Okta Angular SDK](https://github.com/okta/okta-angular)\n* [Okta CLI](https://github.com/okta/okta-cli)\n\n## Help\n\nPlease post any questions as comments on the [blog post][blog], or visit our [Okta Developer Forums](https://devforum.okta.com/).\n\n## License\n\nApache 2.0, see [LICENSE](LICENSE).\n\n[blog]: https://developer.okta.com/blog/2022/05/17/angular-microfrontend-auth\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-angular-microfrontend-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foktadev%2Fokta-angular-microfrontend-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-angular-microfrontend-example/lists"}