Securing your Angular App with Auth0

Securing your
App with Auth0

View Slide

Fabian
Gosebrink
https://oﬀering.solutions
@FabianGosebrink

View Slide

Why?

View Slide

View Slide

Identity

View Slide

{
"nickname": "testuser",
"name": "[email protected]",
"picture": "https://s.gravatar.com/[...]avatars%2Fte.png",
"updated_at": "2022-10-23T08:53:13.652Z",
"iss": "https://dev-2fwvrhka.us.auth0.com/",
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": "E7VCSlskwSPQvM1uwPRyyGvGYOc21MSg",
"iat": 1666515194,
"exp": 1666551194,
"sid": "hVYUGB_VhqxQ2SDuaLuNjRKz0I2ViOQ0",
"nonce": "3661cea8889816d9eeefd99e8a9a51c952WJ1OHaU"
}
1
2
3
4
5
6
7
8
9
10
11
12
13

View Slide

{
"updated_at": "2022-10-23T08:53:13.652Z",
"sub": "auth0|626e4008908bab0069c8f20d",
"iat": 1666515194,
"exp": 1666551194,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
{
1
2
3
4
"updated_at": "2022-10-23T08:53:13.652Z",
5
6
"sub": "auth0|626e4008908bab0069c8f20d",
7
8
"iat": 1666515194,
9
"exp": 1666551194,
10
11
12
}
13

View Slide

{
"updated_at": "2022-10-23T08:53:13.652Z",
"sub": "auth0|626e4008908bab0069c8f20d",
"iat": 1666515194,
"exp": 1666551194,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
{
1
2
3
4
"updated_at": "2022-10-23T08:53:13.652Z",
5
6
"sub": "auth0|626e4008908bab0069c8f20d",
7
8
"iat": 1666515194,
9
"exp": 1666551194,
10
11
12
}
13
{
1
2
3
4
"updated_at": "2022-10-23T08:53:13.652Z",
5
6
"sub": "auth0|626e4008908bab0069c8f20d",
7
8
"iat": 1666515194,
9
"exp": 1666551194,
10
11
12
}
13

View Slide

{
"updated_at": "2022-10-23T08:53:13.652Z",
"sub": "auth0|626e4008908bab0069c8f20d",
"iat": 1666515194,
"exp": 1666551194,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
{
1
2
3
4
"updated_at": "2022-10-23T08:53:13.652Z",
5
6
"sub": "auth0|626e4008908bab0069c8f20d",
7
8
"iat": 1666515194,
9
"exp": 1666551194,
10
11
12
}
13
{
1
2
3
4
"updated_at": "2022-10-23T08:53:13.652Z",
5
6
"sub": "auth0|626e4008908bab0069c8f20d",
7
8
"iat": 1666515194,
9
"exp": 1666551194,
10
11
12
}
13
{
"updated_at": "2022-10-23T08:53:13.652Z",
"sub": "auth0|626e4008908bab0069c8f20d",
"iat": 1666515194,
"exp": 1666551194,
}
1
2
3
4
5
6
7
8
9
10
11
12
13

View Slide

OAuth 2.0

View Slide

Open
Authorization

View Slide

Access
Tokens

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
"https://localhost:5001",
"https://dev-2fwvrhka.us.auth0.com/userinfo"
],
"iat": 1666515194,
"exp": 1666601594,
"azp": "E7VCSlskwSPQvM1uwPRyyGvGYOc21MSg",
"scope": "openid profile access:api offline_access",
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"aud": [
],
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
4
5
6
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"aud": [
],
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
4
5
6
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"iat": 1666515194,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"aud": [
],
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
4
5
6
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"iat": 1666515194,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"exp": 1666601594,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"aud": [
],
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
4
5
6
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"iat": 1666515194,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"exp": 1666601594,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"aud": [
],
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
4
5
6
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"iat": 1666515194,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"exp": 1666601594,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16

View Slide

{
"sub": "auth0|626e4008908bab0069c8f20d",
"aud": [
],
"iat": 1666515194,
"exp": 1666601594,
"permissions": [
"access:api",
"read:weather"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"sub": "auth0|626e4008908bab0069c8f20d",
{
1
2
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"aud": [
],
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
4
5
6
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"iat": 1666515194,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"exp": 1666601594,
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
"permissions": [
12
"access:api",
13
"read:weather"
14
]
15
}
16
"permissions": [
"access:api",
"read:weather"
]
{
1
2
"sub": "auth0|626e4008908bab0069c8f20d",
3
"aud": [
4
5
6
],
7
"iat": 1666515194,
8
"exp": 1666601594,
9
10
11
12
13
14
15
}
16

View Slide

Flow

View Slide

Code Flow

View Slide

View Slide

Browser

View Slide

Request
Browser

View Slide

Request
Login
Browser

View Slide

Request
Login
Redirect & Code
Browser

View Slide

Request
Login
Redirect & Code
Code
Browser

View Slide

Request
Login
Redirect & Code
Code
Browser
Tokens

View Slide

https://auth0.com/docs/get-started/authentication-and-authorization-ﬂow/authorization-code-ﬂow-with-proof-key-for-code-exchange-pkce

View Slide

View Slide

Step 1

View Slide

Redirect
Step 1

View Slide

Username
Password
Redirect
Step 1

View Slide

Username
Password

Redirect
Step 1

View Slide

Step 2

View Slide

Tokens
{ ... }
Step 2

View Slide

/home /status
...

View Slide

/home /status /secure
...

View Slide

/home /status
...
User

View Slide

...
User

View Slide

/home /status
...
User

View Slide

...
User

View Slide

View Slide

Redirect to Auth0
Process the code
Request information
Process information
Set the state

View Slide

Redirect to Auth0 Provide the login mask
Provide social logins
Create the code
Turn code into user info
Process the code
Request information
Process information
Set the state

View Slide

View Slide

Process the code
Request information
Process information
Set the state
...more!

View Slide

https://www.npmjs.com/package/angular-auth-oidc-client

View Slide

https://github.com/auth0/auth0-angular

View Slide

View Slide

import { authInterceptor, provideAuth }
from 'angular-auth-oidc-client';
export const appConfig = {
providers: [
// ...
provideAuth({
config: {
authority: '...',
redirectUrl: window.location.origin,
clientId: '...',
scope: '...',
responseType: 'code',
silentRenew: true,
useRefreshToken: true,
postLogoutRedirectUri: window.location.origin,
customParamsAuthRequest: {
audience: '...',
},
secureRoutes: ['...'],
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
silentRenew: true,
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
silentRenew: true,
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
silentRenew: true,
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
audience: '...',
},
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
18
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
silentRenew: true,
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
audience: '...',
},
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
18
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
provideAuth({
}),
1
2
3
4
providers: [
5
// ...
6
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
22
],
23
};
24
authority: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
clientId: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
scope: '...',
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
silentRenew: true,
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
audience: '...',
},
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
18
19
20
},
21
}),
22
],
23
};
24
1
2
3
4
providers: [
5
// ...
6
provideAuth({
7
config: {
8
authority: '...',
9
10
clientId: '...',
11
scope: '...',
12
13
silentRenew: true,
14
15
16
17
audience: '...',
18
},
19
20
},
21
}),
22
],
23
};
24
providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

