docs: auth0 support

README.md

@@ -9,6 +9,7 @@ Support for OAuth 2 and OpenId Connect (OIDC) in Angular. Already prepared for t
 - [jsrasign](https://kjur.github.io/jsrsasign/) for validating token signature and for hashing
 - [Identity Server](https://github.com/identityserver) for testing with an .NET/.NET Core Backend
 - [Keycloak (Redhat)](http://www.keycloak.org/) for testing with Java
+- [Auth0](https://auth0.com/)
 
 ## Resources
 
@@ -47,7 +48,9 @@ Now the reverse is true **if you're upgrading from before 9.0.0**: you need to r
 
 ## Tested Environment
 
-Successfully tested with **Angular 9** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. At server side we've used IdentityServer (.NET / .NET Core) and Redhat's Keycloak (Java).
+Successfully tested with **Angular 9** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. 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.
+
+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 10**: Use 10.x versions of this library (**should also work with older Angular versions!**).
 

docs-src/authsvr-auth0.md

@@ -0,0 +1,57 @@
+# Using Auth0
+
+To use this lib with Auth0, open your Auth0 account and configure:
+
+- An app 
+- An API
+
+Configure the app to use ``refresh token rotation`` and the grant types ``authorization code`` and ``refresh token``. For grant types, see the advanced settings at the end of the settings page.
+
+## Configuration 
+
+Provide a configuration like this:
+
+```typescript
+import { AuthConfig } from 'angular-oauth2-oidc';
+
+export const authConfig: AuthConfig = {
+
+    issuer: 'https://dev-g-61sdfs.eu.auth0.com/',
+
+    // Your app's client id:
+    clientId: 'opHt1Tkt9E9fVQTZPBVF1tHVhjrxvyVX',
+    redirectUri: window.location.origin,
+
+    scope: 'openid profile email offline_access',
+
+    responseType: 'code',
+
+    logoutUrl: 'https://dev-g-61sdfs.eu.auth0.com/v2/logout',
+
+    customQueryParams: {
+        // Your API's name
+        audience: 'http://www.angular.at/api'
+    },
+};
+```
+
+## Getting, Using, and Refreshing a Token
+
+This should work as shown in the other examples in this documentation and in the readme file.
+
+## Logging out
+
+Auth0's logout endpoint expects the parameters ``client_id and ``returnTo``:
+
+```typescript
+this.oauthService.revokeTokenAndLogout({
+  client_id: this.oauthService.clientId,
+  returnTo: this.oauthService.redirectUri
+}, true);
+```
+
+The optional 2nd parameter set to ``true`` ignores CORS issues with the logout endpoint.
+
+## Example
+
+Please find a [demo](https://github.com/manfredsteyer/auth0-demo) for using Auth0 with angular-oauth2-oidc [here](https://github.com/manfredsteyer/auth0-demo).

docs-src/authsvr-idsvr.md

@@ -0,0 +1,3 @@
+# Using Identity Server
+
+This lib should work as shown in all examples here with Identity Server. 

docs-src/authsvr-keycloak.md

@@ -0,0 +1,3 @@
+# Using Keycloak
+
+This lib should work as shown in all examples here with Keycloak. 

docs-src/authsvr.md

@@ -0,0 +1,5 @@
+# Support for Auth Servers
+
+As this lib follows the OAuth2 and OpenId Connect specs, it should work with all compliant authorizations servers.
+
+However, experience shows that some authorizations servers come with some special behavior or settings. Hence, we must respect this when using this lib.

docs-src/summary.json

@@ -83,6 +83,24 @@
     {
         "title": "Original Config API",
         "file": "implicit-flow-config-discovery.md"
+    },
+    {
+        "title": "Authorization Servers",
+        "file": "authsvr.md",
+        "children": [
+            {
+                "title": "Using Identity Server",
+                "file": "authsvr-idsvr.md"
+            },
+            {
+                "title": "Using Keycloak",
+                "file": "authsvr-keycloak.md"
+            },
+            {
+                "title": "Auth0",
+                "file": "authsvr-auth0.md"
+            }
+        ]
     }
 
 ]

docs/additional-documentation/authorization-servers.html

@@ -0,0 +1,104 @@
+<!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">
+    </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="support-for-auth-servers">Support for Auth Servers</h1>
+<p>As this lib follows the OAuth2 and OpenId Connect specs, it should work with all compliant authorizations servers.</p>
+<p>However, experience shows that some authorizations servers come with some special behavior or settings. Hence, we must respect this when using this lib.</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 = 'authorization-servers.html';
+            var MAX_SEARCH_RESULTS = 15;
+       </script>
+
+       <script src="../js/libs/custom-elements.min.js"></script>
+       <script src="../js/libs/lit-html.js"></script>
+       <!-- Required to polyfill modern browsers as code is ES5 for IE... -->
+       <script src="../js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
+       <script src="../js/menu-wc.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>

docs/additional-documentation/authorization-servers/auth0.html

@@ -0,0 +1,140 @@
+<!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">
+    </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="using-auth0">Using Auth0</h1>
+<p>To use this lib with Auth0, open your Auth0 account and configure:</p>
+<ul>
+<li>An app </li>
+<li>An API</li>
+</ul>
+<p>Configure the app to use <code>refresh token rotation</code> and the grant types <code>authorization code</code> and <code>refresh token</code>. For grant types, see the advanced settings at the end of the settings page.</p>
+<h2 id="configuration">Configuration</h2>
+<p>Provide a configuration like this:</p>
+<div><pre class="line-numbers"><code class="language-typescript">import { AuthConfig } from &#39;angular-oauth2-oidc&#39;;
+
+export const authConfig: AuthConfig = {
+
+    issuer: &#39;https://dev-g-61sdfs.eu.auth0.com/&#39;,
+
+    // Your app&#39;s client id:
+    clientId: &#39;opHt1Tkt9E9fVQTZPBVF1tHVhjrxvyVX&#39;,
+    redirectUri: window.location.origin,
+
+    scope: &#39;openid profile email offline_access&#39;,
+
+    responseType: &#39;code&#39;,
+
+    logoutUrl: &#39;https://dev-g-61sdfs.eu.auth0.com/v2/logout&#39;,
+
+    customQueryParams: {
+        // Your API&#39;s name
+        audience: &#39;http://www.angular.at/api&#39;
+    },
+};</code></pre></div><h2 id="getting-using-and-refreshing-a-token">Getting, Using, and Refreshing a Token</h2>
+<p>This should work as shown in the other examples in this documentation and in the readme file.</p>
+<h2 id="logging-out">Logging out</h2>
+<p>Auth0&#39;s logout endpoint expects the parameters <code>client_id and</code>returnTo``:</p>
+<div><pre class="line-numbers"><code class="language-typescript">this.oauthService.revokeTokenAndLogout({
+  client_id: this.oauthService.clientId,
+  returnTo: this.oauthService.redirectUri
+}, true);</code></pre></div><p>The optional 2nd parameter set to <code>true</code> ignores CORS issues with the logout endpoint.</p>
+<h2 id="example">Example</h2>
+<p>Please find a <a href="https://github.com/manfredsteyer/auth0-demo">demo</a> for using Auth0 with angular-oauth2-oidc <a href="https://github.com/manfredsteyer/auth0-demo">here</a>.</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 = 2;
+            var COMPODOC_CURRENT_PAGE_CONTEXT = 'additional-page';
+            var COMPODOC_CURRENT_PAGE_URL = 'auth0.html';
+            var MAX_SEARCH_RESULTS = 15;
+       </script>
+
+       <script src="../../js/libs/custom-elements.min.js"></script>
+       <script src="../../js/libs/lit-html.js"></script>
+       <!-- Required to polyfill modern browsers as code is ES5 for IE... -->
+       <script src="../../js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
+       <script src="../../js/menu-wc.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>