feat(code-flow): allow using implicit flow by setting useSilentRefresh to true

Author: manfredsteyer

projects/lib/src/auth.config.ts

@@ -231,6 +231,14 @@ export class AuthConfig {
   */
   public waitForTokenInMsec? = 0;
 
+  /**
+   * Set this to true if you want to use silent refresh together with
+   * code flow. As silent refresh is the only option for refreshing
+   * with implicit flow, you don't need to explicitly turn it on in
+   * this case.
+   */
+  public useSilentRefresh?;
+
   /**
    * 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.
@@ -252,4 +260,6 @@ export class AuthConfig {
   public openUri?: ((uri: string) => void) = uri => {
     location.href = uri;
   }
+
+
 }

projects/lib/src/oauth-service.ts

@@ -200,7 +200,7 @@ export class OAuthService extends AuthConfig implements OnDestroy {
 
     protected refreshInternal(params, noPrompt): Promise<TokenResponse | OAuthEvent> {
 
-        if (!this.silentRefreshRedirectUri && this.responseType === 'code') {
+        if (!this.useSilentRefresh && this.responseType === 'code') {
             return this.refreshToken();
         } else {
             return this.silentRefresh(params, noPrompt);

projects/sample/src/app/auth-code-flow.config.ts

@@ -1,5 +1,9 @@
 import { AuthConfig } from 'angular-oauth2-oidc';
 
+// Set this to true, to use silent refresh; otherwise the example
+// uses the refresh_token via an AJAX coll to get new tokens.
+const useSilentRefresh = false;
+
 export const authCodeFlowConfig: AuthConfig = {
   issuer: 'https://idsvr4.azurewebsites.net',
 
@@ -9,8 +13,6 @@ export const authCodeFlowConfig: AuthConfig = {
       ? '/#/index.html'
       : '/index.html'),
 
-  silentRefreshRedirectUri: `${window.location.origin}/silent-refresh.html`,
-
   // The SPA's id. The SPA is registerd with this id at the auth-server
   // clientId: 'server.code',
   clientId: 'spa',
@@ -27,16 +29,25 @@ export const authCodeFlowConfig: AuthConfig = {
   // 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',
+  scope: (useSilentRefresh) ? 
+    'openid profile email api' :  
+    'openid profile email offline_access api',
 
-  showDebugInformation: true,
+    // ^^ Please note that offline_access is not needed for silent refresh
+    // At least when using idsvr, this even prevents silent refresh
+    // as idsvr ALWAYS prompts the user for consent when this scope is
+    // requested
 
-  // If you specify this property, the lib tries to refresh the 
-  // token via a silet refresh; otherwise it sends over a refresh_token
-  // via an AJAX call to get new tokens.
-  silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
+  // This is needed for silent refresh (refreshing tokens w/o a refresh_token)
+  // **AND** for logging in with a popup
+  silentRefreshRedirectUri: 
+    `${window.location.origin}/silent-refresh.html`,
 
+  useSilentRefresh: useSilentRefresh,
 
-  timeoutFactor: 0.01
+  showDebugInformation: true,
+
+  timeoutFactor: 0.01,
   // disablePKCI: true,
+
 };

projects/sample/src/app/home/home.component.ts

@@ -9,6 +9,7 @@ import { authCodeFlowConfig } from '../auth-code-flow.config';
 export class HomeComponent implements OnInit {
   loginFailed: boolean = false;
   userProfile: object;
+  usePopup: boolean;
 
   constructor(private oauthService: OAuthService) {
   }
@@ -92,7 +93,7 @@ export class HomeComponent implements OnInit {
 
     this.oauthService.oidc = true;
 
-    if (!this.oauthService.silentRefreshRedirectUri && this.oauthService.responseType === 'code') {
+    if (!this.oauthService.useSilentRefresh && this.oauthService.responseType === 'code') {
       this.oauthService
         .refreshToken()
         .then(info => console.debug('refresh ok', info))