Using the Angular SDK in an Ionic App

Questions
1

I’m trying to put Okta authentication into our existing Ionic 6 / Capacitor app and having tried the ionic-appauth library I want to try the Angular SDK as an alternative.

I’m a bit new to all of this so I apologise if any of these questions are stupid but here goes:

Firstly, does the OKTA app defined at the OKTA end need to be an SPA app or a native app - I assume it needs to be native as the app is a mobile app using Capacitor?

Secondly how should I specify the redirect URI (in the OKTA app and the mobile app’s app.module file), the instructions for a basic Angular app specify:

redirectUri: window.location.origin + '/login/callback'

but I’m guessing I might need something like:

redirectUri: 'capacitor://localhost/callback'

I did try the SDK with the above settings and when I signed in on the Okta screen rather than re-direct correctly back to my app, I got the message “Open in the XXX App” i.e it was trying to open my app again in a new window rather than return. Any help would be appreciated!

2

You need to create a native app and use conditional logic in your app to detect when it’s running in Capacitor vs in a browser. When browser, use the http URI. When it’s in Capacitor, use the com.okta.whatever URI. OktaDev Schematics has instructions for creating the app, but URIs might be different if using our Angular SDK.

3

Thanks for that. In my Okta app I have

com.oktapreview.myorg:/callback

specified as one of the Sign-in redirect URIs

In my app in app.module.ts I have specified

redirectUri: 'com.oktapreview.myorg:/callback'

when I then try to login - before the login page is presented - I get the following error 400 Bad Request message:

Your request resulted in an error. The 're-direct_uri' parameter must be a redirect URI in the in the client app settings

It looks to me like I’ve matched them up but the error suggests otherwise?

4

I looked into the URL that was being loaded by the login call and I saw that it had this in it:

&redirect_uri=capacitor://pdx/com.oktapreview.myorg:/callback

so it is putting capacitor in there automatically.

I’m assuming the “pdx” is there because that is specified in our capacitor.config.ts here:

server: {
       "hostname": "pdx"
}

so what I then tried was adding “capacitor://pdx/com.oktapreview.myorg:/callback” as one of the Sign In Redirect URIs on our Okta app.

When I tried this I was able to open the OKTA login screen but after entering a username and password I then get the message

Open this page in "MyAppName" with Cancel and Open buttons i.e it is trying to open a new page rather than directing back. So I'm sort of back where I started.

Any further help would be appreciated!

I will go back to using the ion-appauth library if you think that is better suited to Ionic/Capacitor although the problem I hit with that was that I was unable to pass an email address over at the point of login (or at least I could not see how to).

5

What happens if you click Open? Does it open a new instance of the app? Are you running on iOS or Android?

6

Yes it just opens the app - a new instance I think - this is all in iOS right now

7

I tried it without the “pdx” server setting in the capacitor config in case that was causing the issue (and also added capacitor://localhost/com.oktapreview.myorg:/callback as a Sign In Redirect URI in the Okta app so they would match up.

But the same thing happened - I got the “Open in app” message after entering the OKTA credentials

8

I just checked an internal ticket related to capacitor://localhost. I created an example with the Angular SDK and redirecting to Okta, as well as one with the Sign-In Widget. I did this in August 2021 and was unable to make either one work. I didn’t look into it too much because I expected some support from engineering. Unfortunately, I haven’t gotten any.