@auth0/auth0-angular 1.11.0 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,36 +1,30 @@
|
|
|
1
|
-
|
|
3
|
-
[](https://circleci.com/gh/auth0/auth0-angular)
|
|
4
|
-
[](https://codecov.io/gh/auth0/auth0-angular)
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
# Auth0 Angular SDK
|
|
1
|
+
|
|
8
2
|
|
|
9
3
|
A library for integrating [Auth0](https://auth0.com) into an Angular application.
|
|
10
4
|
|
|
11
|
-
|
|
5
|
+
|
|
6
|
+
[](https://codecov.io/gh/auth0/auth0-angular)
|
|
7
|
+
|
|
8
|
+
[](https://opensource.org/licenses/MIT)
|
|
9
|
+
[](https://circleci.com/gh/auth0/auth0-angular)
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
- [Supported Angular versions](#supported-angular-versions)
|
|
15
|
-
- [Installation](#installation)
|
|
16
|
-
- [Getting Started](#getting-started)
|
|
17
|
-
- [Angular Universal](#angular-universal)
|
|
18
|
-
- [Development](#development)
|
|
19
|
-
- [Contributing](#contributing)
|
|
20
|
-
- [Support + Feedback](#support--feedback)
|
|
21
|
-
- [Vulnerability Reporting](#vulnerability-reporting)
|
|
22
|
-
- [What is Auth0](#what-is-auth0)
|
|
23
|
-
- [License](#license)
|
|
11
|
+
📚 [Documentation](#documentation) - 🚀 [Getting Started](#getting-started) - 💻 [API Reference](#api-reference) - 💬 [Feedback](#feedback)
|
|
24
12
|
|
|
25
13
|
## Documentation
|
|
26
14
|
|
|
27
|
-
- [
|
|
28
|
-
- [
|
|
15
|
+
- [Quickstart](https://auth0.com/docs/quickstart/spa/angular) - our interactive guide for quickly adding login, logout and user information to an Angular app using Auth0.
|
|
16
|
+
- [Sample App](https://github.com/auth0-samples/auth0-angular-samples/tree/master/Sample-01) - a full-fledged Angular application integrated with Auth0.
|
|
17
|
+
- [FAQs](https://github.com/auth0/auth0-angular/tree/master/FAQ.md) - frequently asked questions about the auth0-angular SDK.
|
|
18
|
+
- [Examples](https://github.com/auth0/auth0-angular/tree/master/EXAMPLES.md) - code samples for common Angular authentication scenario's.
|
|
19
|
+
- [Docs site](https://www.auth0.com/docs) - explore our docs site and learn more about Auth0.
|
|
20
|
+
|
|
21
|
+
## Getting started
|
|
22
|
+
|
|
23
|
+
### Requirements
|
|
29
24
|
|
|
30
|
-
## Supported Angular versions
|
|
31
25
|
This project only supports the [actively supported versions of Angular as stated in the Angular documentation](https://angular.io/guide/releases#actively-supported-versions). Whilst other versions might be compatible they are not actively supported.
|
|
32
26
|
|
|
33
|
-
|
|
27
|
+
### Installation
|
|
34
28
|
|
|
35
29
|
Using npm:
|
|
36
30
|
|
|
@@ -44,363 +38,52 @@ We also have `ng-add` support, so the library can also be installed using the An
|
|
|
44
38
|
ng add @auth0/auth0-angular
|
|
45
39
|
```
|
|
46
40
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
- [Register the authentication module](#register-the-authentication-module)
|
|
50
|
-
- [Add login to your application](#add-login-to-your-application)
|
|
51
|
-
- [Add logout to your application](#add-logout-to-your-application)
|
|
52
|
-
- [Display the user profile](#display-the-user-profile)
|
|
53
|
-
- [Protect a route](#protect-a-route)
|
|
54
|
-
- [Call an API](#call-an-api)
|
|
55
|
-
- [Dynamic configuration](#dynamic-configuration)
|
|
56
|
-
- [Using multiple OAuth providers](#using-multiple-oauth-providers)
|
|
57
|
-
|
|
58
|
-
### Register the authentication module
|
|
59
|
-
|
|
60
|
-
Install the SDK into your application by importing `AuthModule` and configuring with your Auth0 domain and client ID:
|
|
61
|
-
|
|
62
|
-
```js
|
|
63
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
64
|
-
import { NgModule } from '@angular/core';
|
|
65
|
-
import { AppComponent } from './app.component';
|
|
66
|
-
|
|
67
|
-
// Import the module from the SDK
|
|
68
|
-
import { AuthModule } from '@auth0/auth0-angular';
|
|
69
|
-
|
|
70
|
-
@NgModule({
|
|
71
|
-
declarations: [AppComponent],
|
|
72
|
-
imports: [
|
|
73
|
-
BrowserModule,
|
|
74
|
-
|
|
75
|
-
// Import the module into the application, with configuration
|
|
76
|
-
AuthModule.forRoot({
|
|
77
|
-
domain: 'YOUR_AUTH0_DOMAIN',
|
|
78
|
-
clientId: 'YOUR_AUTH0_CLIENT_ID',
|
|
79
|
-
}),
|
|
80
|
-
],
|
|
81
|
-
|
|
82
|
-
bootstrap: [AppComponent],
|
|
83
|
-
})
|
|
84
|
-
export class AppModule {}
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### Add login to your application
|
|
88
|
-
|
|
89
|
-
Next, inject the `AuthService` service into a component where you intend to provide the functionality to log in, by adding the `AuthService` type to your constructor. Then, provide a `loginWithRedirect()` method and call `this.auth.loginWithRedirect()` to log the user into the application.
|
|
90
|
-
|
|
91
|
-
```js
|
|
92
|
-
import { Component } from '@angular/core';
|
|
93
|
-
|
|
94
|
-
// Import the AuthService type from the SDK
|
|
95
|
-
import { AuthService } from '@auth0/auth0-angular';
|
|
96
|
-
|
|
97
|
-
@Component({
|
|
98
|
-
selector: 'app-root',
|
|
99
|
-
templateUrl: './app.component.html',
|
|
100
|
-
styleUrls: ['./app.component.css'],
|
|
101
|
-
})
|
|
102
|
-
export class AppComponent {
|
|
103
|
-
title = 'My App';
|
|
104
|
-
|
|
105
|
-
// Inject the authentication service into your component through the constructor
|
|
106
|
-
constructor(public auth: AuthService) {}
|
|
107
|
-
|
|
108
|
-
loginWithRedirect(): void {
|
|
109
|
-
// Call this to redirect the user to the login page
|
|
110
|
-
this.auth.loginWithRedirect();
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
By default the application will ask Auth0 will redirect back to the root URL of your application after authentication, but this can be configured by setting the [`redirectUri` option](https://auth0.github.io/auth0-angular/interfaces/authconfig.html#redirecturi).
|
|
41
|
+
### Configure Auth0
|
|
116
42
|
|
|
117
|
-
|
|
43
|
+
Create a **Single Page Application** in the [Auth0 Dashboard](https://manage.auth0.com/#/applications).
|
|
118
44
|
|
|
119
|
-
|
|
120
|
-
<button
|
|
121
|
-
*ngIf="(auth.isAuthenticated$ | async) === false"
|
|
122
|
-
(click)="loginWithRedirect()"
|
|
45
|
+
> **If you're using an existing application**, verify that you have configured the following settings in your Single Page Application:
|
|
123
46
|
>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
Add a `logout` method to your component and call the SDK's `logout` method:
|
|
131
|
-
|
|
132
|
-
```js
|
|
133
|
-
logout(): void {
|
|
134
|
-
// Call this to log the user out of the application
|
|
135
|
-
this.auth.logout({ returnTo: window.location.origin });
|
|
136
|
-
}
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
Then on your component's template, add a button that will log the user out of the application. Use the `isAuthenticated$` observable to check that the user has already been authenticated:
|
|
140
|
-
|
|
141
|
-
```html
|
|
142
|
-
<button *ngIf="auth.isAuthenticated$ | async" (click)="logout()">
|
|
143
|
-
Log out
|
|
144
|
-
</button>
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
### Display the user profile
|
|
148
|
-
|
|
149
|
-
Access the `user$` observable on the `AuthService` instance to retrieve the user profile. This observable already heeds the `isAuthenticated$` observable, so you do not need to check if the user is authenticated before using it:
|
|
150
|
-
|
|
151
|
-
```html
|
|
152
|
-
<ul *ngIf="auth.user$ | async as user">
|
|
153
|
-
<li>{{ user.name }}</li>
|
|
154
|
-
<li>{{ user.email }}</li>
|
|
155
|
-
</ul>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### Access ID token claims
|
|
159
|
-
|
|
160
|
-
Access the `idTokenClaims$` observable on the `AuthService` instance to retrieve the ID token claims. Like the `user$` observable, this observable already heeds the `isAuthenticated$` observable, so you do not need to check if the user is authenticated before using it:
|
|
161
|
-
|
|
162
|
-
```js
|
|
163
|
-
authService.idTokenClaims$.subscribe((claims) => console.log(claims));
|
|
164
|
-
```
|
|
47
|
+
> - Click on the "Settings" tab of your application's page.
|
|
48
|
+
> - Ensure that "Token Endpoint Authentication Method" under "Application Properties" is set to "None"
|
|
49
|
+
> - Scroll down and click on the "Show Advanced Settings" link.
|
|
50
|
+
> - Under "Advanced Settings", click on the "OAuth" tab.
|
|
51
|
+
> - Ensure that "JsonWebToken Signature Algorithm" is set to `RS256` and that "OIDC Conformant" is enabled.
|
|
165
52
|
|
|
166
|
-
|
|
53
|
+
Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:
|
|
167
54
|
|
|
168
|
-
|
|
55
|
+
- **Allowed Callback URLs**: `http://localhost:4200`
|
|
56
|
+
- **Allowed Logout URLs**: `http://localhost:4200`
|
|
57
|
+
- **Allowed Web Origins**: `http://localhost:4200`
|
|
169
58
|
|
|
170
|
-
|
|
171
|
-
authService.error$.subscribe((error) => console.log(error));
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
### Protect a route
|
|
175
|
-
|
|
176
|
-
To ensure that a route can only be visited by authenticated users, add the built-in `AuthGuard` type to the `canActivate` property on the route you wish to protect.
|
|
177
|
-
|
|
178
|
-
If an unauthenticated user tries to access this route, they will first be redirected to Auth0 to log in before returning to the URL they tried to get to before login:
|
|
179
|
-
|
|
180
|
-
```js
|
|
181
|
-
import { NgModule } from '@angular/core';
|
|
182
|
-
import { Routes, RouterModule } from '@angular/router';
|
|
183
|
-
import { HomeComponent } from './unprotected/unprotected.component';
|
|
184
|
-
import { ProtectedComponent } from './protected/protected.component';
|
|
185
|
-
|
|
186
|
-
// Import the authentication guard
|
|
187
|
-
import { AuthGuard } from '@auth0/auth0-angular';
|
|
188
|
-
|
|
189
|
-
const routes: Routes = [
|
|
190
|
-
{
|
|
191
|
-
path: 'protected',
|
|
192
|
-
component: ProtectedComponent,
|
|
193
|
-
|
|
194
|
-
// Protect a route by registering the auth guard in the `canActivate` hook
|
|
195
|
-
canActivate: [AuthGuard],
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
path: '',
|
|
199
|
-
component: HomeComponent,
|
|
200
|
-
pathMatch: 'full',
|
|
201
|
-
},
|
|
202
|
-
];
|
|
59
|
+
> These URLs should reflect the origins that your application is running on. **Allowed Callback URLs** may also include a path, depending on where you're handling the callback.
|
|
203
60
|
|
|
204
|
-
|
|
205
|
-
imports: [RouterModule.forRoot(routes)],
|
|
206
|
-
exports: [RouterModule],
|
|
207
|
-
})
|
|
208
|
-
export class AppRoutingModule {}
|
|
209
|
-
```
|
|
61
|
+
Take note of the **Client ID** and **Domain** values under the "Basic Information" section. You'll need these values in the next step.
|
|
210
62
|
|
|
211
|
-
###
|
|
63
|
+
### Configure the SDK
|
|
212
64
|
|
|
213
|
-
|
|
65
|
+
#### Static configuration
|
|
214
66
|
|
|
215
|
-
|
|
216
|
-
In order for Auth0 to be able to issue tokens for a specific API, we need to configure the Audience to inform Auth0 about the API in question.
|
|
217
|
-
Set the `audience`, when calling `AuthModule.forRoot()`, to the **API Identifier** of the API from within your Auth0 dashboard.
|
|
67
|
+
Install the SDK into your application by importing `AuthModule.forRoot()` and configuring with your Auth0 domain and client id:
|
|
218
68
|
|
|
219
|
-
```
|
|
220
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
69
|
+
```ts
|
|
221
70
|
import { NgModule } from '@angular/core';
|
|
222
|
-
import { AppComponent } from './app.component';
|
|
223
|
-
|
|
224
|
-
// Import the module from the SDK
|
|
225
71
|
import { AuthModule } from '@auth0/auth0-angular';
|
|
226
72
|
|
|
227
73
|
@NgModule({
|
|
228
|
-
|
|
74
|
+
// ...
|
|
229
75
|
imports: [
|
|
230
|
-
BrowserModule,
|
|
231
|
-
|
|
232
|
-
// Import the module into the application, with configuration
|
|
233
76
|
AuthModule.forRoot({
|
|
234
77
|
domain: 'YOUR_AUTH0_DOMAIN',
|
|
235
78
|
clientId: 'YOUR_AUTH0_CLIENT_ID',
|
|
236
|
-
audience: 'YOUR_AUTH0_API_IDENTIFIER',
|
|
237
79
|
}),
|
|
238
80
|
],
|
|
239
|
-
|
|
240
|
-
bootstrap: [AppComponent],
|
|
81
|
+
// ...
|
|
241
82
|
})
|
|
242
83
|
export class AppModule {}
|
|
243
84
|
```
|
|
244
85
|
|
|
245
|
-
####
|
|
246
|
-
|
|
247
|
-
First, register the interceptor with your application module, along with the `HttpClientModule`.
|
|
248
|
-
|
|
249
|
-
**Note:** We do not do this automatically for you as we want you to be explicit about including this interceptor. Also, you may want to chain this interceptor with others, making it hard for us to place it accurately.
|
|
250
|
-
|
|
251
|
-
```js
|
|
252
|
-
// Import the interceptor module and the Angular types you'll need
|
|
253
|
-
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
|
254
|
-
import { AuthHttpInterceptor } from '@auth0/auth0-angular';
|
|
255
|
-
|
|
256
|
-
// Register the interceptor with your app module in the `providers` array
|
|
257
|
-
@NgModule({
|
|
258
|
-
declarations: [],
|
|
259
|
-
imports: [
|
|
260
|
-
BrowserModule,
|
|
261
|
-
HttpClientModule, // Register this so that you can make API calls using HttpClient
|
|
262
|
-
AppRoutingModule,
|
|
263
|
-
AuthModule.forRoot(...),
|
|
264
|
-
],
|
|
265
|
-
providers: [
|
|
266
|
-
{ provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
|
|
267
|
-
],
|
|
268
|
-
bootstrap: [AppComponent],
|
|
269
|
-
})
|
|
270
|
-
```
|
|
271
|
-
|
|
272
|
-
#### Configure AuthHttpInterceptor to attach access tokens
|
|
273
|
-
|
|
274
|
-
Next, tell the SDK which requests to attach access tokens to in the SDK configuration. These are matched on the URL by using a string, a regex, or more complex object that also allows you to specify the configuration for fetching tokens by setting the `tokenOptions` property.
|
|
275
|
-
|
|
276
|
-
If an HTTP call is made using `HttpClient` and there is no match in this configuration for that URL, then the interceptor will simply be bypassed and the call will be executed without a token attached in the `Authorization` header.
|
|
277
|
-
|
|
278
|
-
**Note:** We do this to help prevent tokens being unintentionally attached to requests to the wrong recipient, which is a serious security issue. Those recipients could then use that token to call the API as if it were your application.
|
|
279
|
-
|
|
280
|
-
In the event that requests should be made available for both anonymous and authenticated users, the `allowAnonymous` property can be set to `true`. When omitted, or set to `false`, requests that match the configuration, will not be executed when there is no access token available.
|
|
281
|
-
|
|
282
|
-
Here are some examples:
|
|
283
|
-
|
|
284
|
-
```js
|
|
285
|
-
import { HttpMethod } from '@auth0/auth0-angular';
|
|
286
|
-
|
|
287
|
-
// Modify your existing SDK configuration to include the httpInterceptor config
|
|
288
|
-
AuthModule.forRoot({
|
|
289
|
-
...
|
|
290
|
-
// The AuthHttpInterceptor configuration
|
|
291
|
-
httpInterceptor: {
|
|
292
|
-
allowedList: [
|
|
293
|
-
// Attach access tokens to any calls to '/api' (exact match)
|
|
294
|
-
'/api',
|
|
295
|
-
|
|
296
|
-
// Attach access tokens to any calls that start with '/api/'
|
|
297
|
-
'/api/*',
|
|
298
|
-
|
|
299
|
-
// Match anything starting with /api/products, but also allow for anonymous users.
|
|
300
|
-
{
|
|
301
|
-
uri: '/api/products/*',
|
|
302
|
-
allowAnonymous: true,
|
|
303
|
-
},
|
|
304
|
-
|
|
305
|
-
// Match anything starting with /api/accounts, but also specify the audience and scope the attached
|
|
306
|
-
// access token must have
|
|
307
|
-
{
|
|
308
|
-
uri: '/api/accounts/*',
|
|
309
|
-
tokenOptions: {
|
|
310
|
-
audience: 'http://my-api/',
|
|
311
|
-
scope: 'read:accounts',
|
|
312
|
-
},
|
|
313
|
-
},
|
|
314
|
-
|
|
315
|
-
// Matching on HTTP method
|
|
316
|
-
{
|
|
317
|
-
uri: '/api/orders',
|
|
318
|
-
httpMethod: HttpMethod.Post,
|
|
319
|
-
tokenOptions: {
|
|
320
|
-
audience: 'http://my-api/',
|
|
321
|
-
scope: 'write:orders',
|
|
322
|
-
},
|
|
323
|
-
},
|
|
324
|
-
|
|
325
|
-
// Using an absolute URI
|
|
326
|
-
{
|
|
327
|
-
uri: 'https://your-domain.auth0.com/api/v2/users',
|
|
328
|
-
tokenOptions: {
|
|
329
|
-
audience: 'https://your-domain.com/api/v2/',
|
|
330
|
-
scope: 'read:users',
|
|
331
|
-
},
|
|
332
|
-
},
|
|
333
|
-
],
|
|
334
|
-
},
|
|
335
|
-
});
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
> Under the hood, `tokenOptions` is passed as-is to [the `getTokenSilently` method](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#gettokensilently) on the underlying SDK, so all the same options apply here.
|
|
339
|
-
|
|
340
|
-
**Uri Matching**
|
|
341
|
-
|
|
342
|
-
If you need more fine-grained control over the URI matching, you can provide a callback function to the `uriMatcher` property that takes a single `uri` argument (being [`HttpRequest.url`](https://angular.io/api/common/http/HttpRequest#url)) and returns a boolean. If this function returns true, then an access token is attached to the request in the ["Authorization" header](https://tools.ietf.org/html/draft-ietf-oauth-v2-bearer-20#section-2.1). If it returns false, the request proceeds without the access token attached.
|
|
343
|
-
|
|
344
|
-
```
|
|
345
|
-
AuthModule.forRoot({
|
|
346
|
-
...
|
|
347
|
-
httpInterceptor: {
|
|
348
|
-
allowedList: [
|
|
349
|
-
{
|
|
350
|
-
uriMatcher: (uri) => uri.indexOf('/api/orders') > -1,
|
|
351
|
-
httpMethod: HttpMethod.Post,
|
|
352
|
-
tokenOptions: {
|
|
353
|
-
audience: 'http://my-api/',
|
|
354
|
-
scope: 'write:orders',
|
|
355
|
-
},
|
|
356
|
-
},
|
|
357
|
-
],
|
|
358
|
-
},
|
|
359
|
-
});
|
|
360
|
-
```
|
|
361
|
-
|
|
362
|
-
You might want to do this in scenarios where you need the token on multiple endpoints, but want to exclude it from only a few other endpoints. Instead of explicitly listing all endpoints that do need a token, a uriMatcher can be used to include all but the few endpoints that do not need a token attached to its requests.
|
|
363
|
-
|
|
364
|
-
#### Use HttpClient to make an API call
|
|
365
|
-
|
|
366
|
-
Finally, make your API call using the `HttpClient`. Access tokens are then attached automatically in the `Authorization` header:
|
|
367
|
-
|
|
368
|
-
```js
|
|
369
|
-
export class MyComponent {
|
|
370
|
-
constructor(private http: HttpClient) {}
|
|
371
|
-
|
|
372
|
-
callApi(): void {
|
|
373
|
-
this.http.get('/api').subscribe(result => console.log(result));
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
```
|
|
377
|
-
|
|
378
|
-
#### Handling errors
|
|
379
|
-
|
|
380
|
-
Whenever the SDK fails to retrieve an Access Token, either as part of the above interceptor or when manually calling `AuthService.getAccessTokenSilently` and `AuthService.getAccessTokenWithPopup`, it will emit the corresponding error in the `AuthService.error$` observable.
|
|
381
|
-
|
|
382
|
-
If you want to interact to these errors, subscribe to the `error$` observable and act accordingly.
|
|
383
|
-
|
|
384
|
-
```
|
|
385
|
-
ngOnInit() {
|
|
386
|
-
this.authService.error$.subscribe(error => {
|
|
387
|
-
// Handle Error here
|
|
388
|
-
});
|
|
389
|
-
}
|
|
390
|
-
```
|
|
391
|
-
|
|
392
|
-
A common reason you might want to handle the above errors, emitted by the `error$` observable, is to re-login the user when the SDK throws a `login_required` error.
|
|
393
|
-
|
|
394
|
-
```
|
|
395
|
-
ngOnInit() {
|
|
396
|
-
this.authService.error$.pipe(
|
|
397
|
-
filter((e) => e instanceof GenericError && e.error === 'login_required'),
|
|
398
|
-
mergeMap(() => this.authService.loginWithRedirect())
|
|
399
|
-
).subscribe();
|
|
400
|
-
}
|
|
401
|
-
```
|
|
402
|
-
|
|
403
|
-
### Dynamic Configuration
|
|
86
|
+
#### Dynamic configuration
|
|
404
87
|
|
|
405
88
|
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`.
|
|
406
89
|
|
|
@@ -409,8 +92,6 @@ The configuration will only be used initially when the SDK is instantiated. Any
|
|
|
409
92
|
> :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.
|
|
410
93
|
|
|
411
94
|
```js
|
|
412
|
-
// app.module.ts
|
|
413
|
-
// ---------------------------
|
|
414
95
|
import { AuthModule, AuthClientConfig } from '@auth0/auth0-angular';
|
|
415
96
|
|
|
416
97
|
// Provide an initializer function that returns a Promise
|
|
@@ -422,88 +103,33 @@ function configInitializer(
|
|
|
422
103
|
new HttpClient(handler)
|
|
423
104
|
.get('/config')
|
|
424
105
|
.toPromise()
|
|
425
|
-
|
|
106
|
+
// Set the config that was loaded asynchronously here
|
|
107
|
+
.then((loadedConfig: any) => config.set(loadedConfig));
|
|
426
108
|
}
|
|
427
109
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
### Using multiple OAuth providers
|
|
446
|
-
|
|
447
|
-
If your application uses multiple OAuth providers, you may need to use multiple callback paths as well, one for each OAuth provider.
|
|
448
|
-
To ensure the SDK does not process the callback for any provider other than Auth0, configure the AuthModule by setting the `skipRedirectCallback` property as follows:
|
|
449
|
-
|
|
450
|
-
```js
|
|
451
|
-
AuthModule.forRoot({
|
|
452
|
-
skipRedirectCallback: window.location.pathname === '/other-callback',
|
|
453
|
-
});
|
|
454
|
-
```
|
|
455
|
-
|
|
456
|
-
**Note**: In the above example, `/other-callback` is an existing route that will be called by any other OAuth provider with a `code` (or `error` in case something went wrong) and `state`.
|
|
457
|
-
|
|
458
|
-
### Organizations
|
|
459
|
-
|
|
460
|
-
[Organizations](https://auth0.com/docs/organizations) is a set of features that provide better support for developers who build and maintain SaaS and Business-to-Business (B2B) applications.
|
|
461
|
-
|
|
462
|
-
Using Organizations, you can:
|
|
463
|
-
|
|
464
|
-
- Represent teams, business customers, partner companies, or any logical grouping of users that should have different ways of accessing your applications, as organizations.
|
|
465
|
-
|
|
466
|
-
- Manage their membership in a variety of ways, including user invitation.
|
|
467
|
-
|
|
468
|
-
- Configure branded, federated login flows for each organization.
|
|
469
|
-
|
|
470
|
-
- Implement role-based access control, such that users can have different roles when authenticating in the context of different organizations.
|
|
471
|
-
|
|
472
|
-
- Build administration capabilities into your products, using Organizations APIs, so that those businesses can manage their own organizations.
|
|
473
|
-
|
|
474
|
-
Note that Organizations is currently only available to customers on our Enterprise and Startup subscription plans.
|
|
475
|
-
|
|
476
|
-
#### Log in to an organization
|
|
477
|
-
|
|
478
|
-
Log in to an organization by specifying the `organization` parameter importing the `AuthModule`:
|
|
479
|
-
|
|
480
|
-
```
|
|
481
|
-
AuthModule.forRoot({
|
|
482
|
-
domain: 'YOUR_AUTH0_DOMAIN',
|
|
483
|
-
clientId: 'YOUR_AUTH0_CLIENT_ID',
|
|
484
|
-
organization: 'YOUR_ORGANIZATION_ID'
|
|
485
|
-
}),
|
|
486
|
-
```
|
|
487
|
-
|
|
488
|
-
You can also specify the organization when logging in:
|
|
489
|
-
|
|
490
|
-
```
|
|
491
|
-
// Using a redirect
|
|
492
|
-
this.auth.loginWithRedirect({
|
|
493
|
-
organization: 'YOUR_ORGANIZATION_ID'
|
|
494
|
-
});
|
|
495
|
-
|
|
496
|
-
// Using a popup window
|
|
497
|
-
this.auth.loginWithPopup({
|
|
498
|
-
organization: 'YOUR_ORGANIZATION_ID'
|
|
499
|
-
});
|
|
110
|
+
export class AppModule {
|
|
111
|
+
// ...
|
|
112
|
+
imports: [
|
|
113
|
+
HttpClientModule,
|
|
114
|
+
AuthModule.forRoot(), // <- don't pass any config here
|
|
115
|
+
],
|
|
116
|
+
providers: [
|
|
117
|
+
{
|
|
118
|
+
provide: APP_INITIALIZER,
|
|
119
|
+
useFactory: configInitializer, // <- pass your initializer function here
|
|
120
|
+
deps: [HttpBackend, AuthClientConfig],
|
|
121
|
+
multi: true,
|
|
122
|
+
},
|
|
123
|
+
],
|
|
124
|
+
// ...
|
|
125
|
+
}
|
|
500
126
|
```
|
|
501
127
|
|
|
502
|
-
|
|
128
|
+
### Add login to your application
|
|
503
129
|
|
|
504
|
-
|
|
130
|
+
To log the user into the application, inject the `AuthService` and call its `loginWithRedirect` method.
|
|
505
131
|
|
|
506
|
-
```
|
|
132
|
+
```ts
|
|
507
133
|
import { Component } from '@angular/core';
|
|
508
134
|
import { AuthService } from '@auth0/auth0-angular';
|
|
509
135
|
|
|
@@ -513,88 +139,50 @@ import { AuthService } from '@auth0/auth0-angular';
|
|
|
513
139
|
styleUrls: ['./app.component.css'],
|
|
514
140
|
})
|
|
515
141
|
export class AppComponent {
|
|
516
|
-
constructor(public auth: AuthService
|
|
517
|
-
|
|
518
|
-
loginWithRedirect(): void {
|
|
519
|
-
const { organization, invitation } = this.activatedRoute.snapshot.params;
|
|
142
|
+
constructor(public auth: AuthService) {}
|
|
520
143
|
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
invitation
|
|
524
|
-
});
|
|
144
|
+
loginWithRedirect() {
|
|
145
|
+
this.auth.loginWithRedirect();
|
|
525
146
|
}
|
|
526
|
-
}
|
|
527
147
|
```
|
|
528
148
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
This library makes use of the `window` object in a couple of places during initialization, as well as `sessionStorage` in the underlying Auth0 SPA SDK, and thus [will have problems](https://github.com/angular/universal/blob/master/docs/gotchas.md#window-is-not-defined) when being used in an Angular Universal project. The recommendation currently is to only import this library into a module that is to be used in the browser, and omit it from any module that is to participate in a server-side environment.
|
|
532
|
-
|
|
533
|
-
See [Guards, and creating separate modules](https://github.com/angular/universal/blob/master/docs/gotchas.md#strategy-2-guards) in the Angular Universal "Gotchas" document.
|
|
534
|
-
|
|
535
|
-
## Development
|
|
149
|
+
By default the application will ask Auth0 to redirect back to the root URL of your application after authentication. This can be configured by setting the [redirectUri](https://auth0.github.io/auth0-angular/interfaces/auth_config.authconfig.html#redirecturi) option.
|
|
536
150
|
|
|
537
|
-
|
|
151
|
+
For more code samples on how to integrate the **auth0-angular** SDK in your **Angular** application, have a look at our [examples](https://github.com/auth0/auth0-angular/tree/master/EXAMPLES.md).
|
|
538
152
|
|
|
539
|
-
|
|
153
|
+
## API reference
|
|
540
154
|
|
|
541
|
-
|
|
155
|
+
Explore public API's available in auth0-angular.
|
|
542
156
|
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
### Running end-to-end tests
|
|
546
|
-
|
|
547
|
-
The end-to-end tests are executed using [Cypress](https://www.cypress.io/) against the built-in playground app.
|
|
548
|
-
|
|
549
|
-
The E2E tests require that the user password be specified as an environment variable. This is already set up in the CI environment, but locally you can do:
|
|
550
|
-
|
|
551
|
-
```
|
|
552
|
-
CYPRESS_INTEGRATION_PASSWORD=<password> ng e2e
|
|
553
|
-
```
|
|
157
|
+
- [AuthService](https://auth0.github.io/auth0-angular/classes/auth_service.authservice.html) - service used to interact with the SDK.
|
|
158
|
+
- [AuthConfig](https://auth0.github.io/auth0-angular/interfaces/auth_config.authconfig.html) - used to configure the SDK.
|
|
554
159
|
|
|
555
|
-
|
|
160
|
+
## Feedback
|
|
556
161
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
#### Running an express server
|
|
560
|
-
|
|
561
|
-
An express server can be started by running `npm run server:api`, which can be used to make testing Http Interceptors easier.
|
|
562
|
-
The express server exposes a single endpoint at `http://localhost:3001/api/external` that needs to be called with an `Authorization` header containing a token for the corresponding `domain` and `audience`, configurable in [`api-server.js`](api-server.js).
|
|
563
|
-
|
|
564
|
-
The playground application is preconfigured to call the above endpoint when clicking the `Call external API` button.
|
|
565
|
-
|
|
566
|
-
## Further help
|
|
567
|
-
|
|
568
|
-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
|
569
|
-
|
|
570
|
-
## Contributing
|
|
162
|
+
### Contributing
|
|
571
163
|
|
|
572
164
|
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
|
|
573
165
|
|
|
574
166
|
- [Auth0's general contribution guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
|
|
575
167
|
- [Auth0's code of conduct guidelines](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
|
|
576
168
|
|
|
577
|
-
|
|
169
|
+
### Raise an issue
|
|
578
170
|
|
|
579
|
-
|
|
171
|
+
To provide feedback or report a bug, please [raise an issue on our issue tracker](https://github.com/auth0/auth0-angular/issues).
|
|
580
172
|
|
|
581
|
-
|
|
173
|
+
### Vulnerability Reporting
|
|
582
174
|
|
|
583
175
|
Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/responsible-disclosure-policy) details the procedure for disclosing security issues.
|
|
584
176
|
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
## License
|
|
599
|
-
|
|
600
|
-
This project is licensed under the MIT license. See the [LICENSE](https://github.com/auth0/auth0-angular/blob/master/LICENSE) file for more info.
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
<p align="center">
|
|
180
|
+
<picture>
|
|
181
|
+
<source media="(prefers-color-scheme: light)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
|
|
182
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_dark_mode.png" width="150">
|
|
183
|
+
<img alt="Auth0 Logo" src="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
|
|
184
|
+
</picture>
|
|
185
|
+
</p>
|
|
186
|
+
<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>
|
|
187
|
+
<p align="center">
|
|
188
|
+
This project is licensed under the MIT license. See the <a href="https://github.com/auth0/auth0-angular/tree/master/LICENSE"> LICENSE</a> file for more info.</p>
|