|
|
|
|
@ -459,6 +459,24 @@ const HEADER_STYLES = `
|
|
|
|
|
min-height: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rspace-auth-modal__divider {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
margin: 1rem 0;
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
color: #64748b;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.05em;
|
|
|
|
|
}
|
|
|
|
|
.rspace-auth-modal__divider::before,
|
|
|
|
|
.rspace-auth-modal__divider::after {
|
|
|
|
|
content: '';
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background: rgba(255,255,255,0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rspace-auth-modal__toggle {
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
@ -515,6 +533,7 @@ interface AuthModalCallbacks {
|
|
|
|
|
|
|
|
|
|
let activeModal: HTMLElement | null = null;
|
|
|
|
|
let headerRenderFn: (() => void) | null = null;
|
|
|
|
|
let conditionalAbort: AbortController | null = null;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Show the EncryptID auth modal for sign-in or registration.
|
|
|
|
|
@ -528,8 +547,73 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
|
|
|
|
|
let mode: AuthMode = 'signin';
|
|
|
|
|
|
|
|
|
|
function render() {
|
|
|
|
|
abortConditional();
|
|
|
|
|
overlay.innerHTML = mode === 'signin' ? renderSignIn() : renderRegister();
|
|
|
|
|
attachModalListeners();
|
|
|
|
|
if (mode === 'signin') startConditional();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function abortConditional() {
|
|
|
|
|
if (conditionalAbort) {
|
|
|
|
|
conditionalAbort.abort();
|
|
|
|
|
conditionalAbort = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Start conditional mediation (passkey autofill) for mobile/desktop parity */
|
|
|
|
|
async function startConditional() {
|
|
|
|
|
// Check if conditional mediation is supported
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
if (!window.PublicKeyCredential?.isConditionalMediationAvailable) return;
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
const available = await PublicKeyCredential.isConditionalMediationAvailable();
|
|
|
|
|
if (!available) return;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const startRes = await fetch(`${ENCRYPTID_URL}/api/auth/start`, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
body: JSON.stringify({}),
|
|
|
|
|
});
|
|
|
|
|
if (!startRes.ok) return;
|
|
|
|
|
const { options: serverOptions } = await startRes.json();
|
|
|
|
|
|
|
|
|
|
conditionalAbort = new AbortController();
|
|
|
|
|
const credential = await navigator.credentials.get({
|
|
|
|
|
// @ts-ignore - conditional mediation
|
|
|
|
|
mediation: 'conditional',
|
|
|
|
|
signal: conditionalAbort.signal,
|
|
|
|
|
publicKey: {
|
|
|
|
|
challenge: new Uint8Array(base64urlToBuffer(serverOptions.challenge)),
|
|
|
|
|
rpId: serverOptions.rpId || 'rspace.online',
|
|
|
|
|
userVerification: 'required',
|
|
|
|
|
timeout: 120000,
|
|
|
|
|
},
|
|
|
|
|
}) as PublicKeyCredential;
|
|
|
|
|
if (!credential) return;
|
|
|
|
|
|
|
|
|
|
// User selected a passkey via autofill — complete auth
|
|
|
|
|
const errorEl = overlay.querySelector('#auth-error') as HTMLElement;
|
|
|
|
|
const btn = overlay.querySelector('[data-action="signin"]') as HTMLButtonElement;
|
|
|
|
|
if (btn) { btn.disabled = true; btn.innerHTML = '<span class="rspace-auth-modal__spinner"></span> Authenticating...'; }
|
|
|
|
|
|
|
|
|
|
const completeRes = await fetch(`${ENCRYPTID_URL}/api/auth/complete`, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
challenge: serverOptions.challenge,
|
|
|
|
|
credential: { credentialId: bufferToBase64url(credential.rawId) },
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
const data = await completeRes.json();
|
|
|
|
|
if (!completeRes.ok || !data.success) throw new Error(data.error || 'Authentication failed');
|
|
|
|
|
|
|
|
|
|
storeSession(data.token, data.username || '', data.did || '');
|
|
|
|
|
closeModal();
|
|
|
|
|
callbacks?.onSuccess?.();
|
|
|
|
|
} catch (err: any) {
|
|
|
|
|
if (err.name === 'AbortError') return; // user switched to register or closed modal
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderSignIn(): string {
|
|
|
|
|
@ -540,6 +624,15 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
|
|
|
|
|
Use your passkey to sign in instantly. No passwords needed —
|
|
|
|
|
just your fingerprint, face, or device PIN.
|
|
|
|
|
</p>
|
|
|
|
|
<input
|
|
|
|
|
class="rspace-auth-modal__input"
|
|
|
|
|
id="auth-signin-username"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Select a saved passkey..."
|
|
|
|
|
autocomplete="username webauthn"
|
|
|
|
|
readonly
|
|
|
|
|
/>
|
|
|
|
|
<div class="rspace-auth-modal__divider">or</div>
|
|
|
|
|
<div class="rspace-auth-modal__actions">
|
|
|
|
|
<button class="rspace-auth-modal__btn rspace-auth-modal__btn--secondary" data-action="cancel">Cancel</button>
|
|
|
|
|
<button class="rspace-auth-modal__btn rspace-auth-modal__btn--primary" data-action="signin">
|
|
|
|
|
@ -585,6 +678,9 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function handleSignIn() {
|
|
|
|
|
// Abort conditional mediation before starting modal flow
|
|
|
|
|
abortConditional();
|
|
|
|
|
|
|
|
|
|
const errorEl = overlay.querySelector('#auth-error') as HTMLElement;
|
|
|
|
|
const btn = overlay.querySelector('[data-action="signin"]') as HTMLButtonElement;
|
|
|
|
|
errorEl.textContent = '';
|
|
|
|
|
@ -768,6 +864,7 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
|
abortConditional();
|
|
|
|
|
activeModal?.remove();
|
|
|
|
|
activeModal = null;
|
|
|
|
|
}
|
|
|
|
|
|