Alternative to the Ionic Auth Connect Plugin¶
Need SSO authentication in your Capacitor app? With Ionic discontinuing their commercial Auth Connect plugin, many developers are searching for a reliable replacement. The Capawesome OAuth plugin provides a modern, production-ready alternative that supports OAuth 2.0 and OpenID Connect with PKCE across Android, iOS, and Web.
Introduction¶
Ionic Auth Connect has been a popular choice for adding OAuth and OpenID Connect authentication to Capacitor apps. It handled login flows, token management, and session handling across platforms. However, following Ionic's acquisition by OutSystems and the decision to wind down their commercial products, developers need to find an alternative that keeps their apps running and their auth flows secure.
The Capawesome OAuth plugin fills this gap. It implements the OAuth 2.0 Authorization Code flow with PKCE, supports automatic OpenID Connect discovery, and works with any compliant provider — including Auth0, Azure AD, Amazon Cognito, Okta, OneLogin, and Google.
Feature Comparison¶
Here's how the two plugins stack up:
| Feature | Ionic Auth Connect | Capawesome OAuth |
|---|---|---|
| OAuth 2.0 Authorization Code + PKCE | Yes | Yes |
| OpenID Connect support | Yes | Yes |
| Automatic endpoint discovery | Yes | Yes |
| Token refresh | Yes | Yes |
| ID token decoding | Yes | Yes |
| Access token expiration check | Yes | Yes |
| Multi-provider support | Yes | Yes |
| Android support | Yes | Yes |
| iOS support | Yes | Yes |
| Web support | Yes | Yes |
| Secure token storage | Separate plugin | Works with Secure Preferences |
| Actively maintained | No (discontinued) | Yes |
The Capawesome OAuth plugin covers the core authentication functionality most teams need, with a clean API and active maintenance.
Migration from Auth Connect¶
Migrating from Ionic Auth Connect to the Capawesome OAuth plugin is straightforward. The following sections walk through each common operation with side-by-side code examples.
Installation¶
Begin by removing the existing Auth Connect dependency and installing the Capawesome alternative, if you haven't already. To install the Capawesome OAuth plugin, please refer to the Installation section in the plugin documentation.
Setup¶
Auth Connect requires an explicit setup step before use. The Capawesome OAuth plugin doesn't need any upfront configuration — you pass all required options directly to each method call.
Ionic Auth Connect:
import { AuthConnect, ProviderOptions } from '@ionic-enterprise/auth';
const setup = async () => {
await AuthConnect.setup({
platform: 'capacitor',
logLevel: 'DEBUG',
ios: { webView: 'private' },
web: { uiMode: 'popup', authFlow: 'PKCE' },
});
};
Capawesome OAuth:
Logging in¶
Both plugins initiate an OAuth flow, but the API differs. With the Capawesome OAuth plugin, you pass the provider configuration directly to the login(...) method.
Ionic Auth Connect:
import { AuthConnect, Auth0Provider } from '@ionic-enterprise/auth';
const login = async () => {
const provider = new Auth0Provider();
const result = await AuthConnect.login(provider, {
audience: 'https://api.example.com',
clientId: 'YOUR_CLIENT_ID',
discoveryUrl: 'https://example.auth0.com/.well-known/openid-configuration',
redirectUri: 'com.example.app://callback',
scope: 'openid profile email offline_access',
logoutUrl: 'com.example.app://logout',
});
return result;
};
Capawesome OAuth:
import { Oauth } from '@capawesome-team/capacitor-oauth';
const login = async () => {
const result = await Oauth.login({
issuerUrl: 'https://example.auth0.com',
clientId: 'YOUR_CLIENT_ID',
redirectUrl: 'com.example.app://oauth/callback',
scopes: ['openid', 'profile', 'email', 'offline_access'],
additionalParameters: { audience: 'https://api.example.com' },
});
return result;
};
A few key differences to note:
- Provider configuration: Auth Connect uses provider-specific classes (e.g.,
Auth0Provider). The Capawesome plugin uses a single, universal API for all providers. - Discovery: Auth Connect requires the full discovery URL. The Capawesome plugin only needs the issuer URL and resolves the discovery document automatically.
- Scopes: Auth Connect takes a space-delimited string, while the Capawesome plugin takes an array.
Handling the redirect callback¶
On the web platform, Auth Connect provides a handleLoginCallback method. The Capawesome OAuth plugin has an equivalent handleRedirectCallback() method.
Ionic Auth Connect:
import { AuthConnect } from '@ionic-enterprise/auth';
const handleCallback = async () => {
const result = await AuthConnect.handleLoginCallback(window.location.href);
return result;
};
Capawesome OAuth:
import { Oauth } from '@capawesome-team/capacitor-oauth';
const handleCallback = async () => {
const result = await Oauth.handleRedirectCallback();
return result;
};
This step is only required on the web. On Android and iOS, the redirect is handled natively.
Refreshing tokens¶
Token refresh follows a similar pattern. Auth Connect uses a combined AuthResult object, while the Capawesome plugin takes individual parameters.
Ionic Auth Connect:
import { AuthConnect, Auth0Provider } from '@ionic-enterprise/auth';
const refreshSession = async (authResult) => {
const provider = new Auth0Provider();
const newResult = await AuthConnect.refreshSession(provider, authResult);
return newResult;
};
Capawesome OAuth:
import { Oauth } from '@capawesome-team/capacitor-oauth';
const refreshToken = async (refreshToken: string) => {
const result = await Oauth.refreshToken({
issuerUrl: 'https://example.auth0.com',
clientId: 'YOUR_CLIENT_ID',
refreshToken,
});
return result;
};
Checking token state¶
Both plugins provide utility methods for checking token availability and expiration.
Ionic Auth Connect:
import { AuthConnect } from '@ionic-enterprise/auth';
const checkTokenState = async (authResult) => {
const isExpired = await AuthConnect.isAccessTokenExpired(authResult);
const isAvailable = await AuthConnect.isAccessTokenAvailable(authResult);
const isRefreshAvailable = await AuthConnect.isRefreshTokenAvailable(authResult);
};
Capawesome OAuth:
import { Oauth } from '@capawesome-team/capacitor-oauth';
const checkTokenState = async (
accessToken: string,
accessTokenExpirationDate: number,
refreshToken: string
) => {
const { isExpired } = await Oauth.isAccessTokenExpired({
accessTokenExpirationDate,
});
const { isAvailable } = await Oauth.isAccessTokenAvailable({
accessToken,
});
const { isAvailable: isRefreshAvailable } = await Oauth.isRefreshTokenAvailable({
refreshToken,
});
};
The main difference is that Auth Connect operates on the AuthResult object, while the Capawesome plugin takes individual values. This gives you more flexibility in how you store and manage your tokens.
Decoding the ID token¶
Both plugins can decode JWT ID tokens locally.
Ionic Auth Connect:
import { AuthConnect } from '@ionic-enterprise/auth';
const decodeToken = async (authResult) => {
const decoded = await AuthConnect.decodeToken('id', authResult);
return decoded;
};
Capawesome OAuth:
import { Oauth } from '@capawesome-team/capacitor-oauth';
const decodeIdToken = async (idToken: string) => {
const { header, payload } = await Oauth.decodeIdToken({
token: idToken,
});
return payload;
};
Logging out¶
Both plugins support ending the user's session through the provider's end-session endpoint.
Ionic Auth Connect:
import { AuthConnect, Auth0Provider } from '@ionic-enterprise/auth';
const logout = async (authResult) => {
const provider = new Auth0Provider();
await AuthConnect.logout(provider, authResult);
};
Capawesome OAuth:
import { Oauth } from '@capawesome-team/capacitor-oauth';
const logout = async (idToken: string) => {
await Oauth.logout({
issuerUrl: 'https://example.auth0.com',
idToken,
postLogoutRedirectUrl: 'com.example.app://oauth/logout',
});
};
Need Help Migrating?¶
If you'd rather not handle the migration yourself, the Capawesome team can take care of it for you. Whether you're dealing with a straightforward auth setup or a more complex multi-provider configuration, we offer dedicated migration services to get you up and running with minimal downtime and effort on your end.
Conclusion¶
The discontinuation of Ionic Auth Connect doesn't have to leave your app without a solid authentication solution. The Capawesome OAuth plugin provides a comprehensive alternative that covers the core OAuth 2.0 and OpenID Connect functionality you need — with PKCE, automatic discovery, token refresh, and multi-provider support across all platforms.
The migration is straightforward, and the plugin's clean API makes it easy to integrate into existing projects. Combined with the Secure Preferences plugin for encrypted token storage, you get a complete authentication solution that's actively maintained and stays current with the latest Capacitor versions.
To stay updated with the latest updates, features, and news about Capawesome, Capacitor, and Ionic ecosystem, subscribe to the Capawesome newsletter and follow us on X (formerly Twitter).
If you need assistance with migrating from Ionic Auth Connect or implementing the OAuth plugin, the Capawesome team is available to help you transition smoothly to this reliable alternative. Just contact us to get started.