BCIERS common dashboard - Auth Session Sharing

Description:

Our Figma design features a BCiers Dashboard - External & Internal which contains, for logged in users, the links to the registration, reporting, and COAM apps.

With our monorepo architecture, the registration, reporting, and COAM apps are separate micro front-ends allowing each app to operate autonomously rather than being part of a single monolithic application. Similarly the BCiers Dashboard could also be a separate micro front-end that manages common components of the other micro front-ends such as a landing page for all unauthenticated users and authentication configurations to manage Keycloak login.

BCiers dashboard ├── registration ├── reporting └── COAM

Background

Sharing JWT session state across microfrontends using Auth.js and Next.js Multi-zones feature.

auth.js v5
Auth.js provides JWT-based user session strategy using JSON Web Tokens (JWT). When a user signs in, a JWT is created in a HttpOnly cookie. Making the cookie HttpOnly prevents JavaScript from accessing it client-side (via document.cookie, for example), which makes it harder for attackers to steal the value. In addition, the JWT is encrypted with a secret key only known to the server. So, even if an attacker were to steal the JWT from the cookie, they could not decrypt it. Combined with a short expiration time, this makes JWTs a secure way to create sessions. When a user signs out, Auth.js deletes the JWT from the cookies, destroying the session. This JWT session strategy allows logging in once, for the time the JWT is valid, so users do not have to log in every single time they visit the site.

Next.js multi zones A zone refers to a single Next.js app running on a server. Multiple Next.js apps can be combined together using the multi-zones feature so to appear as a unified application. For example, let’s say we have a Next.js application that consists of three different micro-frontends: a home app, a registration app, and a reporting app. You could define each of the separate micro-frontend app as a separate “zone”, and then, through configurations of .env, next.config.js, package.json, the user can navigate the apps as if it was a single, monolithic application allowing sharing of the authentication session between apps deployed on separate subdomains.

Development Checklist

Auth 5

[x] run cd bciers && yarn add next@latest
[x] run cd bciers && yarn add next-auth@beta

Shared components

[x] run cd bciers && yarn nx g @nx/next:lib middlewares --directory=libs/shared/middlewares
- [x] add middleware factory modules
[x] run cd bciers && yarn nx g @nx/next:lib actions --directory=libs/shared/actions
- [x] add server action exports getToken etc.
- [x] run cd bciers && yarn nx g @nx/next:lib types --directory=libs/shared/types
- [x] add Index.ts\ContentItem
- [x] add bciers/libs/shared/components/src/lib/layout/Footer.tsx
- [x] add bciers/libs/shared/components/src/lib/layout/Header.tsx
- [x] add bciers/libs/shared/components/src/lib/navigation/Bread.tsx
- [x] add bciers/libs/shared/components/src/lib/navigation/Tiles.tsx
- [x] add bciers/libs/shared/data/src/report_a_problem.json

Configurations

[x] configure bciers/tsconfig.base.json

