Angular integration

⚡ Before you start: ⚡

📘

Getting Your Frontegg Subdomain

Frontegg creates a unique subdomain for every workspace created on the account. In order to retrieve the subdomain that will act as the baseUrl in the integration, navigate to your workspace administration menu, and copy the workspace domain.
You will need it on this guide.

STEP 1: Create a new Angular application

📘

If you have an existing app, skip this step.

Install Angular CLI (if not already installed)

npm install -g @angular/cli

To create a new app, use the following script.

ng new my-app
cd my-app
ng serve --open

STEP 2: Install Frontegg libraries

Run the following command to Install Frontegg Angular library.

npm install @frontegg/angular
yarn add @frontegg/angular

STEP 3: Configuration

Add FronteggAppModule to AppModule

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';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    FronteggAppModule.forRoot(
      {
        contextOptions: {
          baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com'
        },
        // Replace this with your app logo 👇
        headerImage: 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg'
      }
    ),
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

STEP 4: Add Frontegg to your router module

Add FronteggRouterComponent to your wildcard route as in the example.
Also, you can use FronteggAuthGuard in routing module, to redirect authenticated users to the login page.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { EmptyAppComponent } from './empty/empty.component';
import { NotFoundComponent } from './not-found.component';
import { FronteggAuthGuard, FronteggRouterComponent } from '@frontegg/angular';


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'test-private-route', canActivate: [FronteggAuthGuard], component: EmptyAppComponent },
  {
    path: '**', component: FronteggRouterComponent,
    children: [{ path: '**', component: NotFoundComponent }],
  },
];
@NgModule({
  declarations: [EmptyAppComponent, NotFoundComponent, HomeComponent],
  imports: [RouterModule.forRoot(routes)],
  providers: [],
  exports: [RouterModule],
})
export class AppRoutingModule {}

STEP 5: Getting the user context

Wrap your application with frontegg-app selector

<frontegg-app>
  <router-outlet></router-outlet>
</frontegg-app>

Frontegg exposes the user context and the authentication state via a FronteggAppAuthService.
You can access the whole 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:

import { Component, OnInit } from '@angular/core';
import { FronteggAppService, FronteggAppAuthService } from '@frontegg/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  authenticated?: boolean;
  user?: any;
  
  constructor(private fronteggAppAuthService: FronteggAppAuthService) {
    this.user
  }
  
  ngOnInit(): void {
    this.fronteggAppAuthService?.isAuthenticated$.subscribe((isAuthenticated) => {
      this.authenticated = isAuthenticated
    })
    this.fronteggAppAuthService?.userState$.subscribe((user) => {
      this.user = user
    })
  }
}

Here is an example of how to use the user context:

<frontegg-app>
  <div *ngIf="authenticated">
    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
    <div>User name: {{user?.name}}</div>
  </div>
  <router-outlet></router-outlet>
</frontegg-app>

STEP 6: Run the app, signup & login

We are all set. Let's run the application and see Frontegg in action.

npm run serve
yarn run serve

Great, Frontegg is now integrated with your app!

Login and logout routes have been added to your app:

Signup screen will be at http://localhost:4200/account/sign-up

Login screen will be at http://localhost:4200/account/login

If you are already logged in, go to http://localhost:4200/account/logout and log out.

Give it a try now!
Open http://localhost:4200/account/sign-up and sign up with your first user.

Frontegg Admin Portal Integration

For Frontegg admin portal integration, we will import theFronteggAppService from the @frontegg/angular package and use showAdminPortal method when clicking on the relevant button.

import { Component } from '@angular/core';
import { FronteggAppService } from '@frontegg/angular';

@Component({
  selector: 'show-admin-portal',
  template: '<button (click)="showAdminPortal()">Show Admin Portal</button>',
})
export class ShowAdminPortalComponent {
  constructor(private fronteggAppService: FronteggAppService) { }

  showAdminPortal(): void {
    this.fronteggAppService?.showAdminPortal()
  }
}

You are good to go!
The admin portal should now be shown and you are on the part for a full self-served experience on your product!


Did this page help you?