License NPM Version NPM Downloads GitHub Repo stars Code Climate maintainability

@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