Contents

• Introduction
• Auth Context
• AuthWrapper
• AuthRoute

  • Basic example

  • Permissioned route

  • Logged out route

  • Standard route

  • 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:

$ 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

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

<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).

<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):

<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:

<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:

<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