Disclaimer: It does work when using SystemBrowser instead of WebView, but that is not my intention.
In a project I am using angular-oauth2-oidc
for authentication against my keycloak server.
I thought of using the @capacitor/inappbrowser
to open the authentication page of my keycloak server in app, for it to look seamless (no url bar, buttons etc)
To do this I configured my oAuthService
like this:
private getAuthConfig(account: Account): AuthConfig {
let redirectUrl = window.location.origin;
if (Capacitor.isNativePlatform()) {
redirectUrl = 'app://myapp/login-redirect';
}
return {
issuer: account.auth.url + '/realms/' + account.auth.realm,
redirectUri: Capacitor.isNativePlatform() ? redirectUrl : window.location.origin,
logoutUrl: window.location.origin,
clientId: account.auth.clientId,
responseType: 'code',
oidc: true,
scope: 'openid offline_access',
showDebugInformation: true,
openUri: (uri) => {
InAppBrowser.openInWebView({
url: uri,
options: DefaultWebViewOptions,
});
},
};
}
This does open the keycloak login page.
After login it also redirects to the given address app://myapp/login-redirect
which is registered for the app. But instead of opening the app and trigger the appUrlOpen
callback, the WebView tries to actually display app://myapp/login-redirect
ending in an error.
As soon as I switch to system browser, it works as desired. It seems that the app cannot be opened/called by the webview. Is there some configuration missing for the webview or is the InAppBrowser using a webView not able to?
Update:
I could get a glimpse of the actual error page showing ERR_UNKNOWN_URL_SCHEME, meaning that the webview indeed is not able to process the redirect.