{"id":27548888,"url":"https://github.com/frontegg/frontegg-angular","last_synced_at":"2026-04-02T20:04:33.325Z","repository":{"id":37464785,"uuid":"300000787","full_name":"frontegg/frontegg-angular","owner":"frontegg","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-27T17:15:25.000Z","size":4892,"stargazers_count":5,"open_issues_count":9,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-01-28T01:39:23.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/frontegg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-09-30T17:35:00.000Z","updated_at":"2026-01-27T17:17:04.000Z","dependencies_parsed_at":"2026-02-10T18:03:49.395Z","dependency_job_id":null,"html_url":"https://github.com/frontegg/frontegg-angular","commit_stats":null,"previous_names":[],"tags_count":199,"template":false,"template_full_name":null,"purl":"pkg:github/frontegg/frontegg-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontegg%2Ffrontegg-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontegg%2Ffrontegg-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontegg%2Ffrontegg-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontegg%2Ffrontegg-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontegg","download_url":"https://codeload.github.com/frontegg/frontegg-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontegg%2Ffrontegg-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29310115,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T17:48:59.043Z","status":"ssl_error","status_checked_at":"2026-02-10T17:45:37.240Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-04-19T04:02:08.103Z","updated_at":"2026-02-10T18:10:11.959Z","avatar_url":"https://github.com/frontegg.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://fronteggstuff.blob.core.windows.net/frongegg-logos/logo-transparent.png\" alt=\"Frontegg Logo\" width=\"400\" height=\"90\"\u003e\n\u003ch3 align=\"center\"\u003eFrontegg Angular\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n    Frontegg is a web platform where SaaS companies can set up their fully managed, scalable and brand aware - SaaS features and integrate them into their SaaS portals in up to 5 lines of code.\n    \u003cbr /\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\n## BREAKING CHANGES SINCE VERSION 3.0.1\nIf you are migrating from `@frontegg/angular` version 2 or earlier, you can find a [migration guide here](https://docs.frontegg.com/docs/migration-guide-fronteggangular-v2-v3)\n\n### 1. Install Frontegg Libraries \n\nRun the following command to Install Frontegg Angular library:\n\n```bash\nnpm install @frontegg/angular\n```\n\n### 2. Configuration\n1. Add `FronteggAppModule` to `AppModule.imports[]`\n2. Add `FronteggComponent` to `AppModule.entryComponents[]`\n\n```ts\n/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { CommonModule } from '@angular/common';\nimport { FronteggAppModule, FronteggComponent } from '@frontegg/angular';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    CommonModule,\n    BrowserModule,\n    AppRoutingModule,\n\n    /** 1. Import Frontegg Module **/\n    FronteggAppModule.forRoot(\n      {\n        contextOptions: {\n          baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',\n          clientId: '[YOUR_CLIENT_ID]'\n        },\n      }\n    ),\n  ],\n\n  /** 2. Add Frontetgg Component to your entryComponents **/\n  entryComponents: [FronteggComponent],\n\n  bootstrap: [AppComponent],\n})\nexport class AppModule { }\n```\n\n#### Connect your application bootstrap component with `fronteggService` to listen for frontegg loading state\n\n```ts\n//app.component.ts\n\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport { FronteggAuthService, FronteggAppService } from '@frontegg/angular';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n})\nexport class AppComponent implements OnDestroy {\n  isLoading = true;\n  loadingSubscription: Subscription;\n  constructor(private fronteggAppService: FronteggAppService) {\n    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) =\u003e this.isLoading = isLoading)\n  }\n  ngOnDestroy(): void {\n    this.loadingSubscription.unsubscribe()\n  }\n}\n```\n\n#### And wrap your application with `*ngIf=\"!isLoading\"` selector to make sure you have the right context\n\n```html\n\u003c!-- app.component.html --\u003e\n\n\u003cdiv *ngIf=\"!isLoading\"\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/div\u003e\n```\n\n### 3. Getting the user context \n\nFrontegg exposes the user context and the authentication state via a `FronteggAppService`. You can access the whole authentication state via the `FronteggAppService`. To have an access to memoized\nauthentication substates like user state, SSO state, MFA state, etc. use `FronteggAuthService` as in the following\nsample:\n\n```ts\n// app.component.ts\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport { FronteggAuthService, FronteggAppService } from '@frontegg/angular';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  isLoading = true;\n  loadingSubscription: Subscription;\n  user?: any;\n\n  constructor(\n    private fronteggAuthService: FronteggAuthService, \n    private fronteggAppService: FronteggAppService) {\n  \tthis.loadingSubscription = \n      fronteggAppService.isLoading$.subscribe((isLoading) =\u003e this.isLoading = isLoading)\n  }\n\n  ngOnInit(): void {\n    this.fronteggAuthService?.user$.subscribe((user) =\u003e {\n      this.user = user\n    })\n  }\n\n  ngOnDestroy(): void {\n    this.loadingSubscription.unsubscribe()\n  }\n}\n```\n\nUpdate `app.component.html` to display the user's name and avatar:\n\n```html\n\u003c!-- app.component.html--\u003e\n\n\u003cdiv *ngIf=\"!isLoading\"\u003e\n    \u003cimg src={{user?.profilePictureUrl}} alt={{user?.name}} /\u003e\n    \u003cdiv\u003eUser name: {{user?.name}}\u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n### 4. Add FronteggAuthGuard to your routing module \n\nUse the `FronteggAuthGuard` to redirect the user to the login page if the user not authenticated and trying to reach a private route.\n\n```ts\n// app-routing.module.ts\n\nimport { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { ProtectedAppComponent } from './components/protected.component';\nimport { NotFoundComponent } from './components/not-found.component';\nimport { HomeComponent } from './components/home.component';\nimport { UsersComponent } from './components/users.component';\nimport { FronteggAuthGuard } from '@frontegg/angular';\n\n/** Option to protect a specific route **/\nconst routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'test-private-route', canActivate: [FronteggAuthGuard], component: ProtectedAppComponent },\n  { path: '**', component: NotFoundComponent },\n]\n\n/** Option to protect all routes **/\nconst routes: Routes = [\n  {\n    path: '',\n    canActivate: [FronteggAuthGuard],\n    children: [\n      { path: '', component: HomeComponent },\n      { path: 'users', component: UsersComponent },\n      { path: '**', component: NotFoundComponent },\n    ]\n  },\n]\n\n@NgModule({\n  declarations: [ProtectedAppComponent, HomeComponent, UsersComponent, NotFoundComponent],\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\n### 5. Run the App, Signup \u0026 Login\n\nWe are all set. Let's run the application and see Frontegg in action.\n\n```\nnpm run serve\n```\n\nGreat, Frontegg is now integrated with your app!\n\nLogin and logout routes have been added to your app:\n\nSignup screen will be at http://localhost:4200/account/sign-up\n\nLogin screen will be at http://localhost:4200/account/login\n\nIf you are already logged in, go to http://localhost:4200/account/logout and log out.\n\nGive it a try by now by signing up \u0026 logging in.\n\nGive it a try now!\nOpen http://localhost:8080/account/sign-up and sign up with your first user.\n\n# Frontegg Admin Portal Integration\n\nIn order to allow your end users to control the Security Settings, Profile, Team Management and more, the next step will\nbe to embed the `Admin Portal` into your application.\n\nFor Frontegg admin portal integration we will import the`FronteggAppService` from the `frontegg-app` package and\nuse `showAdminPortal`\nmethod when clicking on the relevant button.\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { FronteggAppService } from '@frontegg/angular';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n\n  constructor(private fronteggAppService: FronteggAppService) { }\n\n  showApp(): void {\n    this.fronteggAppService?.showAdminPortal()\n  }\n}\n```\n\n6. Enjoy!\n","funding_links":[],"categories":["Security and Authentication"],"sub_categories":["Authentication"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontegg%2Ffrontegg-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontegg%2Ffrontegg-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontegg%2Ffrontegg-angular/lists"}