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
When using popup mode, you don't want to do any type of logic or page redirection in your
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 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
When using current mode, you need to finish handling the login/logout process in the
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:
await this.ionicAuth.handleLoginCallback();// User authed, so redirect to home page
await this.ionicAuth.handleLogoutCallback();// User logged out, so redirect to login page
To test an Ionic app using Auth Connect locally, configure
IonicAuthOptions to use
http://localhost:8100/ as the base URL for properties such as
logoutUrl. Then, run the
ionic serve command.