Skip to content

docs: update to use provideAuth0 and provideAppInitializer #756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frederikprijck merged 2 commits into from
Jan 5, 2026
Merged

docs: update to use provideAuth0 and provideAppInitializer #756

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
74a28ee
docs: update to use provideAuth0 and provideAppInitializer
yogeshchoudhary147 Jan 5, 2026
1d13c7c
docs: remove Angular version reference from provideAuth0 description
yogeshchoudhary147 Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 71 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,35 @@ Take note of the **Client ID** and **Domain** values under the "Basic Informatio

#### Static configuration

Install the SDK into your application by importing `AuthModule.forRoot()` and configuring with your Auth0 domain and client id, as well as the URL to which Auth0 should redirect back after succesful authentication:
The recommended approach is to use the functional `provideAuth0()` in your application configuration:

```ts
import { ApplicationConfig } from '@angular/core';
import { provideAuth0 } from '@auth0/auth0-angular';

export const appConfig: ApplicationConfig = {
providers: [
provideAuth0({
domain: 'YOUR_AUTH0_DOMAIN',
clientId: 'YOUR_AUTH0_CLIENT_ID',
authorizationParams: {
redirect_uri: window.location.origin,
},
}),
],
};
```

<details>
<summary>Using NgModules</summary>

If you're using NgModules, you can configure the SDK using `AuthModule.forRoot()`:

```ts
import { NgModule } from '@angular/core';
import { AuthModule } from '@auth0/auth0-angular';

@NgModule({
// ...
imports: [
AuthModule.forRoot({
domain: 'YOUR_AUTH0_DOMAIN',
Expand All @@ -81,53 +102,80 @@ import { AuthModule } from '@auth0/auth0-angular';
},
}),
],
// ...
})
export class AppModule {}
```

</details>

#### Dynamic configuration

Instead of using `AuthModule.forRoot` to specify auth configuration, you can provide a factory function using `APP_INITIALIZER` to load your config from an external source before the auth module is loaded, and provide your configuration using `AuthClientConfig.set`.
Instead of providing static configuration, you can use `provideAppInitializer` to load your config from an external source before the SDK is instantiated, and configure it using `AuthClientConfig.set`.

The configuration will only be used initially when the SDK is instantiated. Any changes made to the configuration at a later moment in time will have no effect on the default options used when calling the SDK's methods. This is also the reason why the dynamic configuration should be set using an `APP_INITIALIZER`, because doing so ensures the configuration is available prior to instantiating the SDK.
```ts
import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
import { provideHttpClient, HttpBackend, HttpClient } from '@angular/common/http';
import { provideAuth0, AuthClientConfig } from '@auth0/auth0-angular';

> :information_source: Any request made through an instance of `HttpClient` that got instantiated by Angular, will use all of the configured interceptors, including our `AuthHttpInterceptor`. Because the `AuthHttpInterceptor` requires the existence of configuration settings, the request for retrieving those dynamic configuration settings should ensure it's not using any of those interceptors. In Angular, this can be done by manually instantiating `HttpClient` using an injected `HttpBackend` instance.
export function configInitializer(handler: HttpBackend, config: AuthClientConfig) {
return () =>
new HttpClient(handler)
.get('/config')
.toPromise()
.then((loadedConfig: any) => config.set(loadedConfig));
}

export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideAuth0(),
provideAppInitializer(() => {
const handler = inject(HttpBackend);
const config = inject(AuthClientConfig);
return configInitializer(handler, config)();
}),
],
};
```

> **Important:** The configuration will only be used initially when the SDK is instantiated. Any changes made to the configuration at a later moment in time will have no effect on the default options used when calling the SDK's methods. This is why the dynamic configuration should be set using an app initializer, which ensures the configuration is available prior to instantiating the SDK.

> :information_source: Any request made through an instance of `HttpClient` that got instantiated by Angular will use all configured interceptors, including our `AuthHttpInterceptor`. Because the `AuthHttpInterceptor` requires the existence of configuration settings, the request for retrieving those dynamic configuration settings should ensure it's not using any interceptors. In Angular, this can be done by manually instantiating `HttpClient` using an injected `HttpBackend` instance.

<details>
<summary>Using NgModules</summary>

```js
Instead of using `AuthModule.forRoot` to specify auth configuration, you can provide a factory function using `APP_INITIALIZER` to load your config from an external source before the auth module is loaded, and provide your configuration using `AuthClientConfig.set`.

```ts
import { APP_INITIALIZER } from '@angular/core';
import { HttpClientModule, HttpClient, HttpBackend } from '@angular/common/http';
import { AuthModule, AuthClientConfig } from '@auth0/auth0-angular';

// Provide an initializer function that returns a Promise
function configInitializer(
handler: HttpBackend,
config: AuthClientConfig
) {
function configInitializer(handler: HttpBackend, config: AuthClientConfig) {
return () =>
new HttpClient(handler)
.get('/config')
.toPromise()
// Set the config that was loaded asynchronously here
.then((loadedConfig: any) => config.set(loadedConfig));
}

export class AppModule {
// ...
imports: [
HttpClientModule,
AuthModule.forRoot(), // <- don't pass any config here
],
@NgModule({
imports: [HttpClientModule, AuthModule.forRoot()],
providers: [
{
provide: APP_INITIALIZER,
useFactory: configInitializer, // <- pass your initializer function here
useFactory: configInitializer,
deps: [HttpBackend, AuthClientConfig],
multi: true,
},
],
// ...
}
})
export class AppModule {}
```

</details>

### Add login to your application

To log the user into the application, inject the `AuthService` and call its `loginWithRedirect` method.
Expand Down Expand Up @@ -188,4 +236,4 @@ Please do not report security vulnerabilities on the public GitHub issue tracker
</p>
<p align="center">Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout <a href="https://auth0.com/why-auth0">Why Auth0?</a></p>
<p align="center">
This project is licensed under the MIT license. See the <a href="https://github.com/auth0/auth0-angular/tree/main/LICENSE"> LICENSE</a> file for more info.</p>
This project is licensed under the MIT license. See the <a href="https://github.com/auth0/auth0-angular/tree/main/LICENSE"> LICENSE</a> file for more info.</p>