# Using the Angular SDK in an Ionic App

**URL:** <https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636>\
**Category:** Questions\
**Created:** [March 2, 2022, 2:53pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636 "2022-03-02T14:53:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![richardshergold](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@richardshergold](https://devforum.okta.com/u/richardshergold)\
**Post date:** [March 2, 2022, 2:53pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/1 "2022-03-02T14:53:17Z")

</div>

I’m trying to put Okta authentication into our existing Ionic 6 / Capacitor app and having tried the [ionic-appauth](https://github.com/wi3land/ionic-appauth) library I want to try the [Angular SDK](https://github.com/okta/okta-angular) 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!

---

<div class="post-metadata">

**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\
**Post date:** [March 2, 2022, 3:35pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/2 "2022-03-02T15:35:19Z")

</div>

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.

> **[GitHub - oktadev/schematics: Schematics for adding Okta Auth to your projects](https://github.com/oktadev/schematics#create-an-application-in-okta)**
>
> Schematics for adding Okta Auth to your projects. Contribute to oktadev/schematics development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![richardshergold](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@richardshergold](https://devforum.okta.com/u/richardshergold)\
**Post date:** [March 3, 2022, 8:29am UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/3 "2022-03-03T08:29:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![richardshergold](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@richardshergold](https://devforum.okta.com/u/richardshergold)\
**Post date:** [March 3, 2022, 9:20am UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/4 "2022-03-03T09:20:46Z")

</div>

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:

```auto
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](https://devforum.okta.com/t/ionic-6-application-can-i-use-signinwithcredentials/19626) (or at least I could not see how to).

---

<div class="post-metadata">

**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\
**Post date:** [March 3, 2022, 2:28pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/5 "2022-03-03T14:28:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![richardshergold](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@richardshergold](https://devforum.okta.com/u/richardshergold)\
**Post date:** [March 3, 2022, 2:32pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/6 "2022-03-03T14:32:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![richardshergold](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@richardshergold](https://devforum.okta.com/u/richardshergold)\
**Post date:** [March 3, 2022, 2:46pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/7 "2022-03-03T14:46:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\
**Post date:** [March 3, 2022, 6:15pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/8 "2022-03-03T18:15:13Z")

</div>

I just checked an internal ticket related to `capacitor://localhost`. I created an example with the [Angular SDK](https://github.com/oktadev/okta-ionic-social-login-example/tree/angular-sdk) and redirecting to Okta, as well as one with the [Sign-In Widget](https://github.com/oktadev/okta-ionic-social-login-example/tree/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.

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [February 12, 2024, 6:14pm UTC](https://devforum.okta.com/t/using-the-angular-sdk-in-an-ionic-app/19636/9 "2024-02-12T18:14:20Z")

</div>

Closed on February 12, 2024, 6:14pm UTC


