# @concepta/react-auth-provider
> ## Introduction
Latest version **1.0.0** (published 2024-08-06) · BSD-3-Clause license · 0 weekly downloads
## Install
```sh
npm install @concepta/react-auth-provider
pnpm add @concepta/react-auth-provider
yarn add @concepta/react-auth-provider
bun add @concepta/react-auth-provider
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-08-06 |
| First published | 2022-04-08 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mrmaz, leoafarias, andreneto97 |
## Links
- npm: https://www.npmjs.com/package/@concepta/react-auth-provider
- npm.io page: https://npm.io/package/@concepta/react-auth-provider
## Dependencies (1)
- [@concepta/react-data-provider](https://npm.io/package/@concepta/react-data-provider.md) ^1.0.0
## Recent versions
- 1.0.0 (latest) — 2024-08-06
- 2.0.0-alpha.22 (alpha) — 2025-01-08
- 2.0.0-alpha.21 — 2025-01-08
- 2.0.0-alpha.20 — 2024-12-09
- 2.0.0-alpha.19 — 2024-12-09
- 2.0.0-alpha.18 — 2024-12-04
- 2.0.0-alpha.17 — 2024-11-25
- 2.0.0-alpha.16 — 2024-11-21
- 2.0.0-alpha.15 — 2024-10-31
- 2.0.0-alpha.14 — 2024-10-29
- 2.0.0-alpha.13 — 2024-10-22
- 2.0.0-alpha.12 — 2024-10-17
- 2.0.0-alpha.11 — 2024-10-11
- 2.0.0-alpha.10 — 2024-09-30
- 2.0.0-alpha.9 — 2024-09-26
- … 37 more at https://npm.io/package/@concepta/react-auth-provider/versions
## README
# @concepta/react-auth-provider
## Introduction
### Overview of the Package
`@concepta/react-auth-provider` is a React library designed to simplify the authentication process, used together with `@concepta/react-data-provider`. It provides an `AuthProvider` component and related hooks to manage user authentication, including login, logout, and token management.
### Features
- Easy integration with existing React applications
- Customizable authentication paths
- Token management (access and refresh tokens)
- Hooks for accessing authentication context
- Support for custom success and error handlers
## Getting Started
### Installation
To install `@concepta/react-auth-provider`, run the following command:
```bash
npm install @concepta/react-auth-provider
```
or with yarn:
```bash
yarn add @concepta/react-auth-provider
```
> Ensure that @concepta/react-data-provider is properly configured before using the auth provider.
## Components
### AuthProvider
The `AuthProvider` component is the core of the `@concepta/react-auth-provider` package. It wraps your application and provides authentication context to its children.
#### Props
- **children**: The components that will have access to the authentication context.
- **onSuccess**: (Optional) A callback function executed upon successful login. Receives the access token as an argument.
- **onError**: (Optional) A callback function executed if an error occurs during login.
#### How to use it
Wrap your app with the AuthProvider component
```jsx
```
### Success / Error Handling
- Use the `onSuccess` prop to handle successful login events:
- Use the `onError` prop to handle errors during the login process:
```jsx
console.log('Logged in with accessToken and refreshToken:', data)
}
onError={(error) => console.error('Login Error:', error)}
>
```
#### Methods
##### `doLogin`
- **Description**: Initiates the login process using the provided login data. The `loginData` can be a `LoginParams` object or any custom object.
- **Parameters**:
- `loginData`: An object containing optionals `username`, `password`, `loginPath`, and any other custom key-value pairs.
- The `loginPath` will be used to fire the request to this path instead of the default `/auth/signin`
- **Example Usage**:
```jsx
const loginData = { username: 'user', password: 'pass' };
doLogin(loginData);
```
With custom parameters
```jsx
interface CustomLogin {
email: string
secret: string
rememberMe: boolean
}
const customLoginData = { email: 'user@provider.com', secret: 'pass', rememberMe: true };
doLogin(customLoginData);
```
You can specify a custom login path in the `loginData` when calling `doLogin`:
```jsx
const loginData = {
username: 'user',
password: 'pass',
loginPath: '/custom-login',
};
doLogin(loginData);
```
##### `doLogout`
- **Description**: Clears the authentication tokens from local storage and performs logout actions.
#### State
- **isPending** (boolean): Status of the auth request.
- **user** (object): Holds the user information.
- **setUser** (object) => void: Function to update the user information.
- **accessToken** (string): Stores the access token.
- **refreshToken** (string): Stores the refresh token.
##### `user`
- **Description**: Holds the current user information. Initially, it may be `undefined` until the user logs in.
- **Usage**: This state is used to store information about the authenticated user. It can be used in various parts of your application to display user-specific data or to conditionally render components based on the user's authentication status.
**Accessing User Information:**
```jsx
const { user } = useAuth();
return (
{user ?
Welcome, {user.username}
:
Please log in
}