Deploying App to Server - Failure Upon Login

[oktadev]

Deploying App to Server - Failure Upon Login

[mraible]

You have to configure your server so all requests go to index.html. I’m not sure if there’s a setting for doing this in IIS. With Cloud Foundry and Heroku, you can say it’s a SPA and it does it for you.

…

On Apr 2, 2019, at 10:27, chrisrosa418 ***@***.***> wrote: Hey @mraible I am at a place where I am deploying my application to the server. My deployment server is a Windows Server 2012 box. After confirming application functionality and login capabilities locally on localhost:3000, I then started to deploy my application to my server. I figured I'd do final testing with the OKTA Dev account before I cut over to my Companies OKTA. Upon doing a npm run-script build, I published the build folder to the Windows Server IIS folder root. This worked like a charm, and I am able to navigate to the react frontend via the server in Chrome. When I was first singing in, I was getting a CORS error, which I resolved by adding in the server address as a Trusted Origin. Thereafter, the login process is hitting the server and authenticating correctly (I can see the successful login attempts in the OKTA Dashboard). However, when OKTA responds to my app with the token via /implict/callback, get a 404 - File or Directory Not Found referring to /implict/callback/{token} Having trouble figuring out what is causing this. Can you offer any suggestions? Cheers, _CR — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[chrisrosa418]

Appreciate it.

Just if anyone is hitting their heads against the wall, I am referring to this documentation to troubleshoot.

https://medium.com/@mateioprea/setting-up-a-react-app-with-react-router-in-iis-71cb86aee376

I haven't been able to get it working yet, but I believe this is what my problem is.

If you leave this bug open, I will post solution once I get it up and running.

[chrisrosa418]

Hey @mraible - I decided to ditch Windows Server and IIS and serve my app via Ubtuntu 16.04 w/ Nginx as I hit too many roadblocks with IIS v6 and React.

I was able to get passed the aforementioned 404 error, but now i am getting a 400 error

Identity Provider: Unknown
Error Code: invalid_request
Description: The 'redirect_uri' parameter must be an absolute URI that is whitelisted in the client app settings.

The response URL coming back is

https://{oktaURL}.oktapreview.com/oauth2/default/v1/authorize?client_id={clientID}&redirect_uri=http%3A%2F%2F{ipAddressOfNGNIXServer}%2Fimplicit%2Fcallback&response_type=id_token%20token&response_mode=fragment&state={stateValue}nonce={nonce}sessionToken={sessionToken}&scope=openid%20email%20profile

I took your advice from your last suggestion and used Nginx, to redirect all requests back to index.html. Here is my Nginx sites-enabled

server {
        listen 80
        default_server;
        server_name /var/www/html;

        root /var/www/html;
        index index.html index.htm;
        location ~* \.(?:manifest|appcache|html?|xml|json)$ {
               expires -1;
                # access_log logs/static.log; # I don't usually include a static log
        }

        location ~* \.(?:css|js)$ {
                try_files $uri =404;
                expires 1y;
                access_log off;
                add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
                try_files $uri =404;
        }

        # Any route that doesn't have a file extension (e.g. /devices)
        location / {
                try_files $uri $uri/ /index.html;
                root /var/www/html/static;
        }
}

Here is my SPA setup

And I have added the NGNIX server to the trusted origins http://1.1.1.1/

My App.js code

function onAuthRequired({history}) {
  history.push('/login');
}

class App extends Component {
  render() {
    return (
      <Router>
        <Security issuer='https://dev-XXXXXX.oktapreview.com/oauth2/default'
                  client_id='{clientID}'
                  redirect_uri={window.location.origin + '/implicit/callback'}
                  onAuthRequired={onAuthRequired}>
          <Route path='/' exact={true} component={Home}/>
          <SecureRoute path='/points' component={Points}/>
          <SecureRoute path='/clients' component={Clients}/>
          <SecureRoute path='/reporting' component={Reporting}/>
          <Route path='/login' render={() => <Login baseUrl='https://dev-XXXXXX.oktapreview.com'/>}/>
          <Route path='/implicit/callback' component={ImplicitCallback}/>
        </Security>
      </Router>
    );
  }
}

I think i've provided everything I can to troubleshoot, please let me know if you need any clarification or anymore information.

Any and all help would be greatly appreciated. I've troubleshoot this and have read all your tutorials and troubleshooting tips, and am still getting this 400 error. This has been over a week of trying to get this deployed to a production environment, again any help would be greatly appreciated.

[mraible]

When you see the invalid redirect URI error, it’s because you don’t have the absolute URL in your Okta app’s settings. If you copy/paste the redirect_uri parameter’s value from your address bar and add it to your Okta app’s settings, it’ll work as expected.

…

