Angular
What will we build?
In this quickstart, we will add the Frontegg hosted login box to your Angular application.
In 5 minutes from now, your application will have a login box with Sign in, Sign up, and SSO. All this with just a few lines of code using redirects, Open Id Connect, and OAuth2.
⚡ Before you start: ⚡
Getting your Frontegg subdomain
Frontegg creates a unique
subdomain
andclient id
for every environment created on the account. In order to retrieve theclientId
subdomain
that will act as thebaseUrl
in the integration, navigate to your workspace 'Settings' menu, 'Domains' and copy theFrontegg domain
andclientId
.You will need them for this guide.
Prerequisites:
Node >= 12
Angular =< 15
Typescript >= 4.2
STEP 1: Create an Angular app
If you have an existing app, skip this step.
Install 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
Run the following command to install the Frontegg Angular library.
npm install @frontegg/angular
yarn add @frontegg/angular
STEP 3: Configure
- Add
FronteggAppModule
to AppModule.imports[] - 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: 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, ContextHolder } 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();
}
logOut(): void {
const baseUrl = ContextHolder.getContext().baseUrl;
window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
}
ngOnDestroy(): void {
this.loadingSubscription.unsubscribe()
}
}
For an automatic redirect to your app or login page use the code below:
// Available from v4.20.1 for automatic redirect to your app / login box.
export class AppComponent implements OnInit
{
isLoading = true;
user?: any;
constructor(private fronteggAuthService: FronteggAuthService, private fronteggAppService: FronteggAppService) {
}
ngOnInit(): void {
this.fronteggAuthService.authState$.subscribe(authState => {
this.isLoading = authState.isLoading
this.user = authState.user
if (!authState.isLoading && !authState.isAuthenticated) {
this.fronteggAuthService.loginWithRedirect();
}
});
}
logOut(): void {
const baseUrl = ContextHolder.getContext().baseUrl;
window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
}
}
On the [hosted login configuration](https://portal.frontegg.com), add `http://localhost:4200/oauth/callback` as the allowed `redirectUrl`
Configure Each Environment
Configure the hosted login for each environment separately.
STEP 4: Redirect to login
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>
<button (click)="logOut()">Log out</button>
</div>
<div *ngIf="!user">
<button (click)="loginWithRedirect()">Login with redirect</button>
</div>
</div>
Great, Frontegg is now integrated with your app!
Try it now!
Run your app and click on the Login with redirect
button in order to navigate to the login dialog
Updated 25 days ago