Manual Installation option / Okta sign-in widget CORS issues about schematics HOT 17 CLOSED

@bijanmmarkes Thanks for your feedback. I originally created this project to help me show demos during presentations. I found there were a lot of steps required to integrate Okta into a brand new application, so I wanted to automate it.

If you have an existing project, I think people can use each respective SDK's documentation to integrate Okta. Do you think that's a reasonable approach?

from schematics.

@mraible Yes, I do believe so. I will be documenting my manual process for ionic/capacitor/angular, would you like me to contribute to the README or add a MANUAL_INSTALL.md type file?

I actually think the key to this is the following plugins:

• ionic-appauth
• @ionic-native/secure-storage
• @ionic/storage

With that knowledge, and the changes to the info.plist, etc. Anyone could integrate it into their project.

Appreciate the research done on your end, as actual native functionality is always trickier than when testing in the browser.

from schematics.

I believe a nice addition to this would be to utilize the environment files for passing clientId, etc. into the AuthService, rather than the hardcoded approach, but I understand this was just for demo purposes.

from schematics.

In my React Native Login tutorial, I show how to integrate Okta (the easy way) with OktaDev Schematics. Then I show the hard way without it.

I neglected to show the hard way in my Ionic tutorial, mostly because you have to create a lot of files. Ideally, I think these files should be provided by ionic-appauth, but that's not currently available. Do you think a new tutorial with Ionic "the hard way" would be useful?

from schematics.

@mraible I truly do, because currently, I'm using the okta-angular-widget, and it seems to be causing issues for me. Do you know if the widget is supported for this type of flow?

It previously worked perfectly, but after adding several plugins and changing the format, I'm not sure if the implicit/callback to the OktaCallbackComponent is working as expected.

https://github.com/okta/okta-signin-widget

from schematics.

We have an Okta Angular SDK and a Sign-In Widget. Are you talking about one of those projects? I've tried to make both of them work in Ionic and have NOT been successful. That's why this project uses Ionic AppAuth, which is based on AppAuth JS.

from schematics.

Yes, I'm using the okta signin-widget

https://github.com/okta/okta-signin-widget

One of my project requirements is to maintain a native login page, which was why I needed to incorporate the widget.

from schematics.

I have not figured out a way to authenticate with Okta without a redirect. If it were possible with our JavaScript SDKs, it’d be with our Auth JS SDK, which is the foundation for all our JavaScript SDKs. This library has recently been updated to have React Native and Node.js support. It’s possible that it will work for your needs, but I’m not sure as I haven’t tried it myself.

The only other option I can think of would be to use our native iOS and/or Android SDKs to create a Cordova plugin that could talk directly to our authentication APIs. The downside of this is it might be tough to make it work when developing outside of an emulator and developing in an emulator would be a real pain for Ionic (IMO).

from schematics.

In this blog post, I tried to use the Auth JS SDK and encountered issues.

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).

It's possible that using Capacitor can solve this, but not with its current HTTP library + Okta. It sends a capacitor:// scheme as an origin header and Okta only allows http/s for CORS.

It looks like Capacitor's new HTTP library hatched a testable version last week. I haven't had a chance to try it myself.

Currently, this project installs Cordova Advanced HTTP for Capacitor projects.

from schematics.

I'm not sure how to intercept the sign-in widget to use the Advanced HTTP plugin, as I don't have any control over it.

Is there a specific reason Okta disallows capacitor:// as an origin?

Due to WKWebView, iOS capacitor apps cannot use the HTTP or HTTPS scheme although android can, meaning that either Okta needs to allow the capacitor:// scheme as an origin, or we are forced to use the redirect to another browser, which isn't ideal in my opinion.

This will also create a different type of authentication flow for the same app on both android and iOS.

After checking out Auth0.com, they allow for origins from capacitor:// - So it's odd that Okta would not.

from schematics.

I don't think you can change the Sign-In Widget to use the Advanced HTTP Plugin.

There's no specific reason I know of for not allowing capacitor://, but I don't think it's an issue since the new HTTP implementation in Capacitor will change it to use http/s like the Advanced HTTP Plugin.

from schematics.

@mraible I wasn't aware that's what the plugin was for, thanks for pointing that out, I will try it out and report the results.

Thanks.

from schematics.

@mraible Doesn't look like that plugin really did much, it seems more like it's meant to be used for manual HTTP requests rather than allowing to use a different schema.

Using the following capacitor config:

"server": {
    "iosScheme": "http",
    "androidScheme": "http",
    "allowNavigation": [
      "domain.okta.com"
    ]
}

I am able to open the hosted okta page in the app itself and redirect, but it doesn't set the cookie as depicted by the error below, and to me that's the same as opening another browser without the "open in app" popup that comes with it, preventing me from using the actual options I have set in my sign-in widget, or styling/native look and feel.

Error after redirect: AuthSdkError: Unable to retrieve OAuth redirect params cookie

I am using the Okta sign-in widget, which means I have no control over how to set the cookie, even if I were to use that authentication flow.

This is seeming to be a pretty big hack-around, and I think it can be resolved by simply allowing capacitor:// as a CORS origin, not sure if there will still be an issue with cookies in that case.

Do you have any examples of how this changes it to http/s? Am I missing something? Even with "iosScheme": "http" it still loads it as capacitor:// Not sure if the plugin is meant to transform that or just give access to HTTP libraries natively.

from schematics.

Do you have any examples of how this changes it to http/s?

Sorry for the delay, I was on vacation in July. I don't have any examples, I just know that if you create a new Ionic app with Capacitor and use this project to install Okta support, it works.

from schematics.

Good news! We're working on adding support for capacitor://localhost as a trusted origin. Hopefully, this will make it so you can use Okta's SDKs with Ionic.

from schematics.

Better news! Someone figured out how to use capacitor-community/http and get the Sign-In Widget to work in an Ionic app on a device. capacitor-community/http#45 (comment)

from schematics.

Closing because I recommend redirecting to Okta over using the Sign-In Widget.

from schematics.