db.cloud.userInteraction
An observable that emits data for login dialogs. This observable shall be used in combination with setting db.cloud.configure()#customlogingui to true.
For an example on how to consume this observable and provide a custom GUI, see authentication#customizing-login-gui
Type
Observable<DXCUserInteraction>
export type DXCUserInteraction =
| DXCGenericUserInteraction
| DXCEmailPrompt
| DXCOTPPrompt
| DXCMessageAlert
| DXCLogoutConfirmation;
export interface DXCGenericUserInteraction<Type extends string="generic", TFields extends {[name: string]: DXCInputField} = any> {
type: Type;
title: string;
alerts: DXCAlert[];
fields: TFields;
submitLabel: string;
cancelLabel: string | null;
onSubmit: (params: { [P in keyof TFields]: string} ) => void;
onCancel: () => void;
}
/** When the system needs to prompt for an email address for login.
*
*/
export interface DXCEmailPrompt {
type: 'email';
title: string;
alerts: DXCAlert[];
fields: {
email: {
type: 'text';
placeholder: string;
};
};
submitLabel: string;
cancelLabel: string;
onSubmit: (params: { email: string } | { [paramName: string]: string }) => void;
onCancel: () => void;
}
/** When the system needs to prompt for an OTP code.
*
*/
export interface DXCOTPPrompt {
type: 'otp';
title: string;
alerts: DXCAlert[];
fields: {
otp: {
type: 'text';
label: string;
}
};
submitLabel: string;
cancelLabel: string;
onSubmit: (params: { otp: string } | { [paramName: string]: string }) => void;
onCancel: () => void;
}
/** When the system must inform about errors, warnings or information */
export interface DXCMessageAlert {
type: 'message-alert';
title: string;
alerts: DXCAlert[];
fields: {
[name: string]: DXCInputField;
};
submitLabel: string;
cancelLabel?: null;
onSubmit: (params: { [paramName: string]: string }) => void;
onCancel: () => void;
}
/** When the system needs confirmation to logout current user when
* there are unsynced changes that would be lost.
*/
export interface DXCLogoutConfirmation {
type: 'logout-confirmation';
title: string;
alerts: DXCAlert[];
fields: {
[name: string]: DXCInputField;
};
submitLabel: string;
cancelLabel: string;
onSubmit: (params: { [paramName: string]: string }) => void;
onCancel: () => void;
}
export type DXCAlert = DXCErrorAlert | DXCWarningAlert | DXCInfoAlert;
export interface DXCErrorAlert {
type: 'error';
messageCode: 'INVALID_OTP' | 'INVALID_EMAIL' | 'LICENSE_LIMIT_REACHED' | 'GENERIC_ERROR';
message: string;
messageParams: { [paramName: string]: string; };
}
export interface DXCWarningAlert {
type: 'warning';
messageCode: 'GENERIC_WARNING' | 'LOGOUT_CONFIRMATION';
message: string;
messageParams: { [paramName: string]: string; };
}
export interface DXCInfoAlert {
type: 'info';
messageCode: 'GENERIC_INFO' | 'OTP_SENT';
message: string;
messageParams: { [paramName: string]: string; };
}
export type DXCInputField = DXCTextField | DXCPasswordField;
export interface DXCTextField {
type: 'text' | 'email' | 'otp';
label?: string;
placeholder?: string;
}
export interface DXCPasswordField {
type: 'password';
label?: string;
placeholder?: string;
}
Localization
If you need to localize the login dialog, you can ignore the given texts and use custom texts based on:
- type: (‘otp’, ‘email’, ‘message-alert’ or ‘logout-confirmation’)
- alerts[n].type: (‘error’, ‘warning’ or ‘info’)
- alerts[n].messageCode, which can be any of the following values:
- ‘INVALID_OTP’
- ‘INVALID_EMAIL’
- ‘LICENSE_LIMIT_REACHED’
- ‘GENERIC_ERROR’
- ‘GENERIC_WARNING’
- ‘LOGOUT_CONFIRMATION’ - messageParams will contain
{currentUserId, numUnsyncedChanges}
- ‘GENERIC_INFO’
- ‘OTP_SENT’ - messageParams will contain
{ email }
- fields[name].type (‘text’, ‘email’, ‘otp’ or ‘password’)
Dexie Cloud Docs
- Access Control in Dexie Cloud
- Add demo users
- Add public data
- Authentication in Dexie Cloud
- Consistency in Dexie Cloud
- DBPermissionSet
- Dexie Cloud API
- Dexie Cloud CLI
- Dexie Cloud Docs
- Dexie Cloud REST API
- DexieCloudOptions
- Invite
- Limits
- Member
- PersistedSyncState
- Purchase Subscription
- Realm
- Role
- Run Dexie Cloud on Own Servers
- Sharding and Scalability
- SyncState
- UserLogin
- db.cloud.configure()
- db.cloud.currentUser
- db.cloud.currentUserId
- db.cloud.events.syncComplete
- db.cloud.invites
- db.cloud.login()
- db.cloud.logout()
- db.cloud.options
- db.cloud.permissions()
- db.cloud.persistedSyncState
- db.cloud.roles
- db.cloud.schema
- db.cloud.sync()
- db.cloud.syncState
- db.cloud.userInteraction
- db.cloud.usingServiceWorker
- db.cloud.version
- db.cloud.webSocketStatus
- db.members
- db.realms
- db.roles
- dexie-cloud-addon