# react-airlock

> React components for Laravel Airlock

Latest version **0.0.4** (published 2020-03-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-airlock
pnpm add react-airlock
yarn add react-airlock
bun add react-airlock
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-03-02 |
| First published | 2020-02-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 36.7 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 151 |
| Author | Leon Koole |
| Maintainers | koole |
| Keywords | react, laravel, airlock |

## Links

- npm: https://www.npmjs.com/package/react-airlock
- Repository: https://github.com/koole/react-airlock
- Homepage: https://github.com/koole/react-airlock#readme
- Issues: https://github.com/koole/react-airlock/issues
- npm.io page: https://npm.io/package/react-airlock

## Dependencies (4)

- [axios](https://npm.io/package/axios.md) ^0.19.2
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.1.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2
- [@types/hoist-non-react-statics](https://npm.io/package/@types/hoist-non-react-statics.md) ^3.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2020-03-02
- 0.0.3 — 2020-03-02
- 0.0.2 — 2020-03-01
- 0.0.1 — 2020-02-29

## README

# react-airlock - React components for Laravel Airlock

⚠️ This is _very_ much a work in progress.

The react-airlock package aims to provide an easy way to authenticate your React application with Laravel Airlock.

## Usage

Install from NPM

```
npm i react-airlock
```

Wrap your application in an `<Airlock>` component

Example:

```js
import React from "react";

import { Airlock } from "react-airlock";

const airlockConfig = {
  api_url: "http://foobar.test",
  csrf_cookie_route: "airlock/csrf-cookie",
  login_route: "login",
  logout_route: "logout",
  user_object_route: "api/user"
};

const App = () => (
  <div class="my-application">
    <Airlock config={airlockConfig}>// Your application code</Airlock>
  </div>
);
```

You can then use the `withAirlock` higher-order component to get authentication status, user data and airlock related methods in any component.

```js
import React from "react";
import { Airlock } from "react-airlock";

const LoginButton = ({ authenticated, user, signIn }) => {
  const handleLogin = () => {
    const email = "airlock@example.org";
    const password = "example";

    signIn(email, password)
      .then(() => window.alert("Signed in!"))
      .catch(() => window.alert("Incorrect email or password"));
  };

  if (authenticated === true) {
    return <h1>Welcome, {user.name}</h1>;
  } else {
    return <Button onClick={handleLogin}>Sign in</Button>;
  }
};

export default withAirlock(LoginButton);
```

You can also directly consume the Airlock context by importing `AirlockContext`.

Both the `AirlockContext` and the `withAirlock` HOC give you access to the following data and methods:
| | Description |
|---------------------|-----------------------------------------------------------------------------------------------------|
| `user` | Object your API returns with user data |
| `authenticated` | Boolean, or null if authentication has not yet been checked |
| `signIn` | Accepts (email, password), returns a promise. |
| `signOut` | Returns a promise |
| `checkAuthentication` | Returns the authentication status. If it's null, it will ask the server and update `authenticated`. |

# Setup

All URLS in the config are required. These need to be created in your Laravel app.

```js
const airlockConfig = {
  // Your applications URL
  api_url: "http://foobar.test",
  // The following settings are URLS that need to be created in your Laravel application
  // The URL airlock uses for the csrf cookie
  csrf_cookie_route: "airlock/csrf-cookie",
  // Email and password get POSTed to here
  signin_route: "login",
  // A POST request is sent to this route to sign the user out
  signout_route: "logout",
  // Used for checking if the user is signed in (so this should be protected)
  // The returned object will be avaiable as `user` in the React components.
  user_object_route: "api/user"
};
```

react-airlock automatically checks if the user is signed in when the the `<Airlock>` component gets mounted. If you don't want this, and want to manually use the `checkAuthentication` function later, set `checkOnInit` to `false` like so:

```js
<Airlock config={airlockConfig} checkOnInit={true}>
```

---
_Source: https://npm.io/package/react-airlock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._