## Spec for Auth Package

Let's users log in, log out, reset password, and kick people out of the app if not logged in

## Table of Contents

- [Workflow](#workflow)
- [User Stories](#user-stories)
- [Test Plan](#test-plan)
- [Acceptance Tests](#acceptance-tests)
- [Screens / States](#screens--states)
- [Components](#components)
  - [Layouts](#layouts)
  - [Containers](#containers)
  - [Components](#components-1)
- [Schema](#schema)
  - [Component Schema](#component-schema)
    - [LoginContainer](#logincontainer)
      - [Schema](#schema-1)
      - [Tests](#tests)
  - [Database Schema](#database-schema)
  - [Store/Reducers](#storereducers)
  - [APIs/Hook Schema](#apishook-schema)

## Workflow

![]()

## User Stories

- As a user, i want to be able to login to my app so that I can access my campaign
- As a user, I want to be able to log out when I'm done
- As a user, I want to be able to safely reset my password so that I still have access if I have forgotten my credentials
- As a user, if my account validation fails during log in, don't let me through
- As a user, I want to remain logged in indefinitely, until I log out to save me from logging in all the time
- As a developer, I want a simple way to establish what pages are private vs public
- As a stakeholder, I want to show users messages/notifications before they log in and after logging out
- As a user, when I log in, I want to be dynamically routed to the appropriate destination based on my account status

## Test Plan

| Scenario                                  | Expected                                                                                                                          | Automated |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------- |
| Submits correct credentials               | Successfully routed to dashboard                                                                                                  | Yes       |
| Submits incorrect credentials             | Error message is displayed                                                                                                        | Yes       |
| Forgets their password                    | Error message is displayed                                                                                                        | Yes       |
| Clicks (in email) to reset their password | New page with email text field & reset button. If clicked it emails the user a secure reset link/token that expires in 30 minutes | Yes       |
| Changes their password                    | Checks if > 30m. If it is, show "expired" message. If not, show password, confirm password, & submit form button                  | Yes       |
| Types in an invalid password              | Repeat 30m check. If passes, update in db & route to login page with a success message                                            | Yes       |
| Clicks [Log out] button                   | If password entered doesn't meet criteria, show failed message and disable submit button until passes                             | Yes       |
| Revisits after Logging in                 | Removes all user tokens/cookies & routes user to new pae with \"thank you for visiting\" message                                  | Yes       |
| Clicks [back to login] link               | Allowed entry without forcing them to re-login                                                                                    | Yes       |
| Multiple failed log in attempts           | Routes user back to login page                                                                                                    | Yes       |

## Acceptance Tests

(N/A)

## Screens / States

![](- h

- t
- t
- p
- s
- :
- /
- /
- c
- o
- n
- t
- e
- n
- t
- .
- s
- c
- r
- e
- e
- n
- c
- a
- s
- t
- .
- c
- o
- m
- /
- u
- s
- e
- r
- s
- /
- K
- y
- l
- e
- G
- r
- a
- h
- a
- m
- /
- f
- o
- l
- d
- e
- r
- s
- /
- J
- i
- n
- g
- /
- m
- e
- d
- i
- a
- /
- 3
- b
- 4
- b
- a
- 1
- 6
- 1
- -
- 5
- 2
- 2
- 1
- -
- 4
- c
- a
- e
- -
- 9
- 1
- 2
- 9
- -
- 1
- c
- 3
- 4
- 5
- 7
- 9
- 8
- 4
- 0
- 4
- 0
- /
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 2
- .
- p
- n
- g)

## Components

### Layouts

N/A

### Containers

| Name           | Type       | Description                                                                                                                                                                                                                                                | Behaviors | Exists | Package |
| -------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------ | ------- |
| LoginContainer | Containers | A page using the <AuthLayout /> to show login features Uses AuthLayout to show an ad from the db & login features. Also triggers a verification script on login Shows an ad on the left and auth stuff on the right Can show an ad and auth block on right |           | No     | No      |

### Components

N/A

## Schema

### Component Schema

#### LoginContainer

##### Schema

| Name             | Type                                         | Description                                                                                             | Schema Type |
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| children         | JSX.Element                                  | Component to use - will override default layouts if provided                                            | prop        |
| adComponent      | JSX.Element                                  | Takes a component as an input that shows an ad (usually <Announcement />)                               | prop        |
| authComponent    | JSX.Element                                  | Container to use for the login screen (e.g. "Name/Email/Continue/forgot"                                | prop        |
| onVerify         | (email: string, password: string) => boolean | Handler that is called when the "handleVerification" render prop from the authComponent is triggered    | prop        |
| onAdClick        | (id: string, url: string) => void            | Handler that is called when the "handleAdClick" render prop from the adComponent component is triggered | prop        |
| onForgotPassword | () => void                                   | Handler that is called when the handleForgotPassword render prop from the authComponent is triggered    | prop        |
| onValidate       | (email: string, password: string): boolean   | Handler that is called when the handleValidation render prop is triggered from the authComponent prop   | prop        |

##### Tests

| It                                                                                                       | Type        |
| -------------------------------------------------------------------------------------------------------- | ----------- |
| Events - Should render in the dom                                                                        | Integration |
| Rendering - Should call the appropriate API when the handleVerify method is called                       | Integration |
| Rendering - Should navigate to the 'forgot password' page when the handleForgotPassword method is called | Integration |
| Rendering - Should call the appropriate API when the handleValidate method is called                     | Integration |

### Database Schema

### Store/Reducers

### APIs/Hook Schema