What will we build?

In this quickstart, we will add the Frontegg embedded login box to your Angular application.

In 5 minutes from now (start your stopwatch), your application will have a login box with Sign-in, Signup, and SSO. All this with just a few lines of code.

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

Ready to start?


alt textalt text

⚑ 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 for 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

🚧

Note - our package works with Angular v12


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_SUBDOMAIN].frontegg.com'
        },
      }
    ),
  ],

  /** 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.


Did this page help you?