PKCE + Token Refresh for code flow

Author: manfredsteyer

.vscode/settings.json

@@ -25,9 +25,12 @@
         "typescriptreact",
         "yml"
     ],
-    "spellright.language": "de",
+    "spellright.language": [
+        "en"
+    ],
     "spellright.documentTypes": [
         "latex",
-        "plaintext"
+        "plaintext",
+        "markdown"
     ]
 }

README.md

@@ -38,15 +38,17 @@ Successfully tested with **Angular 7** and its Router, PathLocationStrategy as w
 - Feel free to file pull requests
 - The closed issues contain some ideas for PRs and enhancements (see labels)
 - If you want to contribute to the docs, you can do so in the `docs-src` folder. Make sure you update `summary.json` as well. Then generate the docs with the following commands:
-```
-npm install -g @compodoc/compodoc
-npm run docs
-```
+
+  ```
+  npm install -g @compodoc/compodoc
+  npm run docs
+  ```
 
 # Features 
-- Logging in via OAuth2 and OpenId Connect (OIDC) Implicit Flow (where a user is redirected to Identity Provider)
+- Logging in via Implicit Flow (where a user is redirected to Identity Provider)
+- Logging in via Code Flow + PKCE
 - "Logging in" via Password Flow (where a user enters their password into the client)
-- Token Refresh for Password Flow by using a Refresh Token
+- Token Refresh for all supported flows
 - Automatically refreshing a token when/some time before it expires
 - Querying Userinfo Endpoint
 - Querying Discovery Document to ease configuration
@@ -130,7 +132,7 @@ export const authConfig: AuthConfig = {
 }
 ```
 
-Configure the OAuthService with this config object when the application starts up:
+Configure the ``OAuthService`` with this config object when the application starts up:
 
 ```TypeScript
 import { OAuthService } from 'angular-oauth2-oidc';