const appRoutes: Routes = [
{
path: 'protected',
component: ,
canActivate: [isAuthenticated]
},
// ...
];
1
2
3
4
5
6
7
8

View Slide

import { OidcSecurityService }
export const isAuthenticated = () => {
const oidcSecurityService = inject(OidcSecurityService);
const router = inject(Router);
return oidcSecurityService.isAuthenticated$.pipe(
take(1),
map(({ isAuthenticated }) => {
if (!isAuthenticated) {
router.navigate(['/unauthorized']);
return false;
}
return true;
})
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

View Slide

take(1),
return false;
}
return true;
})
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
take(1),
9
10
11
12
13
return false;
14
}
15
16
return true;
17
})
18
);
19
};
20

View Slide

take(1),
return false;
}
return true;
})
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
take(1),
9
10
11
12
13
return false;
14
}
15
16
return true;
17
})
18
);
19
};
20
return false;
}
1
2
3
4
5
6
7
8
take(1),
9
10
11
12
13
14
15
16
return true;
17
})
18
);
19
};
20

View Slide

take(1),
return false;
}
return true;
})
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
take(1),
9
10
11
12
13
return false;
14
}
15
16
return true;
17
})
18
);
19
};
20
return false;
}
1
2
3
4
5
6
7
8
take(1),
9
10
11
12
13
14
15
16
return true;
17
})
18
);
19
};
20
return true;
1
2
3
4
5
6
7
8
take(1),
9
10
11
12
13
return false;
14
}
15
16
17
})
18
);
19
};
20

