After logging in with the LogInCallback I get a 404

Questions
1

I am using the okta-react library to attempt to auth with my application. However, when I am getting redirected back to my application the LoginCallback component is attempting to redirect to http://localhost:9000/login/callback?code=ccbs-y3iwcj9zh-6furJOUJa844oRzR79SUBkRNm-7U&state=lIb1G9EqvKJB1iUd8nMIyn2Gd140WRDqbRpE4zB90LaXQdcZuY6SFzC1JRqRwiNp which doesn’t exist. I’m not sure where ?code=ccbs-y3iwcj9zh-6furJOUJa844oRzR79SUBkRNm-7U&state=lIb1G9EqvKJB1iUd8nMIyn2Gd140WRDqbRpE4zB90LaXQdcZuY6SFzC1JRqRwiNp is coming from.

Here are the versions I am using:

@okta/okta-auth-js : ^5.5.0
@okta/okta-react : ^6.1.0
react : ^17.0.1
react-dom : ^17.0.1
react-router-dom : ^5.2.0
esbuild : ^0.12.5

Here is my minimal setup
Index.tsx

import * as React from "react";
import { render } from "react-dom";
import App from "./containers/App";
import { BrowserRouter } from "react-router-dom";

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.tsx

import {
  Switch,
  Route,
  Redirect,
  useLocation,
  useHistory,
  NavLink,
} from "react-router-dom";
import { LoginCallback, Security, SecureRoute } from "@okta/okta-react";
import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import Users from "components/Users";
import Home from "components/Home";

const App: FunctionComponent = () => {
  const query = useLocation().search;
  const history = useHistory();

  const oktaAuth = new OktaAuth({
    Okta values
  });

  const restoreOriginalUri = async (
    _oktaAuth: OktaAuth,
    originalUri: string
  ) => {
    history.replace(toRelativeUrl(originalUri || "/", window.location.origin));
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <div className="text-white h-full">
        <ul className="flex justify-evenly items-center list-none">
          <li>
            <NavLink
              to={"/"}
              className={`text-white mr-1.5 ml-2.5 hover:underline`}
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              to={"/users"}
              className={`text-white mr-1.5 ml-2.5 hover:underline`}
            >
              Users
            </NavLink>
          </li>
        </ul>
        <div className="flex justify-center items-center">
        </div>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/login/callback" component={LoginCallback} />
          <SecureRoute path="/users" component={Users} />
        </Switch>
      </div>
    </Security>
  );
};

export default App;

I’m curious if this is an issue with using esbuild over webpack or possibly a bug around third party cookies.

2

The LoginCallback component is supposed to parse the authorization code from the url and exchange it for tokens.

Do you encounter the same issue with one of our sample apps?

3

I do not encounter the same issue with the sample code

4

Any solution for this one? I get the same error with error code as 404

5

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