https://github.com/hirenf14/refine-auth-kinde-react

AuthProvider for Refine with Kinde integration.
https://github.com/hirenf14/refine-auth-kinde-react

auth kinde npm npm-package react refine

Last synced: 3 months ago
JSON representation

AuthProvider for Refine with Kinde integration.

• Host: GitHub
• URL: https://github.com/hirenf14/refine-auth-kinde-react
• Owner: hirenf14
• Created: 2023-10-24T12:43:06.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-06T08:44:56.000Z (about 1 year ago)
• Last Synced: 2024-03-14T18:18:28.669Z (11 months ago)
• Topics: auth, kinde, npm, npm-package, react, refine
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@refine-auth/kinde-react
• Size: 60.5 KB
• Stars: 18
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-refine - @refine-auth/kinde-react

README

        
# @refine-auth/kinde-react

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![NPM Version](https://img.shields.io/npm/v/@refine-auth/kinde-react.svg)](https://www.npmjs.com/package/@refine-auth/kinde-react)

[![NPM Downloads](https://img.shields.io/npm/dt/@refine-auth/kinde-react.svg)](https://www.npmjs.com/package/@refine-auth/kinde-react)

![GitHub Repo stars](https://img.shields.io/github/stars/hirenf14/refine-auth-kinde-react)

![Code Climate maintainability](https://img.shields.io/codeclimate/maintainability/hirenf14/refine-auth-kinde-react)

`@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

```

### Add Provider Component

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";

    

```

### Basic Hook Usage

To use `authProvider` with [Refine](https://refine.dev) App, use Hook.

```jsx

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

const App = () => {

    const { authProvider } = useAuthProvider();

  return (

    

      {/* ... */}

    

  );

};

  

```

### How to use login

[Kinde](https://kinde.com/) 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](https://refine.dev/docs/api-reference/core/providers/auth-provider/#methods)): 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](https://refine.dev/docs/api-reference/core/providers/auth-provider/).

- [Refer to documentation for more info about refine](https://refine.dev/docs/)

- [Step up to refine tutorials.](https://refine.dev/docs/tutorial/introduction/index/)

- [To know more on Kinde](https://kinde.com/docs/)

Made with ❤️ by [Hiren F](https://hiren.codes/) | [GitHub](https://github.com/hirenf14/refine-auth-kinde-react)