Build an Ionic App with User Authentication
Ionic is an open source mobile SDK for developing native and progressive web applications. With Okta and OpenID Connect (OIDC) you can easily integrate authentication into an Ionic application, and never have to build it yourself again.
ALEXANDER P. Dumont
Hello Sir
Great article! I am trying to follow along except I am using Visual Studio 2017. I set up my login page’s html and typescript and copy and paste the code from upstairs. Up until this point, no errors. I then modify my app.component and app.modules and nothing shows up red. However, when I try to run, I now get a blank page. I am relatively new to typescript and angular and I am confused as to what I could be doing wrong? I have tried to look online. The errors I see in both the Google Chrome console and the error window in VS is main.css and polyfill.js are 404 not there, but before adding the components in modules, the app was running fine.
Nate Barbettini
If Chrome is saying that some files are 404, it sounds like the project isn’t being served correctly. How did you set the project up in VS 2017? It may be easier to use VS Code plus the command line tools in this article instead of VS 2017.
ALEXANDER P. Dumont
I will certainly try out VS code with CLI next. The project type is a ionic tabs with typescript, which can be installed on VS 2017. What has me confused is that it runs perfectly fine until I start modifying my app.modules. Still trying to figure out what is wrong.
WritetoBegin
Hi
I followed your article it works fine in browser,
But If I run in http://localhost:8100/ionic-lab it is not working
I raised issue
https://github.com/oktadeve…
Am I missing anything
Thanks
dijish
I have encountered 2 problems while following this tutorials
1 . (a) Error in oauthService.issuer in the constructor of login.ts
oauthService.issuer = ‘{yourOktaDomain}/oauth2/default’; ------- Incorrect
oauthService.issuer = ‘{yourOktaDomain}’; --------------------------- Correct
(b) Error in issuer of login() in login.ts
const authClient = new OktaAuth({
clientId: this.oauthService.clientId,
redirectUri: this.oauthService.redirectUri,
url: ‘https://{yourOktaDomain}.oktapreview.com’,
issuer: ‘default’ ------------------------------------------------------------ Incorrect
});
const authClient = new OktaAuth({
clientId: this.oauthService.clientId,
redirectUri: this.oauthService.redirectUri,
url: ‘https://{yourOktaDomain}.oktapreview.com’,
issuer: ‘https://{yourOktaDomain}.oktapreview.com’ ------------- Correct
});
2 . Error in plugin version of angular-oauth2-oidc
if your using angular 6 you can install this plugin normally by “npm i angular-oauth2-oidc --save”
if your using Angular 5.x or 4.3: If you need support for Angular < 6 (4.3 to 5.x) you can download the former version 3.1.4 by
“npm i angular-oauth2-oidc@^3 --save”
Matt Raible
We use the convention of https://{yourOktaDomain}.com/oauth2/default for our tutorials to indicate your Okta domain. For those that signup on developer.okta.com, this matches their default setup (which is usually something like https://dev-12345.oktaprevi… + the default authorization server path). You might not have a default auth server in your tenant. You can contact support to get one added, or just sign up for a new account using the button at the top right.
Thanks for the tip about angular-oauth2-oidc!
dijish
If my mobile is performed an okta authentication once, I want my other apps that uses okta authentication to display ‘Continue as {okta username}’ to authenticate user in one click. How can I do this?
Matt Raible
I’m not sure this is possible. If you see “Login” button at the top of this page, it does something similar. AFAIK, it uses SAML to fetch the list of Okta orgs you belong to. However, once you click one of your accounts, it logs you into your dashboard, it doesn’t fetch a token and redirect back to a redirectUri.
I saw you cross-posted to Stack Overflow. In the future, please only post in one place. We get notifications for comments on the blog, for Stack Overflow posts with an “okta” tag, and anything posted to our Developer Forums.
dijish
When I am running this app in my phone. ‘oauthService.hasValidIdToken()’ is returning false even after logging in, Therefore every time I am opening this app I am getting redirected to login page. Please help …
Matt Raible
Make sure there are no errors in your browser’s developer console. If there aren’t, you might try comparing the code in your app with the code in the example app from this post.
dijish
I have cloned this example app and run it in my browser and mobile. It works fine in my browser but in mobile ‘oauthService.hasValidIdToken()’ is still returning false after logging in. Do you think there is any problem in my dashboard? https://uploads.disquscdn.c…
Sean Collins
Hi Matt. First off, thanks for the excellent introduction to getting all of this working. I had a question that builds on what you’ve started here. What about MFA? I see some of the documentation in the okta-auth-js GitHub repo may cover things like handling the MFA_REQUIRED response, but I was curious if you had any working examples of this. Thanks in advance!
Matt Raible
I’m glad you like it Sean! We published a post about MFA yesterday: Secure Your Spring Boot Application with Multi-Factor Authentication. It’s mostly configuration, so we didn’t create an example for it.
Matt Raible
Your dashboard looks a bit different than mine. Maybe you have an IT products account instead of a developer account?
Sean Collins
Hey Matt, thanks for the quick reply. I think I may have asked the question incorrectly. I have an Ionic app, per the instructions above, but when I try to login, I get hit with a MFA_REQUIRED response from the server because my Okta tenant has MFA on for all users. I am looking for a way to expand this portion of the code to handle that MFA_REQUIRED response. I am currently catching it and generating an alert to prompt the user for input, but I was wondering if you had any snippets that may have already stepped through this. From the okta-auth-js repo, I can see that you can get a list of a users MFA options and then step through them, but I wanted to make sure that I wasn’t barking up the wrong tree with trying to go down this road.
Here is the snippet you had from above that I wanted to expand on for that MFA_REQUIRED portion:
if (response.status === ‘SUCCESS’) {
return authClient.token.getWithoutPrompt({
nonce: nonce,
responseType: [‘id_token’, ‘token’],
sessionToken: response.sessionToken,
scopes: this.oauthService.scope.split(’ ')
})
.then((tokens) => {
const idToken = tokens[0].idToken;
const accessToken = tokens[1].accessToken;
const keyValuePair = #id_token=${encodeURIComponent(idToken)}&access_token=${encodeURIComponent(accessToken)};
this.oauthService.tryLogin({
customHashFragment: keyValuePair,
disableOAuth2StateCheck: true
});
this.navCtrl.push(TabsPage);
});
} else {
throw new Error(‘We cannot handle the ’ + response.status + ’ status’);
}
Matt Raible
Quick tip: if you wrap your code with <pre><code> code here with line breaks </code></pre>, you can get syntax highlighting.
I’ll be honest: I haven’t worked with our MFA support, so I’d just be guessing if I tried to give you an answer. I’d suggest posting your question to our Developer Forums. It will get more attention there, and hopefully we can find someone that knows the answer.
Sean Collins
Thanks for the reply and the tip. I’ll have a look over there and also see what kind of options I have going through our IAM folks that work with Okta directly.
dijish
I have same problem in my browser too. When I logged in from one tab and open this app in another tab I get redirected to login page again but session in first tab still exist.
Matt Raible
I developed another Ionic project that uses this same technique. Someone contributed a pull request that might solve the problem you’re having. Let me know if it works!