Tutorial: User Login and Registration in Ionic 4

Developer Blog Comments
1

Tutorial: User Login and Registration in Ionic 4

Ionic helps developers build hybrid mobile apps & PWAs. This tutorial shows you how to add user authentication and registration to an Ionic 4 app.

2

Maurice Mugabo

Thanks Matt, this is awesome guide. I like the way the whole integration is automated using the OktaDev Schematics, it really makes it pretty simple.
I encountered 2 problems, one I was able to solve, the other I can’t:

1. I had to go in my okta dev account, API, Trusted Origins to enable CORS for localhost:8100 as the first time running ionic serve resulted in a cors issue.

2. Running in browser works perfect (ionic serve), but when I try to run my app in XCode emulator, I am getting to the login/sign up page, but after putting username/password, I get an error that “Safari can not open the page the address is invalid”. This is happening for both ios and android, I am afraid it might happen also once I put the updated app on my devices.

Has anyone else come across this issue as well? How to solve…

I am using this:

- macOS Mojave (version 10.14)
- ionic 5.2.1 (was 4 but recently upgraded)
- Angular CLI: 7.3.9
- Node: 10.15.3
- OS: darwin x64
- Angular: 7.2.15
- npm 6.4.1

I will put the app on a device in the next few hours and see what happens. Let me know what I can do about this issue.

Thanks.
maurice-

3

Matt Raible

Hello Maurice,

It sounds like you’re having issues redirecting back to your app after you login. This usually happens when your app’s custom scheme (e.g., com.okta.dev-123456) is not properly registered in your app, or doesn’t match what you have in Okta.

I’d make sure your app on Okta uses the same reversed domain as what’s registered in your package.json.

4

Maurice Mugabo

Hi Matt, thanks a lot that was it…

But getting to the root cause was a little bit more involved… I tried another managed OAuth/IAM provider before Okta and in the process I added cordova-plugin-customurlscheme setting it to a totally different url_scheme which was adding it to the configs every time I run the app… But that is fixed now had to remove the plugin and re-add.

Now my next wish list is this if you can point me to the Okta recommended way of doing things that would be great:

- Customizing those Okta login/register pages to look a bit more like my app
- My API stack is NodeJs functions running behind AWS API Gateway - Lambda and access DynamoDB. Where is the guide to use API Gateway Custom Authorizers (or some other way) with Okta to verify those tokens and scopes and grant access to API resources.
- Lastly, how do I parameterize this Okta configuration to have:
1. Different environments (Dev and QA or Staging, then eventually Production)
2. Is it done only thru the Admin UI, or we can have something more like serverless framework where you go and define it all out in a repeatable env configuration?

Thanks for your time…

5

Matt Raible

For customizing the login page, you can check out https://developer.okta.com, scroll down, and play with customizing the sign-in widget. Or use https://developer.okta.com/…. The gallery might be useful too:
https://developer.okta.com/…

A full guide is available at https://developer.okta.com/….

I don’t know much about AWS so not sure how to do what you’re asking for there.

For different environments, you could create different accounts or different OIDC apps. All new developer accounts are created on our production tier.

Our API does allow you to create apps, users, etc., so you could probably automate creation/teardown if you wanted. Unfortunately, I don’t have examples of how to do this.

6

Maurice Mugabo

Thanks Matt, this helps a lot…

7

M Mercury

This was a great article and was able to get the authentication running, I am running into a unique problem

When I deploy this app on the server(non-ssl), the chrome browser gives me following error

Unable to generate PKCE challenge. Not using PKCE AppAuthError {message: “window.crypto.subtle is unavailable.”, extras: undefined}

My application works great in Safari and Firefox but fails in Chrome

Any suggestions would be greatly appreciated.

8

Matt Raible

What version of Chrome and operating system are you using?

9

M Mercury

I am using Chrome Version 77.0.3865.75(official Build) (64 bit) on Mac but tested this on Windows machines with latest Chrome browsers none of them work

10

Matt Raible

According to this Stack Overflow question, window.crypto is only enabled on when you’re using localhost or HTTPS.

Can you please try enabling HTTPS on your server and see if the problem persists?

11

M Mercury

It appears that the CORS header is not being applied to the request. I tried adding the header in auth-http.service.ts but no luck. here is a configuratio. The get request fails with CORS and does not get response from https://<<companyid>>.okta.com/.well-known/openid-configuration and nothing happens.

please help.

private addHeaders(token) {
return (token) ? {
‘Authorization’: ${token.tokenType} ${token.accessToken},
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: ‘*’
} : {};

12

Okta Developers

You need to configure Okta to allow http://localhost:8100 as a trusted origin. You can do this by logging in and going to API > Trusted Origins.

13

M Mercury

Is adding trusted origin setting comes with custom authentication server? is this a paid feature?

14

M Mercury

confirmed that the CORS and redirect settings are done correctly.

15

Matt Raible

No, adding trusted origins is not a paid feature. You can do it on a regular developer account. I believe it might be caused by Chrome 77, which does not allow 3rd party cookies by default. I’m not sure if it affects CORS too, but I did recently help someone that had CORS issues with Chrome. They tried Firefox and everything worked just fine.

16

kuttimania_2014 a

Hi Matt,
Thank you for writing this article.Just what I was looking for.
how can handle the refresh token in ionic mobile app.

17

Matt Raible

Hello,

This example uses Ionic AppAuth, which is built on AppAuth-JS. I believe refresh token support is included, but I haven’t tried it, so I’m not sure. You might try posting an issue in the Ionic AppAuth GitHub repo to see if they have an example.

18

Pritam Mullick

Hi Matt,

Wonderful tutorial. So I followed entire of it and things are running well and good on the simulators. While when I build the Android and test it on a phone with Android 10, the app closes after the splash screen. Before integration of OKTA it was running well and good on all devices.
Any idea, where I should look out for?

19

Matt Raible

I’m not sure as I haven’t seen this behavior. You might be able to attach to your phone with Android Studio and see the logs. Unfortunately, I don’t have an Android phone to try and reproduce the problem with.

20

kuttimania_2014 a

Thank you matt, It’s working