## 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.

br
Check out the sample package on GitHub

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

br
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
```

br
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
```


```
yarn add @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`.

br
Add `FronteggAppModule` to `AppModule.imports[]`

br
See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) and [`hostedLoginBox`](/ciam/sdks/components/fronteggappoptions#hostedloginbox) for more information.


```typescript
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 {}
```


```typescript
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { FronteggAppOptions } from '@frontegg/types';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { FronteggAppModule } from '@frontegg/angular';

const fronteggConfig: FronteggAppOptions = {
  contextOptions: {
    baseUrl: 'https://[YOUR-SUB-DOMAIN].frontegg.com',
  },
  authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: false,
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(FronteggAppModule.forRoot(fronteggConfig))
  ],
};
```

See [`keepSessionAlive`](/ciam/sdks/components/fronteggstoreoptions#keepsessionalive) for more information.

### Listen to loading state changes

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


```typescript
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()
  }
}
```

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

br

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