oktadev/schematics

React in Ionic

DarrenAllen opened this issue · 3 comments

It's hard to tell based on the documentation and examples whether this should be usable with React within Ionic. I've been attempting to tackle the problem of wrapping our React app in Ionic, and we use Okta (both okta-auth-js and okta-react) for authentication. With capacitor using capacitor:// for requests within ios I haven't been able to make any progress due to Okta CORS configuration.

@mraible I noticed your issue here https://github.com/wi3land/ionic-appauth-capacitor-demo/issues/2 and had hoped there would be some way to pass an http client to the Okta React SDK (and okta-auth-js for that matter) but again, I haven't had much luck.

Hello @DarrenAllen! This integration only supports Angular at this time. I updated the instructions this morning to indicate that.

For Capacitor, I had to use a Cordova plugin to make the HTTP request b/c the Capacitor HTTP module sends ionic:// as a schema, and Okta only allows http:// and https://.

The Ionic team is working on a fix for this. Follow ionic-team/capacitor#2495 for more information.

Thanks so much for the information @mraible !

Related: I haven't been able to get any of our JS SDKs to work with Ionic. The last time I tried was with our Auth JS SDK in 2017. From that post:

If you use the Network tab, you can see that only one network request is made (to /authn), which is different than the two requests (to /authn and /authorize) that are made when running in a browser.

image

I believe this doesn’t work when the app is packaged with Cordova because it’s making a request to the server with an embedded iframe that then posts back to the current window using postMessage. It seems that Ionic/Cordova doesn’t support this flow (yet). To work around this issue, you can talk directly to Okta’s OAuth service using an in-app browser that’s provided by Cordova.

Since this post, I now use Ionic AppAuth instead of the in-app browser.