1. Auth Provider

Auth provider is a object which contains methods to handle authentication and authorization in your app. It provides a way to authenticate users and authorize them to access resources. refine consumes these methods via auth hooks.

Auth provider's methods expect to return a Promise. So, you can use async methods to create auth provider. Therefore, to create auth provider from scratch, you can use any third-party authentication service like Auth0, Okta, etc. or your own custom methods. We'll see how to create auth provider in the next sections.

Moreover, refine offers built-in examples for auth providers. You can use them as a starting point for your own auth provider. You can check Auth Provider Examples to see the list of examples.

The typical auth provider has following methods:

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

const authProvider: AuthProvider = {
    login: (params) => Promise,
    logout: (params) => Promise,
    checkAuth: (params?) => Promise,
    checkError: (error) => Promise,
    ...
}

Above methods are required. You can find other optional methods in next section.

These methods are used to perform auth operations by refine hooks. You can check Auth Provider documentation to see the details of each method.

When you create a new auth provider, you need to pass it to the <Refine/> component as a prop. So, refine can use it to handle authentication.

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

// It is a mock auth provider.
const authProvider: AuthProvider = {
    login: (params) => Promise,
    logout: (params) => Promise,
    checkAuth: (params?) => Promise,
    checkError: (error) => Promise,
    ...
}

<Refine
    ...
    authProvider={authProvider}
/>;

Refer to the <Refine/> documentation for more information →

Each method of auth provider is corresponding to a hook in refine. So, you can use these hooks to perform auth operations in your app. You can check Auth Hooks documentation to see the details of each hook.

For example, you can use useLogin hook to perform login operation like below:

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

type LoginVariables = {
  email: string;
  password: string;
};

const { mutate } = useLogin<LoginVariables>();

const handleLogin = async (values) => {
  await mutate(values);
};

As you can see, useLogin hook returns a mutate function. When you call this function, it calls the login method of auth provider like below:

const authProvider: AuthProvider = {
    login: ({ email, password }) => {
        const response = await axios.post("/api/login", { email, password });

        if (response.status === 200) {
            return Promise.resolve(response.data);
        }

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

If the login method will return a resolved Promise, the mutate function will return a resolved Promise. Otherwise, it will return a rejected Promise. So, you can use the returned Promise to handle the login operation.

You can use the following auth provider examples as a starting point for your own auth provider or you can use them as it is. Check the links below to see the details of each example.

• Basic - A basic auth provider example.
• Okta - Okta, the enterprise-grade identity management service.
• Keycloak - An auth provider example with Keycloak.
• Auth0 - An auth provider example with Auth0.
• Google Auth - An auth provider example with Google Auth.
• OTP Login - An auth provider example with OTP Login.
• Appwrite - An auth provider example with Appwrite.
• Supabase - An auth provider example with Supabase.
• Strapi - An auth provider example with Strapi.
• Basic with Nextjs - A basic auth provider example with Nextjs.
• Basic with Remix - A basic auth provider example with Remix.
• Kinde - An auth provider example with Kinde.