extended-salmon•2y ago

After migrating authProvider from v3 to v4 cannot log in or logout.

I have upgraded my authProvider from legacy to v4 authProvider using the migration guide https://refine.dev/docs/migration-guide/auth-provider/ but after upgrading I cannot login or logout. If I login I will get a blank white screen and if I am logged in then click logout doesn't log me out it just refreshes the url.

Migrating Auth Provider from 3.x.x to 4.x.x | refine

Motivation behind the changes

33 Replies

kapa.ai•2y ago

Hey @dipbazz! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•2y ago

---------------------- It sounds like you may have missed a step in the migration process. According to the migration guide (https://refine.dev/docs/migration-guide/auth-provider/), you need to update the AuthProvider interface to include the new methods. The updated interface should look like this:

export const authProvider: AuthProvider = {  
 login: async ({ username, password }) => {  
 const { data, status } = await strapiAuthHelper.login(  
 username,  
 password,  
 );  
 if (status === 200) {  
 localStorage.setItem(TOKEN_KEY, data.jwt);  
  
 // set header axios instance  
 axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${data.jwt}`;  
 return Promise.resolve();  
 }  
 return Promise.reject();  
 },  
 logout: () => {  
 localStorage.removeItem(TOKEN_KEY);  
 return Promise.resolve();  
 },  
 checkError: () => Promise.resolve(),  
 checkAuth: () => {  
 const token = localStorage.getItem(TOKEN_KEY);  
 if (token) {  
 axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`,  
 return Promise.resolve();  
 }  
  
 return Promise.reject();  
 },  
 getPermissions: () => Promise.resolve(),  
 getUserIdentity: async () => {  
 const token = localStorage.getItem(TOKEN_KEY);  
 if (!token) {  
 return Promise.reject();  
 }  
  
 const { data, status } = await strapiAuthHelper.me(token);  
 if (status === 200) {  
 const { id, username, email } = data;  
 return Promise.resolve({  
 id,  
 username,  
 email,  
 });  
 }  
  
 return Promise.reject();  
 },
};

export const authProvider: AuthProvider = {  
 login: async ({ username, password }) => {  
 const { data, status } = await strapiAuthHelper.login(  
 username,  
 password,  
 );  
 if (status === 200) {  
 localStorage.setItem(TOKEN_KEY, data.jwt);  
  
 // set header axios instance  
 axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${data.jwt}`;  
 return Promise.resolve();  
 }  
 return Promise.reject();  
 },  
 logout: () => {  
 localStorage.removeItem(TOKEN_KEY);  
 return Promise.resolve();  
 },  
 checkError: () => Promise.resolve(),  
 checkAuth: () => {  
 const token = localStorage.getItem(TOKEN_KEY);  
 if (token) {  
 axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`,  
 return Promise.resolve();  
 }  
  
 return Promise.reject();  
 },  
 getPermissions: () => Promise.resolve(),  
 getUserIdentity: async () => {  
 const token = localStorage.getItem(TOKEN_KEY);  
 if (!token) {  
 return Promise.reject();  
 }  
  
 const { data, status } = await strapiAuthHelper.me(token);  
 if (status === 200) {  
 const { id, username, email } = data;  
 return Promise.resolve({  
 id,  
 username,  
 email,  
 });  
 }  
  
 return Promise.reject();  
 },
};

If you have already updated the AuthProvider interface, then you may need to check the login and logout methods to make sure they are working correctly. You can also refer to the advanced tutorials (https://refine.dev/docs/advanced-tutorials/multi-tenancy/strapi-v4) for more information on setting up the AuthProvider. ----------------------

Strapi-v4 | refine

What is Multitenancy?

kapa.ai•2y ago

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

extended-salmon•2y ago

here is my authProvider code logic file.

authProvider.ts

spiritual-aqua•2y ago

did you run codemod ?

extended-salmon•2y ago

Hey @alicanerdurmaz, I did run codemod at first and then started to upgrade the deprecated part of the project.

spiritual-aqua•2y ago

codemod adds v3LegacyAuthProviderCompatible: true to auth hooks. when this have, new auth provider will not work

extended-salmon•2y ago

How do I remove it?

spiritual-aqua•2y ago

if you are using default layout and login page. you should nothing to do. but if you have custom login, logout pages and if you are using auth hooks like useLogin you should remove i just tryting to debug. if you are not using auth hooks. sorry. forget what did i say

extended-salmon•2y ago

Hey @alicanerdurmaz, Thank you for your response. I have solved the issue by removing v3LegacyAuthProviderCompatible. But now I get an inconsistent logout. Whenever I click logout I get a flicker and sometimes I will be loggedout but sometime I don't and get my redirect url to be my first resource list although I have set my redirectTo: "/login" in my logout method. And also I have set redirectPath: "/login" in useLogout hook.

spiritual-aqua•2y ago

Im sorry. we will write this to migration guide. i will take not right now i will debug with your auth provider. you are still using legacy router provider am i right ? auth bindings seems okay. do you have any custom auth logic in app ?

extended-salmon•2y ago

I have updated my legacy router provider to new router provider. I think I don't have any custom auth logic except my authProvider.

fair-rose•2y ago

Hello @dipbazz first of all, thanks for all the reports 🎉 And sorry for the inconvenience. Now you have updated to new auth provider, could you be still passing legacyAuthProvider={authProvider}? Could you check that

extended-salmon•2y ago

Hey @batuhanw , I have already updated my legacyAuthProvider to authProvider and my legacyRouterProvider to routerProvider

fair-rose•2y ago

From the previous App.tsx you sent me, I noticed this line: <NavigateToResource resource="" /> Could that be the problem?

extended-salmon•2y ago

Yes that was the problem @batuhanw, at first I have added the resource="/login" but later on I removed it but forgot to check back there,

fair-rose•2y ago

Great to hear! Thanks a lot for the reports as always! Looking forward to see your app working with refine v4, don't hesitate to contact us

extended-salmon•2y ago

I will try to contact you guys with any error I get.

extended-salmon•2y ago

Now I have a small issue on login should I create a separate thread or can I ask here. My issue is after login with wrong credentials I get a 400 response status from server and I am returning from my login method in authProvider

return {
    success: false,
    redirectTo: "/",
    error: new Error("Invalid username or password."),
};

return {
    success: false,
    redirectTo: "/",
    error: new Error("Invalid username or password."),
};

Now how can I display the error message that I passed here in my notification pop up. Currently I get the notification as

fair-rose•2y ago

Did you wrap your call with try catch? I think when your request fails, it goes to catch block, and it shows error itself, your if with if (response.status == 400) may not be getting picked up, and it goes to catch block

extended-salmon•2y ago

Hey @batuhanw, I don't have try and catch block. I have had in my refine v4 authProvider but removed in v4. Should I use the try and catch block? Hey @batuhanw, as we have discussed earlier about the logout bug and solved using <NavigateToResource resource="/login" /> , but now I am facing issue with login. Whenever I logout and try to login then I get a blank screen and a warning on my console No resource is found to navigate to.

fair-rose•2y ago

Hello @dipbazz, again from your preview App.tsx, I guess updating this line would help you, find the Authenticated component where you wrap your resources <Authenticated fallback={<CatchAllNavigate to="login" />}>

extended-salmon•2y ago

Hey @batuhanw, it didn't work. What I have done is at first I tried it with

<Route
  element={(
    <Authenticated fallback={<CatchAllNavigate to="login" />}>
      <NavigateToResource resource="/login" />
    </Authenticated>
  )}
>
  <Route path="/login" element={<Login />} />
</Route>

<Route
  element={(
    <Authenticated fallback={<CatchAllNavigate to="login" />}>
      <NavigateToResource resource="/login" />
    </Authenticated>
  )}
>
  <Route path="/login" element={<Login />} />
</Route>

It threw an error as Too many calls to Location or History APIs within a short timeframe. And changed this fallback to fallback={<Outlet />} and I have added the code you provided on other routes like

<Route
  element={(
     <Authenticated fallback={<CatchAllNavigate to="login" />}>
         <Layout
            Sider={Sider}
            Header={Header}
            OffLayoutArea={OffLayoutArea}
            Footer={Footer}
         >
           <Outlet />
         </Layout>
      </Authenticated>
   )}
>
// other routes 
</Route>

<Route
  element={(
     <Authenticated fallback={<CatchAllNavigate to="login" />}>
         <Layout
            Sider={Sider}
            Header={Header}
            OffLayoutArea={OffLayoutArea}
            Footer={Footer}
         >
           <Outlet />
         </Layout>
      </Authenticated>
   )}
>
// other routes 
</Route>

But it didn't work.

fair-rose•2y ago

<Route
  element={(
     <Authenticated fallback={<CatchAllNavigate to="login" />}>
         <Layout
            Sider={Sider}
            Header={Header}
            OffLayoutArea={OffLayoutArea}
            Footer={Footer}
         >
           <Outlet />
         </Layout>
      </Authenticated>
   )}
>
// other routes 
</Route>

<Route
  element={(
     <Authenticated fallback={<CatchAllNavigate to="login" />}>
         <Layout
            Sider={Sider}
            Header={Header}
            OffLayoutArea={OffLayoutArea}
            Footer={Footer}
         >
           <Outlet />
         </Layout>
      </Authenticated>
   )}
>
// other routes 
</Route>

I think that's correct

<Route
  element={(
    <Authenticated fallback={<Outlet />}>
      <NavigateToResource resource="/login" />
    </Authenticated>
  )}
>
  <Route path="/login" element={<Login />} />
</Route>

<Route
  element={(
    <Authenticated fallback={<Outlet />}>
      <NavigateToResource resource="/login" />
    </Authenticated>
  )}
>
  <Route path="/login" element={<Login />} />
</Route>

I believe this part should be this way Oh, my bad

<Route
  element={(
    <Authenticated fallback={<Outlet />}>
      <NavigateToResource resource="/posts" />
    </Authenticated>
  )}
>
  <Route path="/login" element={<Login />} />
</Route>

<Route
  element={(
    <Authenticated fallback={<Outlet />}>
      <NavigateToResource resource="/posts" />
    </Authenticated>
  )}
>
  <Route path="/login" element={<Login />} />
</Route>

extended-salmon•2y ago

No it didn't work @batuhanw.

fair-rose•2y ago

Could you share App.tsx again, sorry for the inconvenience

extended-salmon•2y ago

App.tsx

fair-rose•2y ago

Hello @dipbazz , I think you are missing / in the beginning of your route definition

<Route path="reservations">

<Route path="reservations">

<Route path="/reservations">

<Route path="/reservations">

Could you try this one ? And from <NavigateToResource resource="/reservations" /> to <NavigateToResource resource="reservations" />

extended-salmon•2y ago

Hey @batuhanw, I was just testing if I can navigate to reservations in <NavigateToResource resource="/reservations" /> but it didn't work. Actually I want to navigate to dashboard route / So should I update all of my <Route path="/..." > or only the one I am using on NavigateToResource?

fair-rose•2y ago

For dashboard, you can say <NavigateToRresource resource="dashboard" />

extended-salmon•2y ago

Yup it is working now. But I am not sure why it didn't work earlier when I tried the same. Anyway thank you @batuhanw for your support.

fair-rose•2y ago

resource names should be without / Probably that's why

extended-salmon•2y ago

I guess I didn't use / on my resources. Anyway it is working now. So thank you once again.