Authenticated Custom Pages vs resources
Hey all,
I am continuing a web site using the "fine foods MUI theme" as base.
The example already contains all resources to /products, orthers, etc.
But the are not Authenticated, if delete the Token from localstorage for example, i can continue navigating the site.
I read here: https://refine.dev/docs/advanced-tutorials/custom-pages/
const AuthenticatedCustomPage = () => {
return (
<Authenticated>
<CustomPage /> {//This will change to receive any Component}
</Authenticated>
);
};
But i cant figure out how to make use of this in routes if i already have the resources defined.
If i delete the /products resource it disapears from the Side panel.
By the way, in resources is defined wat endpoint to use in the components defined inside list, create, show?
Thanks in advance!
Custom Pages | refine
This document is related to how to create custom pages for react applications. Since Nextjs and Remix have a file system based router built on the page concept, you can create your custom pages under the pages or routes folder.
11 Replies
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: You can use the
Answer: You can use the
resource prop to use the <Create>, <Show> and <List> components in a custom page.
SOURCES:
./docs/api-reference/chakra-ui/components/basic-views/create.md
./docs/api-reference/mui/components/basic-views/create.md
./docs/api-reference/chakra-ui/components/basic-views/show.md
./docs/api-reference/mui/components/basic-views/list.md
Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
Hey @pabloat ,
You can check Auth Provider section of refine tutorial ⚡️
https://refine.dev/docs/tutorial/understanding-authprovider/index/
1. Auth Provider | refine
What is auth provider?
stormy-gold•2y ago
Hi @Omer , thanks for super rapid response.
I understand the AutProvider, i dont understand how to protect some routes in a generic way. in the example i am extending i am trying to protect the existing pages without having to const { isSuccess, isLoading, isError } = useAuthenticated();
in every page. i understand i can do this using: const AuthenticatedCustomPage = () => {
return (
<Authenticated>
<CustomPage /> {//This will change to receive any Component}
</Authenticated>
);
};
but this i have to put in routes property of <Refine>
but what to do with resourses? example: {
name: "stores",
list: StoreList,
edit: StoreEdit,
create: StoreCreate,
icon: <StoreOutlined />,
},
that is all defined, i think is ok this but how can i check autentication for all that pages in a generic manner?
2. Create Auth Provider From Scratch | refine
This section will show you how to create an auth provider from scratch. We'll use mock data to be able to focus on the auth provider methods. When you understand the logic of auth provider, you can easly integrate third-party authentication services or your own custom auth provider which includes many possible strategies like JWT, OAuth, etc.
stormy-gold•2y ago
i have to change resourses for something like this?
routes: [ {
path: "/stores",
element: (
<AuthenticatedCustomPage component={StoreList}
/>
),
},
{
path: "/stores/create",
element: (
<AuthenticatedCustomPage component={StoreCreate}
/>
),
}, and so on.... ]
i tried in the example checkAuth: () => {
return Promise.reject();
},
and the pages continue rendering, not routing me to login
Sure, could you create a GitHub issue for me? Additionally, could you include a CodeSandbox where I can easily reproduce the issue? Thank you ⚡️
stormy-gold•2y ago
mmm, i tried again changing the checkAuth: () and "ctrl + F5" to the browser and worked ok
sorry for all the questions!
little one, all the resources in <refine> component are protected by authentication? if i need public ones where i have to set that? in routes?
Yes, you can use custom pages ⚡️
stormy-gold•2y ago
ok thanks
!!!
Custom Pages | refine
This document is related to how to create custom pages for react applications. Since Nextjs and Remix have a file system based router built on the page concept, you can create your custom pages under the pages or routes folder.
You're welcome 🍻