"paths": {    
  "@/dashboard/*": ["apps/dashboard/src/*"],
  "@bciers/actions/server": ["libs/shared/actions/src/server.ts"],
  "@bciers/middlewares/server": ["libs/shared/middlewares/src/server.ts"],

[x] configure bciers/package.json\scripts\dev

"scripts": {
"dev-dash": "nx dev dashboard -p 3000",
"dev-reg": "nx dev registration -p 4000",
"dev-report": "nx dev reporting  -p 5000",
},

[x] configure bciers/.env

# MULTI ZONES
HOST_REGISTRATION="http://localhost:4000"
HOST_REPORTING="http://localhost:5000"

dashboard app

[x] run cd bciers && yarn nx g @nx/next:app dashboard --directory=apps/dashboard
[x] create bciers/apps/dashboard/src/app/auth/ folder
- [x] add /error/page.tsx
[x] create bciers/apps/dashboard/src/auth/ folder
- [x] create authconfig.ts
- [x] create index.ts
  - [x] create bciers/apps/dashboard/src/app/components/auth/ folder
- [x] create Profile.tsx
- [x] create SessionProvider.tsx
  - [x] modify bciers/apps/dashboard/src/app/layout.tsx
- [x] import bciers/libs/shared/components/src/lib/layout/Header.tsx
- [x] import bciers/libs/shared/components/src/lib/layout/Footer.tsx
- [x] import bciers/apps/dashboard/src/app/components/auth/SessionProvider.tsx
- [x] wrap children in <SessionProvider>
  - [x] create dashboard page bciers/apps/dashboard/src/app/onboarding/page.tsx
  - [x] create onboarding page bciers/apps/dashboard/src/app/dashboard/page.tsx
- [x] import bciers/libs/shared/components/src/lib/navigation/Tiles.tsx
  - [x] add bciers/apps/dashboard/src/middlewares folder
- [x] add withAuthorizationDashboard.tsx
[x] add middleware.tsx

[x] configure bciers/apps/dashboard/next.config.js with rewrites


const { HOST_REGISTRATION, HOST_REPORTING } = process.env;
/**

@type {import('@nx/next/plugins/with-nx').WithNxOptions} */ const nextConfig = { async rewrites() { return [ { source: '/:path', destination: /:path*, }, { source: '/registration', destination: ${HOST_REGISTRATION}/registration, }, { source: '/registration/:path', destination: `${HOST_REGISTRATION}/registration/:path, }, { source: '/reporting', destination:${HOST_REPORTING}/reporting, }, { source: '/reporting/:path*', destination:${HOST_REPORTING}/reporting/:path*`, }, ]; },

**registration app**

- [x] modify `bciers/apps/registration/app/layout.tsx` 
  - [x]  import `bciers/apps/dashboard/src/app/components/auth/SessionProvider.tsx`
  - [x] wrap children in `<SessionProvider>`
- [x] add `bciers/apps/registration/middlewares` folder
  - [x] add `bciers/apps/registration/middlewares/withAuthorizationRegistration.tsx`
- [x] add `bciers/apps/registration/middleware.tsx`
- [x]  configure `bciers/apps/registration/next.config.js`

const nextConfig = { ...nextConfigBase, // To deploy a Next.js application under a sub-path of a domain you can use the basePath config option basePath: '/registration',

**reporting app**

- [x] modify `bciers/apps/reporting/src/app/layout.tsx` 
  - [x]  import `bciers/apps/dashboard/src/app/components/auth/SessionProvider.tsx`
  - [x] wrap children in `<SessionProvider>`
- [x] add `bciers/apps/reporting/src/middlewares` folder
  - [x] add `bciers/apps/reporting/src/middlewares/withAuthorizationReporting.tsx`
- [x] add `bciers/apps/reporting/src/middleware.tsx`
- [x]  configure `bciers/apps/reporting/next.config.js`

const nextConfig = { ...nextConfigBase, // To deploy a Next.js application under a sub-path of a domain you can use the basePath config option basePath: '/reporting',

Acceptance Criteria:

Given When Then

Development Checklist:

[ ] Checklist item
[ ] Checklist item
[ ] Checklist item
[ ] Meets the DOD

Definition of Ready (Note: If any of these points are not applicable, mark N/A)

[ ] User story is included
[ ] User role and type are identified
[ ] Acceptance criteria are included
[ ] Wireframes are included (if required)
[ ] Design / Solution is accepted by Product Owner
[ ] Dependencies are identified (technical, business, regulatory/policy)
[ ] Story has been estimated (under 13 pts)

·Definition of Done (Note: If any of these points are not applicable, mark N/A)

[ ] Acceptance criteria are tested by the CI pipeline
[ ] UI meets accessibility requirements
[ ] Configuration changes are documented, documentation and designs are updated
[ ] Passes code peer-review
[ ] Passes QA of Acceptance Criteria with verification in Dev and Test
[ ] Ticket is ready to be merged to main branch
[ ] Can be demoed in Sprint Review
[ ] Bugs or future work cards are identified and created
[ ] Reviewed and approved by Product Owner

Notes:

Dependencies

Blocked by
Blocking

bcgov / cas-obps