Local to Test/QA server

[ecamilon]

Hello, we are currently doing some testing for integrating OKTA for our React.js application for a client and came across some issues similar to this one : Local to Test/QA Server Application Testing. with the primary difference being the language, with ours being a React SPA. We pretty much followed the implicit flow for react as described here : https://developer.okta.com/code/react/okta_react.

It would run perfectly when running it on localhost serving it through npm start or building it and deploy to server with localhost configurations, however - when we build using the domain name such as http://vmtest.company.com:8551 instead of http://localhost:8551 it wouldn’t resolve the callback coming after you log in. We’re able to log in but when it redirects we get a 404 error as well; see attached image.

[ecamilon]

Can anybody help on this issue? I can upload the codebase if needed. Thanks.

[lnhh]

I have a very similar issue trying to build the login for an angular app.
It works fine for localhost, but as soon as I change the hardcoded values to my domain and deploy it on my server, it just redirects to mydomain.com/implicit/callback and displays a 404.

The values I exchange are as follows:

const oktaConfigDev = {
issuer: ‘https://dev-XXXX.oktapreview.com/oauth2/default’,
redirectUri: ‘http://localhost:4200/implicit/callback’,
clientId: ‘XXXX’
};

const oktaConfigProd = {
issuer: ‘https://dev-XXXX.oktapreview.com/oauth2/default’,
redirectUri: ‘https://mydomain.com/implicit/callback’,
clientId: ‘XXXX’
};

My Routing:
{path: ‘’, redirectTo: ‘/’, pathMatch: ‘full’},
{path: ‘implicit/callback’, component: OktaCallbackComponent},
{path: ‘404’, component: PagenotfoundComponent},
{path: ‘**’, redirectTo: ‘/404’, pathMatch: ‘full’},

and I login via my component and a button calling login():

constructor(public oktaAuth: OktaAuthService) {
// Subscribe to authentication state changes
this.oktaAuth.$authenticationState.subscribe(
(isAuthenticated: boolean) => this.setUp(isAuthenticated)
);
}

ngOnInit() {
this.oktaAuth.isAuthenticated()
.then((isAuthenticated: boolean) => this.setUp(isAuthenticated))
.catch(err => console.log('Error getting user authentication state ’ + err));
}

login() {
this.oktaAuth.loginRedirect(’/’);
}

Maybe someone can help us.

[laserdinosaur67]

Are you sure your account settings are not still set to your local callback urls? The setting is under “Applications > Your app > General > Login redirect URIs”. If you have different callback urls for different environments, you will need a separate application setup for each.

Also, if you have a custom authorization server, make sure you have the CORS redirect setup. It’s under “API > Trusted Origins > Add Origin”.

[lnhh]

I have added both. Localhost as well as mydomain.com.

How would my app work on multiple envs otherwise? Or would I need two okta apps then?

[lnhh]

okay, ive tried that, also didnt work

[lnhh]

fyi, ive done it exactly like this post: https://developer.okta.com/quickstart/#/angular/nodejs/express

edito: ok, wow. I am an idiot. One has to include the subdomain in the cors entry…
Now everything works as expected

thanks for the help!