## Angular hosted login quickstart

Quickly integrate Frontegg’s login box into your Angular app with support for Sign In, Sign Up, and SSO — using built-in support for redirects, OpenID Connect, and OAuth2.

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_SUBDOMAIN].frontegg.com',
    clientId: '[YOUR_CLIENT_ID]',
    appId: '[YOUR_APP_ID]'
  },
  authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: true,
};
@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",
    appId: '[YOUR_APP_ID]'
  },
  authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: true,
};

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

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

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

br

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

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

br
For an automatic redirect to your app or login page, use the following code:

br

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

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


```typescript
@if(!isLoading){
<div>
  @if(user){
  <div>
    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
    <div>User name: {{user?.name}}</div>
    <button (click)="logOut()">Log out</button>
  </div>
  } @else {
  <div>
    <!-- Uncomment when not using auto-redirect-->
    <!-- <button (click)="loginWithRedirect()">Login with redirect</button> -->
  </div>
  }
</div>
}
```

br
Great, Frontegg is now integrated with your app!

Run your app and click on the `Login with redirect` button in order to navigate to the login dialog