@frontegg/angular 5.5.3-alpha.3224668504 → 5.5.3-alpha.3288072955

package/README.md

@@ -1,24 +1,29 @@
 # Frontegg Angular
 
+## BREAKING CHANGES SINCE VERSION 3.0.1
+If 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)
 ## How to use
 
-### 1. Install Frontegg Libraries Run the following command to Install Frontegg Angular library.
+### 1. Install Frontegg Libraries 
+
+Run the following command to Install Frontegg Angular library:
 
 ```
 npm install @frontegg/angular
 ```
 
 ### 2. Configuration
-  1. Add `FronteggAppModule` to `AppModule.imports[]`
-  2. Add `FronteggComponent` to `AppModule.entryComponents[]`
+1. Add `FronteggAppModule` to `AppModule.imports[]`
+2. Add `FronteggComponent` to `AppModule.entryComponents[]`
 
 ```
+/app.module.ts
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CommonModule } from '@angular/common';
-import { FronteggAppModule } from '@frontegg/angular';
+import { FronteggAppModule, FronteggComponent } from '@frontegg/angular';
 
 @NgModule({
   declarations: [AppComponent],
@@ -49,22 +54,24 @@ export class AppModule { }
 
 #### Connect your application bootstrap component with `fronteggService` to listen for frontegg loading state
 
-```
-/app.component.ts
+```ts
+//app.component.ts
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FronteggAuthService, FronteggAppService } from '@frontegg/angular';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
-export class AppComponent implements OnDistory {
+export class AppComponent implements OnDestory {
   isLoading = true;
   loadingSubscription: Subscription;
-
   constructor(private fronteggAppService: FronteggAppService) {
-    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading);
+    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
   }
-
-  ngOnDistory(): void {
+  ngOnDestory(): void {
     this.loadingSubscription.unsubscribe()
   }
 }
@@ -72,56 +79,85 @@ export class AppComponent implements OnDistory {
 
 #### And wrap your application with `*ngIf="!isLoading"` selector to make sure you have the right context
 
-```
-/app.component.html
+```html
+<!-- app.component.html -->
 
 <div *ngIf="!isLoading">
     <router-outlet></router-outlet>
 </div>
 ```
 
-### 3. Getting the user context Frontegg 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
-   authentication substates like user state, SSO state, MFA state, etc. use `FronteggAppAuthService` as in the following
-   sample:
+### 3. Getting the user context 
 
-```
-import { Component, OnInit } from '@angular/core';
-import { FronteggAuthService, AuthState } from '@frontegg/angular';
+Frontegg 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
+authentication substates like user state, SSO state, MFA state, etc. use `FronteggAuthService` as in the following
+sample:
+
+```ts
+// app.component.ts
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FronteggAuthService, FronteggAppService } from '@frontegg/angular';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
-  template: `<div *ngIf="authenticated">
-    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
-    <div>User name: {{user?.name}}</div>
-  </div>`,
+  templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit {
-  user?: AuthState['user'] | null;
+export class AppComponent implements OnInit, OnDestroy {
+  isLoading = true;
+  loadingSubscription: Subscription;
+  user?: any;
 
-  constructor(private fronteggAuthService: FronteggAuthService) {
+  constructor(
+    private fronteggAuthService: FronteggAuthService, 
+    private fronteggAppService: FronteggAppService) {
+  	this.loadingSubscription = 
+      fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
   }
 
   ngOnInit(): void {
-    this.fronteggAppAuthService?.userState$.subscribe((user) => {
+    this.fronteggAuthService?.user$.subscribe((user) => {
       this.user = user
     })
   }
+
+  ngOnDestory(): void {
+    this.loadingSubscription.unsubscribe()
+  }
 }
 ```
 
-### 4. Tou can add FronteggAuthGuard to your routing module to redirect the user to the login page if the user not authenticated and trying to reach a private route.
+Update `app.component.html` to display the user's name and avatar:
+
+```html
+<!-- app.component.html-->
+
+<div *ngIf="!isLoading">
+    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
+    <div>User name: {{user?.name}}</div>
+</div>
 
 ```
+
+### 4. Add FronteggAuthGuard to your routing module 
+
+Use the `FronteggAuthGuard` to redirect the user to the login page if the user not authenticated and trying to reach a private route.
+
+```ts
+// app-routing.module.ts
+
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ProtectedAppComponent } from './components/protected.component';
 import { NotFoundComponent } from './components/not-found.component';
+import { HomeComponent } from './components/home.component';
+import { UsersComponent } from './components/users.component';
 import { FronteggAuthGuard } from '@frontegg/angular';
 
 /** Option to protect a specific route **/
 const routes: Routes = [
-  { path: '', component: EmptyAppComponent },
+  { path: '', component: HomeComponent },
   { path: 'test-private-route', canActivate: [FronteggAuthGuard], component: ProtectedAppComponent },
   { path: '**', component: NotFoundComponent },
 ]
@@ -140,8 +176,8 @@ const routes: Routes = [
 ]
 
 @NgModule({
+  declarations: [ProtectedAppComponent, HomeComponent, UsersComponent, NotFoundComponent],
   imports: [RouterModule.forRoot(routes)],
-  providers: [],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}
@@ -179,7 +215,7 @@ For Frontegg admin portal integration we will import the`FronteggAppService` fro
 use `showAdminPortal`
 method when clicking on the relevant button.
 
-```
+```ts
 import { Component, OnInit } from '@angular/core';
 import { FronteggAppService } from '@frontegg/angular';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontegg/angular",
-  "version": "5.5.3-alpha.3224668504",
+  "version": "5.5.3-alpha.3288072955",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=12.0.0",