On Apr 7, 2019, at 12:58, chrisrosa418 ***@***.***> wrote: Hey @mraible - I decided to ditch Windows Server and IIS and serve my app via Ubtuntu 16.04 w/ Nginx as I hit too many roadblocks with IIS v6 and React. I was able to get passed the aforementioned 404 error, but now i am getting a 400 error Identity Provider: Unknown Error Code: invalid_request Description: The 'redirect_uri' parameter must be an absolute URI that is whitelisted in the client app settings. The response URL coming back is https://{oktaURL}.oktapreview.com/oauth2/default/v1/authorize?client_id={clientID}&redirect_uri=http%3A%2F%2F{ipAddressOfNGNIXServer}%2Fimplicit%2Fcallback&response_type=id_token%20token&response_mode=fragment&state={stateValue}nonce={nonce}sessionToken={sessionToken}&scope=openid%20email%20profile I took your advice from your last suggestion and used Nginx, to redirect all requests back to index.html. Here is my Nginx sites-enabled server { listen 80 default_server; server_name /var/www/html; root /var/www/html; index index.html index.htm; location ~* \.(?:manifest|appcache|html?|xml|json)$ { expires -1; # access_log logs/static.log; # I don't usually include a static log } location ~* \.(?:css|js)$ { try_files $uri =404; expires 1y; access_log off; add_header Cache-Control "public"; } # Any route containing a file extension (e.g. /devicesfile.js) location ~ ^.+\..+$ { try_files $uri =404; } # Any route that doesn't have a file extension (e.g. /devices) location / { try_files $uri $uri/ /index.html; root /var/www/html/static; } } Here is my SPA setup And I have added the NGNIX server to the trusted origins http://1.1.1.1/ My App.js code function onAuthRequired({history}) { history.push('/login'); } class App extends Component { render() { return ( <Router> <Security issuer='https://dev-XXXXXX.oktapreview.com/oauth2/default' client_id='{clientID}' redirect_uri={window.location.origin + '/implicit/callback'} onAuthRequired={onAuthRequired}> <Route path='/' exact={true} component={Home}/> <SecureRoute path='/points' component={Points}/> <SecureRoute path='/clients' component={Clients}/> <SecureRoute path='/reporting' component={Reporting}/> <Route path='/login' render={() => <Login baseUrl='https://dev-XXXXXX.oktapreview.com'/>}/> <Route path='/implicit/callback' component={ImplicitCallback}/> </Security> </Router> ); } } I think i've provided everything I can to troubleshoot, please let me know if you need any clarification or anymore information. Any and all help would be greatly appreciated. I've troubleshoot this and have read all your tutorials and troubleshooting tips, and am still getting this 400 error. This has been over a week of trying to get this deployed to a production environment, again any help would be greatly appreciated. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[chrisrosa418]

Here is the redirect_uri from the address bar with everything but redirect_uri removed

https://dev-{devID}.oktapreview.com/oauth2/default/v1/authorize?client_id={clientID}&redirect_uri=http%3A%2F%2F10.10.1.57%2Fimplicit%2Fcallback&response_type=id_token%20token&response_mode=fragment&state={state}&nonce={nonce}&sessionToken={sessionToken}&scope=openid%20email%20profile

And here is the screenshot from the app settings

As you can see I have a local ubuntu 16.04 machine running Nginx on port 10.10.1.57

I have the redirect_uri set to http://10.10.1.57/implicit/callback/
and that is the same redirect_uri that is coming back above. (minus the unicode)

I just tested with the /implicit/callback removed and it also didn't work.

Am I missing something? Do I need DNS resolution from a domain? I would think the IP address would work.

[mraible]

You have a typo in your redirect_uri in your Okta app. I see it in your screenshot.

…

On Apr 7, 2019, at 17:33, chrisrosa418 ***@***.***> wrote: Here is the redirect_uri from the address bar with everything but redirect_uri removed https://dev-{devID}.oktapreview.com/oauth2/default/v1/authorize?client_id={clientID}&redirect_uri=http%3A%2F%2F10.10.1.57%2Fimplicit%2Fcallback&response_type=id_token%20token&response_mode=fragment&state={state}&nonce={nonce}&sessionToken={sessionToken}&scope=openid%20email%20profile And here is the screenshot from the app settings As you can see I have a local ubuntu 16.04 machine running Nginx on port 10.10.1.57 I have the redirect_uri set to http://10.10.1.57/implicit/callback/ and that is the same redirect_uri that is coming back above. (minus the unicode) I just tested with the /implicit/callback removed and it also didn't work. Am I missing something? Do I need DNS resolution from a domain? I would think the IP address would work. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[chrisrosa418]

Hmm that is embarrassing.

Let me try and fix that and ill let ya know.

Thanks for your continued support.

