🔐 Authentication

[floscher]

sequenceDiagram
participant BS as Browser storage
actor User
participant BW as Browser window
participant App as App server
participant OAuth as OAuth server

autonumber

rect rgb(255,240,240)
  note right of BS: Login page of SPA
  User->>BW: Go to app.com/login
  BW->>+App: GET /login
  App->>-BW: HTML login page
  activate BW
  BW->>+BS: Generate random state and save for later
  note over BS: sessionStorage:<br>state,<br>redirectPath
  BW->>+App: POST /api/auth/providers
  App->>-BW: JSON providers list
  BW->>-User: Show Links to OAuth providers
  User->>BW: Click login link
end

rect rgb(240,255,240)
  note right of User: Login page of the OAuth provider
  BW->>+OAuth: GET /login
  OAuth->>-BW: HTML login form
  activate BW
  BW->>User: Show login form
  User->>BW: Enter login credentials
  BW->>+OAuth: POST login credentials
  deactivate BW
  OAuth->>-BW: Redirect to app.com/auth
end
  
rect rgb(240,240,255)
  note right of BS: Get JWT token
  BW->>+App: GET /auth
  App->>-BW: HTML login page
  activate BW
  BW->>BS: Check if state matches
  BS->>BW: On match: continue<br>Else: Show error with link to app.com/login
  deactivate BS
  BW->>User: Show login options screen
  User->>BW: Click login button
  BW->>+App: Request token
  App->>+OAuth: Request token
  OAuth->>-App: JWT token
  alt if no account
    App->>App: Create user account
  end
  App->>-BW: JWT token
  BW->>+BS: Save JWT token to localStorage
  note over BS: localStorage:<br>token
end

rect rgb(255,255,230)
  note right of BS: Make authenticated API request
  BW->>BS: Get JWT token
  BS->>BW: Token
  BW->>+App: GET /api/post/create<br>(JWT token in Authorization header)
  App->>App: Check JWT token and refresh if needed
  alt not authenticated
    App->>BW: HTTP redirect to app.com/login<br>goto ②
  else no permission
    App->>BW: Return error
  else else
    App->>-BW: Return response
  end
end

deactivate BW
deactivate BS

Loading