Task Group: Setup Authentication Frontend

[TheTechArch]

Description

Altinn Authentication Frontend will use the same pattern as Altinn Access Management Frontend. Meaning

• A SPA (Single Page App) frontend based on React
• A Backend for Frontend based on .Net
• Build and deploy pipelines in Github
• Hosted as an Azure Container App

The following epic describes the different tasks to set up the basic structure for this architecture.

Tasks should be separated into separate issues when started on.

In scope

• Setup Code
• Setup tests
• Setup pipelines for build and deploy
• Setup infrastructure

Out of scope

• Create functionality related to new functionality in Altinn Authentication

Additional Information

We need to think about handling scenarios where the user is not authenticated. This component is where we will add authentication for methods not available in ID-porten. Like Self authenticated user. How should we handle routes where we have some URL that require that the user is authenticated and other routes that should work when user is not authenticated?

Architecture Recommendation

TODO

Recommended Project Setup

Set up a new solution called Altinn.Authentication.UI with the following projects

• Altinn.AuthenticationUI - .Net Core 7 API project
• Altinn.Authentication.UI.Core - Core models and interfaces
• Altinn.Authentication.UI.Integration - Clients to call
• Altinn.Authentication.UI.Mocks - Mock implementation for clients to be used for testing
• Altinn.Authentication.UI.Tests - .Net integration test of BFF

Where relevant, we should reuse integration code and API from Altinn.AccessManagment.UI

• Duplicate Profile API from Altinn Access Management BFF
• Duplicate Authenticaiton API from Altinn Access Management BFF

Database

Security

Infrastructure

### Authentication Frontend
- [ ] #5

### Authentication BFF
- [ ] #8
- [ ] #9

### Azure Infrastructure
- [ ] https://github.com/Altinn/altinn-authentication-frontend/issues/113
- [x] Define infrastructure setup for hosting the BFF with frontend
- [x] Domain certificate for the application
- [x] Create Platform certificate for integration with platofrm components

### CI/CD
- [x] Action for frontend build. See Access Management frontend
- [x] Add first Cypress component tests to CI/
- [ ] https://github.com/Altinn/altinn-authentication-frontend/issues/114
- [ ] https://github.com/Altinn/altinn-authentication-frontend/issues/117
- [ ] https://github.com/Altinn/altinn-authentication-frontend/issues/119
- [x] Add sonar cloud linting
- [ ] https://github.com/Altinn/altinn-authentication-frontend/issues/116
- [ ] https://github.com/Altinn/altinn-authentication-frontend/issues/118
- [x] Setup Docker file

### Test Automation
- [x] Setup basic test to test Hello World View: an initial goal is a Cypress end-to-end test
- [ ] Implement K6 Tests for authentication bff application

[Torgeir333]

Today a pipeline demonstrated several features of the Frontend repo, including:

1) checkout of the entire repo to the Github Runner environment (set to ubuntu-22.04)

2) installing of Frontend dependencies (yarn packages) in a working-directory

3) the Cypress component tests were successfully run (yarn coverage)

4) and the Vite build configuration was tested by the yarn build command (works locally, works in pipeline), producing a javascript bundle along with other assets (see screenshots below): this build is a pre-requisite for the "wrapping" of the React app by the dotnet BFF app etc...

See frontend_build_and_cypress.yaml file for details.

This experimental pipeline is only triggered by a push to the cypress8 branch in order to limit noise.

[Torgeir333]

Summary of Github Runner build process:

[Torgeir333]

Summary of Cypress component tests:

[Torgeir333]

Full Summary of pipeline run: