2. Create Auth Provider From Scratch

1. Create a new file named authProvider.ts in src folder and add the following code:

   src/authProvider.ts

   import { AuthProvider } from "@pankod/refine-core";
   
   const authProvider: AuthProvider = {
     login: () => Promise.resolve(),
     checkAuth: () => Promise.resolve(),
     logout: () => Promise.resolve(),
     checkError: () => Promise.resolve(),
   };
   
   export default authProvider;
   

   We created a mock auth provider. It has all the required methods. But, they don't do anything. We'll add the logic to these methods in the next.

2. Now, we need to pass the authProvider to the <Refine/> component. Open App.tsx file and add related code:

   src/App.tsx

   ...
   import authProvider from "./authProvider";
   
   <Refine
       ...
       authProvider={authProvider}
   />
   

   The authProvider is not required for the <Refine/> component. If you don't pass it, your app will work without authentication. But, you won't be able to use the auth hooks.

We created a mock auth provider and passed it to the <Refine/> component. Now, we'll add the logic to the auth provider methods.

login method is used to authenticate users. It expects to return a Promise.

• If the Promise resolves, the user is authenticated and pages that require authentication will be accessible.

• If the Promise rejects, the user is not authenticated and stays on the login page.

We'll use mock data to authenticate users. So, we'll create a mock user list and check if the user exists in the list. If the user exists, we'll save the user data to the local storage and resolve the Promise. Otherwise, we'll reject the Promise.

import { AuthProvider } from "@pankod/refine-core";

const mockUsers = [{ email: "john@mail.com" }, { email: "jane@mail.com" }];

const authProvider: AuthProvider = {
    login: ({ email, password }) => {
        // Suppose we actually send a request to the back end here.
        const user = mockUsers.find((item) => item.email === email);

        if (user) {
            localStorage.setItem("auth", JSON.stringify(user));
            return Promise.resolve();
        }

        return Promise.reject();
    },
    ...
};

Invoking the useLogin hook's mutation will call the login method, passing in the mutation's parameters as arguments. This means the parameters for the useLogin hook's mutation must match the parameters of the login method.

Refer to the useLogin documentation for more information →

For example, if we call the useLogin hook's mutation like this:

import { useLogin } from "@pankod/refine-core";

const { mutate } = useLogin();

mutate({ email: "john@mail.com", password: "123456" });

The login method will get the mutation's parameters as arguments.

At this point, we can authenticate users. But, we can't check if the user is authenticated or not when the user refreshes the page or navigates to another page. We'll add the logic to the checkAuth method to solve this problem.

const { mutate } = useLogin<{
  username: string;
  password: string;
  foo: string;
  remember: boolean;
}>();

const authProvider: AuthProvider = {
    ...
    login: () => {
        ...
        return Promise.resolve("/custom-page");
    }
}

const { mutate } = useLogin();

mutate({ redirectPath: "/custom-page" });

const authProvider: AuthProvider = {
    ...
    login: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

const authProvider: AuthProvider = {
    ...
    login: () => {
        ...
        return Promise.resolve(false);
    }
}

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    login: ({ email, password }) => {
        ...
        return Promise.reject({
            name: "Login Failed!",
            message: "The email or password that you've entered doesn't match any account.",
        });
    },
    ...
};

checkAuth method is used to check if the user is authenticated. Internally, it is called when the user navigates to a page that requires authentication.

checkAuth method expects to return a Promise.

• If the Promise resolves, the user is authenticated and pages that require authentication will be accessible.

• If the Promise rejects, the user is not authenticated and pages that require authentication will not be accessible and by default, the user will be redirected to the /login page.

In the login method, we've saved the user data to the local storage when the user logs in. So, we'll check if the user data exists in the local storage to determine if the user is authenticated.

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    ...
    checkAuth: () => {
        const user = localStorage.getItem("auth");

        if (user) {
            return Promise.resolve();
        }

        return Promise.reject();
    },
    ...
};

Invoking the useAuthenticated hook will call the checkAuth method. If checkAuth method resolves a data, it will be available in the useAuthenticated hook's data property.

Refer to the useAuthenticated documentation for more information →

import { useAuthenticated } from "@pankod/refine-core";

const { data, isSuccess, isLoading, isError, refetch } = useAuthenticated();

const authProvider: AuthProvider = {
    ...
    checkAuth: () => {
        ...
         return Promise.reject({
            redirectPath: "/custom-page",
        });
    }
}

logout method is used to log out users. It expects to return a Promise.

• If the Promise resolves, the user is logged out and pages that require authentication will not be accessible and by default, the user will be redirected to the /login page.

• If the Promise rejects, the user is not logged out and stays on the page.

In the login method, we've saved the user data to the local storage when the user logs in. So, we'll remove the user data from the local storage when the user logs out.

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    ...
    logout: () => {
        localStorage.removeItem("auth");
        return Promise.resolve();
    },
    ...
};

Invoking the useLogout hook's mutation will call the logout method. If you need to pass any parameters to the logout method, you can use the useLogout hook's mutation.

