Version: 6.0

Popup vs. Current

Overview

When the application is running in a web context, Auth Connect provides two different options for presenting the authentication page: popup or current. Up to this point, we have been using popup. In this tutorial we will explore current.

`popup`

With popup, the authentication provider is opened in a new browser tab / window. This mode is the most consistent with how Auth Connect works on mobile where the authentication provider is displayed in a secure web view. On the web, this option requires no extra code, but it may not be the best user experience for web.

If your application is only distributed as a web-native mobile app, and the web-context is only used for development, then it is best to use popup.

`current`

With current, the authentication provider is opened in the current window, replacing your application. Your application will then be restarted with token information on the URL upon successful login. Since this is fundamentally different than the mobile implementation, it also means that special code is needed to handle it.

If your application is distributed in a web context, it is worth considering using current for an improved user experience.

General Strategy

When using popup, it is very common to have login logic such as the following in the component used for authentication:


_10async signinClicked() {
_10  try {
_10    await this.login();
_10    this.navController.navigateRoot('/');
_10  } catch (e) {
_10    this.loginFailed = true;
_10  }
_10}

With this code:

The login() method is called and Auth Connect opens the OIDC authentication provider in a new tab (web) or a secure web view (mobile).
Auth Connect listens for that tab or secure web view to close.
If the user successfully logs in:
- Auth Connect unpacks the data sent back when the tab or secure web view is closed and creates an AuthResult.
- Our login() stores the AuthResult and resolves.
If the user cancels the operation, our login() rejects with an error.

Since current only applies to the web, this code will still work like this on mobile. However, in a web context our app is completely replaced by the OIDC authentication provider's login page. As such, we are no longer awaiting the login and need to use a completely different mechanism to capture the authentication result when the app restarts.

On web, the flow becomes:

The login() is called and Auth Connect replaces the application with the OIDC authentication provider's login page.
The user logs in or cancels.
The application is restarted using the configured redirectUri.
In the case of a successful login, the authentication information will be included in the URL. It will need to be processed by our application.

In our case, the application is using the /auth-action-complete route. We can then use the page for that route to perform the following tasks:

Determine if the application is running on the web.
If so:
- Call a process that will examine the extra parameters for the URL.
  - If parameters exist, this was a successful login, and the parameters are used to construct an AuthResult which is stored in the session vault.
  - If parameters do not exist, this was a logout and the session vault is cleared.
- Continue navigation to the appropriate page within the application.

Let's Code

This tutorial builds upon the application created when doing the getting started tutorial and converts it from using popup to using current. If you have the code from when you performed that tutorial, then you are good to go. If you need the code you can make a copy from our GitHub repository.

The Typescript Configuration

In order for some of this code to compile we need to modify our Typescript configuration a little.

tsconfig.json


