Implement Passwordless Login Flow

[NkwaTambe]

Description

User Story: User Login

As a registered user,
I want to log in securely using my email,
So that I can access my account.

Acceptance Criteria

• Given a user is on the login screen,
• When the user enters their registered email address and clicks "Login",
• Then the app initiates the OIDC flow with Keycloak.
• And Keycloak sends a one-time password (OTP) or a magic link to the user's email.
• And the user is prompted to enter the OTP or click the magic link.
• And upon successful authentication, the user is redirected to the app with an access token.
• And the app securely stores the access token.
• And the user is redirected to their dashboard.

Description

This ticket involves implementing the passwordless login flow for the self-service application using Keycloak and OIDC.

Tasks

• Create the login screen with an email input field.
• Initiate the OIDC flow with Keycloak when the user clicks "Login".
• Handle the redirect from Keycloak and securely store the access token.
• Redirect the user to the dashboard upon successful login.
• Handle and display any errors that may occur during the login process.

---

Sequence Diagrams

Login Flow

sequenceDiagram
    participant U as User
    participant A as self-service-app
    participant K as Keycloak
    participant E as Email Service

    U->>A: Enters email and clicks "Login"
    A->>K: Initiates OIDC flow
    K->>E: Sends OTP/magic link
    E->>U: Delivers email
    U->>K: Enters OTP/clicks link
    K-->>A: Redirects with access token
    A->>A: Securely stores token
    A->>U: Redirects to dashboard

Loading