1. Auth Provider

What is auth provider?​

Auth provider is an object that contains methods to handle authentication and access control in your app by having refine consume them. These methods expect to return a promise, so they can be used with async methods.

You can use any third-party authentication service like Auth0, Okta, etc. or your own custom methods while creating an auth provider from scratch, which we will explore in the next section.

The typical auth provider has the following methods:

import { AuthBindings } from "@refinedev/core";

const authProvider: AuthBindings = {
    // required methods
    login: async (params: any) => ({}),
    check: async (params: any) => ({}),
    logout: async (params: any) => ({}),
    onError: async (params: any) => ({}),
    // optional methods
    register: async (params: any) => ({}),
    forgotPassword: async (params: any) => ({}),
    updatePassword: async (params: any) => ({}),
    getPermissions: async (params: any) => ({}),
    getIdentity: async (params?: any) => ({}),
};

For more information about these methods and how refine hooks use them, refer to the Auth Provider documentation→

Using Auth Providers in refine​

When creating a new auth provider, you need to pass it to the <Refine/> component as a prop for authentication:

// ---
import { AuthBindings, Refine } from "@refinedev/core";

// It is a mock auth provider.
const authProvider: AuthBindings = {
    // required methods
    login: async (params: any) => ({}),
    check: async (params: any) => ({}),
    logout: async (params: any) => ({}),
    onError: async (params: any) => ({}),
};

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

For more information, refer to the <Refine/> documentation→

How are auth provider methods used in the app?​

Each method of auth provider corresponds to a hook in refine that you can use these hooks to perform auth operations in your app.

For example, to show you how relationship between auth provider methods and hooks, here is how you can use the useLogin hook to perform a login operation:

import { useLogin } from "@refinedev/core";

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

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

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

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

import { AuthBindings } from "@refinedev/core";

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

        if (response.status === 200) {
            return {
                success: true,
                redirectTo: "/",
            };
        }

        return {
            success: false,
            error: {
                message: "Invalid credentials",
                name: "Invalid credentials",
            },
        };
    },
    // ---
};

For more information about each hook, refer to the Auth Hooks documentation→

Auth Provider Examples​

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.
• 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.
• Strapi Graphql - An auth provider example with Strapi Graphql.
• Nhost - An auth provider example with Nhost.
• Basic with Nextjs - A basic auth provider example with Nextjs.
• Basic with Remix - A basic auth provider example with Remix.