diff --git a/appointment-booking/app/app.css b/appointment-booking/app/app.css
index 2d79b4913..6fc769ef1 100644
--- a/appointment-booking/app/app.css
+++ b/appointment-booking/app/app.css
@@ -485,21 +485,77 @@ p {
 .sign-in-panel {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: var(--layout-padding-large);
-  margin: var(--layout-margin-large) 0;
+  margin: var(--layout-margin-large) auto;
   max-width: 32rem;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
 }
 
 .sign-in-actions {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--layout-padding-medium);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.sign-in-or {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--layout-padding-medium);
+  align-self: stretch;
+  margin: var(--layout-margin-small) 0;
+  font: var(--typography-bold-small-body);
+  color: var(--typography-color-secondary);
+}
+
+.sign-in-or::before,
+.sign-in-or::after {
+  content: '';
+  flex: 1 1 0;
+  height: 1px;
+  background-color: var(--surface-color-border-default, #afb2b5);
 }
 
 .sign-in-learn-more {
+  display: inline-flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  max-width: 100%;
   font: var(--typography-regular-small-body);
   color: var(--typography-color-link);
+  text-decoration: none;
+}
+
+.sign-in-learn-more span {
+  text-decoration: underline;
+}
+
+.sign-in-external-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  margin-top: 0.15em;
+}
+
+@media (max-width: 40rem) {
+  .layout-main {
+    padding: var(--layout-padding-medium);
+  }
+
+  .sign-in-panel {
+    margin: var(--layout-margin-medium) 0;
+  }
+
+  .booking-nav-row {
+    flex-wrap: wrap;
+  }
 }
 
 .login-next-copy {
diff --git a/appointment-booking/app/auth/keycloak.ts b/appointment-booking/app/auth/keycloak.ts
index d496b317f..83c05506c 100644
--- a/appointment-booking/app/auth/keycloak.ts
+++ b/appointment-booking/app/auth/keycloak.ts
@@ -1,5 +1,5 @@
-// Keycloak login helpers for citizen booking (BC Services Card).
-// Handles: start login, read tokens after redirect, reject non-BCSC, logout.
+// Keycloak login helpers for citizen booking (BCSC or email OTP).
+// Handles: start login, read tokens after redirect, reject disallowed IdPs, logout.
 
 import Keycloak, { type KeycloakLoginOptions } from 'keycloak-js'
 
@@ -25,7 +25,7 @@ type TokenClaims = {
   display_name?: string
 }
 
-// Thrown when Keycloak signed someone in with the wrong identity provider (not BCSC).
+// Thrown when Keycloak signed someone in with a disallowed identity provider.
 export class WrongIdpError extends Error {
   readonly identityProvider: string
 
@@ -74,7 +74,7 @@ function resolveFullName(claims: TokenClaims): string {
   return claims.display_name?.trim() || claims.email?.trim() || 'Appointment User'
 }
 
-// Rebuilds the auth session after a refresh/redirect. Drops non-BCSC sessions.
+// Rebuilds the auth session after a refresh/redirect. Drops disallowed IdP sessions.
 export function readAuthSessionFromStorage(): AuthSession | null {
   const token = getFromSession(SessionKeys.KeyCloakToken)
   if (!token) return null
@@ -123,9 +123,12 @@ export function writeAuthSession(session: AuthSession): void {
   addToSession(SessionKeys.UserAccountType, session.loginSource)
 }
 
-function buildSessionFromKeycloak(kc: Keycloak): AuthSession {
+function buildSessionFromKeycloak(kc: Keycloak, requestedIdpHint: string): AuthSession {
   const token = kc.token || ''
   const claims = token ? decodeTokenClaims(token) : {}
+  const claimedIdp = resolveIdentityProvider(claims)
+  // Prefer the token claim; if the OTP/BCSC IdP mapper has not set it yet, use the IdP we asked for.
+  const loginSource = claimedIdp || requestedIdpHint.trim().toLowerCase()
 
   return {
     token,
@@ -133,7 +136,7 @@ function buildSessionFromKeycloak(kc: Keycloak): AuthSession {
     refreshToken: kc.refreshToken || '',
     userFullName: resolveFullName(claims),
     kcGuid: claims.sub || '',
-    loginSource: resolveIdentityProvider(claims),
+    loginSource,
   }
 }
 
@@ -142,14 +145,14 @@ function appLoginRedirectUri(): string {
   return `${window.location.origin}/login`
 }
 
-// Where Keycloak must send the browser back after BCSC (this finishes the OAuth code exchange).
+// Where Keycloak must send the browser back after IdP login (finishes the OAuth code exchange).
 function appSigninCallbackUri(idpHint: string): string {
   return `${window.location.origin}/signin/${idpHint}`
 }
 
-// First call: redirect to Keycloak/BCSC.
+// First call: redirect to Keycloak with the chosen IdP (bcsc or otp).
 // Second call (after return to /signin/:idpHint): finish login and return the session.
-// Rejects any IdP other than BCSC.
+// Rejects any IdP not in ALLOWED_BOOKING_IDPS.
 export async function initKeycloakLogin(idpHint: string): Promise<AuthSession | null> {
   if (loginInFlight) return loginInFlight
 
@@ -162,13 +165,26 @@ export async function initKeycloakLogin(idpHint: string): Promise<AuthSession |
 
     // OAuth callback must return to this page so keycloak-js can finish the code exchange.
     const callbackUri = appSigninCallbackUri(idpHint)
+    // True when Keycloak has redirected back with an auth code (not a silent SSO reuse).
+    const isOAuthReturn =
+      window.location.search.includes('code=') || window.location.hash.includes('code=')
 
-    // Force the chosen IdP (bcsc) and our callback URL on every Keycloak login redirect.
+    // Force the chosen IdP + a fresh login so an existing Keycloak SSO session cannot win.
     const originalLogin = kc.login.bind(kc)
+    const loginWithRequestedIdp = () =>
+      originalLogin({
+        idpHint,
+        redirectUri: callbackUri,
+        prompt: 'login',
+      })
+
     kc.login = (options?: KeycloakLoginOptions) => {
-      const next = options
-        ? { ...options, idpHint, redirectUri: options.redirectUri || callbackUri }
-        : { idpHint, redirectUri: callbackUri }
+      const next: KeycloakLoginOptions = {
+        ...(options || {}),
+        idpHint,
+        redirectUri: options?.redirectUri || callbackUri,
+        prompt: 'login',
+      }
       return originalLogin(next)
     }
 
@@ -183,9 +199,14 @@ export async function initKeycloakLogin(idpHint: string): Promise<AuthSession |
       return null
     }
 
-    const session = buildSessionFromKeycloak(kc)
+    const session = buildSessionFromKeycloak(kc, idpHint)
     if (!isAllowedBookingIdp(session.loginSource)) {
-      // End the Keycloak SSO session so the next attempt can use BCSC.
+      // If SSO reused a disallowed session (no OAuth code yet), force a fresh IdP login.
+      if (!isOAuthReturn) {
+        await loginWithRequestedIdp()
+        return null
+      }
+
       await kc.logout({ redirectUri: `${appLoginRedirectUri()}?error=idp` })
       throw new WrongIdpError(session.loginSource || 'unknown')
     }
diff --git a/appointment-booking/app/auth/session-keys.ts b/appointment-booking/app/auth/session-keys.ts
index ac46cff31..af9afcad6 100644
--- a/appointment-booking/app/auth/session-keys.ts
+++ b/appointment-booking/app/auth/session-keys.ts
@@ -7,12 +7,14 @@ export const SessionKeys = {
   UserFullName: 'USER_FULL_NAME',
   UserKcId: 'USER_KC_ID',
   UserAccountType: 'USER_ACCOUNT_TYPE',
+  // Set while redirecting to Keycloak; used to break browser-back loops on /signin.
+  KeycloakLoginRedirectPending: 'KEYCLOAK_LOGIN_REDIRECT_PENDING',
   // Booking selections survive the IdP redirect round-trip.
   BookingSelectedService: 'BOOKING_SELECTED_SERVICE',
   BookingSelectedLocation: 'BOOKING_SELECTED_LOCATION',
 } as const
 
-// Cleared on logout and when discarding a bad/non-BCSC auth session.
+// Cleared on logout and when discarding a bad/disallowed auth session.
 export const AUTH_SESSION_KEYS = [
   SessionKeys.KeyCloakToken,
   SessionKeys.KeyCloakRefreshToken,
@@ -22,7 +24,7 @@ export const AUTH_SESSION_KEYS = [
   SessionKeys.UserAccountType,
 ] as const
 
-// Cleared on logout only — kept across BCSC login redirect.
+// Cleared on logout only — kept across IdP login redirect.
 export const BOOKING_SESSION_KEYS = [
   SessionKeys.BookingSelectedService,
   SessionKeys.BookingSelectedLocation,
@@ -30,12 +32,13 @@ export const BOOKING_SESSION_KEYS = [
 
 export const IdpHint = {
   BCSC: 'bcsc',
+  OTP: 'otp',
 } as const
 
-// Citizen booking accepts only BCSC for now (OTP may be added later).
-export const ALLOWED_BOOKING_IDPS = [IdpHint.BCSC] as const
+// Citizen booking accepts BCSC or email OTP.
+export const ALLOWED_BOOKING_IDPS = [IdpHint.BCSC, IdpHint.OTP] as const
 
-// True only for IdPs we allow in this booking app (currently BCSC).
+// True only for IdPs we allow in this booking app (BCSC or OTP).
 export function isAllowedBookingIdp(identityProvider: string | null | undefined): boolean {
   const normalized = identityProvider?.trim().toLowerCase()
   return !!normalized && (ALLOWED_BOOKING_IDPS as readonly string[]).includes(normalized)
diff --git a/appointment-booking/app/routes/login.tsx b/appointment-booking/app/routes/login.tsx
index 6b0d57c97..51df550bb 100644
--- a/appointment-booking/app/routes/login.tsx
+++ b/appointment-booking/app/routes/login.tsx
@@ -1,6 +1,7 @@
-// Booking step 3: ask for BCSC sign-in, or show success after login.
-import { useEffect, useState } from 'react'
+// Booking step 3: BCSC or email OTP sign-in, or show success after login.
 import { Button, Callout, InlineAlert, Text } from '@bcgov/design-system-react-components'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useNavigate, useSearchParams } from 'react-router'
 
 import { useAuth } from '~/auth/auth-context'
@@ -9,7 +10,6 @@ import { useBooking } from '~/booking/booking-context'
 import { BookingBackRow } from '~/components/BookingBackRow'
 import { BookingContinueRow } from '~/components/BookingContinueRow'
 import { BookingStepProgress } from '~/components/BookingStepProgress'
-import { getBCServicesCardUrl } from '~/runtime-config'
 
 const BOOKING_STEP = 3
 const BOOKING_STEP_COUNT = 5
@@ -24,13 +24,8 @@ export default function LoginPage() {
   const { isReady: isAuthReady, isAuthenticated, session } = useAuth()
   const { isReady: isBookingReady, selectedService, selectedLocation } = useBooking()
   const hasSelections = !!selectedService && !!selectedLocation
-  const [bcscUrl, setBcscUrl] = useState('')
   const idpError = searchParams.get('error') === 'idp'
 
-  useEffect(() => {
-    void getBCServicesCardUrl().then(setBcscUrl)
-  }, [])
-
   // Wait until sessionStorage restore finishes so we do not flash the wrong screen.
   if (!isAuthReady || !isBookingReady) {
     return (
@@ -70,31 +65,61 @@ export default function LoginPage() {
 
         {idpError ? (
           <div className="login-alert">
-            <InlineAlert variant="danger" title="BC Services Card required">
-              This booking app only accepts BC Services Card sign-in. Please sign in again with BC
-              Services Card. Use a private browser window if you were signed in to Keycloak as IDIR.
+            <InlineAlert variant="danger" title="Sign-in method not accepted">
+              Please sign in with BC Services Card or email OTP.
             </InlineAlert>
           </div>
         ) : null}
 
         <div className="sign-in-panel">
-          <Text>To continue your appointment booking, please sign in using BC Services Card.</Text>
+          <Text>
+            To continue your appointment booking, please sign in using one of the following methods.
+          </Text>
 
           <div className="sign-in-actions">
-            <Button type="button" onPress={() => navigate(`/signin/${IdpHint.BCSC}`)}>
+            <Button
+              type="button"
+              onPress={() => navigate(`/signin/${IdpHint.OTP}`, { replace: true })}
+            >
+              Login with Email OTP
+            </Button>
+            <a
+              className="sign-in-learn-more"
+              href="https://www2.gov.bc.ca/gov/content/governments/services-for-government/information-management-technology/id-services/one-time-pc"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="sign-in-external-icon"
+                aria-hidden="true"
+              />
+              <span>Learn more about one-time passcode</span>
+            </a>
+
+            <div className="sign-in-or" role="separator" aria-label="or">
+              OR
+            </div>
+
+            <Button
+              type="button"
+              onPress={() => navigate(`/signin/${IdpHint.BCSC}`, { replace: true })}
+            >
               Login with BC Services Card
             </Button>
-
-            {bcscUrl ? (
-              <a
-                className="sign-in-learn-more"
-                href={bcscUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Learn more about BC Services Card app
-              </a>
-            ) : null}
+            <a
+              className="sign-in-learn-more"
+              href="https://www2.gov.bc.ca/gov/content/governments/government-id/bcservicescardapp"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="sign-in-external-icon"
+                aria-hidden="true"
+              />
+              <span>Learn more about BC Services Card</span>
+            </a>
           </div>
         </div>
 
diff --git a/appointment-booking/app/routes/signin.$idpHint.tsx b/appointment-booking/app/routes/signin.$idpHint.tsx
index f8d815a51..7cf1f0735 100644
--- a/appointment-booking/app/routes/signin.$idpHint.tsx
+++ b/appointment-booking/app/routes/signin.$idpHint.tsx
@@ -1,4 +1,4 @@
-// OAuth return page after Keycloak/BCSC.
+// OAuth return page after Keycloak (BCSC or email OTP).
 // Not a user-facing step — it finishes login, then sends the user back to /login.
 import { useEffect, useState } from 'react'
 import { Button, InlineAlert, Text } from '@bcgov/design-system-react-components'
@@ -7,7 +7,8 @@ import { useNavigate, useParams } from 'react-router'
 import { createUser } from '~/api/users'
 import { useAuth } from '~/auth/auth-context'
 import { initKeycloakLogin, WrongIdpError } from '~/auth/keycloak'
-import { isAllowedBookingIdp } from '~/auth/session-keys'
+import { addToSession, getFromSession, removeFromSession } from '~/auth/session'
+import { isAllowedBookingIdp, SessionKeys } from '~/auth/session-keys'
 
 export function meta() {
   return [{ title: 'Signing in' }]
@@ -22,15 +23,43 @@ export default function SigninCallbackPage() {
   useEffect(() => {
     let cancelled = false
 
+    // Browser back can restore this page without re-running login. Send them to /login.
+    function onPageShow(event: PageTransitionEvent) {
+      const hasCode =
+        window.location.search.includes('code=') || window.location.hash.includes('code=')
+      if (event.persisted && !hasCode) {
+        removeFromSession(SessionKeys.KeycloakLoginRedirectPending)
+        window.location.replace('/login')
+      }
+    }
+
+    window.addEventListener('pageshow', onPageShow)
+
     async function run() {
-      // Only BCSC is allowed to start login from this route.
+      // Only allowed booking IdPs (bcsc, otp) may start login from this route.
       if (!idpHint || !isAllowedBookingIdp(idpHint)) {
+        removeFromSession(SessionKeys.KeycloakLoginRedirectPending)
         navigate('/login?error=idp', { replace: true })
         return
       }
 
+      // Browser back from Keycloak lands here without an OAuth code. Without this guard,
+      // login-required redirects to Keycloak again and the page appears to keep refreshing.
+      const hasOAuthCode =
+        window.location.search.includes('code=') || window.location.hash.includes('code=')
+
+      if (!hasOAuthCode) {
+        if (getFromSession(SessionKeys.KeycloakLoginRedirectPending) === idpHint) {
+          removeFromSession(SessionKeys.KeycloakLoginRedirectPending)
+          navigate('/login', { replace: true })
+          return
+        }
+        addToSession(SessionKeys.KeycloakLoginRedirectPending, idpHint)
+      }
+
       try {
         const session = await initKeycloakLogin(idpHint)
+        removeFromSession(SessionKeys.KeycloakLoginRedirectPending)
         if (cancelled) return
 
         if (!session) {
@@ -46,6 +75,7 @@ export default function SigninCallbackPage() {
 
         navigate('/login', { replace: true })
       } catch (err) {
+        removeFromSession(SessionKeys.KeycloakLoginRedirectPending)
         if (cancelled) return
         if (err instanceof WrongIdpError) {
           // Keycloak logout redirects to the login page with the IdP error.
@@ -60,6 +90,7 @@ export default function SigninCallbackPage() {
 
     return () => {
       cancelled = true
+      window.removeEventListener('pageshow', onPageShow)
     }
     // Only re-run when the IdP changes. setSession/navigate are stable enough for this page.
   }, [idpHint]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -70,7 +101,11 @@ export default function SigninCallbackPage() {
         <InlineAlert variant="danger" title="Sign-in failed">
           {error}
         </InlineAlert>
-        <Button type="button" variant="secondary" onPress={() => navigate('/login')}>
+        <Button
+          type="button"
+          variant="secondary"
+          onPress={() => navigate('/login', { replace: true })}
+        >
           Back to login
         </Button>
       </div>
diff --git a/appointment-booking/app/runtime-config.ts b/appointment-booking/app/runtime-config.ts
index 582eb6e14..18558060a 100644
--- a/appointment-booking/app/runtime-config.ts
+++ b/appointment-booking/app/runtime-config.ts
@@ -4,7 +4,6 @@
 type RuntimeConfig = {
   VUE_APP_ROOT_API?: string
   KEYCLOAK_CONFIG_URL?: string
-  BC_SERVICES_CARD_URL?: string
 }
 
 const DEFAULT_API_BASE_URL = '/api/v1'
@@ -56,8 +55,3 @@ export async function getKeycloakConfigUrl(): Promise<string> {
   const config = await loadRuntimeConfig()
   return config.KEYCLOAK_CONFIG_URL?.trim() || DEFAULT_KEYCLOAK_CONFIG_URL
 }
-
-export async function getBCServicesCardUrl(): Promise<string> {
-  const config = await loadRuntimeConfig()
-  return config.BC_SERVICES_CARD_URL?.trim() || ''
-}
diff --git a/appointment-booking/public/config/configuration.json b/appointment-booking/public/config/configuration.json
index 676f42936..b7f09f5f4 100644
--- a/appointment-booking/public/config/configuration.json
+++ b/appointment-booking/public/config/configuration.json
@@ -1,5 +1,4 @@
 {
   "VUE_APP_ROOT_API": "http://localhost:5000/api/v1",
-  "KEYCLOAK_CONFIG_URL": "/config/kc/keycloak-public.json",
-  "BC_SERVICES_CARD_URL": "https://www2.gov.bc.ca/gov/content?id=B2B3A21E797A421A8FD39EEA86E245D6"
+  "KEYCLOAK_CONFIG_URL": "/config/kc/keycloak-public.json"
 }