Skip to content

Commit be84e3d

Browse files
committed
docs: update readme for standalone api
1 parent ebeca23 commit be84e3d

File tree

18 files changed

+341
-191
lines changed

18 files changed

+341
-191
lines changed

Diff for: README.md

+30-2
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,18 @@ Support for OAuth 2 and OpenId Connect (OIDC) in Angular. Already prepared for t
2020

2121
## Tested Environment
2222

23-
Successfully tested with **Angular 4.3 to Angular 12** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack.
23+
Successfully tested with **Angular 4.3 to Angular 15** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack.
2424

2525
At server side we've used **IdentityServer** (.NET / .NET Core), Redhat's **Keycloak** (Java), and **Auth0** (Auth0 is officially supported since version 10 of this lib). For Auth0, please have a look into the respective documentation page here.
2626

2727
For using this library with **Azure Active Directory** (**Azure AD**), we recommend an additional look to this [blog post](https://dev.to/yuriburger/azure-active-directory-b2c-with-pkce-for-your-angular-app-1dcg) and the example linked at the end of this blog post.
2828

2929
Also, the Okta community created some guidelines on how to use this lib with Okta. See the links at the end of this page for more information.
3030

31+
**Angular 15**: Use 15.x versions of this library (**should also work with older Angular versions!**).
32+
33+
**Angular 14**: Use 14.x versions of this library (**should also work with older Angular versions!**).
34+
3135
**Angular 13**: Use 13.x versions of this library (**should also work with older Angular versions!**).
3236

3337
**Angular 12**: Use 12.x versions of this library (**should also work with older Angular versions!**).
@@ -107,7 +111,31 @@ _redirectUris:_
107111
npm i angular-oauth2-oidc --save
108112
```
109113

110-
## Importing the NgModule
114+
115+
## Option 1: Standalone APIs
116+
117+
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``:
118+
119+
```TypeScript
120+
// main.ts
121+
import { bootstrapApplication } from '@angular/platform-browser';
122+
123+
import { provideHttpClient } from '@angular/common/http';
124+
125+
import { AppComponent } from './app/app.component';
126+
import { provideOAuthClient } from 'angular-oauth2-oidc';
127+
128+
bootstrapApplication(AppComponent, {
129+
providers: [
130+
provideHttpClient(),
131+
provideOAuthClient()
132+
]
133+
});
134+
```
135+
136+
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.
137+
138+
## Option 2: Using NgModules
111139

112140
```TypeScript
113141
import { HttpClientModule } from '@angular/common/http';

Diff for: docs/classes/AuthConfig.html

+57-8
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ <h6><b>Properties</b></h6>
111111
<span class="modifier">Optional</span>
112112
<a href="#customTokenParameters" >customTokenParameters</a>
113113
</li>
114+
<li>
115+
<span class="modifier">Public</span>
116+
<span class="modifier">Optional</span>
117+
<a href="#decreaseExpirationBySec" >decreaseExpirationBySec</a>
118+
</li>
114119
<li>
115120
<span class="modifier">Public</span>
116121
<span class="modifier">Optional</span>
@@ -355,7 +360,7 @@ <h3 id="constructor">Constructor</h3>
355360
</tr>
356361
<tr>
357362
<td class="col-md-4">
358-
<div class="io-line">Defined in <a href="" data-line="275" class="link-to-prism">projects/lib/src/auth.config.ts:275</a></div>
363+
<div class="io-line">Defined in <a href="" data-line="280" class="link-to-prism">projects/lib/src/auth.config.ts:280</a></div>
359364
</td>
360365
</tr>
361366

@@ -418,7 +423,7 @@ <h3 id="inputs">
418423
</tr>
419424
<tr>
420425
<td class="col-md-4">
421-
<div class="io-line">Defined in <a href="" data-line="275" class="link-to-prism">projects/lib/src/auth.config.ts:275</a></div>
426+
<div class="io-line">Defined in <a href="" data-line="280" class="link-to-prism">projects/lib/src/auth.config.ts:280</a></div>
422427
</td>
423428
</tr>
424429

@@ -616,6 +621,45 @@ <h3 id="inputs">
616621

617622
</tbody>
618623
</table>
624+
<table class="table table-sm table-bordered">
625+
<tbody>
626+
<tr>
627+
<td class="col-md-4">
628+
<a name="decreaseExpirationBySec"></a>
629+
<span class="name">
630+
<span class="modifier">Public</span>
631+
<span class="modifier">Optional</span>
632+
<span ><b>decreaseExpirationBySec</b></span>
633+
<a href="#decreaseExpirationBySec"><span class="icon ion-ios-link"></span></a>
634+
</span>
635+
</td>
636+
</tr>
637+
<tr>
638+
<td class="col-md-4">
639+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
640+
641+
</td>
642+
</tr>
643+
<tr>
644+
<td class="col-md-4">
645+
<i>Default value : </i><code>0</code>
646+
</td>
647+
</tr>
648+
<tr>
649+
<td class="col-md-4">
650+
<div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">projects/lib/src/auth.config.ts:243</a></div>
651+
</td>
652+
</tr>
653+
654+
<tr>
655+
<td class="col-md-4">
656+
<div class="io-description"><p>Decreases the Expiration time of tokens by this number of seconds</p>
657+
</div>
658+
</td>
659+
</tr>
660+
661+
</tbody>
662+
</table>
619663
<table class="table table-sm table-bordered">
620664
<tbody>
621665
<tr>
@@ -673,7 +717,7 @@ <h3 id="inputs">
673717
</tr>
674718
<tr>
675719
<td class="col-md-4">
676-
<div class="io-line">Defined in <a href="" data-line="270" class="link-to-prism">projects/lib/src/auth.config.ts:270</a></div>
720+
<div class="io-line">Defined in <a href="" data-line="275" class="link-to-prism">projects/lib/src/auth.config.ts:275</a></div>
677721
</td>
678722
</tr>
679723

@@ -707,7 +751,7 @@ <h3 id="inputs">
707751
</tr>
708752
<tr>
709753
<td class="col-md-4">
710-
<div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">projects/lib/src/auth.config.ts:258</a></div>
754+
<div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">projects/lib/src/auth.config.ts:263</a></div>
711755
</td>
712756
</tr>
713757

@@ -1063,7 +1107,7 @@ <h3 id="inputs">
10631107
</tr>
10641108
<tr>
10651109
<td class="col-md-4">
1066-
<div class="io-line">Defined in <a href="" data-line="288" class="link-to-prism">projects/lib/src/auth.config.ts:288</a></div>
1110+
<div class="io-line">Defined in <a href="" data-line="293" class="link-to-prism">projects/lib/src/auth.config.ts:293</a></div>
10671111
</td>
10681112
</tr>
10691113

@@ -1171,7 +1215,7 @@ <h3 id="inputs">
11711215
</tr>
11721216
<tr>
11731217
<td class="col-md-4">
1174-
<div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">projects/lib/src/auth.config.ts:264</a></div>
1218+
<div class="io-line">Defined in <a href="" data-line="269" class="link-to-prism">projects/lib/src/auth.config.ts:269</a></div>
11751219
</td>
11761220
</tr>
11771221

@@ -2168,7 +2212,7 @@ <h3 id="inputs">
21682212
</tr>
21692213
<tr>
21702214
<td class="col-md-4">
2171-
<div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">projects/lib/src/auth.config.ts:251</a></div>
2215+
<div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">projects/lib/src/auth.config.ts:256</a></div>
21722216
</td>
21732217
</tr>
21742218

@@ -2210,7 +2254,7 @@ <h3 id="inputs">
22102254
</tr>
22112255
<tr>
22122256
<td class="col-md-4">
2213-
<div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">projects/lib/src/auth.config.ts:243</a></div>
2257+
<div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">projects/lib/src/auth.config.ts:248</a></div>
22142258
</td>
22152259
</tr>
22162260

@@ -2474,6 +2518,11 @@ <h3 id="inputs">
24742518
*/
24752519
public clockSkewInSec?: number;
24762520

2521+
/**
2522+
* Decreases the Expiration time of tokens by this number of seconds
2523+
*/
2524+
public decreaseExpirationBySec? &#x3D; 0;
2525+
24772526
/**
24782527
* The interceptors waits this time span if there is no token
24792528
*/

Diff for: docs/index.html

+20-2
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,12 @@ <h2 id="resources">Resources</h2>
4848
<li>Community-provided sample implementation: <a href="https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/">https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/</a></li>
4949
</ul>
5050
<h2 id="tested-environment">Tested Environment</h2>
51-
<p>Successfully tested with <strong>Angular 4.3 to Angular 12</strong> and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. </p>
51+
<p>Successfully tested with <strong>Angular 4.3 to Angular 15</strong> and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. </p>
5252
<p>At server side we&#39;ve used <strong>IdentityServer</strong> (.NET / .NET Core), Redhat&#39;s <strong>Keycloak</strong> (Java), and <strong>Auth0</strong> (Auth0 is officially supported since version 10 of this lib). For Auth0, please have a look into the respective documentation page here.</p>
5353
<p>For using this library with <strong>Azure Active Directory</strong> (<strong>Azure AD</strong>), we recommend an additional look to this <a href="https://dev.to/yuriburger/azure-active-directory-b2c-with-pkce-for-your-angular-app-1dcg">blog post</a> and the example linked at the end of this blog post.</p>
5454
<p>Also, the Okta community created some guidelines on how to use this lib with Okta. See the links at the end of this page for more information.</p>
55+
<p><strong>Angular 15</strong>: Use 15.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
56+
<p><strong>Angular 14</strong>: Use 14.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
5557
<p><strong>Angular 13</strong>: Use 13.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
5658
<p><strong>Angular 12</strong>: Use 12.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
5759
<p><strong>Angular 11</strong>: Use 10.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
@@ -118,7 +120,23 @@ <h2 id="sample-auth-server">Sample-Auth-Server</h2>
118120
<li>localhost:[4200-4202]/silent-refresh.html</li>
119121
</ul>
120122
<h2 id="installing">Installing</h2>
121-
<div><pre class="line-numbers"><code class="language-sh">npm i angular-oauth2-oidc --save</code></pre></div><h2 id="importing-the-ngmodule">Importing the NgModule</h2>
123+
<div><pre class="line-numbers"><code class="language-sh">npm i angular-oauth2-oidc --save</code></pre></div><h2 id="option-1-standalone-apis">Option 1: Standalone APIs</h2>
124+
<p>If you use Standalone Components introduced with Angular 14, you can use our standalone API (call to <code>provideOAuthClient</code>) in your <code>main.ts</code> to setup the <code>OAuthClient</code>:</p>
125+
<div><pre class="line-numbers"><code class="language-TypeScript">// main.ts
126+
import { bootstrapApplication } from &#39;&#64;angular/platform-browser&#39;;
127+
128+
import { provideHttpClient } from &#39;&#64;angular/common/http&#39;;
129+
130+
import { AppComponent } from &#39;./app/app.component&#39;;
131+
import { provideOAuthClient } from &#39;angular-oauth2-oidc&#39;;
132+
133+
bootstrapApplication(AppComponent, {
134+
providers: [
135+
provideHttpClient(),
136+
provideOAuthClient()
137+
]
138+
});</code></pre></div><p>The <code>provideOAuthClient</code> 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.</p>
139+
<h2 id="option-2-using-ngmodules">Option 2: Using NgModules</h2>
122140
<div><pre class="line-numbers"><code class="language-TypeScript">import { HttpClientModule } from &#39;&#64;angular/common/http&#39;;
123141
import { OAuthModule } from &#39;angular-oauth2-oidc&#39;;
124142
// etc.

0 commit comments

Comments
 (0)