Skip to main content

Angular - Secure API Requests

If you want to secure sensitive requests to your resource server, this section will help you to do so.

1. How it works

The OAuth protocol requires our solution to decorate your requests with data that will be handled by your resource server. Your resource server will also use Cryptr solution to certify request authorization.

2. Configuration

To ease your integration, we chose to minimize your configuration. This solution uses HTTP_INTERCEPTORS (through AuthInterceptoryou added in your App module).

a. httpInterceptor

In your configuration settings, you can populate the httpInterceptor.apiRequestToSecure key with URis you want to secure between your Angular App and your resource server.

You can choose to secure all requests targetting your resource server OR you can specify chosen values if you do not need authentication for some requests.

⚠️ We encourage you to secure your requests as much as possible !

Regex compatibility

The httpInterceptor array values can handle requex values if you need to.

Here is an example:

export const environment = {
cryptrConfig: {
tenant_domain: "your-tenant-domain-slug";
client_id: "your-cryptr-angular-client-id";
audience: "your-audience-url";
default_redirect_uri: "redirect-uri-to-authenticate-from-cryptr";
httpInterceptor: {
apiRequestsToSecure: [

3. Call your Resource server from a component

As our integration only needs to update your cryptrConfig, you can keep your Resource Server requests code !

Here an example with HttpClient

fetchSecuredData(): void {
.subscribe((payments: [Payments]) => {
this.payments = payments;
}, (error: HttpErrorResponse) => {
Server side implementation

If you do not have already implemented Cryptr in your Resource Server your requests won't be secured end-to-end !

This is Resource Server implementation will help you to.