rival-black•2y 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•2y 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•2y 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•2y ago

<@538717491908575242> kapa.ai is still learning and improving, please let us how it did by reacting below

rival-blackOP•2y ago

Page not found, for authorization, registration, I use my own components (login, password)

Omer•2y ago

Hey @RomaY 👋 We are sorry about this situation. Could you share your App.tsx file with us?

rival-blackOP•2y ago

https://github.com/RomanYakobchuk/client-refine

GitHub

GitHub - RomanYakobchuk/client-refine

Contribute to RomanYakobchuk/client-refine development by creating an account on GitHub.

rival-blackOP•2y 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

unwilling-turquoise•2y 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•2y 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? 👀

rival-blackOP•2y ago

How to do it?

unwilling-turquoise•2y ago

authProvider.ts

Omer•2y ago

Actually, like what you did in this line, https://github.com/RomanYakobchuk/client-refine/blob/master/src/App.tsx#L318

unwilling-turquoise•2y 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.

Omer•2y ago

Hey @dipbazz , I think your issues are different. Can you create a separate forum post? Thank you 🥁

rival-blackOP•2y ago

how to transfer them correctly?

unwilling-turquoise•2y ago

You can do in this way @RomaY

rival-blackOP•2y 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

unwilling-turquoise•2y 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•2y 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}>

rival-blackOP•2y ago

It doesn't work

Omer•2y ago

We will try to run your project 💯

rival-blackOP•2y 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•2y 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 💯

rival-blackOP•2y ago

Yes, it works, thank you

Omer•2y 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? 🍻

rival-blackOP•2y 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•2y 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 ❤️

rival-blackOP•2y 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•2y ago

Do you have a reason to use custom Sider? What about using the default Sider component?

rival-blackOP•2y 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•2y ago

Is this? https://github.com/refinedev/refine/issues/3681 To use the default Sider, you can remove Sider property from <Layout> component.

rival-blackOP•2y 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•2y 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).

rival-blackOP•2y ago

No problem, I'll look into it

Sider authProvider Routes

Did you find this page helpful?