# @adrianfrith/react-u5auth

> React components to authenticate via U5auth (OAuth2)

Latest version **0.2.1** (published 2023-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @adrianfrith/react-u5auth
pnpm add @adrianfrith/react-u5auth
yarn add @adrianfrith/react-u5auth
bun add @adrianfrith/react-u5auth
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2023-08-07 |
| First published | 2023-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 74.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Chris Oloff |
| Maintainers | adrianfrith |

## Links

- npm: https://www.npmjs.com/package/@adrianfrith/react-u5auth
- Repository: https://github.com/afrith/react-u5auth
- Homepage: https://github.com/afrith/react-u5auth#readme
- Issues: https://github.com/afrith/react-u5auth/issues
- npm.io page: https://npm.io/package/@adrianfrith/react-u5auth

## Recent versions

- 0.2.1 (latest) — 2023-08-07
- 0.2.0 — 2023-08-07

## README

# What is It?

A simple React component and higher order function to facilitate authentication
via U5-Auth (or rather, any OAuth2 provider).

# Prerequisites

* The provider url, e.g. `https://login.u5auth.com`.
* OAuth2 client credentials, where the client is allowed to use the
  [implicit flow](https://tools.ietf.org/html/rfc6749#section-1.3.2).
* A [React]() application, which is supposed to be secured via OAuth2 (or
  rather, needs an `access_token` to authenticate e.g. calls to APIs).

# How

## Setup

Client details need to be specified via the `AuthContext` component. The `AuthContext` must wrap any component that needs authentication, so the `AuthContext` is probably best placed high up in the component tree (maybe just above the router, if you use one):

First, import the `AuthContext` component:

```javascript
import { AuthContext } from 'react-u5auth'
```

Then, wrap your component(s):

```react
<AuthContext clientId={"123"} provider={"https://my-provider.com"}>
  <Router history={browserHistory}>
    // ...
  </Router>
</AuthContext>
```

## Protecting Components

Now, the higher-order function `authenticated` can be used to ensure a valid `access_token` whenever the component gets rendered:

```js
import { authenticated } from 'react-u5auth'

class SomeComponent extends React.Component {
  render() {
    return <p>Some component that needs an authenticated user...</p>
  }
}

const ProtectedComponent = authenticated()(SomeComponent)

const SomeOtherComponent = () => (<p>This is some other component</p>)
const ProtectedComponent = authenticated()(() => (<SomeOtherComponent />))
```

Instead of the higher-order function the hook `useAuthentication` can be used for the same purpose:

```js
import { useAuthentication } from 'react-u5auth'

const SomeComponent = () => (
  <p>Some component that needs an authenticated user...</p>
)

const ProtectedComponent = () => {
  const { authenticated } = useAuthentication()

  if (!authenticated) {
    // This will appear only for a short time before the
    // redirect to the auth provider URL kicks in.
    return <p>Logging in...</p>
  } else {
    return <SomeComponent />
  }
}
```

## Using the `access_token`

A protected component isn't too valuable on its own, you may need an access
token when speaking to an API. Anywhere the access token can be accessed like
this:

```
import { getLocalToken } from 'react-u5auth'

...
const token = getLocalToken()
...
```

The `useAuthentication` hook also returns the token:

```js
const { authenticated, token } = useAuthentication()
```


Please note: There is something fishy here about the `access_token`
being kept in global state. See
[this issue](https://github.com/Uber5/react-u5auth/issues/3).

# Status

It's fully functional, but does not deal with token expiry and/or certain error conditions yet. See the
[issues and/or add a new issue](https://github.com/Uber5/react-u5auth/issues).

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