Version: 6.x

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 Authentication Composable

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  private isReady: Promise<void>;
_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    this.isReady = 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    await this.isReady;
_70    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_70    this.saveAuthResult(authResult);
_70  }
_70
_70  async logout(): Promise<void> {
_70    await this.isReady;
_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  private isReady: Promise<void>;
_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    this.isReady = 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    await this.isReady;
_70    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_70    this.saveAuthResult(authResult);
_70  }
_70
_70  async logout(): Promise<void> {
_70    await this.isReady;
_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


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

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

src/app/core/authentication.service.ts


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

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 wait for Auth Connect to be ready, then 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  private isReady: Promise<void>;
_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    this.isReady = 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    await this.isReady;
_70    const authResult = await AuthConnect.login(this.provider, this.authOptions);
_70    this.saveAuthResult(authResult);
_70  }
_70
_70  async logout(): Promise<void> {
_70    await this.isReady;
_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}

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.html


_26<ion-content class="main-content">
_26  <div class="container">
_26    <ion-spinner name="dots"></ion-spinner>
_26  </div>
_26</ion-content>
_26
_26<script setup lang="ts">
_26import { IonContent, IonSpinner } from '@ionic/angular';
_26export class AuthActionCompletePage implements OnInit {
_26  constructor(){}
_26  ngOnInit() {
_26  }
_26}
_26</script>
_26
_26<style scoped>
_26.container {
_26  text-align: center;
_26
_26  position: absolute;
_26  left: 0;
_26  right: 0;
_26  top: 50%;
_26  transform: translateY(-50%);
_26}
_26</style>

The AuthActionCompletePage currently just contains markup to show a spinner. No logic is in place.

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


_31<ion-content class="main-content">
_31  <div class="container">
_31    <ion-spinner name="dots"></ion-spinner>
_31  </div>
_31</ion-content>
_31
_31<script setup lang="ts">
_31import { Capacitor } from '@capacitor/core';
_31import { IonContent, IonSpinner } from '@ionic/angular';
_31export class AuthActionCompletePage implements OnInit {
_31  constructor(){}
_31  ngOnInit() {
_31  }
_31}
_31async ionViewDidEnter() {
_31  if (!Capacitor.isNativePlatform()) {
_31  }
_31}
_31</script>
_31
_31<style scoped>
_31.container {
_31  text-align: center;
_31
_31  position: absolute;
_31  left: 0;
_31  right: 0;
_31  top: 50%;
_31  transform: translateY(-50%);
_31}
_31</style>

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.html


_35<ion-content class="main-content">
_35  <div class="container">
_35    <ion-spinner name="dots"></ion-spinner>
_35  </div>
_35</ion-content>
_35
_35<script setup lang="ts">
_35import { Capacitor } from '@capacitor/core';
_35import { IonContent, IonSpinner } from '@ionic/angular';
_35import { AuthenticationService } from 'src/app/services/authentication.service';
_35export class AuthActionCompletePage implements OnInit {
_35  constructor(
_35    private auth: AuthenticationService
_35    ){}
_35  ngOnInit() {
_35  }
_35}
_35async ionViewDidEnter() {
_35  if (!Capacitor.isNativePlatform()) {
_35    await this.auth.handleAuthCallback();
_35  }
_35}
_35</script>
_35
_35<style scoped>
_35.container {
_35  text-align: center;
_35
_35  position: absolute;
_35  left: 0;
_35  right: 0;
_35  top: 50%;
_35  transform: translateY(-50%);
_35}
_35</style>

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.html


_38<ion-content class="main-content">
_38  <div class="container">
_38    <ion-spinner name="dots"></ion-spinner>
_38  </div>
_38</ion-content>
_38
_38<script setup lang="ts">
_38import { Capacitor } from '@capacitor/core';
_38import { IonContent, IonSpinner } from '@ionic/angular';
_38import { AuthenticationService } from 'src/app/services/authentication.service';
_38import { NavController } from '@ionic/angular';
_38export class AuthActionCompletePage implements OnInit {
_38  constructor(
_38    private navController: NavController,
_38    private auth: AuthenticationService
_38    ){}
_38  ngOnInit() {
_38  }
_38}
_38async ionViewDidEnter() {
_38  if (!Capacitor.isNativePlatform()) {
_38    await this.auth.handleAuthCallback();
_38    this.navController.navigateRoot('/');
_38  }
_38}
_38</script>
_38
_38<style scoped>
_38.container {
_38  text-align: center;
_38
_38  position: absolute;
_38  left: 0;
_38  right: 0;
_38  top: 50%;
_38  transform: translateY(-50%);
_38}
_38</style>

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

The AuthActionCompletePage currently just contains markup to show a spinner. 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.html


_26<ion-content class="main-content">
_26  <div class="container">
_26    <ion-spinner name="dots"></ion-spinner>
_26  </div>
_26</ion-content>
_26
_26<script setup lang="ts">
_26import { IonContent, IonSpinner } from '@ionic/angular';
_26export class AuthActionCompletePage implements OnInit {
_26  constructor(){}
_26  ngOnInit() {
_26  }
_26}
_26</script>
_26
_26<style scoped>
_26.container {
_26  text-align: center;
_26
_26  position: absolute;
_26  left: 0;
_26  right: 0;
_26  top: 50%;
_26  transform: translateY(-50%);
_26}
_26</style>

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 Authentication Composable​

Auth Action Completed Page​

Next Steps​

Contents

Overview

`popup`

`current`

General Strategy

Let's Code

The Authentication Composable

Auth Action Completed Page

Next Steps