View Slide

Demo

View Slide

View Slide

providers: [
// ...
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

providers: [
importProvidersFrom(BrowserModule),
provideHttpClient(withInterceptors([authInterceptor()])),
provideRouter(APP_ROUTES),
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

View Slide

providers: [
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
providers: [
2
3
4
5
provideAuth({
6
config: {
7
authority: '...',
8
9
clientId: '...',
10
scope: '...',
11
12
silentRenew: true,
13
14
15
16
audience: '...',
17
},
18
19
},
20
}),
21
],
22
};
23

View Slide

providers: [
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
providers: [
2
3
4
5
provideAuth({
6
config: {
7
authority: '...',
8
9
clientId: '...',
10
scope: '...',
11
12
silentRenew: true,
13
14
15
16
audience: '...',
17
},
18
19
},
20
}),
21
],
22
};
23
provideAuth({
config: {
authority: '...',
clientId: '...',
scope: '...',
silentRenew: true,
audience: '...',
},
},
}),
1
providers: [
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
],
22
};
23

View Slide

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
private secureRoutes = ['https://localhost:44390'];
constructor(private authService: AuthService) {}
intercept(
request: HttpRequest,
next: HttpHandler
) {
if (!this.secureRoutes.find((x) => request.url.startsWith(x))) {
return next.handle(request);
}
const token = this.authService.token;
if (!token) {
}
request = request.clone({
headers: request.headers.set('Authorization', 'Bearer ' + token),
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

View Slide

@Injectable()
intercept(
next: HttpHandler
) {
}
if (!token) {
}
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
}
@Injectable()
1
2
3
4
5
6
intercept(
7
8
next: HttpHandler
9
) {
10
11
12
13
14
15
16
if (!token) {
17
18
}
19
20
21
22
});
23
24
25
}
26
}
27

View Slide

@Injectable()
intercept(
next: HttpHandler
) {
}
if (!token) {
}
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
}
@Injectable()
1
2
3
4
5
6
intercept(
7
8
next: HttpHandler
9
) {
10
11
12
13
14
15
16
if (!token) {
17
18
}
19
20
21
22
});
23
24
25
}
26
}
27
if (!token) {
}
@Injectable()
1
2
3
4
5
6
intercept(
7
8
next: HttpHandler
9
) {
10
11
12
}
13
14
15
16
17
18
19
20
21
22
});
23
24
25
}
26
}
27

View Slide

@Injectable()
intercept(
next: HttpHandler
) {
}
if (!token) {
}
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
}
@Injectable()
1
2
3
4
5
6
intercept(
7
8
next: HttpHandler
9
) {
10
11
12
13
14
15
16
if (!token) {
17
18
}
19
20
21
22
});
23
24
25
}
26
}
27
if (!token) {
}
@Injectable()
1
2
3
4
5
6
intercept(
7
8
next: HttpHandler
9
) {
10
11
12
}
13
14
15
16
17
18
19
20
21
22
});
23
24
25
}
26
}
27
});
@Injectable()
1
2
3
4
5
6
intercept(
7
8
next: HttpHandler
9
) {
10
11
12
}
13
14
15
16
if (!token) {
17
18
}
19
20
21
22
23
24
25
}
26
}
27

