Skip to content

refactor(lib): use defaultInterceptor function instead the DefaultInterceptor Class #1467

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor(lib): use defaultInterceptor function instead the DefaultInterceptor Class #1467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ Support for OAuth 2 and OpenId Connect (OIDC) in Angular. Already prepared for t
- Source Code Documentation: [https://manfredsteyer.github.io/angular-oauth2-oidc/docs](https://manfredsteyer.github.io/angular-oauth2-oidc/docs)
- Community-provided sample implementation: [https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/)


## Tested Environment

Successfully tested with **Angular 4.3 to Angular 16** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack.
Expand Down Expand Up @@ -119,10 +118,9 @@ _redirectUris:_
npm i angular-oauth2-oidc --save
```


## Option 1: Standalone APIs

If you use Standalone Components introduced with Angular 14, you can use our standalone API (call to ``provideOAuthClient``) in your ``main.ts`` to setup the ``OAuthClient``:
If you use Standalone Components introduced with Angular 14, you can use our standalone API (call to `provideOAuthClient`) in your `main.ts` to setup the `OAuthClient`:

```TypeScript
// main.ts -- Angular 15+ version
Expand All @@ -141,7 +139,7 @@ bootstrapApplication(AppComponent, {
});
```

As Angular 14 does have Standalone Components but no Standalone API for its ``HttpClient``, you need to go with the traditional ``HttpClientModule`` in this version:
As Angular 14 does have Standalone Components but no Standalone API for its `HttpClient`, you need to go with the traditional `HttpClientModule` in this version:

```TypeScript
// main.ts -- Angular 14 version
Expand All @@ -161,7 +159,7 @@ bootstrapApplication(AppComponent, {
});
```

The ``provideOAuthClient`` function takes the same parameters as the forRoot function of the OAuthModule that is still in place for the sake of compatibility with existing code bases.
The `provideOAuthClient` function takes the same parameters as the forRoot function of the OAuthModule that is still in place for the sake of compatibility with existing code bases.

## Option 2: Using NgModules

Expand Down Expand Up @@ -248,7 +246,7 @@ this.oauthService.loadDiscoveryDocumentAndTryLogin();

### Logging out

The logOut method clears the used token store (by default ``sessionStorage``) and forwards the user to the auth servers logout endpoint if one was configured (manually or via the discovery document).
The logOut method clears the used token store (by default `sessionStorage`) and forwards the user to the auth servers logout endpoint if one was configured (manually or via the discovery document).

```typescript
this.oauthService.logOut();
Expand Down Expand Up @@ -281,6 +279,22 @@ OAuthModule.forRoot({

If you need more versatility, you can look in the [documentation](https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/working-with-httpinterceptors.html) how to setup a custom interceptor.

In case you are in a standalone application, you have to use provideHttpClient`with`defaultOAuthInterceptor`.

```Typescript
bootstrapApplication(App, {
providers: [
provideOAuthClient({
resourceServer: {
allowedUrls: ['http://www.angular.at/api'],
sendAccessToken: true
}
}),
provideHttpClient(withInterceptors([defaultOAuthInterceptor]))
]
})
```

## Token Refresh

See docs: https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/refreshing-a-token.html
Expand All @@ -297,13 +311,14 @@ Nowadays, using code flow + PKCE -- as shown above -- is the recommended OAuth 2

See the [documentation](https://manfredsteyer.github.io/angular-oauth2-oidc/docs/) for more information about this library.


## Breaking Change in Version 9

With regards to tree shaking, beginning with version 9, the `JwksValidationHandler` has been moved to a library of its own. If you need it for implementing **implicit flow**, please install it using npm:

```

npm i angular-oauth2-oidc-jwks --save

```

After that, you can import it into your application by using this:
Expand All @@ -320,8 +335,6 @@ import { JwksValidationHandler } from 'angular-oauth2-oidc';

Please note, that this dependency is not needed for the **code flow**, which is nowadays the **recommended** flow for single page applications. This also results in smaller bundle sizes.



### Breaking change in 9.1.0

The use of `encodeURIComponent` on the argument passed to `initImplicitFlow` and its Code Flow counterparts was mandatory before this version.
Expand Down Expand Up @@ -379,5 +392,3 @@ Now the reverse is true **if you're upgrading from before 9.0.0**: you need to r
[<img alt="mabdelaal86" src="https://avatars.githubusercontent.com/u/11019219?v=4&s=117" width="117">](https://github.com/mabdelaal86)[<img alt="nhance" src="https://avatars.githubusercontent.com/u/602226?v=4&s=117" width="117">](https://github.com/nhance)[<img alt="Razzeee" src="https://avatars.githubusercontent.com/u/5943908?v=4&s=117" width="117">](https://github.com/Razzeee)[<img alt="maxisam" src="https://avatars.githubusercontent.com/u/456807?v=4&s=117" width="117">](https://github.com/maxisam)[<img alt="ismcagdas" src="https://avatars.githubusercontent.com/u/4133525?v=4&s=117" width="117">](https://github.com/ismcagdas)

[<img alt="Toxicable" src="https://avatars.githubusercontent.com/u/13490925?v=4&s=117" width="117">](https://github.com/Toxicable)[<img alt="ManuelRauber" src="https://avatars.githubusercontent.com/u/740791?v=4&s=117" width="117">](https://github.com/ManuelRauber)[<img alt="vdveer" src="https://avatars.githubusercontent.com/u/1217814?v=4&s=117" width="117">](https://github.com/vdveer)[<img alt="jeroenheijmans" src="https://avatars.githubusercontent.com/u/1590536?v=4&s=117" width="117">](https://github.com/jeroenheijmans)[<img alt="manfredsteyer" src="https://avatars.githubusercontent.com/u/1573728?v=4&s=117" width="117">](https://github.com/manfredsteyer)


74 changes: 69 additions & 5 deletions docs/changelog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,61 @@
<link rel="stylesheet" href="./styles/dark.css">
</head>
<body>

<div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
<a href="./" class="navbar-brand">angular-oauth2-oidc</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');

function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}

function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}

checkToggle(state);

const hasClass = document.body.classList.contains('dark');

if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}

useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>

<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="./" class="navbar-brand">angular-oauth2-oidc</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>

<div class="xs-menu menu" id="mobile-menu">
Expand All @@ -24,7 +75,7 @@

<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
Expand Down Expand Up @@ -244,6 +295,19 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
var MAX_SEARCH_RESULTS = 15;
</script>

<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>

<script src="./js/libs/custom-elements.min.js"></script>
<script src="./js/libs/lit-html.js"></script>

Expand Down
Loading