npm package: @lushdigital/auth
Description: Auth package for Lush apps. Uses context and GraphQL
Author: Rich Comber
Latest version: 4.1.6

# Contents

* [Introduction](#introduction)
* [Auth Context](#auth-context)
* [AuthWrapper](#authwrapper)
* [AuthRoute](#authroute)
	* [Basic example](#basic-example)
	* [Permissioned route](#permissioned-route)
	* [Logged out route](#logged-out-route)
	* [Standard route](#standard-route)
	* [Other props](#other-props)

	
# Introduction 

The Lush applications are all using two cookies for handling user sessions and auth so this package assumes the presence of `jwt` and `user` cookies. To use the package simply run:

```javascript
$ yarn add @lushdigital/auth
```

# Auth Context

To document still

# AuthWrapper

The AuthWrapper is a simple component that can be used in the app to show or hide content based on whether a user is logged in or not and has certain permissions. It takes two props: -

* a bool for `authenticated`. When this is set to false it will only render its children if there is no logged in user. By default it is true and will only render its children if there is a logged in user.
* an array for `permissions` which is empty by default. If a user is logged in and a permissions array is passed to the component then the provider will compare those two arrays (expects `int` or `string` values within) and return the children to the user if they have adequate permissions. Currently this function uses the mock roles array set by the login action but could be modified to check whatever is needed. *n.b.* if `authenticate` is false then the permission check will not be run as the component assumes only logged in users have permissions

```javascript
<AuthWrapper authenticated={ false }>
	// ... my components requiring people not to be logged in
</AuthWrapper>
```

```javascript
<AuthWrapper permissions={ [2, 3] }>
	// ... my components requiring permissions
</AuthWrapper>
```

# AuthRoute

The `AuthRoute` component is a permissioned based wrapper for React router 4. The component takes a number of required props.

## Basic example

The below example will render a basic route which requires a user to be logged in (it gets this data from the `AuthProvider`).

```javascript
<AuthRoute
  path='/my-route'
  componentProps={ props }
  title='pagetitle'
  component={ Component }
/>
```

## Permissioned route

You can also enforce permission checks by passing an array of grants at the component as per the following (*n.b.* you will need to configure the AuthProvider to support this in your specific application):

```javascript
<AuthRoute
  path='/my-route'
  componentProps={ props }
  title='pagetitle'
  component={ Component }
  permissions={ [1,2,3] }
/>
```

## Logged out route

You can also require users to not be logged in to see certain routes (e.g. login or register routes). Simply pass `authenticated={ false }` & `notAuthenticated={ true }` as per the following:

```javascript
<AuthRoute
  path='/my-route'
  componentProps={ props }
  title='pagetitle'
  component={ Component }
  authenticated={ false }
  notAuthenticated={ true }
/>
```

## Standard route

To simplify your route rendering you can also use this component to render standard routes. Simply pass `authenticated={ false }` as per the following:

```javascript
<AuthRoute
  path='/my-route'
  componentProps={ props }
  title='pagetitle'
  component={ Component }
  authenticated={ false }
/>
```

## Other props

- `redirect: String` - Where a component should redirect if user can't access (default is 404 or if user not logged in it will default to login)
- `exact: Bool` - exact param for route, defaul is true
- `language: String` - langauge to replace any :language params in redirect route
- `ignoreScrollBehavior: Bool` - default false