genetic-orange
genetic-orange15mo 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.
33 Replies
kapa.ai
kapa.ai15mo 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
kapa.ai15mo 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
kapa.ai15mo ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange
genetic-orange15mo ago
here is my authProvider code logic file.
deep-jade
deep-jade15mo ago
did you run codemod ?
genetic-orange
genetic-orange15mo ago
Hey @alicanerdurmaz, I did run codemod at first and then started to upgrade the deprecated part of the project.
deep-jade
deep-jade15mo ago
codemod adds v3LegacyAuthProviderCompatible: true to auth hooks. when this have, new auth provider will not work
genetic-orange
genetic-orange15mo ago
How do I remove it?
deep-jade
deep-jade15mo 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
genetic-orange
genetic-orange15mo 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.
deep-jade
deep-jade15mo 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 ?
genetic-orange
genetic-orange15mo 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.
correct-apricot
correct-apricot15mo 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
genetic-orange
genetic-orange15mo ago
Hey @batuhanw , I have already updated my legacyAuthProvider to authProvider and my legacyRouterProvider to routerProvider
correct-apricot
correct-apricot15mo ago
From the previous App.tsx you sent me, I noticed this line: <NavigateToResource resource="" /> Could that be the problem?
genetic-orange
genetic-orange15mo 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,
correct-apricot
correct-apricot15mo 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
genetic-orange
genetic-orange15mo ago
I will try to contact you guys with any error I get.
genetic-orange
genetic-orange15mo 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
No description
correct-apricot
correct-apricot15mo 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
genetic-orange
genetic-orange15mo 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.
correct-apricot
correct-apricot15mo 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" />}>
genetic-orange
genetic-orange15mo 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.
correct-apricot
correct-apricot15mo 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>
genetic-orange
genetic-orange15mo ago
No it didn't work @batuhanw.
correct-apricot
correct-apricot15mo ago
Could you share App.tsx again, sorry for the inconvenience
genetic-orange
genetic-orange15mo ago
correct-apricot
correct-apricot15mo ago
Hello @dipbazz , I think you are missing / in the beginning of your route definition
<Route path="reservations">
<Route path="reservations">
to
<Route path="/reservations">
<Route path="/reservations">
Could you try this one ? And from <NavigateToResource resource="/reservations" /> to <NavigateToResource resource="reservations" />
genetic-orange
genetic-orange15mo 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?
correct-apricot
correct-apricot15mo ago
For dashboard, you can say <NavigateToRresource resource="dashboard" />
genetic-orange
genetic-orange15mo 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.
correct-apricot
correct-apricot15mo ago
resource names should be without / Probably that's why
genetic-orange
genetic-orange15mo ago
I guess I didn't use / on my resources. Anyway it is working now. So thank you once again.