# Process: Login

Process to `login` from the top of the stack to the bottom

## Request

### Frontend
```mermaid
flowchart LR
    a(login form component)-->|calls|b(login service)
    b{{login service}}-->|fetch|API
    API-->c(/login user route)
```

### Backend

```mermaid
flowchart LR
    c(/login user route)-->|calls|d{{backend user service}}
    d{{backend user service}}-.->e(login)
    d{{backend user service}}-.->f(createToken)
    e(login)-.->g{{backend user mode}}
    f(createToken)-.->g{{backend user model}}
    g{{backend user model}}<-->|schwifty model|h((DB))
```


## Fulfillment

### Backend

```mermaid
flowchart LR
    h((DB))<-->|schwifty model|g{{backend user model}}
    g{{backend user model}}-->d{{backend user service}}
    d{{backend user service}}-->c(/login user route)
```

### Frontend

```mermaid
flowchart LR
    c(/login user route)-->API-->b{{login service}}
    b{{login service}}-->a(login form component)
```

## Forward & Complete Request

### Store State
```mermaid
flowchart LR
    a(login form component)-->b{{login service}}
    b{{login service}}-.->z(storeToken)
    z(storeToken)--->v{{vue router}}
    v{{vue router}}-.->y(forward to /matches)
    z(storeToken)-.->x(fetch profiles)-->w{{profile service}}-->u(API)
```