Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Securing your Angular App with Auth0

Securing your Angular App with Auth0

One of the biggest problems of applications in distributed systems is authentication and authorization and ensuring that users see the correct data. Securing Angular applications on the web can be complex due to the endless possibilities and solutions for this. Most APIs that offer data should be secured. Auth0 is a cloud identity provider that makes it possible to outsource the complete user accounting and provides OpenID Connect client APPs for tech stacks like Angular as well as any APIs, for example, implemented with ASP.NET Core. In this talk, Fabian Gosebrink shows how you could secure an Angular App with Auth0, how a user can sign in and how data can be securely requested from an ASP.NET Core API. After this talk, modern security with Angular and ASP.NET Core should be no longer a problem for your project.

Fabian Gosebrink

October 31, 2022
Tweet

More Decks by Fabian Gosebrink

Other Decks in Technology

Transcript

  1. Securing your
    App with Auth0

    View Slide

  2. Fabian
    Gosebrink
    https://offering.solutions
    @FabianGosebrink

    View Slide

  3. Why?

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Identity

    View Slide

  13. {
    "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

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

    View Slide

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

    View Slide

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

  17. OAuth 2.0

    View Slide

  18. Open
    Authorization

    View Slide

  19. Access
    Tokens

    View Slide

  20. {
    "iss": "https://dev-2fwvrhka.us.auth0.com/",
    "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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. Flow

    View Slide

  30. Code Flow

    View Slide

  31. View Slide

  32. View Slide

  33. Browser

    View Slide

  34. Browser

    View Slide

  35. Request
    Browser

    View Slide

  36. Request
    Login
    Browser

    View Slide

  37. Request
    Login
    Redirect & Code
    Browser

    View Slide

  38. Request
    Login
    Redirect & Code
    Code
    Browser

    View Slide

  39. Request
    Login
    Redirect & Code
    Code
    Browser
    Tokens

    View Slide

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

    View Slide

  41. View Slide

  42. Step 1

    View Slide

  43. Redirect
    Step 1

    View Slide

  44. Username
    Password
    Redirect
    Step 1

    View Slide

  45. Username
    Password

    Redirect
    Step 1

    View Slide

  46. Step 2

    View Slide


  47. Tokens
    { ... }
    Step 2

    View Slide


  48. Tokens
    { ... }
    Step 2

    View Slide

  49. /home /status
    ...

    View Slide

  50. /home /status /secure
    ...

    View Slide

  51. /home /status
    ...
    User

    View Slide

  52. /home /status /secure
    ...
    User

    View Slide

  53. /home /status
    ...
    User

    View Slide

  54. /home /status /secure
    ...
    User

    View Slide

  55. View Slide

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

    View Slide

  57. 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

  58. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  79. import { OidcSecurityService }
    from 'angular-auth-oidc-client';
    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

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

    View Slide

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

    View Slide

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

    View Slide

  83. Demo

    View Slide

  84. View Slide

  85. 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

  86. export const appConfig = {
    providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(withInterceptors([authInterceptor()])),
    provideRouter(APP_ROUTES),
    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

    View Slide

  87. export const appConfig = {
    providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(withInterceptors([authInterceptor()])),
    provideRouter(APP_ROUTES),
    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
    provideHttpClient(withInterceptors([authInterceptor()])),
    export const appConfig = {
    1
    providers: [
    2
    importProvidersFrom(BrowserModule),
    3
    4
    provideRouter(APP_ROUTES),
    5
    provideAuth({
    6
    config: {
    7
    authority: '...',
    8
    redirectUrl: window.location.origin,
    9
    clientId: '...',
    10
    scope: '...',
    11
    responseType: 'code',
    12
    silentRenew: true,
    13
    useRefreshToken: true,
    14
    postLogoutRedirectUri: window.location.origin,
    15
    customParamsAuthRequest: {
    16
    audience: '...',
    17
    },
    18
    secureRoutes: ['...'],
    19
    },
    20
    }),
    21
    ],
    22
    };
    23

    View Slide

  88. export const appConfig = {
    providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(withInterceptors([authInterceptor()])),
    provideRouter(APP_ROUTES),
    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
    provideHttpClient(withInterceptors([authInterceptor()])),
    export const appConfig = {
    1
    providers: [
    2
    importProvidersFrom(BrowserModule),
    3
    4
    provideRouter(APP_ROUTES),
    5
    provideAuth({
    6
    config: {
    7
    authority: '...',
    8
    redirectUrl: window.location.origin,
    9
    clientId: '...',
    10
    scope: '...',
    11
    responseType: 'code',
    12
    silentRenew: true,
    13
    useRefreshToken: true,
    14
    postLogoutRedirectUri: window.location.origin,
    15
    customParamsAuthRequest: {
    16
    audience: '...',
    17
    },
    18
    secureRoutes: ['...'],
    19
    },
    20
    }),
    21
    ],
    22
    };
    23
    provideAuth({
    config: {
    authority: '...',
    redirectUrl: window.location.origin,
    clientId: '...',
    scope: '...',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    postLogoutRedirectUri: window.location.origin,
    customParamsAuthRequest: {
    audience: '...',
    },
    secureRoutes: ['...'],
    },
    }),
    export const appConfig = {
    1
    providers: [
    2
    importProvidersFrom(BrowserModule),
    3
    provideHttpClient(withInterceptors([authInterceptor()])),
    4
    provideRouter(APP_ROUTES),
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    ],
    22
    };
    23

    View Slide

  89. @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) {
    return next.handle(request);
    }
    request = request.clone({
    headers: request.headers.set('Authorization', 'Bearer ' + token),
    });
    return next.handle(request);
    }
    }
    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

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

    View Slide

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

    View Slide

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

    View Slide

  93. View Slide

  94. View Slide

  95. 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

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

    View Slide

  97. 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

  98. [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

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

    View Slide

  100. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  106. 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

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

    View Slide

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

    View Slide

  109. import { AuthModule } from 'angular-auth-oidc-client';
    @NgModule({
    imports: [
    AuthModule.forRoot({
    config: {
    authority: '...',
    redirectUrl: window.location.origin,
    clientId: '...',
    scope: '... access:api',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    postLogoutRedirectUri: window.location.origin,
    customParamsAuthRequest: {
    audience: '...',
    },
    secureRoutes: ['...'],
    },
    }),
    ],
    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

  110. import { AuthModule } from 'angular-auth-oidc-client';
    @NgModule({
    imports: [
    AuthModule.forRoot({
    config: {
    authority: '...',
    redirectUrl: window.location.origin,
    clientId: '...',
    scope: '... access:api',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    postLogoutRedirectUri: window.location.origin,
    customParamsAuthRequest: {
    audience: '...',
    },
    secureRoutes: ['...'],
    },
    }),
    ],
    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
    scope: '... access:api',
    import { AuthModule } from 'angular-auth-oidc-client';
    1
    2
    @NgModule({
    3
    imports: [
    4
    AuthModule.forRoot({
    5
    config: {
    6
    authority: '...',
    7
    redirectUrl: window.location.origin,
    8
    clientId: '...',
    9
    10
    responseType: 'code',
    11
    silentRenew: true,
    12
    useRefreshToken: true,
    13
    postLogoutRedirectUri: window.location.origin,
    14
    customParamsAuthRequest: {
    15
    audience: '...',
    16
    },
    17
    secureRoutes: ['...'],
    18
    },
    19
    }),
    20
    ],
    21
    exports: [AuthModule],
    22
    })
    23
    export class AuthConfigModule {}
    24

    View Slide

  111. Demo

    View Slide

  112. View Slide

  113. View Slide

  114. BFF

    View Slide

  115. View Slide

  116. Demo

    View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  121. View Slide

  122. View Slide