# @sandboxvr/auth-components

> SandboxVR Auth components

Latest version **0.0.7** (published 2019-08-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @sandboxvr/auth-components
pnpm add @sandboxvr/auth-components
yarn add @sandboxvr/auth-components
bun add @sandboxvr/auth-components
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2019-08-23 |
| First published | 2019-08-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | John Dean |
| Maintainers | sandboxvr |

## Links

- npm: https://www.npmjs.com/package/@sandboxvr/auth-components
- npm.io page: https://npm.io/package/@sandboxvr/auth-components

## Recent versions

- 0.0.7 (latest) — 2019-08-23
- 0.0.6 — 2019-08-23
- 0.0.5 — 2019-08-23
- 0.0.4 — 2019-08-23
- 0.0.3 — 2019-08-22
- 0.0.2 — 2019-08-22

## README

# @sandboxvr/auth-components

A reusable collection of React UI components for handling auth

## Install

```
yarn add @sandboxvr/auth-components
```

## Usage

Firebase must be enabled before using these components:

```
import { initializeApp } from 'firebase/app'

initializeApp({
  apiKey,
  authDomain,
  databaseURL,
  projectId,
  storageBucket,
  messagingSenderId,
  appId
})
```

## AuthButton

A button that waits for user status, then shows either a Login or Logout button, as needed

Usage (all props are optional):

```
import { AuthButton } from '@sandboxvr/auth-components'

<AuthButton
  loginClassName="login"
  loginStyle={{ color: 'red' }}
  loginLabel="Login"
  logoutClassName="logout"
  logoutStyle={{ color: 'blue' }}
  logoutLabel="Logout"
/>
```

## Login

Provides a login button that will prompt user to sign up or login

```
import { Login } from '@sandboxvr/auth-components'

<Login
  {/* required */}
  onLogin={(user: firebase.User, credential: auth.AuthCredential) => { /* respond to login */}}
  {/* optional */}
  label="Login Please"
  className="login"
  style={{ color: 'yellow' }}
/>
```

## Logout

Provides a login button that will prompt user to sign up or login

```
import { Logout } from '@sandboxvr/auth-components'

<Logout
  {/* required */}
  onLogout={() => { /* respond to logout */}}
  {/* optional */}
  label="Login Please"
  className="login"
  style={{ color: 'yellow' }}
/>
```

## useToken hook

Provides a React hook to obtain an authentication token. Handles:

- Refresh
- Tokencide
- User login / logout

```
import { useToken } from '@sandboxvr/auth-components'


const MyComponent = () => {
 const [token, claims] = useToken()

 // render....
}
```

`token` will be a token that can be passed along to services requiring authentication

```
await axios.get(`${process.env.REACT_APP_API_ENDPOINT}/retail`, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
})
```

`claims` is an object with the roles of the user. For example `{ retail: true }`

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