Refer to the useLogout documentation for more information →

For example, if we call the useLogout hook's mutation like this:

import { useLogout } from "@pankod/refine-core";

const { mutate } = useLogout();

mutate({ id: "1" });

The logout method will get the mutation's parameters as an argument.

const { mutate } = useLogout<{
  id: string;
  name: string;
}>();

const authProvider: AuthProvider = {
    ...
    logout: () => {
        ...
        return Promise.resolve("/custom-page");
    }
}

const { mutate } = useLogout();

mutate({ redirectPath: "/custom-page" });

const authProvider: AuthProvider = {
    ...
    logout: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

const authProvider: AuthProvider = {
    ...
    logout: () => {
        ...
        return Promise.resolve(false);
    }
}

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    logout: () => {
        ...
        return Promise.reject({
            name: "Logout Failed!",
            message: "Something went wrong.",
        });
    },
    ...
};

checkError method is called when you get an error response from the API. You can create your own business logic to handle the error such as refreshing the token, logging out the user, etc.

checkError method expects to return a Promise.

• If the Promise resolves, the user is not logged out and stays on the page.

• If the Promise rejects, the logout method is called to log out the user and by default, the user is redirected to the /login route.

We'll use the checkError method to log out the user if the API returns a 401 or 403 error.

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    ...
    checkError: (error) => {
        if (error.status === 401 || error.status === 403) {
            return Promise.reject();
        }

        return Promise.resolve();
    },
    ...
};

Invoking the useCheckError hook's mutation will call the checkError method, passing in the mutation's parameters as arguments.

Refer to the useCheckError documentation for more information →

For example, if you want to check the error of a fetch request, you can use the useCheckError hook's mutation like this:

import { useCheckError } from "@pankod/refine-core";

const { mutate } = useCheckError();

fetch("http://example.com/payment")
  .then(() => console.log("Success"))
  .catch((error) => mutate(error));

const authProvider: AuthProvider = {
    ...
    checkError: (error) => {
        if (error.status === 401 || error.status === 403) {
            return Promise.reject({
                redirectPath: "/custom-page",
            });
        }

        return Promise.resolve();
    },
    ...
}

getPermissions method is used to get the user's permissions. It expects to return a Promise.

• If the Promise resolves with data, the user's permissions will be available in the usePermissions hook's data property.

• If the Promise rejects, the user's permissions will not be available and usePermissions hook throw an error.

We'll use the getPermissions method to get the user's permissions from the localStorage.

import { AuthProvider } from "@pankod/refine-core";

const mockUsers = [
    { email: "john@mail.com", roles: ["admin"] },
    { email: "jane@mail.com", roles: ["editor"] },
];

const authProvider: AuthProvider = {
    ...
    getPermissions: () => {
        const user = localStorage.getItem("auth");

        if (user) {
            const { roles } = JSON.parse(user);

            return Promise.resolve(roles);
        }

        return Promise.reject();
    },
    ...
};

Invoking the usePermissions hook will call the getPermissions method. If getPermissions method resolves a data, it will be available in the usePermissions hook's data property.

Refer to the usePermissions documentation for more information →

For example, if you want to check if the user has a specific permission, you can use the usePermissions hook like this:

import { usePermissions } from "@pankod/refine-core";

const { data } = usePermissions();

if (data?.includes("admin")) {
  console.log("User has admin permissions");
}

getUserIdentity method is used to get the user's identity. It expects to return a Promise.

• If the Promise resolves with a data, the user's identity will be available in the useGetIdentity hook's data property.

• If the Promise rejects, the user's identity will not be available and useGetIdentity hook throw an error.

We'll get the user's identity from the local storage and resolve the Promise.

import { AuthProvider } from "@pankod/refine-core";

const mockUsers = [
    { email: "john@mail.com", roles: ["admin"] },
    { email: "jane@mail.com", roles: ["editor"] },
]

const authProvider: AuthProvider = {
    ...
    getUserIdentity: () => {
        const user = localStorage.getItem("auth");

        if (user) {
            const { email, roles } = JSON.parse(user);

            return Promise.resolve({ email, roles });
        }

        return Promise.reject();
    },
    ...
};

Invoking the useGetIdentity hook will call the getUserIdentity method. If getUserIdentity method resolves a data, it will be available in the useGetIdentity hook's data property.

Refer to the useGetIdentity documentation for more information →

For example, if you want to get the user's email, you can use the useGetIdentity hook like this:

import { useGetIdentity } from "@pankod/refine-core";

const { data } = useGetIdentity();

if (data) {
  console.log(data.email);
}

const authProvider: AuthProvider = {
    ...
    getUserIdentity: () => {
        const user = localStorage.getItem("auth");

        if (user) {
            const { email, roles } = JSON.parse(user);

            return Promise.resolve({
                email,
                roles,
                name: "John Doe",
                avatar: "https://i.pravatar.cc/300",
            });
        }

        return Promise.reject();
    },
    ...
};

register method is used to register a new user. It is similar to the login method. It expects to return a Promise.

