# Angular SDK

The FusionAuth Angular SDK allows you to add login, logout and registration functionality to your Angular application.

> For the index of this section of the site, see [llms.txt](https://4002.18-224-161-104.sslip.io/docs/llms.txt)

This SDK helps manage authentication state for your Angular app and provides functionality to login, register, and logout users. It also can be configured to automatically manage your refresh token.

Your users will be sent to FusionAuth’s themeable hosted login pages and then log in. After that, they are sent back to your Angular application.

Once authentication succeeds, the following secure, HTTP-only cookies will be set:

*   `app.at` - an OAuth [Access Token](https://4002.18-224-161-104.sslip.io/docs/lifecycle/authenticate-users/oauth/tokens.md#access-token)
    
*   `app.rt` - a [Refresh Token](https://4002.18-224-161-104.sslip.io/docs/lifecycle/authenticate-users/oauth/tokens.md#refresh-token) used to obtain a new `app.at`. This cookie will only be set if refresh tokens are enabled on your FusionAuth instance.
    

The access token can be presented to APIs to authorize the request and the refresh token can be used to get a new access token.

There are 2 ways to interact with this SDK:

1.  By hosting your own server that performs the OAuth token exchange and meets the [server code requirements for FusionAuth Web SDKs](https://github.com/FusionAuth/fusionauth-javascript-sdk-express#server-code-requirements).
2.  By using the server hosted on your FusionAuth instance, i.e., not writing your own server code.

If you are hosting your own server, see [server code requirements](https://github.com/FusionAuth/fusionauth-javascript-sdk-express#server-code-requirements).

You can use this library against any version of FusionAuth or any OIDC compliant identity server.

## Getting Started

If you are new to Angular development, you may want to start with the Quickstart guide. If you are already familiar with Angular development, skip to the Installation section.

### Quickstart

See the [FusionAuth Angular Quickstart](https://4002.18-224-161-104.sslip.io/docs/get-started/quickstarts/spa/quickstart-javascript-angular-web.md) for a full tutorial on using FusionAuth and Angular.

### Installation

NPM:

```bash
npm install @fusionauth/angular-sdk
```

Yarn:

```bash
yarn add @fusionauth/angular-sdk
```

### Configuring FusionAuthModule

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { FusionAuthModule } from '@fusionauth/angular-sdk';

@NgModule({
  declarations: [],
  imports: [
    FusionAuthModule.forRoot({
      clientId: '', // Your FusionAuth client ID
      serverUrl: '', // The base URL of the server that performs the token exchange
      redirectUri: '', // The URI that the user is directed to after the login/register/logout action
      shouldAutoRefresh: true // option to configure the SDK to automatically handle token refresh. Defaults to false if not specified here.
      // useDpop: true, // Opt-in to DPoP mode. See "DPoP Mode" below. Defaults to false.
    }),
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }
```

## Usage

### FusionAuthService

The injectable `FusionAuthService` class provides observable properties to which components may subscribe.

Note, you can also use the non-observable `getUserInfo` method if you wish to implement your observables.

```typescript
class AppComponent implements OnInit, OnDestroy {
  private fusionAuthService: FusionAuthService = inject(FusionAuthService);

  isLoggedIn: boolean = this.fusionAuthService.isLoggedIn();
  userInfo: UserInfo | null = null;
  isGettingUserInfo: boolean = false;
  subscription?: Subscription;

  ngOnInit(): void {
    if (this.isLoggedIn) {
      this.subscription = this.fusionAuthService
        .getUserInfoObservable({
          onBegin: () => (this.isGettingUserInfo = true),
          onDone: () => (this.isGettingUserInfo = false),
        })
        .subscribe({
          next: (userInfo) => (this.userInfo = userInfo),
          error: (error) => console.error(error),
        });
    }
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}
```

### Pre-built buttons

There are three pre-styled buttons that are configured to perform login/logout/registration. They can be placed anywhere in your app as is.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `<fa-login></fa-login>`,
  styleUrls: []
})
export class LoginComponent {}

@Component({
  selector: 'app-logout',
  template: `<fa-logout></fa-logout>`,
  styleUrls: []
})
export class LogoutComponent {}

@Component({
  selector: 'app-register',
  template: `<fa-register></fa-register>`,
  styleUrls: []
})
export class RegisterComponent {}
```

#### State parameter

The `startLogin` and `startRegistration` functions both accept an optional string parameter called `state`. The login and register components can also be passed the state as an input. The state that is passed in to the function call will be echoed back in the state query parameter of the callback uri specified in `redirectUri` on the `FusionAuthConfig` used to initialize the `FusionAuthModule`. Though you may pass any value you would like for the state parameter, it is often used to indicate which page the user was on before redirecting to login or registration, so that the user can be returned to that location after a successful authentication.

#### SSR

The SDK supports Angular applications using SSR. No additional configuration is needed.

### DPoP Mode

By default, the SDK calls a Hosted Backend that stores tokens in HttpOnly cookies (`useDpop: false`, the default). In DPoP mode, the SDK instead calls FusionAuth endpoints directly and binds tokens to a private key generated in the browser. Enable it by setting `useDpop: true` on `FusionAuthConfig`:

```typescript
FusionAuthModule.forRoot({
  clientId: '',
  serverUrl: '',
  redirectUri: '',
  useDpop: true, // Opt-in to DPoP mode.
  dpopTokenStorage: 'localStorage', // 'localStorage' (default, persists across reloads) or 'memory'.
}),
```

When `useDpop: true`, `FusionAuthService` additionally exposes `dpopFetch()`, `generateProof()`, and `getAccessToken()`. These throw a descriptive error if called when `useDpop` is not enabled.

```typescript
class AppComponent {
  private fusionAuthService: FusionAuthService = inject(FusionAuthService);

  async callApi() {
    // Recommended — handles attaching DPoP headers (and nonce retries) automatically.
    const response = await this.fusionAuthService.dpopFetch('https://api.example.com/data', { method: 'GET' });

    // For axios or other HTTP libraries that can't use dpopFetch.
    const accessToken = this.fusionAuthService.getAccessToken();
    const proof = await this.fusionAuthService.generateProof('https://api.example.com/data', 'GET', accessToken ?? undefined);
    // axios.get('https://api.example.com/data', {
    //   headers: { Authorization: `DPoP ${accessToken}`, DPoP: proof }
    // });
  }
}
```

### Known Issues

None.

## Documentation

[Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/docs)

## Usage With FusionAuth Cloud

When developing against a FusionAuth Cloud instance with a hostname ending in `fusionauth.io`, unless your application shares the same domain of `fusionauth.io` attempts to use these endpoints will fail with a `403` status code.

These endpoints do not work correctly for cross origin requests. Cross origin requests occur when the application making the request to FusionAuth is using a separate domain. For example, if your application URL is `app.acme.com` and the FusionAuth URL is `acme.fusionauth.io` requests from your application to FusionAuth will be considered cross origin.

If possible, have FusionAuth and your application served by the same domain, using a [proxy if needed](https://4002.18-224-161-104.sslip.io/docs/operate/deploy/proxy-setup.md). For example, serve your app from `app.acme.com` and FusionAuth from `auth.acme.com`.

If this configuration is not possible, use one of these alternative methods:

*   Develop using a local FusionAuth instance, so both your webapp and FusionAuth are running on `localhost`.
*   Do not use the FusionAuth hosted backend, and instead write your own backend with a cross origin cookie policy: [here’s an example](https://github.com/FusionAuth/fusionauth-javascript-sdk-express/tree/main).
*   Configure a [custom domain name for the FusionAuth Cloud instance](https://4002.18-224-161-104.sslip.io/docs/cloud/operate/custom-domains.md).

Modifying FusionAuth CORS configuration options does not fix this issue because the cookies that FusionAuth writes will not be accessible cross domain.

## Source Code

The source code is available here: [https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/)

## Upgrade Policy

Besides the releases made to keep track of the FusionAuth API as mentioned above, SDKs and Client Libraries may periodically receive updates with bug fixes, security patches, tests, code samples, or documentation changes.

These releases may also update dependencies, language engines, and operating systems, as we'll follow the deprecation and sunsetting policies of the underlying technologies that the libraries use.

This means that after a language, framework, or operating system is deprecated by their own maintainer, our SDKs and Client Libraries that depend on it will also be deprecated by us, and will eventually be updated to use a newer version.

For more information about upgrades, see our [Upgrade guide](https://4002.18-224-161-104.sslip.io/docs/operate/deploy/upgrade.md#upgrade-a-client-library).

Related

[Get Started FusionAuth QuickStart for Angular QuickStart integration of an Angular web application with FusionAuth. spa authentication](https://4002.18-224-161-104.sslip.io/docs/get-started/quickstarts/spa/quickstart-javascript-angular-web.md)

[Get Started FusionAuth QuickStart for Vue.js QuickStart integration of a Vue.js web application with FusionAuth. spa authentication](https://4002.18-224-161-104.sslip.io/docs/get-started/quickstarts/spa/quickstart-javascript-vue-web.md)

[Get Started FusionAuth QuickStart for React QuickStart a React Web App with FusionAuth. spa authentication](https://4002.18-224-161-104.sslip.io/docs/get-started/quickstarts/spa/react.md)

[SDKs React SDK The FusionAuth React SDK allows you to add login, logout and registration functionality to your React application. spa authentication](https://4002.18-224-161-104.sslip.io/docs/sdks/react-sdk.md)
---

## Other pages in SDKs

> For the full index of this section, see [SDKs](https://4002.18-224-161-104.sslip.io/docs/llms-sdks.txt).

- [Kotlin SDK for Android](https://4002.18-224-161-104.sslip.io/docs/sdks/android-sdk.md): The FusionAuth Android SDK allows you to add different OAuth2 and OpenID Connect functionalities to your Android application. It's a highly standardized and simplified starting point for developers to easily integrate FusionAuth in their own custom Android mobile apps by taking care of all the dependencies.
- [Example Apps](https://4002.18-224-161-104.sslip.io/docs/sdks/examples.md): Learn about example applications using FusionAuth.
- [Go Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/go.md): The FusionAuth Go Client library allows you to call FusionAuth from Go applications.
- [Java Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/java.md): The FusionAuth Java Client library allows you to call FusionAuth from Java applications.
- [.NET Core Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/netcore.md): The FusionAuth .NET Core Client library allows you to call FusionAuth from a .NET Core application.
- [PHP Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/php.md): The FusionAuth PHP Client library allows you to call FusionAuth from PHP applications.
- [Python Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/python.md): The FusionAuth Python Client library allows you to call FusionAuth from Python applications.
- [React SDK](https://4002.18-224-161-104.sslip.io/docs/sdks/react-sdk.md): The FusionAuth React SDK allows you to add login, logout and registration functionality to your React application.
- [Ruby Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/ruby.md): The FusionAuth Ruby Client library allows you to call FusionAuth from Ruby applications.
- [Swift SDK for iOS](https://4002.18-224-161-104.sslip.io/docs/sdks/swift-sdk.md): Create iOS mobile apps with FusionAuth-based authentication using the Swift SDK.
- [TypeScript Client Library](https://4002.18-224-161-104.sslip.io/docs/sdks/typescript.md): The FusionAuth Typescript Client library allows you to call FusionAuth from JavaScript and Typescript applications.
- [Vue SDK](https://4002.18-224-161-104.sslip.io/docs/sdks/vue-sdk.md): The FusionAuth Vue SDK allows you to add login, logout and registration functionality to your Vue application.