@@ -145,10 +147,10 @@ import { Component } from '@angular/core';
 export class AppComponent {
 
     constructor(private oauthService: OAuthService) {
-      this.configureWithNewConfigApi();
+      this.configure();
     }
 
-    private configureWithNewConfigApi() {
+    private configure() {
       this.oauthService.configure(authConfig);
       this.oauthService.tokenValidationHandler = new JwksValidationHandler();
       this.oauthService.loadDiscoveryDocumentAndTryLogin();
@@ -173,7 +175,7 @@ export class HomeComponent {
     }
 
     public login() {
-        this.oauthService.initImplicitFlow();
+        this.oauthService.initLoginFlow();
     }
 
     public logoff() {
@@ -237,7 +239,7 @@ If you need more versatility, you can look in the [documentation](https://manfre
 
 If you use the ``PathLocationStrategy`` (which is on by default) and have a general catch-all-route (``path: '**'``) you should be fine. Otherwise look up the section ``Routing with the HashStrategy`` in the [documentation](https://manfredsteyer.github.io/angular-oauth2-oidc/docs/).
 
-## More Documentation
+## More Documentation (!)
 
 See the [documentation](https://manfredsteyer.github.io/angular-oauth2-oidc/docs/) for more information about this library.
 

docs-src/code-flow.md

@@ -0,0 +1,64 @@
+# Code Flow
+
+Since Version 8, this library also supports code flow and [PKCE](https://tools.ietf.org/html/rfc7636) to align with the current draft of the [OAuth 2.0 Security Best Current Practice](https://tools.ietf.org/html/draft-ietf-oauth-security-topics-13) document. 
+
+
+To configure your solution for code flow + PKCE you have to set the ``responseType`` to ``code``:
+
+```typescript
+import { AuthConfig } from 'angular-oauth2-oidc';
+
+export const authCodeFlowConfig: AuthConfig = {
+  // Url of the Identity Provider
+  issuer: 'https://demo.identityserver.io',
+
+  // URL of the SPA to redirect the user to after login
+  redirectUri: window.location.origin + '/index.html',
+
+  // The SPA's id. The SPA is registerd with this id at the auth-server
+  // clientId: 'server.code',
+  clientId: 'spa',
+
+  // Just needed if your auth server demands a secret. In general, this
+  // is a sign that the auth server is not configured with SPAs in mind
+  // and it might not enforce further best practices vital for security
+  // such applications.
+  // dummyClientSecret: 'secret',
+
+  responseType: 'code',
+
+  // set the scope for the permissions the client should request
+  // The first four are defined by OIDC. 
+  // Important: Request offline_access to get a refresh token
+  // The api scope is a usecase specific one
+  scope: 'openid profile email offline_access api',
+
+  showDebugInformation: true,
+
+  // Not recommented:
+  // disablePKCI: true,
+};
+```
+
+After this, you can initialize the code flow using:
+
+```typescript
+this.oauthService.initCodeFlow();
+```
+
+There is also a convenience method ``initLoginFlow`` which initializes either the code flow or the implicit flow depending on your configuration. 
+
+```typescript
+this.oauthService.initLoginFlow();
+```
+
+Also -- as shown in the readme -- you have to execute the following code when bootstrapping to make the library to fetch the token:
+
+```typescript
+this.oauthService.configure(authCodeFlowConfig);
+this.oauthService.tokenValidationHandler = new JwksValidationHandler();
+this.oauthService.loadDiscoveryDocumentAndTryLogin();
+```
+
+
+

docs-src/silent-refresh.md

@@ -1,6 +1,27 @@
-# Refreshing a Token when using Implicit Flow (Silent Refresh)
+# Refreshing a Token 
 
-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.
+The strategy to use for refreshing your token differs between implicit flow and code flow. Hence, you find here one separate section for both of them.
+
+The last section shows how to automate refreshing for both flows.
+
+## Refreshing when using Code Flow (not Implicit Flow!)
+
+>> For refreshing a token with implicit flow, please see section below!
+
+When using code flow, you can get an ``refresh_token``. While the original standard DOES NOT allow this for SPAs, the mentioned document proposes to ease this limitation. However, it specifies a list of requirements one should take care about before using refresh_tokens. Please make sure you respect those requirements.
+
+Please also note, that you have to request the ``offline_access`` scope to get an refresh token.
+
+To refresh your token, just call the ``refresh`` method:
+
+```typescript
+this.oauthService.refresh();
+```
+
+
+## Refreshing when using Implicit Flow (not Code Flow!)
+
+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.
 
 To use this approach, setup a redirect uri for the silent refresh.
 
@@ -72,7 +93,8 @@ this
 
 When there is an error in the iframe that prevents the communication with the main application, silentRefresh will give you a timeout. To configure the timespan for this, you can set the property ``silentRefreshTimeout`` (msec). The default value is 20.000 (20 seconds).
 
-### Automatically refreshing a token when/ before it expires
+### Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
+
 
 To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService:
 

docs-src/summary.json

@@ -8,7 +8,11 @@
         "file": "preserving-state.md"
     },
     {
-        "title": "Refreshing a Token (Silent Refresh)",
+        "title": "Code Flow + PCKE",
+        "file": "code-flow.md"
+    },
+    {
+        "title": "Refreshing a Token",
         "file": "silent-refresh.md"
     },
     {

projects/lib/src/angular-oauth-oidic.module.ts

@@ -15,6 +15,8 @@ import { DefaultOAuthInterceptor } from './interceptors/default-oauth.intercepto
 import { ValidationHandler } from './token-validation/validation-handler';
 import { NullValidationHandler } from './token-validation/null-validation-handler';
 import { createDefaultLogger, createDefaultStorage } from './factories';
+import { CryptoHandler } from './token-validation/crypto-handler';
+import { JwksValidationHandler } from './token-validation/jwks-validation-handler';
 
 @NgModule({
   imports: [CommonModule],
@@ -34,6 +36,7 @@ export class OAuthModule {
         { provide: OAuthLogger, useFactory: createDefaultLogger },
         { provide: OAuthStorage, useFactory: createDefaultStorage },
         { provide: ValidationHandler, useClass: validationHandlerClass},
+        { provide: CryptoHandler, useClass: JwksValidationHandler },
         {
           provide: OAuthResourceServerErrorHandler,
           useClass: OAuthNoopResourceServerErrorHandler

projects/lib/src/auth.config.ts

@@ -221,6 +221,13 @@ export class AuthConfig {
    */
   public clockSkewInSec?: 600;
 
+  /**
+   * Code Flow is by defauld used together with PKCI which is also higly recommented.
+   * You can disbale it here by setting this flag to true.
+   * https://tools.ietf.org/html/rfc7636#section-1.1
+   */
+  public disablePKCE? = false;
+
   constructor(json?: Partial<AuthConfig>) {
     if (json) {
       Object.assign(this, json);

projects/lib/src/base64-helper.ts

@@ -11,3 +11,11 @@ export function b64DecodeUnicode(str) {
       .join('')
   );
 }
+
+export function base64UrlEncode(str): string {
+  const base64 = btoa(str);
+  return base64
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}