Getting invalid redirect_uri with keycloak-angular

I am trying to integrate an angular application with my Keycloak server (v26.0.2). I am using keycloak-angular library and keycloak-js adaptapter.

Versions My application use angular v13.3.0, so the hightest versions that i can install are 10.0.2 for keycloak-angular and 18.0.1 for keycloak-js.

Implementation My application is a web app that is also compiled for android and ios.

My keycloak configuration has to important parts

The initKeycloak function in app.module.ts and the auth-interceptor (implements HttpInterceptor).

init

export function initKeycloak(
keycloak: KeycloakService
): () => Promise<boolean> {
const redirectUri = Capacitor.isNativePlatform()
? 'io.family-app://callback'
: window.location.href;

return () =>
keycloak.init({
config: {
url: environment.authUrl,
realm: 'family-realm',
clientId: 'family-app',
},
initOptions: {
onLoad: 'login-required',
redirectUri: redirectUri,
silentCheckSsoRedirectUri: Capacitor.isNativePlatform()
? undefined
: window.location.origin + '/silent-check-sso.html',
checkLoginIframe: !Capacitor.isNativePlatform(),
pkceMethod: 'S256',
responseMode: 'fragment',
},
});
}


interceptor

intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return from(this.keycloak.isLoggedIn()).pipe(
switchMap((isLoggedIn) => {
if (!isLoggedIn) {
const redirectUri = Capacitor.isNativePlatform()
? 'io.family-app://callback'
: window.location.href;

this.keycloak.login({
redirectUri: redirectUri,
});
return new Observable<HttpEvent<any>>();
}

return from(this.keycloak.getToken()).pipe(
switchMap((token) => {
return next.handle(
req.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
})
);
})
);
})
);
}
}


Also i have in the AndroidManifest an intent filter to handle the callback

<intent-filter android:label="AuthRedirect">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="io.family-app"
android:host="callback"
/>
</intent-filter>


In the keycloak server i have a client with the valid redirect uri configured io.family-app://*

When i run my application in web mode all works fine, the challenge is completed and the intercept include the access token in the authorization header of each request.

The problem is when i build and execute in android emulator. The init process is started but ends in Keycloak with invalid parameter error.

I check in the Keycloak admin console and the auth url is called with redirect_uri=http://localhost.

Seems that keycloak-angular is overriding my redirect uri with http://localhost as default.

What i am doing wrong?

Continue reading...