ambitious-aqua•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

ambitious-aqua•2y ago

here is my authProvider code logic file.

authProvider.ts

genetic-orange•2y ago

did you run codemod ?

ambitious-aqua•2y ago

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

genetic-orange•2y ago

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

ambitious-aqua•2y ago

How do I remove it?

genetic-orange•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

ambitious-aqua•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.

genetic-orange•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 ?

ambitious-aqua•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.

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

ambitious-aqua•2y ago

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

xenial-black•2y ago

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