Angular embedded login quickstart

This guide walks you through integrating Frontegg’s login box into your Angular app, with built-in support for Sign In, Sign Up, SSO, and automatic redirects—all in just a few lines of code.

Check out the sample package on GitHub

Server-Side Rendering (SSR) Support

Server-Side Rendering (SSR) is currently not supported for this integration

Getting your Frontegg subdomain and `clientId`

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 Keys & domains menu, and copy the Frontegg domain and clientId.

Step 1: Create an Angular app

If you already have an existing app, skip this step.

Install the Angular command line interface.

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 Angular library

Run the following command to install the Frontegg Angular library.

npm install @frontegg/angular

Step 3: Configure your app

Modules vs. Standalone

Note that configuring your app depends on whether you have a standalone or Frontegg-module based app or not. If you have a standalone app, please refer to the app.config.ts script. Otherwise, use app.module.ts.

Add FronteggAppModule to AppModule.imports[]

See contextOptions and hostedLoginBox for more information.

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";
const fronteggConfig = {
  contextOptions: {
    baseUrl: "https://[YOUR-SUB-DOMAIN].frontegg.com",
  },
  authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: false,
};
@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,

    /** Import Frontegg Module **/
    FronteggAppModule.forRoot(fronteggConfig),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

See keepSessionAlive for more information.

Listen to loading state changes

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',
  standalone: true //comment out if you're not using a standalone app
})
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
    })
  }

  logIn(): void {
    window.location.href = "/account/login";
  }


  logOut(): void {
    this.fronteggAuthService.logout()
  }

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

Wrap your application with the @if(!isLoading){} to make sure you have the right context.

@if(!isLoading){
  <router-outlet></router-outlet>
}