@refine-auth/kinde-react

!GitHub Repo stars
!Code Climate maintainability

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

Installation & Usage

You can install the library using npm or yarn:

``sh
npm install @refine-auth/kinde-react


or

yarn add @refine-auth/kinde-react

`

$3

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.

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

clientId="KINDE_CLIENT_ID"
domain="KINDE_DOMAIN"
logoutUri={window.location.origin}
redirectUri={window.location.origin}
>


`

$3

To use authProvider with Refine App, use Hook.

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

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

);
};

`

$3


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

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

const { mutate: login } = useLogin();

// *

login({redirectPath: "/"})}>
Sign in


`

Properties

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.

Documentation

- 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