Merge pull request #35 from jeroenheijmans/34-iframe-silent-refresh-for-code-flow

jeroenheijmans · web-flow · commit aa3ea0150dc7 · 2020-03-29T14:52:40.000+02:00
Workaround for iframe based silent refresh for code flow
diff --git a/src/app/core/auth-config.ts b/src/app/core/auth-config.ts
@@ -6,7 +6,7 @@ export const authConfig: AuthConfig = {
   responseType: 'code',
   redirectUri: window.location.origin + '/index.html',
   silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
-  scope: 'openid profile email offline_access api',
+  scope: 'openid profile email api', // Ask offline_access to support refresh token refreshes
   silentRefreshTimeout: 5000, // For faster testing
   timeoutFactor: 0.25, // For faster testing
   sessionChecksEnabled: true,
diff --git a/src/app/core/auth.service.ts b/src/app/core/auth.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { OAuthErrorEvent, OAuthService } from 'angular-oauth2-oidc';
+import { OAuthErrorEvent, OAuthService, OAuthEvent, TokenResponse } from 'angular-oauth2-oidc';
 import { BehaviorSubject, combineLatest, Observable, ReplaySubject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
@@ -76,10 +76,6 @@ export class AuthService {
       .pipe(filter(e => ['session_terminated', 'session_error'].includes(e.type)))
       .subscribe(e => this.navigateToLoginPage());
 
-    // This *does* work with v9.0.0 as it detects code+pkce flow and sets up
-    // refreshToken() calls that require offline_access, instead of actually
-    // calling silentRefresh, which would fail because of this issue:
-    // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/600
     this.oauthService.setupAutomaticSilentRefresh();
   }
 
@@ -110,7 +106,7 @@ export class AuthService {
         // 2. SILENT LOGIN:
         // Try to log in via a refresh because then we can prevent
         // needing to redirect the user:
-        return this.startWithRefresh()
+        return this.tryNoPromptRefresh()
           .then(() => Promise.resolve())
           .catch(result => {
             // Subset of situations from https://openid.net/specs/openid-connect-core-1_0.html#AuthError
@@ -164,15 +160,14 @@ export class AuthService {
       .catch(() => this.isDoneLoadingSubject$.next(true));
   }
 
-  private startWithRefresh() {
+  private tryNoPromptRefresh(): Promise<TokenResponse | OAuthEvent> {
     if (this.oauthService.getRefreshToken()) {
       console.log('Found a refresh token, trying to use it.');
       return this.oauthService.refreshToken();
     }
 
-    // No silent refresh via iframe is supported for code flow yet.
-    // See also: https://github.com/manfredsteyer/angular-oauth2-oidc/issues/600
-    return Promise.reject();
+    console.log('Found no refresh token, trying iframe based refresh');
+    return this.oauthService.silentRefresh();
   }
 
   public login(targetUrl?: string) {
@@ -182,13 +177,7 @@ export class AuthService {
   }
 
   public logout() { this.oauthService.logOut(); }
-  public refresh() {
-    // Silent refresh via iframe is not supported (yet?) for the code+pkce flow.
-    // See also: https://github.com/manfredsteyer/angular-oauth2-oidc/issues/600
-    // this.oauthService.silentRefresh();
-    // So for now we do this instead:
-    this.oauthService.refreshToken();
-  }
+  public refresh() { this.tryNoPromptRefresh(); }
   public hasValidToken() { return this.oauthService.hasValidAccessToken(); }
 
   // These normally won't be exposed from a service like this, but
diff --git a/src/silent-refresh.html b/src/silent-refresh.html
@@ -2,7 +2,19 @@
 <html>
 <body>
     <script>
-    parent.postMessage(location.hash, location.origin);
+      console.log("The silent-refresh.html file was loaded and now posting to the parent.");
+
+      // For code flow with IdentityServer4 the redirect will contain the new code in
+      // the location.search. However, the oauth library expects it in the hash fragment
+      // so we need to "fake" that.
+      //
+      // We can't just set `silentRefreshMessagePrefix` on AuthConfig, because the normal
+      // redirect after interactive login *does* use the hash fragment, so we'd break that.
+      //
+      // See also: https://github.com/manfredsteyer/angular-oauth2-oidc/issues/777
+      const fakeHashFragment = location.search.replace(/^\?/, "#");
+
+      parent.postMessage(fakeHashFragment, location.origin);
     </script>
 </body>
 </html>
