Sign up for Frontegg

Angular integration

Suggest Edits

⚡ 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: Install Frontegg libraries

Run the following command to Install Frontegg Angular library.

npm install @frontegg/angular

yarn add @frontegg/angular

STEP 2: 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 3: 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 4: 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 5: 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!

Updated over 1 year ago