Okta auth works only on localhost

igorkrysov · August 31, 2021, 7:01pm

I’ve created an SPA application. It works fine if I use localhost. When I deploy my application on EC2 Amazon, okta authorization becomes not functional. Maybe when I use real IP I need to configure my okta account for it.
For example, replace the default domain with a real domain, or somehow activate the production mode of okta?
Guys, could you advise how I can deploy my app on AWS and make okta authorization working?
By the way, It is not real production. It is user acceptance testing. I need to expose my SPA application for certain users.
Appreciate your help.

mraible · August 31, 2021, 7:25pm

When you say it’s not working, what kind of error are you getting? Did you add the redirect URIs for your AWS app to your Okta OIDC app? Did you add the trusted origin for your AWS app?

igorkrysov · August 31, 2021, 7:42pm

When a user enters their username and password and then clicks Log In, the OKTA form sends auth request and receives positive reply but then the form stuck and nothing happens.

You can try our app
http://3.91.48.218:3000/
user: ivaganov@gmail.com
pass: 12Qwerty

By the way, If I run this code on localhost the form sends 3 requests:

POST dev-90555485.okta.com/api/v1/authn
GET /oauth2/default/v1/authorize?client_id=0oa1i75eyjkr6cBaD5d7&code_challenge=d6uPmAIK9SKz_ldrfHzoJPd6xPf6zbzgtNP23GFIfEQ&code_challenge_method=S256&nonce=Y4RASitM5oFfLIKgYgyifWPOs9GR7rt0nbFgAMgGnWF87TwfUlDe5IMPKXlqxvq3&prompt=none&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fcallback&response_mode=okta_post_message&response_type=code&sessionToken=20111vRUQ_SFS15HQHz0dWT9bidlPSDtdg36L7oYuThxW9Cy61rr_Xn&state=sH3Q0kdsVpjHwg7HVDlfGaGSJwKhXEla66gDgPBFIsF6KFfK9V4sSfxFBbhiILlW&scope=openid%20profile%20email
POST /oauth2/default/v1/token

But in case we run the code in AWS the form sends only one request
POST /api/v1/authn

mraible · August 31, 2021, 8:00pm

First of all, you should never post credentials to a public forum. I’d recommend changing your password immediately.

I tried it and it looks like the 2nd request to /authn is successful.

ivanvaganov1 · August 31, 2021, 8:11pm

Thank you, for your quick reply. My name is Ivan, I am a second developer in this project.

Please don’t worry about the password, the account has been created specially for you and for a purpose of testing on your side.

Were you be able to log in? Did you see pages after login dialog?

mraible · August 31, 2021, 8:49pm

@ivanvaganov1 According to the Network logs in Chrome, the authentication is working because a "status":"SUCCESS" is returned from the /authn call. I’m not sure what your JavaScript looks like to embed our Sign-In Widget, so I’m not sure you’re handling the success status correctly.

Here’s how I’ve done it in an Angular app.

github.com

okta-samples/okta-angular-sample/blob/main/src/app/login/login.component.ts#L50

    
      
                en: {
                  'primaryauth.title': 'Sign in to Angular & Company',
                },
              },
              authParams: {
                issuer: sampleConfig.oidc.issuer
              },
            });
          }
          
          
async ngOnInit() {
            this.signIn.showSignInToGetTokens({
              el: '#sign-in-widget',
              scopes: sampleConfig.oidc.scopes
            }).then(tokens => {
              const originalUri = this.oktaAuth.getOriginalUri();
              if (originalUri === DEFAULT_ORIGINAL_URI) {
                this.oktaAuth.setOriginalUri('/');
              }
          
          
    // Remove the widget

ivanvaganov1 · August 31, 2021, 9:06pm

Thank you! Definitely will compare you code vs our code.

The big strange thing is that I can log in by using my iPhone and iPad but nobody can do that by suing laptops. Hmm, very strange.

Please answer the question. If I register OKTA dev account, deploy my app on a sever, set login redirect URL and set up CORS, is it enough to make OLTA work with my app? Should new uses be able to register their accounts and log in?

mraible · August 31, 2021, 9:12pm

Yes, it sounds like you’re doing all the steps correctly. If you want to allow new users to sign up and log in to your app, you’ll need to go to the Okta Admin Console and navigate to Directory > Self-Service Registration > Enable Registration. Then, you’ll need to configure the Sign-In Widget to enable registration too.

One thing I noticed is that your app takes a long time to load the initial login screen. I’m not sure why. I also noticed the title (doctor-nuxt-app), which makes me think you’re using Nuxt.js.

I haven’t had much luck getting our Sign-In Widget to work with SSR apps. We do have a tutorial on it though.

ivanvaganov1 · August 31, 2021, 9:27pm

Thank you very much for you help!

I also see that loading Okta widget takes a long time. I don’t see it when I open the app locally.

Another issue I found is that: I can log in by using Safari but cannot log in if I use other browsers (Chrome or Mozilla). Very strange. Maybe something goes wrong inside code compiled why nuxt.

ivanvaganov1 · September 1, 2021, 10:36am

We have solved our issue! Just enabled HTTPS and use HTTPS instead of HTTP.

HTTP works only with localhost! Other IPs even 192.168.x.x require HTTPS.

mraible · September 1, 2021, 3:12pm

I thought of that but never mentioned it because I thought you’d see an error about using HTTP. I’m glad you figured it out!

system · September 2, 2021, 3:13pm

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.