How to Integrate Refine basic login with token based JWT auth?

Hi, I want to integrate refine login with my backend login service built with JWT auth via API.

3 Replies

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To integrate refine login with your JWT-based backend login service, you can create a custom auth provider. Here's an example of how to create an auth provider for JWT authentication: 1. First, create an authProvider object with the necessary methods like login, logout, check, and optionally getPermissions and getIdentity. In the login method, you'll need to make an API call to your backend login service and handle the JWT token.

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

const TOKEN_KEY = "your_token_key";

export const authProvider: AuthBindings = {
  login: async ({ username, password }) => {
    try {
      const response = await axios.post("your_login_api_url", {
        username,
        password,
      });

      const token = response.data.jwt;
      localStorage.setItem(TOKEN_KEY, token);

      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

      return {
        success: true,
        redirectTo: "/",
      };
    } catch (error) {
      return {
        success: false,
        error: new Error("Login failed"),
      };
    }
  },
  logout: async () => {
    localStorage.removeItem(TOKEN_KEY);
    return {
      success: true,
      redirectTo: "/",
    };
  },
  check: async () => {
    const token = localStorage.getItem(TOKEN_KEY);
    if (token) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      return {
        authenticated: true,
      };
    }

    return {
      authenticated: false,
      logout: true,
      error: new Error("Token not found"),
      redirectTo: "/",
    };
  },
  // Optionally, you can implement getPermissions and getIdentity methods
};

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

const TOKEN_KEY = "your_token_key";

export const authProvider: AuthBindings = {
  login: async ({ username, password }) => {
    try {
      const response = await axios.post("your_login_api_url", {
        username,
        password,
      });

      const token = response.data.jwt;
      localStorage.setItem(TOKEN_KEY, token);

      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

      return {
        success: true,
        redirectTo: "/",
      };
    } catch (error) {
      return {
        success: false,
        error: new Error("Login failed"),
      };
    }
  },
  logout: async () => {
    localStorage.removeItem(TOKEN_KEY);
    return {
      success: true,
      redirectTo: "/",
    };
  },
  check: async () => {
    const token = localStorage.getItem(TOKEN_KEY);
    if (token) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      return {
        authenticated: true,
      };
    }

    return {
      authenticated: false,
      logout: true,
      error: new Error("Token not found"),
      redirectTo: "/",
    };
  },
  // Optionally, you can implement getPermissions and getIdentity methods
};

2. Next, import the authProvider object into your main App component and pass it to the <Refine> component.

import { Refine } from "@refinedev/core";
import { authProvider } from "./authProvider";

const App = () => {
  // Other configurations...

  return (
    <Refine
      authProvider={authProvider}
      // Other providers and configurations...
    >
      {/* Your app components */}
    </Refine>
  );
};

import { Refine } from "@refinedev/core";
import { authProvider } from "./authProvider";

const App = () => {
  // Other configurations...

  return (
    <Refine
      authProvider={authProvider}
      // Other providers and configurations...
    >
      {/* Your app components */}
    </Refine>
  );
};

3. If you want to create a custom login page, you can use the useLogin hook from refine. Here's an example of how to use it:

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

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

export const LoginPage = () => {
  const { mutate: login } = useLogin<LoginVariables>();

  const onSubmit = (values: LoginVariables) => {
    login(values);
  };

  return <Form onFinish={onSubmit}>// rest of the login form</Form>;
};

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

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

export const LoginPage = () => {
  const { mutate: login } = useLogin<LoginVariables>();

  const onSubmit = (values: LoginVariables) => {
    login(values);
  };

  return <Form onFinish={onSubmit}>// rest of the login form</Form>;
};

For more information, you can refer to the useLogin documentation (https://refine.dev/docs/api-reference/core/hooks/auth/useLogin). Remember to replace the placeholders like your_token_key and your_login_api_url with your actual values. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below

eastern-cyan•2y ago

This can be done in many ways and refine does not have a opinion on this. It can be done as you wish. The suggestions provided by the bot are good. Additionally, you can follow the authProvider tutorial to learn how refine simplifies the authentication process. https://refine.dev/docs/tutorial/understanding-authprovider/index/