foreign-sapphire
foreign-sapphireβ€’15mo ago

Sider authProvider Routes

Hi, can anyone help me, I'm converting my site from @pankod to @refinedev, but I'm getting a lot of errors, sider doesn't show my components, logout doesn't work, maybe I'm doing something wrong, maybe someone has done this, I'd like to see an example repository. How to fully configure authProvider, routerProvider, Sider?
34 Replies
kapa.ai
kapa.aiβ€’15mo ago
Hey @RomaY! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.aiβ€’15mo ago
---------------------- Hmm, I don't know enough to give you a confident answer yet, but here are some links that might help: https://refine.dev/docs/advanced-tutorials/auth/auth0 and https://refine.dev/docs/2.xx.xx/api-references/providers/auth-provider. ----------------------
Auth0 Login | refine
Auth0 is a flexible, drop-in solution for adding authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that comes with building your own solution to authenticate and authorize users. You can check the Auth0 document for details.
kapa.ai
kapa.aiβ€’15mo ago
<@538717491908575242> kapa.ai is still learning and improving, please let us how it did by reacting below
foreign-sapphire
foreign-sapphireβ€’15mo ago
Page not found, for authorization, registration, I use my own components (login, password)
Omer
Omerβ€’15mo ago
Hey @RomaY πŸ‘‹ We are sorry about this situation. Could you share your App.tsx file with us?
foreign-sapphire
foreign-sapphireβ€’15mo ago
GitHub
GitHub - RomanYakobchuk/client-refine
Contribute to RomanYakobchuk/client-refine development by creating an account on GitHub.
foreign-sapphire
foreign-sapphireβ€’15mo ago
Sorry, I don’t push new data, one moment I updated my branch When I used @pankod everything worked very well and very cool
eastern-cyan
eastern-cyanβ€’15mo ago
I am also facing the same issue as @RomaY. Another thing that I faced is after upgrading my authProvider from legacyAuthProvider to authProvider and update the methods using the documentation guide for authProvider migration I get a blank white screen when I log in.
Omer
Omerβ€’15mo ago
I think you forgot to pass the Sider prop to the Layout in this line https://github.com/RomanYakobchuk/client-refine/blob/master/src/App.tsx#L229
<Layout Header={Header} Sider={Sider} Title={Title}>
<Layout Header={Header} Sider={Sider} Title={Title}>
Can you share your authProvider? πŸ‘€
foreign-sapphire
foreign-sapphireβ€’15mo ago
How to do it?
eastern-cyan
eastern-cyanβ€’15mo ago
Omer
Omerβ€’15mo ago
eastern-cyan
eastern-cyanβ€’15mo ago
Hey @Omer although I have passed all the props for my Layout and got my layout as expected. I am facing new issues as I cannot see any of my resources name displayed except the parent resource.
No description
Omer
Omerβ€’15mo ago
Hey @dipbazz , I think your issues are different. Can you create a separate forum post? Thank you πŸ₯
foreign-sapphire
foreign-sapphireβ€’15mo ago
how to transfer them correctly?
eastern-cyan
eastern-cyanβ€’15mo ago
You can do in this way @RomaY
No description
foreign-sapphire
foreign-sapphireβ€’15mo ago
Sorry, but I'm a bit confused, where to get the OffLayoutArea, where to get it? I had the same error and it still exists
eastern-cyan
eastern-cyanβ€’15mo ago
If you don't have an OffLayoutArea component then it is not required. You can only provide the component that is required for you. Like Header, Sider
Omer
Omerβ€’15mo ago
Can you write the same line of code that is present in line 318 (https://github.com/RomanYakobchuk/client-refine/blob/87ccaf0a4a14ded9945ca85717ed156ab5b4b1eb/src/App.tsx#LL318C41-L318C41) of your code in line 229 (https://github.com/RomanYakobchuk/client-refine/blob/master/src/App.tsx#L229) as well?
//YOUR OLD CODE - LINE 229:
<Layout Header={Header}>

//NEW CODE - LINE 229:
<Layout Header={Header} Sider={Sider} Title={Title}>
//YOUR OLD CODE - LINE 229:
<Layout Header={Header}>

//NEW CODE - LINE 229:
<Layout Header={Header} Sider={Sider} Title={Title}>
foreign-sapphire
foreign-sapphireβ€’15mo ago
It doesn't work
Omer
Omerβ€’15mo ago
We will try to run your project πŸ’―
foreign-sapphire
foreign-sapphireβ€’15mo ago
Ok, I'd really appreciate it, because I don't really want to downgrade to an older version since I haven't saved it…
Omer
Omerβ€’15mo ago
I've found a few issues . 1. There's a topic we forgot to mention in the Migration Guide. You should only use useRouterContext() in legacy routers. For new router users, the useLink() hook can be used instead. Therefore, in your 'Sider' component, use useLink instead of useRouterContext: Sider.tsx
import { useLink } from "@refinedev/core";

const Link = useLink();
import { useLink } from "@refinedev/core";

const Link = useLink();
2. In your resource definitions, you did not define 'meta.label', but the text of the menu items in your Sider component remains as 'label'. If you wish, you can add 'label' to your resources.
{
name: "home",
meta: {
icon: <Home/>,
label: "Home"
},
list: '/allInstitutions',
show: '/allInstitutions/show/:id',
create: '/createInstitution/create',
},
{
name: "home",
meta: {
icon: <Home/>,
label: "Home"
},
list: '/allInstitutions',
show: '/allInstitutions/show/:id',
create: '/createInstitution/create',
},
3. You made a mistake in defining your home route, here are the correct definitions, fix resource name
<Route
index
element={
<NavigateToResource resource="home"/>
}
/>
<Route
index
element={
<NavigateToResource resource="home"/>
}
/>
Fix route definition
<Route path="/allInstitutions">
<Route index element={<AllInstitutions/>}/>
<Route
path="create"
element={<CreateInstitution/>}
/>
<Route
path="show/:id"
element={<InstitutionDetails/>}/>
</Route>
<Route path="/allInstitutions">
<Route index element={<AllInstitutions/>}/>
<Route
path="create"
element={<CreateInstitution/>}
/>
<Route
path="show/:id"
element={<InstitutionDetails/>}/>
</Route>
I hope it's help you πŸ’―
foreign-sapphire
foreign-sapphireβ€’15mo ago
Yes, it works, thank you
Omer
Omerβ€’15mo ago
We will send a patch regarding the use of 'label' in Sider. We will keep you informed πŸ₯ Wow, I didn't think it would be this easy hehe. Did you like Refine v4? 🍻
foreign-sapphire
foreign-sapphireβ€’15mo ago
Yes, this is a very cool thing And it was also necessary to change it in Sider so that it goes to another page by name instead of route Yes, Everything seems to work as before Thank you for your quick response and help
Omer
Omerβ€’15mo ago
Did you make a change on your Sider, or do you think it's a general error? If you could provide more details, we can create a patch to prevent other users from experiencing the same error ❀️
foreign-sapphire
foreign-sapphireβ€’15mo ago
I think it's in my own because the last version of Sider didn't have the default, but the example on GitHub looks like it needs to be fixed because we don't have a "route" and we're taking some data from the "meta" If you want you can take my fixes, they seem to work stably now The fix is ​​on my Github Oh, and also for "key" I added the value "name" since we don't have "route". In fact, it is necessary to completely remove "route" because we do not have this property, but I do not know how it will behave in the Tree, since I do not use it. In Sider
Omer
Omerβ€’15mo ago
Do you have a reason to use custom Sider? What about using the default Sider component?
foreign-sapphire
foreign-sapphireβ€’15mo ago
I'm using the previous version from the tutorial video, something didn't work for me in the new version so I left this one and it works fine, I also have the same problem as mentioned in another chat about "cerbos", I'm using casbin , and I have the same error, how to fix it, is there something in the documentation? Also, when installing a new refine dev project, Sider is missing by default
Omer
Omerβ€’15mo ago
Is this? https://github.com/refinedev/refine/issues/3681 To use the default Sider, you can remove Sider property from <Layout> component.
foreign-sapphire
foreign-sapphireβ€’15mo ago
Indeed, I removed it and it works fine by default But since I want to use my own styling, I have to use my own Sider?
Omer
Omerβ€’15mo ago
You can compare your own Sider with the default Sider using the swizzle command. Once you find the difference, you can use your own Sider. How does that sound? https://refine.dev/docs/packages/documentation/cli/#swizzle
CLI | refine
refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
foreign-sapphire
foreign-sapphireβ€’15mo ago
No problem, I'll look into it