Welcome to react-auth-kit Discussions!

[darkmatter18]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[boyboi86]

Hi

Thank you for the good work.

I'm very new to react and stuff, I'm having so difficulties understanding how to link and use "RequireAuth" in react router. I went through the examples provided. So in the event if I have many "route", does it mean I put "Required Auth" inside all the "elements"?

Any advice or kindly point to other existing detailed examples that I might have missed would be appreciated.

[darkmatter18]

Only use Required Auth, where you need to add Private Route.

const RoutesComponent = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path={'/'} element={<Home/>}/>
                <Route path={'/login' } element={<Login/>}/>
                <Route path={'/secure'} element={
                  <RequireAuth loginPath={'/login'}>
                    <SecureComponent/>
                  </RequireAuth>
                }/>
            </Routes>
        </BrowserRouter>
    )
}

As you can see here, the / and /login is open for all, so no need to add RequireAuth, but /secure is just for authenticated users, so it needs RequireAuth, if there is a /secure2 path that also needs a RequireAuth.

Hope you understand. If anything else, reply freely.

[boyboi86]

Thank you for your advice!! I was playing around with something like this.. I wrap this "parent" then the "children" get passed the same (Still trying):

<Route path="/title1" element={
  <RequireAuth loginPath={'/login'}>
  <Outlet/>
  </RequireAuth>
}>
  <Route path="/subtitle1" element={<Component1 />} />
  <Route path="/subtitle2" element={<Component2 />} />
</Route>

I assume it can be done this way cause I have quite a number of subdirectories.