Login method of the AuthProvider when creating a refine project using the CLI

[nibble0101]

When you bootstrap a new refine project using the refine command line tool and select Strapi v4 as Data Provider, a src/authProvider.ts file is created. Of particular interest is the login method of the authProvider. Notice how the username field is being destructured. When you console.log(username), you will get undefined. I suspect it has something to do with use of AuthPage instead of LoginPage (which is now deprecated).

You should be destructuring email instead. I feel a beginner might find it difficult to see what is going on.

export const authProvider: AuthProvider = {
  login: async ({ username, password }) => {
    const { data, status } = await strapiAuthHelper.login(username, password);
     // console.log(username)  undefined
    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();
  },
};

[aliemir]

Hey @nibble0101 sorry for the issue. You're definitely right, its a bad situation for beginners to be in. 🙏

LoginPage was using username and password fields but AuthPage is using email and password therefore, the code we provide for the authProvider is not going to work properly.

We have plans to make AuthPage components more flexible to cover these cases but we're not decided on the structure yet 🤔 If you have any ideas, suggestions, we'd love to see them at refinedev/refine repo. 🚀

We'll add some explanation to the authProvider.ts to avoid the confusion. Hoping that, soon we will come up with a better API for AuthPage components and these cases will be covered at once.