portal-www/README.md

Nova Portal Website. Based on Next starter by Ueno

# portal-www

Nova customer portal 👨🏻‍💻 This project uses [`nova-graphql`](http://stash/projects/MOON/repos/nova-graphql). Single sign-on via connect.nova.is ([`see here`](https://github.com/nova-hf/nova-core/apps/auth))

## Development

This project uses [`@nova-hf/ui`](http://stash/projects/STYLE/repos/ui) ([npm](http://stash/projects/STYLE/repos/ui)). Please refer to the [readme](http://stash/projects/STYLE/repos/ui) for logging into the shared nova-dev npm account to get access to package.

After logging in via npm and added `.env` variables:

```
> yarn install
> yarn dev
# Dev server should now be runnion on localhost:4000
```

## Features
This project was bootstrapped with [`create-ueno-app`](https://github.com/ueno-llc/create-ueno-app) - next.js starter-kit. Most notably we use use:

- [React](https://reactjs.org/docs/getting-started.html) for view
- [Next.js](https://nextjs.org/docs) - the framework brings routing, SSR, codesplitting and more.
- [Apollo client 3.x](https://www.apollographql.com/docs/react/) for graphql
- [Mobx with mobx-react](https://mobx.js.org/) for application state management
- [CSS modules](https://github.com/css-modules/css-modules) for 💅
- [Konfetti](https://nova-hf.github.io/ui/): the UI component library
- [Typescript](https://www.typescriptlang.org/docs/home.html)
- [XState](https://xstate.js.org/docs/)

## Authentication flow
This application implements [OAuth 2.0 authorization code flow](https://docs.identityserver.io/en/latest/topics/grant_types.html#interactive-clients) - authneticating via [`connect.nova.is`](https://github.com/nova-hf/nova-core/apps/auth). This flow is also well described [here](https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow). 

Note: we do not use refresh tokens in the application. We reauthenticate upon expiration.

### Handling expired tokens
We handle token expirations on three places. 

`withApollo.tsx`
This hoc wrapps the application providing it with the apollo client.
For expired tokens this triggers an authehntication when
- A page is server side renders
- when routing client side

`apolloClient.ts`
This graphql client does all client side data fetching.
For expired tokens this triggers an authentication when
- Data is being queried or mutated from the client

`AuthorizationStatus.tsx`
This component follows the validity of the token on a 30s interval and displays a label that the application has lost authentication when relevant.