How to support 2 login methods: email and github OAuth at once?

[liushooter]

Now，I support 2 login methods: email and github OAuth.

How to solve the problem？

the follow is my code:

when run navigate(connectURL)， i got the err invalid hook call

const authProvider: AuthBindings = {
  login: async ({ email, password, providerName }) => {

    if (providerName == "github") {
  
      const location = useLocation();
      const navigate = useNavigate();
  
      const connectURL = `${API_URL}/api/v1/connect/${providerName}`
  
      navigate(connectURL) // invalid hook call
  
      useEffect(() => {
        fetch(`${API_URL}/api/v1/auth/${providerName}/callback${location.search}`)
          .then(res => {
            if (res.status !== 200) {
              throw new Error(`Couldn't login with Github. Status: ${res.status}`);
            }
            return res;
          })
          .then(res => res.json())
          .then(res => {
  
            localStorage.setItem(TOKEN_KEY, res.jwt);
            axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${res.jwt}`;
            return {
              success: true,
              redirectTo: '/',
            };
          })
          .catch(err => {
            console.error(err?.mesage);
       
          });
      }, [navigate, location.search, providerName]);
  
  
    } else {
      try {
        const { data, status } = await strapiAuthHelper.login(email, password);
        if (status === 200) {
          localStorage.setItem(TOKEN_KEY, data.jwt);
  
          // set header axios instance
          axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${data.jwt}`;
  
          return {
            success: true,
            redirectTo: '/',
          };
        }
      } catch (error: any) {
        const errObj = error?.response?.data?.message?.[0]?.messages?.[0];
  
        console.error(errObj)
  
        return {
          success: false,
          error: {
            message: errObj?.mesage || 'Login failed',
            name: errObj?.id || 'Invalid email or password',
          },
        };
      }
  
    }
  
    return {
      success: false,
      error: {
        message: 'Login failed',
        name: 'Invalid email or password',
      },
    };
  
  },

  logout: async () => {},
};

[aliemir]

Hey @liushooter, you can easily support multiple auth methods with refine. By looking at your code, I can see couple of misunderstandings, let me try to help you fix them 🚀

The methods in the authProvider are called by <Refine> but React hooks cannot be used inside them. You can just do the fetch call instead of using it inside useEffect. Same thing also applies for useNavigate and useLocation hooks, instead of using these hooks, you can use the window.location, you can use location.open or location.href for navigation and location.search for getting the URL params.

You may also need to use await instead of then for the api request. 🚀