Skip to content

Commit 8d152c2

Browse files
manfredsteyermanfredsteyer
committed
docs: auth0 support
1 parent 75b0376 commit 8d152c2

File tree

16 files changed

+568
-7
lines changed

16 files changed

+568
-7
lines changed

‎README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Support for OAuth 2 and OpenId Connect (OIDC) in Angular. Already prepared for t
99
- [jsrasign](https://kjur.github.io/jsrsasign/) for validating token signature and for hashing
1010
- [Identity Server](https://github.com/identityserver) for testing with an .NET/.NET Core Backend
1111
- [Keycloak (Redhat)](http://www.keycloak.org/) for testing with Java
12+
- [Auth0](https://auth0.com/)
1213

1314
## Resources
1415

@@ -47,7 +48,9 @@ Now the reverse is true **if you're upgrading from before 9.0.0**: you need to r
4748

4849
## Tested Environment
4950

50-
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).
51+
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.
52+
53+
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.
5154

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

‎docs-src/authsvr-auth0.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Using Auth0
2+
3+
To use this lib with Auth0, open your Auth0 account and configure:
4+
5+
- An app
6+
- An API
7+
8+
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.
9+
10+
## Configuration
11+
12+
Provide a configuration like this:
13+
14+
```typescript
15+
import { AuthConfig } from 'angular-oauth2-oidc';
16+
17+
export const authConfig: AuthConfig = {
18+
19+
issuer: 'https://dev-g-61sdfs.eu.auth0.com/',
20+
21+
// Your app's client id:
22+
clientId: 'opHt1Tkt9E9fVQTZPBVF1tHVhjrxvyVX',
23+
redirectUri: window.location.origin,
24+
25+
scope: 'openid profile email offline_access',
26+
27+
responseType: 'code',
28+
29+
logoutUrl: 'https://dev-g-61sdfs.eu.auth0.com/v2/logout',
30+
31+
customQueryParams: {
32+
// Your API's name
33+
audience: 'http://www.angular.at/api'
34+
},
35+
};
36+
```
37+
38+
## Getting, Using, and Refreshing a Token
39+
40+
This should work as shown in the other examples in this documentation and in the readme file.
41+
42+
## Logging out
43+
44+
Auth0's logout endpoint expects the parameters ``client_id and ``returnTo``:
45+
46+
```typescript
47+
this.oauthService.revokeTokenAndLogout({
48+
client_id: this.oauthService.clientId,
49+
returnTo: this.oauthService.redirectUri
50+
}, true);
51+
```
52+
53+
The optional 2nd parameter set to ``true`` ignores CORS issues with the logout endpoint.
54+
55+
## Example
56+
57+
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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Using Identity Server
2+
3+
This lib should work as shown in all examples here with Identity Server.

‎docs-src/authsvr-keycloak.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Using Keycloak
2+
3+
This lib should work as shown in all examples here with Keycloak.

‎docs-src/authsvr.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Support for Auth Servers
2+
3+
As this lib follows the OAuth2 and OpenId Connect specs, it should work with all compliant authorizations servers.
4+
5+
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

+18
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,24 @@
8383
{
8484
"title": "Original Config API",
8585
"file": "implicit-flow-config-discovery.md"
86+
},
87+
{
88+
"title": "Authorization Servers",
89+
"file": "authsvr.md",
90+
"children": [
91+
{
92+
"title": "Using Identity Server",
93+
"file": "authsvr-idsvr.md"
94+
},
95+
{
96+
"title": "Using Keycloak",
97+
"file": "authsvr-keycloak.md"
98+
},
99+
{
100+
"title": "Auth0",
101+
"file": "authsvr-auth0.md"
102+
}
103+
]
86104
}
87105

88106
]

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

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>angular-oauth2-oidc</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
10+
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
11+
<link rel="stylesheet" href="../styles/style.css">
12+
</head>
13+
<body>
14+
15+
<div class="navbar navbar-default navbar-fixed-top visible-xs">
16+
<a href="../" class="navbar-brand">angular-oauth2-oidc</a>
17+
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
18+
</div>
19+
20+
<div class="xs-menu menu" id="mobile-menu">
21+
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
22+
</div>
23+
24+
<div class="container-fluid main">
25+
<div class="row main">
26+
<div class="hidden-xs menu">
27+
<compodoc-menu mode="normal"></compodoc-menu>
28+
</div>
29+
<!-- START CONTENT -->
30+
<div class="content additional-page">
31+
<div class="content-data">
32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
<h1 id="support-for-auth-servers">Support for Auth Servers</h1>
52+
<p>As this lib follows the OAuth2 and OpenId Connect specs, it should work with all compliant authorizations servers.</p>
53+
<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>
54+
55+
</div><div class="search-results">
56+
<div class="has-results">
57+
<h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
58+
<ul class="search-results-list"></ul>
59+
</div>
60+
<div class="no-results">
61+
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
62+
</div>
63+
</div>
64+
</div>
65+
<!-- END CONTENT -->
66+
</div>
67+
</div>
68+
69+
<script>
70+
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
71+
var COMPODOC_CURRENT_PAGE_CONTEXT = 'additional-page';
72+
var COMPODOC_CURRENT_PAGE_URL = 'authorization-servers.html';
73+
var MAX_SEARCH_RESULTS = 15;
74+
</script>
75+
76+
<script src="../js/libs/custom-elements.min.js"></script>
77+
<script src="../js/libs/lit-html.js"></script>
78+
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
79+
<script src="../js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
80+
<script src="../js/menu-wc.js" defer></script>
81+
82+
<script src="../js/libs/bootstrap-native.js"></script>
83+
84+
<script src="../js/libs/es6-shim.min.js"></script>
85+
<script src="../js/libs/EventDispatcher.js"></script>
86+
<script src="../js/libs/promise.min.js"></script>
87+
<script src="../js/libs/zepto.min.js"></script>
88+
89+
<script src="../js/compodoc.js"></script>
90+
91+
<script src="../js/tabs.js"></script>
92+
<script src="../js/menu.js"></script>
93+
<script src="../js/libs/clipboard.min.js"></script>
94+
<script src="../js/libs/prism.js"></script>
95+
<script src="../js/sourceCode.js"></script>
96+
<script src="../js/search/search.js"></script>
97+
<script src="../js/search/lunr.min.js"></script>
98+
<script src="../js/search/search-lunr.js"></script>
99+
<script src="../js/search/search_index.js"></script>
100+
<script src="../js/lazy-load-graphs.js"></script>
101+
102+
103+
</body>
104+
</html>

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

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>angular-oauth2-oidc</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
10+
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
11+
<link rel="stylesheet" href="../../styles/style.css">
12+
</head>
13+
<body>
14+
15+
<div class="navbar navbar-default navbar-fixed-top visible-xs">
16+
<a href="../../" class="navbar-brand">angular-oauth2-oidc</a>
17+
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
18+
</div>
19+
20+
<div class="xs-menu menu" id="mobile-menu">
21+
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
22+
</div>
23+
24+
<div class="container-fluid main">
25+
<div class="row main">
26+
<div class="hidden-xs menu">
27+
<compodoc-menu mode="normal"></compodoc-menu>
28+
</div>
29+
<!-- START CONTENT -->
30+
<div class="content additional-page">
31+
<div class="content-data">
32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
<h1 id="using-auth0">Using Auth0</h1>
52+
<p>To use this lib with Auth0, open your Auth0 account and configure:</p>
53+
<ul>
54+
<li>An app </li>
55+
<li>An API</li>
56+
</ul>
57+
<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>
58+
<h2 id="configuration">Configuration</h2>
59+
<p>Provide a configuration like this:</p>
60+
<div><pre class="line-numbers"><code class="language-typescript">import { AuthConfig } from &#39;angular-oauth2-oidc&#39;;
61+
62+
export const authConfig: AuthConfig = {
63+
64+
issuer: &#39;https://dev-g-61sdfs.eu.auth0.com/&#39;,
65+
66+
// Your app&#39;s client id:
67+
clientId: &#39;opHt1Tkt9E9fVQTZPBVF1tHVhjrxvyVX&#39;,
68+
redirectUri: window.location.origin,
69+
70+
scope: &#39;openid profile email offline_access&#39;,
71+
72+
responseType: &#39;code&#39;,
73+
74+
logoutUrl: &#39;https://dev-g-61sdfs.eu.auth0.com/v2/logout&#39;,
75+
76+
customQueryParams: {
77+
// Your API&#39;s name
78+
audience: &#39;http://www.angular.at/api&#39;
79+
},
80+
};</code></pre></div><h2 id="getting-using-and-refreshing-a-token">Getting, Using, and Refreshing a Token</h2>
81+
<p>This should work as shown in the other examples in this documentation and in the readme file.</p>
82+
<h2 id="logging-out">Logging out</h2>
83+
<p>Auth0&#39;s logout endpoint expects the parameters <code>client_id and</code>returnTo``:</p>
84+
<div><pre class="line-numbers"><code class="language-typescript">this.oauthService.revokeTokenAndLogout({
85+
client_id: this.oauthService.clientId,
86+
returnTo: this.oauthService.redirectUri
87+
}, true);</code></pre></div><p>The optional 2nd parameter set to <code>true</code> ignores CORS issues with the logout endpoint.</p>
88+
<h2 id="example">Example</h2>
89+
<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>
90+
91+
</div><div class="search-results">
92+
<div class="has-results">
93+
<h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
94+
<ul class="search-results-list"></ul>
95+
</div>
96+
<div class="no-results">
97+
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
98+
</div>
99+
</div>
100+
</div>
101+
<!-- END CONTENT -->
102+
</div>
103+
</div>
104+
105+
<script>
106+
var COMPODOC_CURRENT_PAGE_DEPTH = 2;
107+
var COMPODOC_CURRENT_PAGE_CONTEXT = 'additional-page';
108+
var COMPODOC_CURRENT_PAGE_URL = 'auth0.html';
109+
var MAX_SEARCH_RESULTS = 15;
110+
</script>
111+
112+
<script src="../../js/libs/custom-elements.min.js"></script>
113+
<script src="../../js/libs/lit-html.js"></script>
114+
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
115+
<script src="../../js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
116+
<script src="../../js/menu-wc.js" defer></script>
117+
118+
<script src="../../js/libs/bootstrap-native.js"></script>
119+
120+
<script src="../../js/libs/es6-shim.min.js"></script>
121+
<script src="../../js/libs/EventDispatcher.js"></script>
122+
<script src="../../js/libs/promise.min.js"></script>
123+
<script src="../../js/libs/zepto.min.js"></script>
124+
125+
<script src="../../js/compodoc.js"></script>
126+
127+
<script src="../../js/tabs.js"></script>
128+
<script src="../../js/menu.js"></script>
129+
<script src="../../js/libs/clipboard.min.js"></script>
130+
<script src="../../js/libs/prism.js"></script>
131+
<script src="../../js/sourceCode.js"></script>
132+
<script src="../../js/search/search.js"></script>
133+
<script src="../../js/search/lunr.min.js"></script>
134+
<script src="../../js/search/search-lunr.js"></script>
135+
<script src="../../js/search/search_index.js"></script>
136+
<script src="../../js/lazy-load-graphs.js"></script>
137+
138+
139+
</body>
140+
</html>

0 commit comments

Comments
 (0)