wise-white
wise-white3mo ago

<Authenticated /> Best Practice

I am relatively new to Next and am working on setting up a project using Cognito/Amplfy v5. I have my auth provider set up and am wrapping my protected routes in <Authenticated />. I want to have every route except from /login, /reset-password, etc configured to be behind <Authenticated /> by default, such that I don't need to define it in the layout file for every page and any route not aforementioned will redirect to /login . Is there a way to do this that would follow internal best practices?
3 Replies
kapa.ai
kapa.ai3mo ago
Hi @benjodev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can achieve this by wrapping your entire application with the <Authenticated /> component and defining the fallback as /login. This will ensure that all routes, except those specifically defined, will be protected and any unauthenticated access will be redirected to the /login page. Here is an example of how you can structure your routes:
<Routes>
<Route
element={
<Authenticated fallback={<Outlet />}>
<NavigateToResource resource="posts" />
</Authenticated>
}
>
<Route path="/login" element={<AuthPage type="login" />} />
<Route path="/reset-password" element={<ResetPasswordPage />} />
</Route>
<Route
element={
<Authenticated redirectOnFail="/login">
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
</Authenticated>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route
path="create"
element={
<CanAccess fallback={<div>Unauthorized!</div>}>
<PostCreate />
</CanAccess>
}
/>
</Route>
<Route path="categories">
<Route index element={<CategoryList />} />
<Route path="show/:id" element={<CategoryShow />} />
</Route>
</Route>
</Routes>
<Routes>
<Route
element={
<Authenticated fallback={<Outlet />}>
<NavigateToResource resource="posts" />
</Authenticated>
}
>
<Route path="/login" element={<AuthPage type="login" />} />
<Route path="/reset-password" element={<ResetPasswordPage />} />
</Route>
<Route
element={
<Authenticated redirectOnFail="/login">
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
</Authenticated>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route
path="create"
element={
<CanAccess fallback={<div>Unauthorized!</div>}>
<PostCreate />
</CanAccess>
}
/>
</Route>
<Route path="categories">
<Route index element={<CategoryList />} />
<Route path="show/:id" element={<CategoryShow />} />
</Route>
</Route>
</Routes>
In this example, the <Authenticated /> component is used to wrap the entire application. The fallback prop is set to <Outlet />, which will render the /login and /reset-password routes if the user is not authenticated. All other routes are nested within another <Authenticated /> component, which will redirect unauthenticated users to the /login page. Remember to replace <AuthPage type="login" />, <ResetPasswordPage />, <ThemedLayoutV2 />, <PostList />, <PostCreate />, <CategoryList />, and <CategoryShow /> with your actual components. For more information, you can refer to the Refine documentation on the <Authenticated /> component (https://refine.dev/docs/authentication/components/authenticated#fallback) and Refine's guide on routing with React Router (https://refine.dev/docs/routing/integrations/react-router#usage-with-access-control-providers). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3mo ago
<@1228438565529325700> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white
wise-white3mo ago
I am using the NextJs router. Is there a way I could set up a generic provider to handle this for me at the app's entry point?