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.

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

The SecureRoute component will not load if "code=" is present in url #258

Open
McDusty opened this issue Apr 10, 2023 · 5 comments
Open
Labels
bug Something isn't working

Comments

@McDusty
Copy link

McDusty commented Apr 10, 2023

Describe the bug

We have been using okta for authorization for a few years now with React Router 5, React 16, and the Okta provided SecureRoute component.

We have a search form that sets the search params into the url and will derive current search parameters for the the query params in the url.

we have discovered that one of the parameters in the URL "code=" will result in a plank page on a refresh.
If the url has "codee=" or just "code" the page will load without error.

After a lot of debugging it is clear that the SecureRoute component is causing this behavior.

Reproduction Steps?

You can replicate this by going to any page using SecureRoute to render the route and type "code=" or "?code=",
(depending on your route restrictions) and hit enter to load that new url.

This will happen if the user has an working okta token or not.

The page will not load.

Because of the nature of the site I am working on I can not share any screen shots or the url I am working without permission.

SDK Versions

 System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 6.39 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.3.0 - ~/Projects/monorepo/source/node_modules/.bin/npm
  npmPackages:
    @okta/okta-auth-js: 5.9.1 => 5.9.1
    @okta/okta-react: 6.3.0 => 6.3.0
    @okta/okta-signin-widget: 6.3.0 => 6.3.0
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    react-error-boundary: 3.1.4 => 3.1.4
    react-icons: 4.3.1 => 4.3.1
    react-query: 3.39.2 => 3.39.2
    react-resize-detector: 6.7.8 => 6.7.8
    react-rnd: 10.4.1 => 10.4.1
    react-router: 5.3.4 => 5.3.4
    react-router-dom: 5.3.4 => 5.3.4
    react-scripts: 4.0.3 => 4.0.3

Additional Information

No response

@McDusty McDusty added the bug Something isn't working label Apr 10, 2023
@McDusty
Copy link
Author

McDusty commented Apr 10, 2023

I think you have been seeing this bug in other places.
I can see in the screen shots this ticket had code= and the page url would not load for them.
#237

@denysoblohin-okta
Copy link
Contributor

Can't reproduce your issue with just using code query parameter in SecureRoute.
Eg. opening /protected?code=111 in test app works fine.
Could you please share some code or create small reproducible demo project to demonstrate an issue?

@McDusty
Copy link
Author

McDusty commented Apr 11, 2023

So I am running the app that you linked to and I am seeing the same behavior that I reported.
image

with code =
image

with just code
image

my response from the auth call
image

when code= is in the url the only thing that will render is the component outside of the route from the app.tsx file.

also it would be nice if you included a readme for this test app. Something with instructions on how to run the test app.
also include an example env file.

@jaredperreault-okta
Copy link
Contributor

jaredperreault-okta commented Apr 12, 2023

How are you handling the application redirect (aka LoginCallback)? via the <LoginCallback component? Or are you doing it manually via auth-js methods?

isLoginCallback (which is used by <LoginCallback>) checks the url for specific params to determine how to process the application redirect. code= is one of the possible params (see here), so your application may be trying to process a redirect, but can't because the code passed isn't valid (because you're using that param for other purposes).

The easiest path forward would be to use a different query parameter name. If that's not possible we will need a bit more information regarding how you're handling the redirect

@jaredperreault-okta
Copy link
Contributor

Can you also paste your authjs (OktaAuth) config? (Please remove sensitive fields like clientId)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants