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

not private route #967

Closed
marlena-sliwinska opened this issue Mar 9, 2023 · 4 comments
Closed

not private route #967

marlena-sliwinska opened this issue Mar 9, 2023 · 4 comments

Comments

@marlena-sliwinska
Copy link

Hi, I've used oidc-react in my project.
As You can see I've wrapped my router with AuthProvider. (I am using react-router and new available API - createBrowserRouter)
<AuthProvider> <AppRouter /> </AuthProvider>

I want to exclude one of the routes from OAuth - make not restricted - available for all users, not only logged. Haw can I do that?
I cannot find it in documentation.
Is there any easy way?

@jamesdh
Copy link
Contributor

jamesdh commented Mar 10, 2023

@marlena-sliwinska I actually just went through this issue last week. In order to do it, you'll need to disable autoSignIn in your AuthProviderProps config. Then in your route configuration, you can do something like the following:

const AppRouter: React.FC = () => {
  const { isLoading, userData, signIn } = useAuth();
  
  const redirectToLogin = () => {
    if (!userData && !isLoading) {
      void signIn();
    }
  };
  
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/home"><Redirect to="/" /></Route>
        <Route path="/login"><Redirect to="/" /></Route>
        <Route path="/user-agreements" component={UserAgreements} />
        {userData && (
          <UserContainer.Provider>
            /* ...private routes here */
          </UserContainer.Provider>
        )}
        <Route render={redirectToLogin} />
      </Switch>
    </BrowserRouter>
  );
};

Essentially, if no userData exists, the user isn't logged in so the "private" routes won't even exist. If the page they attempt to access is one of the non-protected routes (at the top in this example), then it will route accordingly. If none of those match, then it falls through to the final universally matching Route which in turn redirects to the sign in page.

@marlena-sliwinska
Copy link
Author

marlena-sliwinska commented Mar 13, 2023

I am using the newest version of the react-router-dom and as you can see the implementation of routing looks like this:

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

With this type of implementation is not so easy

@gabyzenack
Copy link

I'm having the same problem.
Also other errors, such as consuming an api before finishing the authentication.
@marlena-sliwinska could you solve it?

@simenandre
Copy link
Member

Closing this as stale. Please open a new issue or let me know you still have this issue in a comment 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants