Keycloak login IOS

Capacitor
1

Hi,

I am trying to build an IOS app from my existing angular application.
We use keycloak for authentication.

I have managed to create deep links, so whenever user clicks on login, he is redirected to the keycloak login page on safari and on successful login, the user is redirected to myapp://callback/login which then opens my app but somehow the login is not successfully completed as I cannot move ahead from the blank page.

When the app is opened after the successful login redirection, this is the URL where the app doesnt move ahead from
myapp://callback/login?
state=a3JnMVE1V2tnT29HV2dZVkZlVKRF9uT0JqcGNtUEltcW9kWEty&
session_state=027e866b-1171-414f-8ea2-3ec238773fce&
iss=https%3A%2F%2Fcloudapp.com%2Fopenidconnect%2Frealms%2Fcustomer&
code=f9c9e7e0-c400-445a-b7666b-1171-414f-8ea2-3ec238773fce.be1c344d-49b3-a310-bb85daf7aa7e

Am i missing anything?

2

Sounds like you need to listen for the appUrlOpen event and process the session state from the URL being passed into your app. See Deep Links | Capacitor Documentation.

3

I am already listening to, the url I have provided is from the console.log below

App.addListener('appUrlOpen', (data) => {
      console.log('App Url Open '+data.url);
      if (data.url.startsWith('myapp://')) {
        const code = new URL(data.url).searchParams.get('code');
        console.log("App Url Open "+data.url);
       
      }
    });
4

Ok, then what do you mean “move ahead from”? If auth is good, you need to redirect/navigate the user to whatever screen/page you are expecting them to go to as the link I shared shows.

5

I was able to fix this problem.
What was actually happening is, even though, I was getting redirected back to the app using deeplinks and was getting the required searchParams, the windows.location.search still showed me old searchParams.
The fix was to update the same so that angular-oauth2-oidc could pick that up and continue the login flow.

//inside the App.addListener('appUrlOpen'...
        const url = new URL(data.url);

        const state = url.searchParams.get('state');
        const session_state = url.searchParams.get('session_state');
        const iss = url.searchParams.get('iss');
        const code = url.searchParams.get('code');

        const newSearchParams = new URLSearchParams();
        if (state) newSearchParams.set('state', state);
        if (session_state) newSearchParams.set('session_state', session_state);
        if (iss) newSearchParams.set('iss', iss);
        if (code) newSearchParams.set('code', code);

        const newQuery = '?' + newSearchParams.toString();

        // Replace current URL in Angular's history (won't reload the app)
        this.loc.replaceState('/login', newQuery);

        this.openIdConnectService.tryLoginCodeFlow();