Skip to content

Commit

Permalink
feat: update for angular 13
Browse files Browse the repository at this point in the history
  • Loading branch information
manfredsteyer committed Nov 12, 2021
1 parent ac931de commit d95d7da
Show file tree
Hide file tree
Showing 25 changed files with 10,958 additions and 13,638 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
!.vscode/extensions.json

# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ For using this library with **Azure Active Directory** (**Azure AD**), we recomm

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.

**Angular 13**: Use 13.x versions of this library (**should also work with older Angular versions!**).

**Angular 12**: Use 12.x versions of this library (**should also work with older Angular versions!**).

**Angular 11**: Use 10.x versions of this library (**should also work with older Angular versions!**).
Expand Down
41 changes: 0 additions & 41 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,6 @@
"tsConfig": "projects/lib/tsconfig.lib.prod.json"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/lib/tsconfig.lib.json",
"projects/lib/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
}
}
}
},
Expand Down Expand Up @@ -125,16 +115,6 @@
"projects/sample/src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/sample/tsconfig.app.json",
"projects/sample/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
}
}
}
},
Expand Down Expand Up @@ -227,17 +207,6 @@
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/quickstart-demo/tsconfig.app.json",
"projects/quickstart-demo/tsconfig.spec.json",
"projects/quickstart-demo/e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
Expand Down Expand Up @@ -273,16 +242,6 @@
"tsConfig": "projects/angular-oauth2-oidc-jwks/tsconfig.spec.json",
"karmaConfig": "projects/angular-oauth2-oidc-jwks/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/angular-oauth2-oidc-jwks/tsconfig.lib.json",
"projects/angular-oauth2-oidc-jwks/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions docs/additional-documentation/popup-based-login.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ <h1 id="logging-in-with-a-popup">Logging in With a Popup</h1>
<p>Thanks to a great community contribution, this library also supports logging the user in via a popup. For this, you need to do two things:</p>
<ul>
<li>Use <code>initLoginFlowInPopup</code> instead of <code>initLoginFlow</code>.</li>
<li>Create and configure a <code>silent-refresh.html</code> as described <a href="./silent-refresh.html">here</a> *.</li>
<li>Create and configure a <code>silent-refresh.html</code> as described <a href="./silent-refresh.md">here</a> *.</li>
</ul>
<p>* Please note this does not mean that you have to use silent refresh too.</p>
<p>Also, for your <code>silent-regfesh.html</code>, make sure you are also targeting
<p>Also, for your <code>silent-refresh.html</code>, make sure you are also targeting
<code>window.opener</code> and fall back to <code>window.parent</code>:</p>
<p><strong>Please note</strong>: IE sets opener to null under specific security settings. This prevents making this work.</p>

Expand Down
2 changes: 1 addition & 1 deletion docs/additional-documentation/silent-refresh.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@


<h2 id="refreshing-when-using-implicit-flow-implicit-flow-and-code-flow">Refreshing when using Implicit Flow (Implicit Flow and Code Flow)</h2>
<p><strong>Notes for Code Flow</strong>: You can also use this strategy for refreshing tokens when using code flow. However, please note, the strategy described within <a href="./token-refresh.md">Token Refresh</a> is far easier in this case.</p>
<p><strong>Notes for Code Flow</strong>: You can also use this strategy for refreshing tokens when using code flow. However, please note, the strategy described within <a href="./token-refresh.html">Token Refresh</a> is far easier in this case.</p>
<p>To refresh your tokens when using implicit flow you can use a silent refresh. This is a well-known solution that compensates the fact that implicit flow does not allow for issuing a refresh token. It uses a hidden iframe to get another token from the auth server. When the user is there still logged in (by using a cookie) it will respond without user interaction and provide new tokens.</p>
<p>To use this approach, setup a redirect uri for the silent refresh.</p>
<p>For this, you can set the property silentRefreshRedirectUri in the config object:</p>
Expand Down
109 changes: 109 additions & 0 deletions docs/additional-documentation/token-refresh.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-oauth2-oidc</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css" media="(prefers-color-scheme: dark)">
</head>
<body>

<div class="navbar navbar-default navbar-fixed-top visible-xs">
<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 class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>

<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content additional-page">
<div class="content-data">



















<h1 id="refreshing-a-token-using-code-flow-not-implicit-flow">Refreshing a Token using Code Flow (not Implicit Flow!)</h1>
<p>When using code flow, you can get an <code>refresh_token</code>. While the original standard DOES NOT allow this for SPAs, the mentioned <a href="https://tools.ietf.org/html/draft-ietf-oauth-security-topics-13">OAuth 2.0 Security Best Current Practice</a> document proposes to ease this limitation. However, it specifies a list of requirements one should take care about before using <code>refresh_tokens</code>. Please make sure you respect those requirements.</p>
<p>Please also note, that you have to request the <code>offline_access</code> scope to get a refresh token.</p>
<p>To refresh your token, just call the <code>refreshToken</code> method:</p>
<div><pre class="line-numbers"><code class="language-typescript">this.oauthService.refreshToken();</code></pre></div><h2 id="automatically-refreshing-a-token-when-before-it-expires-code-flow-and-implicit-flow">Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)</h2>
<p>To automatically refresh a token when/ some time before it expires, just call the following method after configuring the <code>OAuthService</code>:</p>
<div><pre class="line-numbers"><code class="language-TypeScript">this.oauthService.setupAutomaticSilentRefresh();</code></pre></div><p>By default, this event is fired after 75% of the token&#39;s life time is over. You can adjust this factor by setting the property <code>timeoutFactor</code> to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.</p>

