@refine-auth/kinde-react is an auth provider for refine to integrate kinde authentication.

You can install the library using npm or yarn:

npm install @refine-auth/kinde-react
# or
yarn add @refine-auth/kinde-react

Kinde uses a React Context Provider to maintain its internal state in your application.

Import the Kinde Provider component and wrap your application in it.

import { RefineKindeProvider } from "@refine-auth/kinde-react";

<RefineKindeProvider
    clientId="KINDE_CLIENT_ID"
    domain="KINDE_DOMAIN"
    logoutUri={window.location.origin}
    redirectUri={window.location.origin}
>
    <App />
</RefineKindeProvider>

To use authProvider with Refine App, use Hook.

import { useAuthProvider } from "@refine-auth/kinde-react";

const App = () => {
    const { authProvider } = useAuthProvider();
  return (
    <Refine
      authProvider={authProvider}
      /* ... */
    >
      {/* ... */}
    </Refine>
  );
};
  

Kinde is using redirection based authentication. So, instead of AuthPage, we just need to use login method.

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

const { mutate: login } = useLogin();

// ***

<Button onClick={() => login({redirectPath: "/"})}>
    Sign in
</Button>

The useAuthProvider hook returns the following properties:

• authProvider (AuthProvider): Object with methods from AuthBinding of refine.

• isLoading (boolean): A flag that indicates whether authentication is currently being loaded or fetched. You can use this property to conditionally render loading indicators or content.

• token (string): Represents authentication token, to be used for API authentications.

• For more detailed information and usage, refer to the refine auth provider documentation.
• Refer to documentation for more info about refine
• Step up to refine tutorials.
• To know more on Kinde

Made with ❤️ by Hiren F | GitHub