_30/* To learn more about this file see: https://angular.io/config/tsconfig. */
_30{
_30  "compileOnSave": false,
_30  "compilerOptions": {
_30    "lib": ["es2020", "dom", "dom.iterable"],

The Authentication Service

The first thing that needs to be done is to modify the Auth Connect configuration to use current mode on the web. A function is then created that handles the URL parameters when Auth Connect restarts our application after login or logout.

src/app/core/authentication.service.ts


_70import { Injectable } from '@angular/core';
_70import { Capacitor } from '@capacitor/core';
_70import { Auth0Provider, AuthConnect, AuthResult, ProviderOptions } from '@ionic-enterprise/auth';
_70import { SessionService } from './session.service';
_70
_70@Injectable({
_70  providedIn: 'root',
_70})
_70export class AuthenticationService {
_70  private authOptions: ProviderOptions;
_70  private provider: Auth0Provider;
_70
_70  constructor(private session: SessionService) {
_70    const isNative = Capacitor.isNativePlatform();
_70    this.provider = new Auth0Provider();
_70    this.authOptions = {
_70      audience: 'https://io.ionic.demo.ac',
_70      clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
_70      discoveryUrl: 'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
_70      logoutUrl: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_70      redirectUri: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_70      scope: 'openid offline_access email picture profile',
_70    };
_70  }
_70
_70  initialize(): Promise<void> {
_70    const isNative = Capacitor.isNativePlatform();
_70    return AuthConnect.setup({
_70      platform: isNative ? 'capacitor' : 'web',
_70      logLevel: 'DEBUG',
_70      ios: {
_70        webView: 'private',
_70      },
_70      web: {
_70        uiMode: 'popup',
_70        authFlow: 'PKCE',
_70      },
_70    });
_70  }
_70
_70  async isAuthenticated(): Promise<boolean> {
_70    const authResult = await this.getAuthResult();
_70    return !!authResult && (await AuthConnect.isAccessTokenAvailable(authResult));
_70  }
_70
_70  async login(): Promise<void> {
_70    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_70    this.saveAuthResult(authResult);
_70  }
_70
_70  async logout(): Promise<void> {
_70    const authResult = await this.getAuthResult();
_70    if (authResult) {
_70      await AuthConnect.logout(this.provider, authResult);
_70      this.saveAuthResult(null);
_70    }
_70  }
_70
_70  private async getAuthResult(): Promise<AuthResult | null> {
_70    return this.session.getSession();
_70  }
_70
_70  private async saveAuthResult(authResult: AuthResult | null): Promise<void> {
_70    if (authResult) {
_70      await this.session.setSession(authResult);
_70    } else {
_70      await this.session.clear();
_70    }
_70  }
_70}

Start by having a look at the current configuration that is used for our AuthConnect.setup() call. Note that it is using a uiMode of popup.

Also note the return URLs. The page(s) accessed by that route is where we need to eventually modify.

src/app/core/authentication.service.ts


_70import { Injectable } from '@angular/core';
_70import { Capacitor } from '@capacitor/core';
_70import { Auth0Provider, AuthConnect, AuthResult, ProviderOptions } from '@ionic-enterprise/auth';
_70import { SessionService } from './session.service';
_70
_70@Injectable({
_70  providedIn: 'root',
_70})
_70export class AuthenticationService {
_70  private authOptions: ProviderOptions;
_70  private provider: Auth0Provider;
_70
_70  constructor(private session: SessionService) {
_70    const isNative = Capacitor.isNativePlatform();
_70    this.provider = new Auth0Provider();
_70    this.authOptions = {
_70      audience: 'https://io.ionic.demo.ac',
_70      clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
_70      discoveryUrl: 'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
_70      logoutUrl: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_70      redirectUri: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_70      scope: 'openid offline_access email picture profile',
_70    };
_70  }
_70
_70  initialize(): Promise<void> {
_70    const isNative = Capacitor.isNativePlatform();
_70    return AuthConnect.setup({
_70      platform: isNative ? 'capacitor' : 'web',
_70      logLevel: 'DEBUG',
_70      ios: {
_70        webView: 'private',
_70      },
_70      web: {
_70        uiMode: 'current',
_70        authFlow: 'PKCE',
_70      },
_70    });
_70  }
_70
_70  async isAuthenticated(): Promise<boolean> {
_70    const authResult = await this.getAuthResult();
_70    return !!authResult && (await AuthConnect.isAccessTokenAvailable(authResult));
_70  }
_70
_70  async login(): Promise<void> {
_70    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_70    this.saveAuthResult(authResult);
_70  }
_70
_70  async logout(): Promise<void> {
_70    const authResult = await this.getAuthResult();
_70    if (authResult) {
_70      await AuthConnect.logout(this.provider, authResult);
_70      this.saveAuthResult(null);
_70    }
_70  }
_70
_70  private async getAuthResult(): Promise<AuthResult | null> {
_70    return this.session.getSession();
_70  }
_70
_70  private async saveAuthResult(authResult: AuthResult | null): Promise<void> {
_70    if (authResult) {
_70      await this.session.setSession(authResult);
_70    } else {
_70      await this.session.clear();
_70    }
_70  }
_70}

Change the uiMode to current.

src/app/core/authentication.service.ts


_74import { Injectable } from '@angular/core';
_74import { Capacitor } from '@capacitor/core';
_74import { Auth0Provider, AuthConnect, AuthResult, ProviderOptions } from '@ionic-enterprise/auth';
_74import { SessionService } from './session.service';
_74
_74@Injectable({
_74  providedIn: 'root',
_74})
_74export class AuthenticationService {
_74  private authOptions: ProviderOptions;
_74  private provider: Auth0Provider;
_74
_74  constructor(private session: SessionService) {
_74    const isNative = Capacitor.isNativePlatform();
_74    this.provider = new Auth0Provider();
_74    this.authOptions = {
_74      audience: 'https://io.ionic.demo.ac',
_74      clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
_74      discoveryUrl: 'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
_74      logoutUrl: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_74      redirectUri: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_74      scope: 'openid offline_access email picture profile',
_74    };
_74  }
_74
_74  initialize(): Promise<void> {
_74    const isNative = Capacitor.isNativePlatform();
_74    return AuthConnect.setup({
_74      platform: isNative ? 'capacitor' : 'web',
_74      logLevel: 'DEBUG',
_74      ios: {
_74        webView: 'private',
_74      },
_74      web: {
_74        uiMode: 'current',
_74        authFlow: 'PKCE',
_74      },
_74    });
_74  }
_74
_74  async handleAuthCallback(): Promise<void> {
_74    const params = new URLSearchParams(window.location.search);
_74  }
_74
_74  async isAuthenticated(): Promise<boolean> {
_74    const authResult = await this.getAuthResult();
_74    return !!authResult && (await AuthConnect.isAccessTokenAvailable(authResult));
_74  }
_74
_74  async login(): Promise<void> {
_74    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_74    this.saveAuthResult(authResult);
_74  }
_74
_74  async logout(): Promise<void> {
_74    const authResult = await this.getAuthResult();
_74    if (authResult) {
_74      await AuthConnect.logout(this.provider, authResult);
_74      this.saveAuthResult(null);
_74    }
_74  }
_74
_74  private async getAuthResult(): Promise<AuthResult | null> {
_74    return this.session.getSession();
_74  }
_74
_74  private async saveAuthResult(authResult: AuthResult | null): Promise<void> {
_74    if (authResult) {
_74      await this.session.setSession(authResult);
_74    } else {
_74      await this.session.clear();
_74    }
_74  }
_74}

Since we will be coming back into the app after login, we need a function to handle that. For now, just read the URL search parameters.

src/app/core/authentication.service.ts


_83import { Injectable } from '@angular/core';
_83import { Capacitor } from '@capacitor/core';
_83import { Auth0Provider, AuthConnect, AuthResult, ProviderOptions } from '@ionic-enterprise/auth';
_83import { SessionService } from './session.service';
_83
_83@Injectable({
_83  providedIn: 'root',
_83})
_83export class AuthenticationService {
_83  private authOptions: ProviderOptions;
_83  private provider: Auth0Provider;
_83
_83  constructor(private session: SessionService) {
_83    const isNative = Capacitor.isNativePlatform();
_83    this.provider = new Auth0Provider();
_83    this.authOptions = {
_83      audience: 'https://io.ionic.demo.ac',
_83      clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
_83      discoveryUrl: 'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
_83      logoutUrl: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_83      redirectUri: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_83      scope: 'openid offline_access email picture profile',
_83    };
_83  }
_83
_83  initialize(): Promise<void> {
_83    const isNative = Capacitor.isNativePlatform();
_83    return AuthConnect.setup({
_83      platform: isNative ? 'capacitor' : 'web',
_83      logLevel: 'DEBUG',
_83      ios: {
_83        webView: 'private',
_83      },
_83      web: {
_83        uiMode: 'current',
_83        authFlow: 'PKCE',
_83      },
_83    });
_83  }
_83
_83  async handleAuthCallback(): Promise<void> {
_83    const params = new URLSearchParams(window.location.search);
_83    let authResult = null;
_83    if (params.size > 0) {
_83      const queryEntries = Object.fromEntries(params.entries());
_83      authResult = await AuthConnect.handleLoginCallback(
_83        queryEntries,
_83        this.authOptions
_83      );
_83    }
_83    await this.saveAuthResult(authResult);
_83  }
_83
_83  async isAuthenticated(): Promise<boolean> {
_83    const authResult = await this.getAuthResult();
_83    return !!authResult && (await AuthConnect.isAccessTokenAvailable(authResult));
_83  }
_83
_83  async login(): Promise<void> {
_83    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_83    this.saveAuthResult(authResult);
_83  }
_83
_83  async logout(): Promise<void> {
_83    const authResult = await this.getAuthResult();
_83    if (authResult) {
_83      await AuthConnect.logout(this.provider, authResult);
_83      this.saveAuthResult(null);
_83    }
_83  }
_83
_83  private async getAuthResult(): Promise<AuthResult | null> {
_83    return this.session.getSession();
_83  }
_83
_83  private async saveAuthResult(authResult: AuthResult | null): Promise<void> {
_83    if (authResult) {
_83      await this.session.setSession(authResult);
_83    } else {
_83      await this.session.clear();
_83    }
_83  }
_83}

If search parameters are present, then this is the login returning. We package the data and send it to Auth Connect to process and create an AuthResult.

If there are no parameters, we will assume a logout and set the authResult to null.

Either way, we will save the current authResult.

Start by having a look at the current configuration that is used for our AuthConnect.setup() call. Note that it is using a uiMode of popup.

Also note the return URLs. The page(s) accessed by that route is where we need to eventually modify.

Change the uiMode to current.

Since we will be coming back into the app after login, we need a function to handle that. For now, just read the URL search parameters.

If search parameters are present, then this is the login returning. We package the data and send it to Auth Connect to process and create an AuthResult.

If there are no parameters, we will assume a logout and set the authResult to null.

Either way, we will save the current authResult.

src/app/core/authentication.service.ts


_70import { Injectable } from '@angular/core';
_70import { Capacitor } from '@capacitor/core';
_70import { Auth0Provider, AuthConnect, AuthResult, ProviderOptions } from '@ionic-enterprise/auth';
_70import { SessionService } from './session.service';
_70
_70@Injectable({
_70  providedIn: 'root',
_70})
_70export class AuthenticationService {
_70  private authOptions: ProviderOptions;
_70  private provider: Auth0Provider;
_70
_70  constructor(private session: SessionService) {
_70    const isNative = Capacitor.isNativePlatform();
_70    this.provider = new Auth0Provider();
_70    this.authOptions = {
_70      audience: 'https://io.ionic.demo.ac',
_70      clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
_70      discoveryUrl: 'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
_70      logoutUrl: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_70      redirectUri: isNative ? 'io.ionic.acdemo://auth-action-complete' : 'http://localhost:8100/auth-action-complete',
_70      scope: 'openid offline_access email picture profile',
_70    };
_70  }
_70
_70  initialize(): Promise<void> {
_70    const isNative = Capacitor.isNativePlatform();
_70    return AuthConnect.setup({
_70      platform: isNative ? 'capacitor' : 'web',
_70      logLevel: 'DEBUG',
_70      ios: {
_70        webView: 'private',
_70      },
_70      web: {
_70        uiMode: 'popup',
_70        authFlow: 'PKCE',
_70      },
_70    });
_70  }
_70
_70  async isAuthenticated(): Promise<boolean> {
_70    const authResult = await this.getAuthResult();
_70    return !!authResult && (await AuthConnect.isAccessTokenAvailable(authResult));
_70  }
_70
_70  async login(): Promise<void> {
_70    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_70    this.saveAuthResult(authResult);
_70  }
_70
_70  async logout(): Promise<void> {
_70    const authResult = await this.getAuthResult();
_70    if (authResult) {
_70      await AuthConnect.logout(this.provider, authResult);
_70      this.saveAuthResult(null);
_70    }
_70  }
_70
_70  private async getAuthResult(): Promise<AuthResult | null> {
_70    return this.session.getSession();
_70  }
_70
_70  private async saveAuthResult(authResult: AuthResult | null): Promise<void> {
_70    if (authResult) {
_70      await this.session.setSession(authResult);
_70    } else {
_70      await this.session.clear();
_70    }
_70  }
_70}

note

URLSearchParams.size is supported by all modern browsers. If you need to support older browsers, you can use Array.from(params.keys()).length in place of params.size.

Auth Action Completed Page

The Auth Connect configuration for the application redirects back into the application via the /auth-action-complete route. The code needs to determine if we are running in a web context, and if so:

Handle the authentication.
Route back to the root page.

src/app/auth-action-complete/auth-action-complete.ts

src/app/auth-action-complete/auth-action-complete.html


_13import { CommonModule } from '@angular/common';
_13import { Component } from '@angular/core';
_13import { FormsModule } from '@angular/forms';
_13import { IonContent } from '@ionic/angular/standalone';
_13
_13@Component({
_13  selector: 'app-auth-action-complete',
_13  templateUrl: './auth-action-complete.page.html',
_13  styleUrls: ['./auth-action-complete.page.scss'],
_13  standalone: true,
_13  imports: [CommonModule, FormsModule, IonContent],
_13})
_13export class AuthActionCompletePage {}

The AuthActionCompletePage currently just shows a blank page. No logic is in place.

src/app/auth-action-complete/auth-action-complete.ts

src/app/auth-action-complete/auth-action-complete.html


_19import { Capacitor } from '@capacitor/core';
_19import { CommonModule } from '@angular/common';
_19import { Component } from '@angular/core';
_19import { FormsModule } from '@angular/forms';
_19import { IonContent } from '@ionic/angular/standalone';
_19
_19@Component({
_19  selector: 'app-auth-action-complete',
_19  templateUrl: './auth-action-complete.page.html',
_19  styleUrls: ['./auth-action-complete.page.scss'],
_19  standalone: true,
_19  imports: [CommonModule, FormsModule, IonContent],
_19})
_19export class AuthActionCompletePage {
_19  async ionViewDidEnter() {
_19    if (!Capacitor.isNativePlatform()) {
_19    }
_19  }
_19}

Import Capacitor so the page can determine if it is running in a native context or not.

src/app/auth-action-complete/auth-action-complete.ts

src/app/auth-action-complete/auth-action-complete.html


_23import { Capacitor } from '@capacitor/core';
_23import { CommonModule } from '@angular/common';
_23import { Component } from '@angular/core';
_23import { FormsModule } from '@angular/forms';
_23import { IonContent } from '@ionic/angular/standalone';
_23import { AuthenticationService } from '../core/authentication.service';
_23
_23@Component({
_23  selector: 'app-auth-action-complete',
_23  templateUrl: './auth-action-complete.page.html',
_23  styleUrls: ['./auth-action-complete.page.scss'],
_23  standalone: true,
_23  imports: [CommonModule, FormsModule, IonContent],
_23})
_23export class AuthActionCompletePage {
_23  constructor(private auth: AuthenticationService) {}
_23
_23  async ionViewDidEnter() {
_23    if (!Capacitor.isNativePlatform()) {
_23      await this.auth.handleAuthCallback();
_23    }
_23  }
_23}

If the application is not running in a native context, handle the return from the OIDC authentication provider.

src/app/auth-action-complete/auth-action-complete.ts

src/app/auth-action-complete/auth-action-complete.html


_28import { Capacitor } from '@capacitor/core';
_28import { CommonModule } from '@angular/common';
_28import { Component } from '@angular/core';
_28import { FormsModule } from '@angular/forms';
_28import { IonContent, NavController } from '@ionic/angular/standalone';
_28import { AuthenticationService } from '../core/authentication.service';
_28
_28@Component({
_28  selector: 'app-auth-action-complete',
_28  templateUrl: './auth-action-complete.page.html',
_28  styleUrls: ['./auth-action-complete.page.scss'],
_28  standalone: true,
_28  imports: [CommonModule, FormsModule, IonContent],
_28})
_28export class AuthActionCompletePage {
_28  constructor(
_28    private auth: AuthenticationService,
_28    private navController: NavController,
_28  ) {}
_28
_28  async ionViewDidEnter() {
_28    if (!Capacitor.isNativePlatform()) {
_28      await this.auth.handleAuthCallback();
_28      this.navController.navigateRoot('/');
_28    }
_28  }
_28}
_28</style>

Once the URL has been handled, redirect to the root page.

The AuthActionCompletePage currently just shows a blank page. No logic is in place.

Import Capacitor so the page can determine if it is running in a native context or not.

If the application is not running in a native context, handle the return from the OIDC authentication provider.

Once the URL has been handled, redirect to the root page.

src/app/auth-action-complete/auth-action-complete.ts

src/app/auth-action-complete/auth-action-complete.html


_13import { CommonModule } from '@angular/common';
_13import { Component } from '@angular/core';
_13import { FormsModule } from '@angular/forms';
_13import { IonContent } from '@ionic/angular/standalone';
_13
_13@Component({
_13  selector: 'app-auth-action-complete',
_13  templateUrl: './auth-action-complete.page.html',
_13  styleUrls: ['./auth-action-complete.page.scss'],
_13  standalone: true,
_13  imports: [CommonModule, FormsModule, IonContent],
_13})
_13export class AuthActionCompletePage {}

Note: for this application, redirecting to the root page is the correct thing to do. In a more complex application, it may be more appropriate to check various states before determining the route. If so, such logic should be abstracted into a routing routine.

Next Steps

If you have not already done so, please see the following tutorials:

Happy coding!! 🤓

Overview​

popup​

current​

General Strategy​

Let's Code​

The Typescript Configuration​

The Authentication Service​

Auth Action Completed Page​

Next Steps​

Contents

Overview

`popup`

`current`

General Strategy

Let's Code

The Typescript Configuration

The Authentication Service

Auth Action Completed Page

Next Steps