[chrisrosa418]

Hey Matt,

Just wanted to update you and this ticket. And provide an update to serve as a deployment guide for people trying to get this app onto a production server. Down to my last bug.

Frontend React Server
I was able to get an Ubuntu Server, running NGINX to serve the React Frontend. To deploy said frontend, I used the following guide to help.

https://codeburst.io/how-to-setup-nginx-for-react-a504f38f95ed

I have my login_redirect_uri set to http://my.domain.com/implicit/callback
And I have the domain added to my trusted origins http://my.domain.com/

After configuring the above, I was able to log into through corporate using Two Factor Authentication Enabled.

The above setup worked for my okta dev account, using one factor authentication, and also for my corporate production environment using two factor authentication.

Backend GraphQL Server
I deployed this box on the same Ubuntu Box. In order to serve the graphQL, I used pm2 using the command pm2 start npm -- start

When I ran this with my dev server, everything worked without a hitch. I finally have a working developer environment deployed to my production environment.

The above guide should be able to get this Application deployed on a working server.

Question
My last hurdle I am facing is cutting over my GraphQL backend to production environment.
I updated my clientID to be that of my corporations application (the same one that works in the frontend)

I also updated the issuer to match that of the frontend.
I've tried
http://my.domain.com/
http://my.domain.com/oauth2/
http://my.domain.com/oauth2/v1/
http://my.domain.com/oauth2/v1/authorize
http://my.domain.com/oauth2/default

The ones that don't return 404 errors, are giving me the following error

 name: 'JwtParseError',
  userMessage: 'Error while resolving signing key for kid ""',

However the parsedBody in the debug information has all the right corporate information.

Is it because my corp is forcing two factor authentication? I get the prompt on the frontend and successfully authenticate past it. However the GraphQL backend constantly fails with a JWT Parse Error complaining about the signing key.

There was also one failure that resulted in

"errorCode": "E0000015",
"errorSummary": "You do not have permission to access the feature you are requesting",

Should I maybe try to use an auth token rather than using the clientID? Will that bypass the two factor authentication?

Is the two factor authentication causing these errors? Is there anything I can do to resolve this?

As I said, my corporation forces two factor for OKTA logins, I don't think I will be able to turn them off.

[mraible]

You need to use the issuer URL for your authorization server, not the default one that exists at the root of your org. If you create a new developer account, this is /oauth2/default. You can see a list in the Okta dashboard at API > Authorization Servers. It’s possible your company org does not have all the developer feature flags turned on. For help with your org, please contact [email protected].

…

On Apr 19, 2019, at 13:28, chrisrosa418 ***@***.***> wrote: Hey Matt, Just wanted to update you and this ticket. Down to my last bug. Frontend React Server I was able to get an Ubuntu Server, running NGINX to serve the React Frontend. To deploy said frontend, I used the following guide to help. https://codeburst.io/how-to-setup-nginx-for-react-a504f38f95ed I have my login_redirect_uri set to http://my.domain.com/implicit/callback And I have the domain added to my trusted origins http://my.domain.com/ After configuring the above, I was able to log into through corporate using Two Factor Authentication Enabled. The above setup worked for my okta dev account, using one factor authentication, and also for my corporate production environment using two factor authentication. Backend GraphQL Server I deployed this box on the same Ubuntu Box. In order to serve the graphQL, I used pm2 using the command pm2 start npm -- start When I ran this with my dev server, everything worked without a hitch. I finally have a working developer environment deployed to my production environment. The above guide should be able to get this Application deployed on a working server. Question My last hurdle I am facing is cutting over my GraphQL backend to production environment. I updated my clientID to be that of my corporations application (the same one that works in the frontend) I also updated the issuer to match that of the frontend. I've tried http://my.domain.com/ http://my.domain.com/oauth2/ http://my.domain.com/oauth2/v1/ http://my.domain.com/oauth2/v1/authorize http://my.domain.com/oauth2/default The ones that don't return 404 errors, are giving me the following error name: 'JwtParseError', userMessage: 'Error while resolving signing key for kid ""', However the parsedBody in the debug information has all the right corporate information. Is it because my corp is forcing two factor authentication? I get the prompt on the frontend and successfully authenticate past it. However the GraphQL backend constantly fails with a JWT Parse Error complaining about the signing key. There was also one failure that resulted in "errorCode": "E0000015", "errorSummary": "You do not have permission to access the feature you are requesting", Should I maybe try to use an auth token rather than using the clientID? Will that bypass the two factor authentication? Is the two factor authentication causing these errors? Is there anything I can do to resolve this? As I said, my corporation forces two factor for OKTA logins, I don't think I will be able to turn them off. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[mraible]

Closing since this is not an open issue related to this repo or its blog post.