Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Deploying App to Server - Failure Upon Login #2

Closed
chrisrosa418 opened this issue Apr 2, 2019 · 10 comments
Closed

Deploying App to Server - Failure Upon Login #2

chrisrosa418 opened this issue Apr 2, 2019 · 10 comments

Comments

@chrisrosa418
Copy link

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
@mraible
Copy link

mraible commented Apr 2, 2019 via email

@chrisrosa418
Copy link
Author

chrisrosa418 commented Apr 4, 2019 •
edited
Loading

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
Copy link
Author

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
okta_settings

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
Copy link

mraible commented Apr 7, 2019 via email

@chrisrosa418
Copy link
Author

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
okta_new

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
Copy link

mraible commented Apr 8, 2019 via email

@chrisrosa418
Copy link
Author

Hmm that is embarrassing.

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

Thanks for your continued support.

@chrisrosa418
Copy link
Author

chrisrosa418 commented Apr 19, 2019 •
edited
Loading

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
Copy link

mraible commented Apr 19, 2019 via email •
edited
Loading

@mraible
Copy link

mraible commented Nov 9, 2019

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

@mraible mraible closed this as completed Nov 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mraible @chrisrosa418