What will we build?

In this quickstart, we will add the Frontegg hosted 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 using redirects, Open Id Connect, and OAuth2.


⚑️ 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-SUB-DOMAIN].frontegg.com',
          clientId: '[YOUR-CLIENT-ID]'
        },
        hostedLoginBox: true,
      }
    ),
  ],

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

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

In app.component.ts, add the loading state and loginWithRedirect hook in order to navigate to the hosted login.

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from "rxjs";
import {FronteggAppService, FronteggAuthService} from "@frontegg/angular";

@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
    })
  }

  loginWithRedirect(): void {
    this.fronteggAuthService.loginWithRedirect();
  }

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

On the hosted login configuration, add http://localhost:4200/oauth/callback as the allowed redirectUrl

In app.component.html, for non-authenticated users, clicking the loginWithRedirect() will navigate the user to the hosted login. Once the user is authenticated, the user info will be available on the user object available from the component.

<div *ngIf="!isLoading">
  <div *ngIf="user">
    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
    <div>User name: {{user?.name}}</div>
  </div>
  <div *ngIf="!user">
    <button (click)="loginWithRedirect()">Login with redirect</button>
  </div>
</div>

STEP 4: Run the app, signup & login


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

Click on the Login with redirect button in order to navigate to the login dialog

Great, Frontegg is now integrated with your app!


Did this page help you?