• If the Promise resolves, by default, the user will be redirected to the / page.

• If the Promise rejects, the useRegister hook will throw an error.

We'll register a new user and resolve the Promise.

import { AuthProvider } from "@pankod/refine-core";

const mockUsers = [{ email: "john@mail.com" }, { email: "jane@mail.com" }];

const authProvider: AuthProvider = {
    ...
    register: ({ email }) => {
        const user = mockUsers.find((user) => user.email === email);

        if (user) {
            return Promise.reject();
        }

        mockUsers.push({ email });

        return Promise.resolve();
    },
    ...
};

Invoking the useRegister hook's mutation will call the register method, passing in the mutation's parameters as arguments.

Refer to the useRegister documentation for more information →

For example, if you want to register a new user, you can use the useRegister hook like this:

import { useRegister } from "@pankod/refine-core";

const { mutate } = useRegister();

const handleRegister = (values) => {
  mutate(values);
};

The register method will get the mutation's parameters as arguments.

const { mutate } = useRegister<{
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
  remember: boolean;
}>();

const authProvider: AuthProvider = {
    ...
    register: () => {
        ...
        return Promise.resolve("/custom-page");
    }
}

const { mutate } = useRegister();

mutate({ redirectPath: "/custom-page" });

const authProvider: AuthProvider = {
    ...
    register: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

const authProvider: AuthProvider = {
    ...
    register: () => {
        ...
        return Promise.resolve(false);
    }
}

const authProvider: AuthProvider = {
    ...
    register: () => {
        ...
        return Promise.reject({
            name: "Error",
            message: "Something went wrong!",
        });
    }
}

forgotPassword method is used to send a password reset link to the user's email address. It expects to return a Promise.

We'll show how to send a password reset link to the user's email address and resolve the Promise.

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    ...
    forgotPassword: ({ email }) => {
        // send password reset link to the user's email address here
        // if request is successful, resolve the Promise, otherwise reject it
        return Promise.resolve();
    },
    ...
};

Invoking the useForgotPassword hook's mutation will call the forgotPassword method, passing in the mutation's parameters as arguments.

Refer to the useForgotPassword documentation for more information →

For example, if you want to send a password reset link to the user's email address, you can use the useForgotPassword hook like this:

import { useForgotPassword } from "@pankod/refine-core";

const { mutate } = useForgotPassword();

const handleForgotPassword = (values) => {
  mutate(values);
};

The forgotPassword method will get the mutation's parameters as arguments.

const { mutate } = useForgotPassword<{
  email: string;
}>();

const authProvider: AuthProvider = {
    ...
    forgotPassword: () => {
        ...
        return Promise.resolve("/custom-page");
    }
}

const { mutate } = useForgotPassword();

useForgotPassword({ redirectPath: "/custom-page" });

const authProvider: AuthProvider = {
    ...
    forgotPassword: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

const authProvider: AuthProvider = {
    ...
    forgotPassword: () => {
        ...
        return Promise.reject({
            name: "Error",
            message: "Something went wrong!",
        });
    }
}

updatePassword method is used to update the user's password. It expects to return a Promise.

We'll show how to update the user's password and resolve the Promise.

import { AuthProvider } from "@pankod/refine-core";

const authProvider: AuthProvider = {
    ...
    updatePassword: ({ password }) => {
        // update the user's password here
        // if request is successful, resolve the Promise, otherwise reject it
        return Promise.resolve();
    },
    ...
};

Invoking the useUpdatePassword hook's mutation will call the updatePassword method, passing in the mutation's parameters as arguments. Additionally, the updatePassword method will take query parameters as arguments from the URL as well.

Refer to the useUpdatePassword documentation for more information →

For example, if you want to update the user's password, you can use the useUpdatePassword hook like this:

import { useUpdatePassword } from "@pankod/refine-core";

const { mutate } = useUpdatePassword();

const handleUpdatePassword = ({ password, confirmPassword }) => {
    mutate({ password, confirmPassword }});
};

If we assume that the URL is http://localhost:3000/reset-password?token=123, the updatePassword method will get the mutation's parameters as arguments and token query parameter as well.

const authProvider: AuthProvider = {
    ...
    updatePassword: ({ password, confirmPassword, token }) => {
        console.log(token); // 123
        return Promise.resolve();
    }
}

const { mutate } = useUpdatePassword<{
  password: string;
  newPassword: string;
}>();

const authProvider: AuthProvider = {
    ...
    updatePassword: () => {
        ...
        return Promise.resolve("/custom-page");
    }
}

const { mutate } = useUpdatePassword();

useUpdatePassword({ redirectPath: "/custom-page" });

const authProvider: AuthProvider = {
    ...
    updatePassword: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

const authProvider: AuthProvider = {
    ...
    updatePassword: () => {
        ...
        return Promise.reject({
            name: "Error",
            message: "Something went wrong!",
        });
    }
}

After a user logs in, you can save the user's authorization credentials (such as a token) to the browser's localStorage or sessionStorage. This allows you to include the credentials in API calls by configuring the dataProvider.