Skip to content
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.

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

Improve the provide function in order to allow passing a factory function #663

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
58 changes: 39 additions & 19 deletions EXAMPLES.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
# Examples using auth0-angular

- [Add login to your application](#add-login-to-your-application)
- [Add logout to your application](#add-logout-to-your-application)
- [Checking if a user is authenticated](#checking-if-a-user-is-authenticated)
- [Display the user profile](#display-the-user-profile)
- [Protect a route](#protect-a-route)
- [Call an API](#call-an-api)
- [Handling errors](#handling-errors)
- [Organizations](#organizations)
- [Standalone Components and a more functional approach](#standalone-components-and-a-more-functional-approach)
- [Examples using auth0-angular](#examples-using-auth0-angular)
- [Add login to your application](#add-login-to-your-application)
- [Add logout to your application](#add-logout-to-your-application)
- [Checking if a user is authenticated](#checking-if-a-user-is-authenticated)
- [Display the user profile](#display-the-user-profile)
- [Protect a route](#protect-a-route)
- [Call an API](#call-an-api)
- [Specify the audience](#specify-the-audience)
- [Register AuthHttpInterceptor](#register-authhttpinterceptor)
- [Configure AuthHttpInterceptor to attach access tokens](#configure-authhttpinterceptor-to-attach-access-tokens)
- [Handling errors](#handling-errors)
- [Organizations](#organizations)
- [Log in to an organization](#log-in-to-an-organization)
- [Accept user invitations](#accept-user-invitations)
- [Standalone components and a more functional approach](#standalone-components-and-a-more-functional-approach)

## Add login to your application

Expand Down Expand Up @@ -157,7 +163,7 @@ import { AuthModule } from '@auth0/auth0-angular';
clientId: 'YOUR_AUTH0_CLIENT_ID',
authorizationParams: {
audience: 'YOUR_AUTH0_API_IDENTIFIER',
}
},
}),
],
// ...
Expand Down Expand Up @@ -278,7 +284,7 @@ AuthModule.forRoot({
authorizationParams: {
audience: 'http://my-api/',
scope: 'write:orders',
}
},
},
},
],
Expand Down Expand Up @@ -381,6 +387,7 @@ export class AppComponent {
```

## Standalone components and a more functional approach

As of Angular 15, the Angular team is putting standalone components, as well as a more functional approach, in favor of the traditional use of NgModules and class-based approach.

There are a couple of difference with how you would traditionally implement our SDK:
Expand All @@ -398,18 +405,31 @@ const routes: Routes = [
path: 'profile',
component: ProfileComponent,
canActivate: [authGuardFn],
}
},
];

bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes),
provideAuth0(/* Auth Config Goes Here */),
provideHttpClient(
withInterceptors([authHttpInterceptorFn])
)
]
providers: [provideRouter(routes), provideAuth0(/* Auth Config Goes Here */), provideHttpClient(withInterceptors([authHttpInterceptorFn]))],
});
```

Note that `provideAuth0` should **never** be provided to components, but only at the root level of your application.

`AuthConfig` can be omitted or it can be provided either as a basic config object, or a function that returns a config object:

```ts
provideAuth0({
clientId: 'clientId',
domain: 'domain',
}),
// or
provideAuth0(() => {
const someProvider = inject(SomeProvider);
// you can inject as many providers as you want
return {
clientId: 'clientId',
domain: 'domain',
// use someProvider (or other porviders) to build your config object
};
});
```
18 changes: 13 additions & 5 deletions projects/auth0-angular/src/lib/provide.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { AuthGuard } from './auth.guard';
import { AuthHttpInterceptor } from './auth.interceptor';
import { AuthService } from './auth.service';

type AuthConfigFactory = () => AuthConfig;

/**
* Initialize the authentication system. Configuration can either be specified here,
* or by calling AuthClientConfig.set (perhaps from an APP_INITIALIZER factory function).
Expand All @@ -20,19 +22,25 @@ import { AuthService } from './auth.service';
* ],
* });
*/
export function provideAuth0(config?: AuthConfig): Provider[] {
export function provideAuth0(
config?: AuthConfig | AuthConfigFactory
): Provider[] {
return [
AuthService,
AuthHttpInterceptor,
AuthGuard,
{
provide: AuthConfigService,
useValue: config,
},
provideAuthConfigService(config),
{
provide: Auth0ClientService,
useFactory: Auth0ClientFactory.createClient,
deps: [AuthClientConfig],
},
];
}

function provideAuthConfigService(config?: AuthConfig | AuthConfigFactory) {
const provide = AuthConfigService;
return typeof config === 'function'
? { provide, useFactory: config }
: { provide, useValue: config };
}
Loading