Skip to main content
Version: 3.x

Web Configuration Options

When using Auth Connect in a web app, you have two options on how the login window will appear for your users. The window can either pop up in a new window/tab (known as "POPUP" mode), or it can occur in the current window ("CURRENT" mode).

Here's a visual comparison:

 

Popup mode will pop open a new window/tab to the authentication provider, and after the user authenticates, the window will close and the user will be back at your app.

Popup mode is the default, but you can explicitly specify it by setting the implicitLogin option to "POPUP" in the IonicAuthOptions configuraiton.

When using popup mode, you don't want to do any type of logic or page redirection in your redirectUri or logoutUrl pages. Once the user is done authenticating, the auth provider will redirect back to these pages, and Auth Connect will detect this and close the window.

Since these pages might briefly appear to your users, we recommend either keeping the page blank or have a simple branded page that they will see before the window closes.

Current Mode​

Current mode redirects the user to the authentication provider in their current window, so they will temporarily leave your app and be returned to the redirectUri after authentication is done.

To use current mode, set implicitLogin to "CURRENT" in the IonicAuthOptions configuration.

When using current mode, you need to finish handling the login/logout process in the redirectUri and logoutUrl pages. This is required because in current mode, the user leaves your app completely, and Auth Connect needs to know when the user is done authenticating. To do so, use the handleLoginCallback, and handleLogoutCallback methods respectively:


_10
await this.ionicAuth.handleLoginCallback();
_10
// User authed, so redirect to home page


_10
await this.ionicAuth.handleLogoutCallback();
_10
// User logged out, so redirect to login page

note

Web apps using the current mode need to implement callback handlers on login and logout

Testing Locally​

To test an Ionic app using Auth Connect locally, configure IonicAuthOptions to use http://localhost:8100/ as the base URL for properties such as redirectUri and logoutUrl. Then, run the ionic serve command.

Contents