Using Example on Native with API Calls

[td-edge]

When trying to add an API call to the example, I've been running into an issue with the HttpClient and/or ionic-native/http.

Since I started this as a web app, I initially used HttpClient thinking it was a universal option. Once I tried migrating the app to iOS, I realized that HttpClient creates CORS issues and isn't really a viable option. I started trying to migrate to ionic-native/http/ngx. However, if I use @ionic-native/http/ngx and load it in via the app.module, I get Error: Unable To Obtain Server Configuration on app load. I'm assuming there is some collision between the way the okta widget tries to load via the URL that causes an issue, but I am well beyond my depth.

My next attempt was to build an interceptor to convert the HttpClient calls over to a native, but I haven't been successful.

Is there an easy way to import the native http?

I stumbled across this: https://github.com/wi3land/ionic-appauth-capacitor-demo/issues/2 but the suggestion to just import without the ngx doesn't seem to work and goes against the ionic documentation.

[mraible]

Once I tried migrating the app to iOS, I realized that HttpClient creates CORS issues and isn't really a viable option.

I'm not sure what you mean here. In my experience, the origin header is only sent when you're running in a browser, not on a device.

I use the same configuration this example provides (by leveraging OktaDev Schematics and its Ionic support) in Ionic for JHipster and haven't had issues.

It makes a request to a JHipster backend using HttpClient. Here's an example template.

I figured out how to solve the issue you mentioned and I use very similar code to that demo in the files that are installed by OktaDev Schematics.

[td-edge]

I've never used Jhipster, so I'm not really sure how that interacts under the hood. The CORS is an issue with the WKWebView which is now required by Apple.

https://ionicframework.com/blog/wkwebview-for-all-a-new-webview-for-ionic/

As far as I can tell, the solution is to migrate over to ionic-native/http which bypasses the issue. But like I said, the minute I try to add that to my app.module, it breaks the login flow. Am I missing something obvious?

[mraible]

Can you take a screenshot of the error you're seeing and post it here?

Are you getting CORS issues from your API or from Okta?

[td-edge]

The error is when I'm calling the API using HttpClient GET:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for <my API url>: 0 Unknown Error","error":{"isTrusted":true}}

[mraible]

If you look at the headers being sent, is there an Authorization header with the access token in it?

What language or framework are you using to build your backend? You’ll likely need to do some CORS configuration to allow your frontend to talk to your backend. For example, with Spring Boot, I often use a filter.

https://github.com/oktadeveloper/okta-spring-boot-2-angular-9-example/blob/master/notes-api/src/main/kotlin/com/okta/developer/notes/DemoApplication.kt#L26 https://github.com/oktadeveloper/okta-spring-boot-2-angular-9-example/blob/master/notes-api/src/main/kotlin/com/okta/developer/notes/DemoApplication.kt#L26

Hope this helps.

On Dec 24, 2020, at 3:09 PM, Tom notifications@github.com wrote:

The error is when I'm calling the API using HttpClient GET:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for : 0 Unknown Error","error":{"isTrusted":true}} — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/oktadeveloper/okta-ionic-social-login-example/issues/4#issuecomment-751119159, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAELZF2GWRBPF5AQ5Q5SDTSWO33NANCNFSM4VIKWLAQ.

[td-edge]

Rather than trying to use straight HttpClient calls where I load my own headers, I realized that there is the base AuthHttpService built into the ionic-appauth. If I readjust all of my calls to go through that base service, it seems like it will work. This should have been more obvious to me at first, however, I still don't love this solution since I suspect the ionic-appauth is converting the request via the capacitor requestor used in the http-factory. That seems like a bit of a black box to me.

Of course, I can't fully test this because I have some certificate errors I need to work out with the API and the iOS emulator, but at least I'm seeing it attempt to make the connection now whereas before the 0 Unknown Error would seemingly terminate all requests at the app. I'm further than I was.

Any good debugging tools for iOS apps? Xcode logs just aren't cutting it.