Skip to main content
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.

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:


_10
const signinClicked = async () => {
_10
try {
_10
await login();
_10
router.replace('/');
_10
} catch (e) {
_10
loginFailed.value = true;
_10
}
_10
};

With this code:

  • The login() 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/composables/authentication.ts

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

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/composables/authentication.ts

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

Change the uiMode to current.

src/composables/authentication.ts

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

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/composables/authentication.ts

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

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/composables/authentication.ts

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

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/views/AuthActionCompletePage.vue

_23
<template>
_23
<ion-content class="main-content">
_23
<div class="container">
_23
<ion-spinner name="dots"></ion-spinner>
_23
</div>
_23
</ion-content>
_23
</template>
_23
_23
<script setup lang="ts">
_23
import { IonContent, IonSpinner } from '@ionic/vue';
_23
</script>
_23
_23
<style scoped>
_23
.container {
_23
text-align: center;
_23
_23
position: absolute;
_23
left: 0;
_23
right: 0;
_23
top: 50%;
_23
transform: translateY(-50%);
_23
}
_23
</style>

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

src/views/AuthActionCompletePage.vue

_27
<template>
_27
<ion-content class="main-content">
_27
<div class="container">
_27
<ion-spinner name="dots"></ion-spinner>
_27
</div>
_27
</ion-content>
_27
</template>
_27
_27
<script setup lang="ts">
_27
import { Capacitor } from '@capacitor/core';
_27
import { IonContent, IonSpinner } from '@ionic/vue';
_27
_27
if (!Capacitor.isNativePlatform())) {
_27
}
_27
</script>
_27
_27
<style scoped>
_27
.container {
_27
text-align: center;
_27
_27
position: absolute;
_27
left: 0;
_27
right: 0;
_27
top: 50%;
_27
transform: translateY(-50%);
_27
}
_27
</style>

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

src/views/AuthActionCompletePage.vue

_30
<template>
_30
<ion-content class="main-content">
_30
<div class="container">
_30
<ion-spinner name="dots"></ion-spinner>
_30
</div>
_30
</ion-content>
_30
</template>
_30
_30
<script setup lang="ts">
_30
import { Capacitor } from '@capacitor/core';
_30
import { IonContent, IonSpinner } from '@ionic/vue';
_30
import { useAuthentication } from '@/composables/authentication'
_30
_30
if (!Capacitor.isNativePlatform())) {
_30
const { handleLoginReturn } = useAuthentication();
_30
handleLoginReturn();
_30
}
_30
</script>
_30
_30
<style scoped>
_30
.container {
_30
text-align: center;
_30
_30
position: absolute;
_30
left: 0;
_30
right: 0;
_30
top: 50%;
_30
transform: translateY(-50%);
_30
}
_30
</style>

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

src/views/AuthActionCompletePage.vue

_32
<template>
_32
<ion-content class="main-content">
_32
<div class="container">
_32
<ion-spinner name="dots"></ion-spinner>
_32
</div>
_32
</ion-content>
_32
</template>
_32
_32
<script setup lang="ts">
_32
import { Capacitor } from '@capacitor/core';
_32
import { useRouter } from 'vue-router';
_32
import { IonContent, IonSpinner } from '@ionic/vue';
_32
import { useAuthentication } from '@/composables/authentication'
_32
_32
if (!Capacitor.isNativePlatform())) {
_32
const { handleLoginReturn } = useAuthentication();
_32
const router = useRouter();
_32
handleLoginReturn().then(() => router.replace('/'));
_32
}
_32
</script>
_32
_32
<style scoped>
_32
.container {
_32
text-align: center;
_32
_32
position: absolute;
_32
left: 0;
_32
right: 0;
_32
top: 50%;
_32
transform: translateY(-50%);
_32
}
_32
</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/views/AuthActionCompletePage.vue

_23
<template>
_23
<ion-content class="main-content">
_23
<div class="container">
_23
<ion-spinner name="dots"></ion-spinner>
_23
</div>
_23
</ion-content>
_23
</template>
_23
_23
<script setup lang="ts">
_23
import { IonContent, IonSpinner } from '@ionic/vue';
_23
</script>
_23
_23
<style scoped>
_23
.container {
_23
text-align: center;
_23
_23
position: absolute;
_23
left: 0;
_23
right: 0;
_23
top: 50%;
_23
transform: translateY(-50%);
_23
}
_23
</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!! 🤓