xenial-black•17mo 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•17mo 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•17mo 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•17mo ago

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

xenial-black•17mo ago

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

Omer•17mo ago

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

xenial-black•17mo ago

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

GitHub

GitHub - RomanYakobchuk/client-refine

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

xenial-black•17mo 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

vicious-gold•17mo 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•17mo 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? 👀

xenial-black•17mo ago

How to do it?

vicious-gold•17mo ago

authProvider.ts

Omer•17mo ago

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

vicious-gold•17mo 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•17mo ago

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

xenial-black•17mo ago

how to transfer them correctly?

vicious-gold•17mo ago

You can do in this way @RomaY

xenial-black•17mo 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

vicious-gold•17mo 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•17mo 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}>

xenial-black•17mo ago

It doesn't work

Omer•17mo ago

We will try to run your project 💯

xenial-black•17mo 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•17mo 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 💯

xenial-black•17mo ago

Yes, it works, thank you

Omer•17mo 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? 🍻

xenial-black•17mo 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•17mo 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 ❤️

xenial-black•17mo 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•17mo ago

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

xenial-black•17mo 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•17mo ago

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

xenial-black•17mo 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•17mo 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).

xenial-black•17mo ago

No problem, I'll look into it