Skip to content

Add BC Services Card sign-in to appointment booking - #1093

Merged
veenupunyani merged 4 commits into
developfrom
Sign-in-with-BC-Services-Card
Jul 22, 2026
Merged

Add BC Services Card sign-in to appointment booking#1093
veenupunyani merged 4 commits into
developfrom
Sign-in-with-BC-Services-Card

Conversation

@veenupunyani

@veenupunyani veenupunyani commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator

Summary###

  1. Added BC Services Card (Keycloak) sign-in to appointment-booking as booking step 3.
  2. Wired the flow: /services → /service-locations → /login → /signin/bcsc → /login (signed in).
  3. Restricted sign-in to BCSC only and showed /login?error=idp for other IdPs. This was hint give by Marco in teams SSO channel.
  4. Persisted selected service/location in sessionStorage across the IdP redirect; logout cleared auth and booking.
  5. Updated the user on the server after login, then continued without waiting for that request to finish.
  6. Showed signed-in name + Log out in the header.
  7. Updated local Keycloak for localhost:5173 and BCSC-tagged test users.

Test plan locally

  1. Select service → location → Continue → /login shows BCSC button
  2. Login with local BCSC users → return to /login signed in with selections kept
  3. Header Log out → /services, auth + booking storage cleared
  4. Refresh on /login while signed in: Selections persisted
  5. Hit logout to test logout.

Test on OpenShift

1 - Visit - https://dev-appointments.apps.silver.devops.gov.bc.ca/
2 - Sign in using test username and password given in email.

Add BCSC Keycloak login as booking step
it kept looping after singing in

@chrsamp chrsamp left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks solid @veenupunyani, left some comments in the review. I've also added https://citz-sbc.atlassian.net/browse/DEV-78 to our next sprint to handle refreshing the user's token.

Comment thread appointment-booking/package.json Outdated
"@react-router/serve": "8.0.0",
"geolib": "^3.3.14",
"isbot": "^5.1.36",
"keycloak-js": "^24.0.5",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we using such an old version of this package?

"VUE_APP_ROOT_API": "http://localhost:5000/api/v1"
"VUE_APP_ROOT_API": "http://localhost:5000/api/v1",
"KEYCLOAK_CONFIG_URL": "/config/kc/keycloak-public.json",
"BCServicesCardUrl": "https://www2.gov.bc.ca/gov/content?id=B2B3A21E797A421A8FD39EEA86E245D6"

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code style note: use SCREAMING_SNAKE_CASE like the other env vars already are.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FIXED

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also updated in Openshift config map, tried to match with that earlier which resulted in the lowercase.

Comment thread appointment-booking/app/runtime-config.ts
Comment on lines 5 to 10
import { getBookingLocations, type Location } from '../api/locations'
import type { Service } from '../api/services'
import { useBooking } from '../booking/booking-context'
import { useBooking } from '~/booking/booking-context'
import { BookingBackRow } from '../components/BookingBackRow'
import { BookingContinueRow } from '../components/BookingContinueRow'
import { BookingStepProgress } from '../components/BookingStepProgress'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First thought when reading this: use the ~ alias consistently (across all your imports) or stick with relative paths, I wouldn't just replace one.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FIXED

} as const

// Citizen booking accepts only BCSC for now (OTP may be added later).
export const ALLOWED_BOOKING_IDPS = [IdpHint.BCSC] as const

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fun, smart! 👍 We could enable and disable IdP's without removing them from the app.

Comment thread appointment-booking/app/auth/keycloak.ts

@veenupunyani veenupunyani left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we using such an old version of this package?

Inititally, I matched the existing appointment frontend as it was stable and then forgot to update it. Thanks for catching that.

@sonarqubecloud

Copy link
Copy Markdown

@veenupunyani
veenupunyani requested a review from chrsamp July 21, 2026 17:47

@chrsamp chrsamp left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @veenupunyani, much appreciated!

@veenupunyani
veenupunyani merged commit aa95864 into develop Jul 22, 2026
3 checks passed
@veenupunyani
veenupunyani deleted the Sign-in-with-BC-Services-Card branch July 22, 2026 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants