> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Angular Quickstart
> Get started using the Angular SDK
## Overview
In this quickstart, you'll add Fingerprint to a new [Angular](https://angular.dev/) v21 project and identify the user's device.
The example use case in this quickstart is stopping new account fraud, where attackers create multiple fake accounts to abuse promotions, exploit systems, or evade bans. However, the steps you'll follow apply to most use cases. By identifying the device behind each sign-up attempt, login, or transaction, you can flag and block suspicious users early.
This guide focuses on the frontend integration. You'll install the [Fingerprint Angular SDK](/docs/angular) and initialize the JavaScript agent to generate an event ID to send to your backend for analysis. **To see how to implement fraud prevention with this ID, continue to one of the [backend quickstarts](/docs/server-quickstarts-overview) after completing this quickstart.**
> Estimated time: \< 10 minutes
## Prerequisites
Before you begin, make sure you have the following:
* [**Node.js**](https://nodejs.org/) (v20 or later) and npm installed
* Your favorite code editor
* Basic knowledge of [**Angular**](https://angular.dev/tutorials/learn-angular) and JavaScript/TypeScript
This quickstart only covers the **frontend setup**. You'll need a [backend
server](/reference/server-sdks) to receive and process the device identification event to enable
fraud detection. Check out one of the [backend quickstarts](/docs/server-quickstarts-overview)
after completing this quickstart.
## 1. Create a Fingerprint account and get your API key
1. [Sign up](https://dashboard.fingerprint.com/signup) for a free Fingerprint trial if you don't already have an account.
2. After signing in, go to the [**API keys**](https://dashboard.fingerprint.com/api-keys) page in the dashboard.
3. Copy your **public API key**; you'll need it to initialize the JavaScript agent.
## 2. Set up your project
To get started, create a new Angular project. If you already have a project you want to use, you can skip to the next section.
1. Install the Angular CLI:
```bash Terminal theme={"theme":"github-dark-dimmed"}
npm install -g @angular/cli
```
2. Create a new project:
```bash Terminal theme={"theme":"github-dark-dimmed"}
ng new fingerprint-angular-quickstart
```
You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire. If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.
After you select the configuration options and the CLI runs through the setup, you should see the following message:
```bash Terminal theme={"theme":"github-dark-dimmed"}
✔ Packages installed successfully.
Successfully initialized git.
```
3. Change into the project folder:
```bash Terminal theme={"theme":"github-dark-dimmed"}
cd fingerprint-angular-quickstart
```
4. Open the `fingerprint-angular-quickstart` folder in your code editor and you're ready to go! To run your project, run:
```bash Terminal theme={"theme":"github-dark-dimmed"}
npm start
```
5. In your browser, go to [http://localhost:4200](http://localhost:4200), and you should see the Angular welcome page. The application will automatically reload whenever you modify any of the source files.
## 3. Set up your account creation form
1. Before hooking up Fingerprint, create a new component at `src/app/create-account-form/create-account-form.component.ts` with the following:
```angular-ts src/app/create-account-form/create-account-form.component.ts theme={"theme":"github-dark-dimmed"}
import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-create-account-form",
imports: [FormsModule],
template: ``,
styles: `
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
margin-top: 200px;
}
.input-group {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
}
label {
font-weight: 600;
margin-bottom: 0.5rem;
color: #333;
}
input[type="text"],
input[type="password"] {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s ease;
}
input:focus {
border-color: #007bff;
outline: none;
}
button[type="submit"] {
width: 200px;
padding: 0.75rem;
font-size: 1rem;
font-weight: 600;
background-color: #e36132;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease;
}
button[type="submit"]:hover:not(:disabled) {
background-color: #e3531f;
}
button[type="submit"]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
`,
})
export class CreateAccountFormComponent {
isLoading = signal(false);
username = "";
password = "";
// We will populate this in a later step.
async handleSubmit() {}
}
```
2. Import and add the component to your `App` in `src/app/app.ts`:
```angular-ts src/app/app.ts theme={"theme":"github-dark-dimmed"}
// ... other imports here
import { CreateAccountFormComponent } from "./create-account-form/create-account-form.component";
@Component({
selector: "app-root",
imports: [CreateAccountFormComponent],
template: `
`,
})
export class App {}
```
## 4. Install and initialize the JavaScript agent
1. To integrate Fingerprint into your Angular app, first add the Fingerprint Angular SDK via npm:
```bash Terminal theme={"theme":"github-dark-dimmed"}
npm install @fingerprint/angular
```
2. Open `src/app/app.config.ts` and add `provideFingerprint` to the `providers` array:
```angular-ts src/app/app.config.ts theme={"theme":"github-dark-dimmed"}
// ... other imports here
import { provideFingerprint } from "@fingerprint/angular";
export const appConfig: ApplicationConfig = {
providers: [
// ...other config options
provideFingerprint({
startOptions: {
apiKey: "PUBLIC_API_KEY",
region: "us",
// Ensure this matches your workspace region
// For more information, see https://docs.fingerprint.com/docs/regions
},
}),
],
};
```
3. Replace `PUBLIC_API_KEY` with your actual public API key from the [Fingerprint dashboard](https://dashboard.fingerprint.com/api-keys).
*Note: For production, consider using environment variables to configure the API key.*
## 5. Trigger visitor identification
Now that the JavaScript agent is initialized, you can identify the visitor only when needed. In this case, that's when the user taps/clicks the **Create Account** button.
When making the visitor identification request, you will receive the `visitor_id` as well as an `event_id`. Instead of using the `visitor_id` returned directly on the frontend (which could be tampered with), you'll send the `event_id` to your backend. This ID is unique to each identification event. Your server can then use the [Fingerprint Events API](/reference/server-api-get-event) to retrieve complete identification data, including the trusted visitor ID and other actionable insights like whether they are using a VPN or are a bot.
1. Import `FingerprintService` in `create-account-form.component.ts` and configure it by passing it into the `CreateAccountFormComponent` class `constructor`. This automatically initializes it via `Dependency Injection`:
```angular-ts src/app/create-account-form/create-account-form.component.ts theme={"theme":"github-dark-dimmed"}
import { FingerprintService } from "@fingerprint/angular";
// ... rest of component here
export class CreateAccountFormComponent {
// ... other properties here
constructor(private fingerprintService: FingerprintService) {}
}
```
2. Now populate the `handleSubmit` method to trigger identification when the user clicks **Create Account**:
```angular-ts src/app/create-account-form/create-account-form.component.ts theme={"theme":"github-dark-dimmed"}
async handleSubmit() {
this.isLoading.set(true);
try {
const data = await this.fingerprintService.getVisitorData();
console.log(`
Visitor ID: ${data.visitor_id}
Event ID: ${data.event_id}`);
// Send the event_id to your server
// await fetch("/api/create-account", {
// method: "POST",
// headers: { "Content-Type": "application/json" },
// body: JSON.stringify({
// username: this.username,
// password: this.password,
// eventId: data.event_id,
// }),
// });
} catch (err) {
console.error('Registration failed', err);
} finally {
this.isLoading.set(false);
}
}
```
In this function:
* `this.isLoading.set(true)` is used to monitor the process stage for the function call.
* `const data = await this.fingerprintService.getVisitorData();` - This triggers Fingerprint's device identification and returns a `data` object containing the visitor's `visitor_id` and `event_id`, which you can then send to your backend along with the username and password.
## 6. Test the app
1. If your dev server isn't already running, start it with:
```bash Terminal theme={"theme":"github-dark-dimmed"}
npm start
```
2. In your browser, go to [http://localhost:4200](http://localhost:4200/) (Angular's default).
3. If you have any ad blockers, turn them off for localhost. View the [documentation](/docs/protecting-the-javascript-agent-from-adblockers) to learn how to protect your Fingerprint implementation from ad blockers in production.
4. Enter a username and password, then click **Create Account**.
5. Open the developer console in your browser, and you should see the visitor ID and event ID in the output:
```text Output theme={"theme":"github-dark-dimmed"}
Visitor ID: kLmvO1y70BHKyTgoNoPq
Event ID: 9171022083823.zox1GS
```
## Next steps
To use the identification data for fraud detection (like blocking repeat fake account creation attempts), you'll need to send the `event_id` to your [backend](/docs/server-quickstarts-overview). From there, your server can call the [Fingerprint Events API](/reference/server-api-get-event) to retrieve the full visitor information data and use it to make decisions and prevent fraud.
Check out these related resources:
* [Angular SDK reference](https://github.com/fingerprintjs/angular)
* [Node.js backend quickstart](/docs/node-server-quickstart)
* [API reference for the Events endpoint](/reference/server-api-get-event)
* [Use case tutorial: Detecting new account fraud](/docs/new-account-fraud-use-case-tutorial)
* [Protecting from client-side tampering and replay attacks](/docs/protecting-from-client-side-tampering)