OpenID Connect via Capacitor for iOS


#1

Hi I’m trying to implement OpenID Connect flow (with Keycloak as auth server) for iOS with Angular and Capacitor.

In the meantime, I’ve come so far that I can open the login window with the help of the In App Browser, “login” and be redirected back to the app by URL schemes.
What’s missing is the final step of the token request and the processing of the token response…

I’m following the answer of this Stackoverflow question: https://stackoverflow.com/questions/53630761/keycloak-for-ionic-app-keycloak-js-with-cordova-native-does-not-work and this Capacitor community answer: OAuth2 auth code flow w/ Capacitor Browser

But my post request to the token endpoint always get’s rejected.
I’m preparing my post request like this:

`> createPostRequest(uri, body) {

    const httpOptions = {
        headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': 'Basic'
        })
    };
    return this.http.post(uri, body, httpOptions).toPromise();      

};

and then execute it like this:

return this.createPostRequest(URI, body).then((newTokens: any) => { newTokens.iat = (new Date().getTime() / 1000) - 10; // reduce 10 sec to for delay console.log("These are newTokens:" + newTokens); Storage.set({ key: 'STORAGE_ACCESS_TOKEN', value: newTokens }); }).catch((error) => console.log("this is my error: ", error));

And then it always shows this is my error with reference to Keycloak.js file, which I’m not even thinking about at this point…

I don’t know what to do anymore. Has anyone an idea?

Thanks :slight_smile:

Update:
I was able to solve my problem. If any one is interested.

  1. My bad, there was a token interceptor, which always broke my auth request

  2. My Token endpoint wasn’t correct

  3. and most important, this is the new way to create my post request

     private async createPostRequest(uri, code , clientId, redirectUrl){
            const body = new HttpParams()
                .set('grant_type', 'authorization_code')
                .set('code', code)
                .set('client_id', encodeURIComponent(clientId))
                .set('redirect_uri', redirectUrl)
                .set('json', 'true');
    
            const response = await fetch(uri, {
                method: 'post',
                headers: {
                    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
                },
                body: body.toString()
            });
            return await response.json();
        }
    

It seems important to send the body with .toString() like this, bc. otherwise it was empty