404 response after succesfully logging in

Questions
1

Hello,

i’m developing a React SPA using Okta authentication. It works flawlessly in localhost but when i tried to deploy the app i get 404 pages after trying to login. I get redirected to /implicit/callback and the browser returns 404.

This is my okta config:

const oktaConfig = {
    baseDomain: 'https://*********.okta.com',
    issuer: 'https://*********.okta.com/oauth2/default',
    redirect_uri: window.location.origin + '/implicit/callback',
    client_id: '**********************'
}

export default oktaConfig;

Ma app.js:

// Librerie core
import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Security, SecureRoute, ImplicitCallback } from "@okta/okta-react";

// Componenti react, css e config okta
import oktaConfig from "./config/okta";
import Login from "./components/auth/Login";
import LoadingSpinner from "./components/ui/LoadingSpinner";
import DashboardLayout from "./components/layout/DashboardLayout";

// Reindirizza verso la pagina di login se l'autenticazione Okta non è già avvenuta
function onAuthRequired({ history }) {
  history.push("/login");
}

function App() {
  return (
    <Router basename="/">
      <Security
        issuer={oktaConfig.issuer}
        client_id={oktaConfig.client_id}
        redirect_uri={oktaConfig.redirect_uri}
        onAuthRequired={onAuthRequired}
      >
        <Switch>
          <Route
            path="/login"
            render={() => <Login baseUrl={oktaConfig.baseDomain} />}
          />
          <SecureRoute
            path="/"
            render={() => (
              <Suspense fallback={<LoadingSpinner />}>
                <DashboardLayout />
              </Suspense>
            )}
          />
        </Switch>

        <Route path="/implicit/callback" component={ImplicitCallback} />
      </Security>
    </Router>
  );
}

export default App;

I have the tag in my index.html file.

In my Okta dashboard i’ve set the Login redirect URIs exactly as seen in my Oktaconfig.

Any clues?

2

While I am using VueJS, I have 2 app registrations – one for the app when running locally for dev, one for the app when running in Azure. The configs differ in that the Azure-based instance is running behind a domain with SSL, so the callback URL is not localhost. I just use env to differentiate in the code. Seems to work OK.

However, I also have a callback 404 issue – on my Mac, the localhost callback works fine. Offsite devs running Windows with the same Okta config get a 404 on the implicit/callback.

3

Hi @Fieel @bhouse1273

The reason for returning 404 on production environment is that /implicit/callback is a virtual path generated from index.html file. On local environment there should not be any issues resolving the endpoint, however, when deploying to production, the web server will try to resolve the endpoint physically.

To resolve this issue, your back-end must be configured to redirect requests coming on /implicit/callback endpoint to index.html.

1 Like
4

The issue happens on the local environment. The production environment works fine.

What we have in the Vue router is, as per instructions:

{

  path: '/implicit/callback',

  component: Auth.handleCallback()

},

We use env in the app to substitute the Okta variables:

Vue.use(Auth, {

issuer: ‘https://dev-account.okta.com/oauth2/default’,

clientId: process.env.NESTVIEW_CLIENT_ID,

redirectUri: process.env.NESTVIEW_REDIRECT, // ‘http://localhost:8080/implicit/callback’,

scopes: [‘openid’, ‘profile’, ‘email’]

})

The local dev mode on the Mac works fine, but it throws a 404 on GET /implicit/callback under Windows.

5

Yes, i forgot the usual “Redirect everything back to index.html” rule to have a working react-router!

This is the web.config file i used in my webserver root to redirect all requests back to index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
6

I keep getting a 404 page not found when I try authenticate to my app. I have a React app (OIDC SPA app) on Netlify. I created a redirects file in my public folder.

This is the content of that file:

/* /index.html 200

Could anyone offer me guidance on where to go next?