SecureRoute render props don't work

[dryhurst]

Describe the bug?

I can't get render props to work using a <SecureRoute> like I could with a normal react-router-dom <Route>

return (
          <SecureRoute
            key={route.path + '-' + index}
            path={route.path}
            exact={route.exact}
            render={(routeProps) => (
              <Guard>
                <Layout>
                  {route.routes ? (
                    renderRoutes(route.routes)
                  ) : (
                    <Component {...routeProps} />
                  )}
                </Layout>
              </Guard>
            )}
          />
        );

What is expected to happen?

render props should work

What is the actual behavior?

render props does not work

Reproduction Steps?

try to render props using <SecureRoute>

ie: <SecureRoute render={props => <Component {...props} />} />

SDK Versions

"@okta/okta-auth-js": "^6.6.2",
"@okta/okta-react": "^6.5.0",

Execution Environment

$ node --version v16.15.0

Additional Information?

No response

[jaredperreault-okta]

@dryhurst What version of react-router-dom are you using?

[dryhurst]

@jaredperreault-okta

"react-router-dom": "^5.2.0"

i will try upgrading to 5.3.3

[dryhurst]

Honestly , I can't get <SecureRoute> to work even without props. it just hangs on /login/callback

[jaredperreault-okta]

Do you have <LoginCallback /> included in your app under /login/callback (or some other path)?

[jaredperreault-okta]

This might be helpful: https://github.com/okta/okta-react/blob/master/samples/routing/react-router-dom-v5/src/components/Routes.tsx#L26

[dryhurst]

i upgraded react-router-dom to v5.3.3

here is my routes code, it generates routes from an array of objects which configure the routes. I've updated the <LoginCallback> component call to mimic the one you've shared in the example above.:

import { Fragment, lazy, Suspense } from 'react';
import { Redirect, Route as ReactRouterRoute, Switch } from 'react-router-dom';
import { LoginCallback, SecureRoute } from '@okta/okta-react';

// replacing AuthGuard with Okta Security
// import AuthGuard from './components/AuthGuard';
import DashboardLayout from 'src/layouts/DashboardLayout';
import HomeView from 'src/views/home/HomeView';
import LoadingScreen from 'src/components/LoadingScreen';
import MainLayout from 'src/layouts/MainLayout';

export const renderRoutes = (routes = []) => (
  <Suspense fallback={<LoadingScreen />}>
    <Switch>
      {routes.map((route, index) => {
        // const Guard = route.guard || Fragment;
        const Route = route.routeType || ReactRouterRoute;
        const Layout = route.layout || Fragment;
        const Component = route.component;

        return (
          <Route
            key={route.path + '-' + index}
            path={route.path}
            exact={route.exact}
            render={(props) => (
              <Layout>
                {route.routes ? (
                  renderRoutes(route.routes)
                ) : (
                  <Component {...props} />
                )}
              </Layout>
            )}
          />
        );
      })}
    </Switch>
  </Suspense>
);

const routes = [
  // okta auth callback route
  {
    exact: true,
    path: '/login/callback',
    component: (
      <LoginCallback
        render={() => <LoginCallback loadingElement={<LoadingScreen />} />}
      />
    ),
    routeType: ReactRouterRoute,
  },
<SNIP>

It just hangs here like this:

[jaredperreault-okta]

Can you try without <Suspense />? My understanding is React.lazy() is required to wrap the contents of Suspense, but I don't see it in the snippet. Perhaps the <Switch> isn't being mounted due to Suspense? (therefore the callback route doesn't exist, so it hangs)

[dryhurst]

I've already tried it without suspense. It's the same result.

[jaredperreault-okta]

Have you tried mounting it directly? (Outside of routes.map)

      {({ map })}
      <Route path='/login/callback' render={() => (<LoginCallback loadingElement={<Loading />} />)} />
    </Switch>
  </Suspense>

[dryhurst]

@jaredperreault-okta i really appreciate all the time you've spent with me this morning trying to figure this out. i'm going to keep plugging away at this until i find a solution and come back here with it provided i get it working. i am absolutely not going back to firebase authentication, ever and i don't want to use Auth0. i've spent a week already trying to figure this out, and im not giving up now!

[dryhurst]

So now i have it working accept on /login/redirect it hangs and i have to refresh the page for <SecureRoute> to load components almost every time. SOMETIMES it works and redirects correctly but rarely.

[jaredperreault-okta]

Is /login/redirect a valid redirect uri? redirectUri is configurable on the Okta Admin Console and needs to passed to your OktaAuth instance

const oktaAuth = new OktaAuth({
  issuer: process.env.ISSUER,
  clientId: process.env.SPA_CLIENT_ID,
  redirectUri: window.location.origin + '/login/callback'
});

Based on your description, it seems like there is a mismatch

EDIT: The same value needs to match your <LoginCallback />

<Route path='/login/callback' render={() => (<LoginCallback loadingElement={<Loading />} />)} />

[dryhurst]

@jaredperreault-okta i am using brave browser. i've tested my work in chrome and firefox and it works. where do i submit an issue for brave browser not working with okta redirect? is that a brave issue or an okta issue? i've tested brave with shields up and shields down, and neither seem to work. not sure if brave is stripping the origin header or something needs further research i suppose. googled for this issue and others seem to have it but don't see a solution.

[jaredperreault-okta]

I tested our sample in Brave and it worked (sample). GitHub is the correct place to file an issue, if you believe the problem is Okta. At this point, I'm not sure what the issue is or what is causing it. Are there any errors being thrown to the console? Or can you put together a minimal sample repo that illustrates the issue? Until we are able to observe this issue, there's isn't much we can do.