View Slide

View Slide

var app = builder.Build();
app.UseSwagger();
app.UseSwaggerUI();
app.UseCors("AllowAllOrigins");
app.UseHttpsRedirection();
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

View Slide

app.UseSwagger();
app.UseSwaggerUI();
app.Run();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
app.UseSwagger();
3
app.UseSwaggerUI();
4
5
6
7
8
9
10
11
12
13
app.Run();
14

View Slide

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, c =>
{
c.Authority = auth0Domain;
c.Audience = auth0Audience;
c.TokenValidationParameters = new TokenValidationParameters
{
ValidAudience = auth0Audience,
ValidIssuer = auth0Domain,
NameClaimType = ClaimTypes.NameIdentifier
};
});
1
2
3
4
5
6
7
8
9
10
11
12

View Slide

[ApiController]
[Route("[controller]")]
[Authorize]
public class SomeDataController : ControllerBase
{
// Some HTTP Methods only accessible
// When authorized
};
1
2
3
4
5
6
7
8

View Slide

[ApiController]
[Authorize]
{
// When authorized
};
1
2
3
4
5
6
7
8
[Authorize]
[ApiController]
1
2
3
4
{
5
6
// When authorized
7
};
8

View Slide

builder.Services.AddAuthorization(options =>
{
options.AddPolicy("access:api", policy =>
{
policy.RequireClaim("azp", clientId);
policy.RequireClaim("iss", auth0Domain);
});
});
1
2
3
4
5
6
7
8

View Slide

{
{
});
});
1
2
3
4
5
6
7
8
1
{
2
3
{
4
5
6
});
7
});
8

View Slide

{
{
});
});
1
2
3
4
5
6
7
8
1
{
2
3
{
4
5
6
});
7
});
8
1
{
2
3
{
4
5
6
});
7
});
8

View Slide

{
{
});
});
1
2
3
4
5
6
7
8
1
{
2
3
{
4
5
6
});
7
});
8
1
{
2
3
{
4
5
6
});
7
});
8
1
{
2
3
{
4
5
6
});
7
});
8

View Slide

[ApiController]
[Authorize("access:api")]
{
// When authorized
};
1
2
3
4
5
6
7
8

View Slide

[ApiController]
{
// When authorized
};
1
2
3
4
5
6
7
8
[ApiController]
1
2
3
4
{
5
6
// When authorized
7
};
8

View Slide

{
{
});
});
1
2
3
4
5
6
7
8

View Slide

{
{
policy
.Requirements
.Add(new UserApiScopeHandlerRequirement("access:api"));
});
});
1
2
3
4
5
6
7
8
9
10
11

View Slide

{
{
policy
.Requirements
});
});
1
2
3
4
5
6
7
8
9
10
11
policy
.Requirements
1
{
2
3
{
4
5
6
7
8
9
});
10
});
11

View Slide

import { AuthModule } from 'angular-auth-oidc-client';
@NgModule({
imports: [
AuthModule.forRoot({
config: {
authority: '...',
clientId: '...',
scope: '... access:api',
silentRenew: true,
audience: '...',
},
},
}),
],
exports: [AuthModule],
})
export class AuthConfigModule {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

@NgModule({
imports: [
config: {
authority: '...',
clientId: '...',
silentRenew: true,
audience: '...',
},
},
}),
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
@NgModule({
3
imports: [
4
5
config: {
6
authority: '...',
7
8
clientId: '...',
9
10
11
silentRenew: true,
12
13
14
15
audience: '...',
16
},
17
18
},
19
}),
20
],
21
22
})
23
24

View Slide

Securing your Angular App with Auth0

Securing your Angular App with Auth0

Fabian Gosebrink

More Decks by Fabian Gosebrink

Other Decks in Technology

Featured

Transcript