Sign up for Frontegg

Embed Angular

Suggest Edits

Overview

In this quickstart, we will embed Frontegg login box to your Angular application.


The code in the sample below is available in our Frontegg Samples repository


⚡ Before you start: ⚡

📘

Getting your Frontegg subdomain

Frontegg creates a unique subdomain and client id for every environment created on the account. In order to retrieve the clientId subdomain that will act as the baseUrl in the integration, navigate to your workspace 'Settings' menu, 'Domains' and copy the Frontegg domain and clientId.

You will need them for this guide.


📘

Prerequisites:

Node >= 12
Angular =< 15

Typescript >= 4.2

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

  1. Add FronteggAppModule to AppModule.imports[]
  2. Add FronteggComponent to AppModule.entryComponents[]

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, FronteggComponent } from '@frontegg/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,

    /** 1. Import Frontegg Module **/
    FronteggAppModule.forRoot(
      {
        contextOptions: {
          baseUrl: 'https://[YOUR-SUB-DOMAIN].frontegg.com',
          clientId: '[YOUR-CLIENT-ID]'
        },
        authOptions: {
          // keepSessionAlive: true // Uncomment this in order to maintain the session alive
        },
        hostedLoginBox: false,
      },
    ),
  ],

  /** 2. Add Frontetgg Component to your entryComponents **/
  entryComponents: [FronteggComponent],

  bootstrap: [AppComponent],
})
export class AppModule { }

Connect your application bootstrap component with fronteggService to listen for the frontegg loading state.

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 OnInit, OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  user?: any;

  constructor(private fronteggAuthService: FronteggAuthService, private fronteggAppService: FronteggAppService) {
    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
  }

  ngOnInit(): void {
    this.fronteggAuthService?.user$.subscribe((user) => {
      this.user = user
    })
  }

  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe()
  }
}

Wrap your application with the *ngIf="!isLoading" selector to make sure you have the right context.

<div *ngIf="!isLoading">
    <router-outlet></router-outlet>
</div>

STEP 4: 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 access to memoized authentication substates like user state, SSO state, MFA state, and more, use FronteggAuthService as in the following sample.

Update app.component.html to display the user's name and avatar:

<div *ngIf="!isLoading">
    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
    <div>User name: {{user?.name}}</div>
</div>

STEP 5: 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.

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: HomeComponent },
  { path: 'test-private-route', canActivate: [FronteggAuthGuard], component: ProtectedAppComponent },
  { path: '**', component: NotFoundComponent },
]

/** Option to protect all routes **/
const routes: Routes = [
  {
    path: '',
    canActivate: [FronteggAuthGuard],
    children: [
      { path: '', component: HomeComponent },
      { path: 'users', component: UsersComponent },
      { path: '**', component: NotFoundComponent },
    ]
  },
]

@NgModule({
  declarations: [ProtectedAppComponent, HomeComponent, UsersComponent, NotFoundComponent],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

STEP 6: Run the app, signup & login

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

npm start

yarn start

Great, Frontegg is now integrated with your app!

Login and logout routes have been added to your app:

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.

Updated 25 days ago