diff --git a/articles/quickstart/spa/angular/01-login.md b/articles/quickstart/spa/angular/01-login.md
index 0085a83726..39783e3971 100644
--- a/articles/quickstart/spa/angular/01-login.md
+++ b/articles/quickstart/spa/angular/01-login.md
@@ -8,7 +8,7 @@ topics:
- angular
- login
github:
- path: Sample-01
+ path: Standalone
contentType: tutorial
useCase: quickstart
---
@@ -23,43 +23,34 @@ Visit the [Angular Authentication By Example](https://developer.auth0.com/resour
<%= include('../../_includes/_auth0-angular-install') %>
-### Register and configure the authentication module
+### Register and providing Auth0
-The SDK exports `AuthModule`, a module that contains all the services required for the SDK to function. To register this with your application:
+The SDK exports `provideAuth0`, which is a provide function that contains all the services required for the SDK to function. To register this with your application:
-* Open the `app.module.ts` file
-* Import the `AuthModule` type from the `@auth0/auth0-angular` package
-* Add `AuthModule` to the application by calling `AuthModule.forRoot` and adding to your application module's `imports` array
+1. Open the `main.ts` file.
+2. Import the `provideAuth0` function from the `@auth0/auth0-angular` package.
+3. Add `provideAuth0` to the application by adding it to the `providers` inside `bootstrapApplication`.
+4. Inject `AuthService` into `AppComponent`.
```javascript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';
-// Import the module from the SDK
-import { AuthModule } from '@auth0/auth0-angular';
-
-@NgModule({
- declarations: [AppComponent],
- imports: [
- BrowserModule,
-
- // Import the module into the application, with configuration
- AuthModule.forRoot({
+bootstrapApplication(AppComponent, {
+ providers: [
+ provideAuth0({
domain: '${account.namespace}',
clientId: '${account.clientId}',
authorizationParams: {
redirect_uri: window.location.origin
}
}),
- ],
-
- bootstrap: [AppComponent],
-})
-export class AppModule {}
+ ]
+});
```
-We use the [`forRoot()` pattern](https://angular.io/guide/singleton-services#the-forroot-pattern) to configure the module, which takes the properties `domain` and `clientId`; the values of these properties correspond to the "Domain" and "Client ID" values present under the "Settings" of the single-page application that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
+The `provideAuth0` function takes the properties `domain` and `clientId`; the values of these properties correspond to the **Domain** and **Client ID** values that you can find under **Settings** in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
<%= include('../_includes/_auth_note_custom_domains') %>
@@ -79,7 +70,8 @@ import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-auth-button',
- template: ''
+ template: '',
+ standalone: true
})
export class AuthButtonComponent {
// Inject the authentication service into your component through the constructor
@@ -121,7 +113,7 @@ import { DOCUMENT } from '@angular/common';
`,
- styles: [],
+ standalone: true
})
export class AuthButtonComponent {
constructor(@Inject(DOCUMENT) public document: Document, public auth: AuthService) {}
@@ -152,7 +144,8 @@ import { AuthService } from '@auth0/auth0-angular';
{{ user.name }}
{{ user.email }}
-
`
+ `,
+ standalone: true
})
export class UserProfileComponent {
constructor(public auth: AuthService) {}
diff --git a/articles/quickstart/spa/angular/02-calling-an-api.md b/articles/quickstart/spa/angular/02-calling-an-api.md
index 569f0809c0..0bff352ad4 100644
--- a/articles/quickstart/spa/angular/02-calling-an-api.md
+++ b/articles/quickstart/spa/angular/02-calling-an-api.md
@@ -8,7 +8,7 @@ topics:
- angular
- api
github:
- path: Sample-01
+ path: Standalone
sample_download_required_data:
- client
- api
@@ -34,9 +34,9 @@ If you followed the [previous section where you added user log in to Angular](/q
To install and configure the HTTP interceptor, perform the following steps:
-* Import the `AuthHttpInterceptor` type from the Auth0 Angular SDK
-* Import `HttpClientModule` and `HTTP_INTERCEPTORS` from `@angular/common/http`
-* Register `AuthHttpInterceptor` in the `providers` section of your application module
+* Import the `authHttpInterceptorFn` type from the Auth0 Angular SDK
+* Import `provideHttpClient` from `@angular/common/http`
+* Register `authHttpInterceptorFn` in `provideHttpClient` using `withInterceptors`.
* Add configuration to specify audience, scope, and which requests should have an `Authorization` header attached automatically
The following is an example of an Angular module (based upon the default implementation when you create a new app using `ng new`) that supports `AuthHttpInterceptor`, configured to call the Auth0 Management API with the ability to read the current user profile:
@@ -45,34 +45,28 @@ To begin, open your `app.module.ts` file and add the necessary imports at the to
```javascript
// Import the injector module and the HTTP client module from Angular
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
// Import the HTTP interceptor from the Auth0 Angular SDK
-import { AuthHttpInterceptor } from '@auth0/auth0-angular';
+import { authHttpInterceptorFn } from '@auth0/auth0-angular';
```
-Next, import `HttpClientModule` into the `imports` array of `AppModule`:
+Next, add `provideHttpClient` to the `providers` of the `bootstrapApplication` function, and add `authHttpInterceptorFn` using `withInterceptors`:
```javascript
-imports: [
- HttpClientModule,
-],
+bootstrapApplication(AppComponent, {
+ providers: [
+ provideHttpClient(withInterceptors([authHttpInterceptorFn])),
+ ]
+});
```
-Now add the Auth0 HTTP interceptor to the `providers` array of `AppModule`, like so:
-
-```javascript
-providers: [
- { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
-],
-```
-
-Finally, modify the configuration given to `AuthModule.forRoot()` to specify the `audience` and `scope` values required by the API you want to call, as well as the API routes that should be intercepted by `AuthHttpInterceptor`.
+Finally, modify the configuration given to `provideAuth0()` to specify the `audience` and `scope` values required by the API you want to call, as well as the API routes that should be intercepted by `authHttpInterceptorFn`.
In this case, the audience and scope for the Auth0 Management API are given, which allows your app to retrieve information about the current user.
```javascript
-AuthModule.forRoot({
+provideAuth0({
// The domain and clientId were configured in the previous chapter
domain: '${account.namespace}',
clientId: '${account.clientId}',
@@ -135,7 +129,7 @@ import { AuthService } from '@auth0/auth0-angular';
template: `
`
+ `,
+ standalone: true
})
export class UserProfileComponent {
constructor(public auth: AuthService) {}
diff --git a/articles/quickstart/spa/angular/interactive.md b/articles/quickstart/spa/angular/interactive.md
index 6c79a6048d..7514393223 100644
--- a/articles/quickstart/spa/angular/interactive.md
+++ b/articles/quickstart/spa/angular/interactive.md
@@ -43,16 +43,16 @@ npm install @auth0/auth0-angular
The SDK exposes several types that help integrate Auth0 in an Angular application idiomatically, including a module and an authentication service.
-## Register and configure AuthModule {{{ data-action="code" data-code="app.module.ts#10:13" }}}
+## Register and providing Auth0 {{{ data-action="code" data-code="main.ts#7:13" }}}
-The SDK exports `AuthModule`, which is a module that contains all the services required for the SDK to function. To register this with your application:
+The SDK exports `provideAuth0`, which is a provide function that contains all the services required for the SDK to function. To register this with your application:
-1. Open the `app.module.ts` file.
-2. Import the `AuthModule` type from the `@auth0/auth0-angular` package.
-3. Add `AuthModule` to the application by calling `AuthModule.forRoot` and adding to your application module's `imports` array.
+1. Open the `main.ts` file.
+2. Import the `provideAuth0` function from the `@auth0/auth0-angular` package.
+3. Add `provideAuth0` to the application by adding it to the `providers` inside `bootstrapApplication`.
4. Inject `AuthService` into `AppComponent`.
-To configure the module, we use the [`forRoot()` pattern](https://angular.io/guide/singleton-services#the-forroot-pattern), which takes the properties `domain` and `clientId`; the values of these properties correspond to the **Domain** and **Client ID** values that you can find under **Settings** in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
+The `provideAuth0` function takes the properties `domain` and `clientId`; the values of these properties correspond to the **Domain** and **Client ID** values that you can find under **Settings** in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
<%= include('../_includes/_auth_note_custom_domains') %>