</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>

<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'additional-page';
var COMPODOC_CURRENT_PAGE_URL = 'token-refresh.html';
var MAX_SEARCH_RESULTS = 15;
</script>

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

<script type="module" src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>

<script src="../js/libs/bootstrap-native.js"></script>

<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>

<script src="../js/compodoc.js"></script>

<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>


</body>
</html>
49 changes: 47 additions & 2 deletions docs/classes/AuthConfig.html
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,11 @@ <h6><b>Properties</b></h6>
<span class="modifier">Optional</span>
<a href="#postLogoutRedirectUri" >postLogoutRedirectUri</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Optional</span>
<a href="#preserveRequestedRoute" >preserveRequestedRoute</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Optional</span>
Expand Down Expand Up @@ -340,7 +345,7 @@ <h3 id="constructor">Constructor</h3>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">projects/lib/src/auth.config.ts:258</a></div>
<div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">projects/lib/src/auth.config.ts:264</a></div>
</td>
</tr>

Expand Down Expand Up @@ -981,7 +986,7 @@ <h3 id="inputs">
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="271" class="link-to-prism">projects/lib/src/auth.config.ts:271</a></div>
<div class="io-line">Defined in <a href="" data-line="277" class="link-to-prism">projects/lib/src/auth.config.ts:277</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1063,6 +1068,40 @@ <h3 id="inputs">
<td class="col-md-4">
<div class="io-description"><p>An optional second redirectUri where the auth server
redirects the user to after logging out.</p>
</div>
</td>
</tr>

</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="preserveRequestedRoute"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Optional</span>
<span ><b>preserveRequestedRoute</b></span>
<a href="#preserveRequestedRoute"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">projects/lib/src/auth.config.ts:264</a></div>
</td>
</tr>

<tr>
<td class="col-md-4">
<div class="io-description"><p>Set this to true to preserve the requested route including query parameters after code flow login.
This setting enables deep linking for the code flow.</p>
</div>
</td>
</tr>
Expand Down Expand Up @@ -2378,6 +2417,12 @@ <h3 id="inputs">
*/
public disablePKCE? &#x3D; false;

/**
* Set this to true to preserve the requested route including query parameters after code flow login.
* This setting enables deep linking for the code flow.
*/
public preserveRequestedRoute? &#x3D; false;

constructor(json?: Partial&lt;AuthConfig&gt;) {
if (json) {
Object.assign(this, json);
Expand Down
18 changes: 9 additions & 9 deletions docs/dependencies.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,23 @@
</ol>
<ul class="dependencies-list">
<li>
<b>@angular/animations</b> : 12.1.2</li>
<b>@angular/animations</b> : 13.0.1</li>
<li>
<b>@angular/common</b> : 12.1.2</li>
<b>@angular/common</b> : 13.0.1</li>
<li>
<b>@angular/compiler</b> : 12.1.2</li>
<b>@angular/compiler</b> : 13.0.1</li>
<li>
<b>@angular/core</b> : 12.1.2</li>
<b>@angular/core</b> : 13.0.1</li>
<li>
<b>@angular/elements</b> : 12.1.2</li>
<b>@angular/elements</b> : 13.0.1</li>
<li>
<b>@angular/forms</b> : 12.1.2</li>
<b>@angular/forms</b> : 13.0.1</li>
<li>
<b>@angular/platform-browser</b> : 12.1.2</li>
<b>@angular/platform-browser</b> : 13.0.1</li>
<li>
<b>@angular/platform-browser-dynamic</b> : 12.1.2</li>
<b>@angular/platform-browser-dynamic</b> : 13.0.1</li>
<li>
<b>@angular/router</b> : 12.1.2</li>
<b>@angular/router</b> : 13.0.1</li>
<li>
<b>@popperjs/core</b> : ^2.9.2</li>
<li>
Expand Down
1 change: 1 addition & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ <h2 id="tested-environment">Tested Environment</h2>
<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>
<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>
<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>
<p><strong>Angular 13</strong>: Use 13.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
<p><strong>Angular 12</strong>: Use 12.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
<p><strong>Angular 11</strong>: Use 10.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
<p><strong>Angular 10</strong>: Use 10.x versions of this library (<strong>should also work with older Angular versions!</strong>).</p>
Expand Down
Loading

3 comments on commit d95d7da

@michaelfaith
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity has this been released? I see a new version 13.0.1 in npmjs, but the latest release here is 12, so it makes me wonder if that's official?

@jeroenheijmans
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think NPMJS is leading @michaelfaith GitHub is more a bookkeeping thing. I guess a tag or such could be useful though. In any case, I recently successfully upgraded my sample to use v13 and it works well I suppose.

@michaelfaith
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeroenheijmans good to know. But with all the exploits on npm recently, I like to do my due diligence. And with major version updates especially, I like to review the release notes for breaking changes. And the Changelog hasn't been updated for 13 either...

Please sign in to comment.