Authentication in Dexie Cloud

// Initiate OAuth login with Google
await db.cloud.login({ provider: 'google' });

// Login with Microsoft and redirect to a specific page after auth
await db.cloud.login({ 
  provider: 'microsoft',
  redirectPath: '/dashboard'
});

// Force OTP login even if OAuth providers are available
await db.cloud.login({ grant_type: 'otp' });

// Pre-fill email for OTP login
await db.cloud.login({ email: 'user@example.com' });

const { providers, otpEnabled } = await db.cloud.getAuthProviders();

// providers: Array of available OAuth providers
// [{ type: 'google', name: 'google', displayName: 'Google', iconUrl: '...' }, ...]

// otpEnabled: boolean indicating if email OTP is available

function LoginButtons() {
  const [providers, setProviders] = useState([]);
  const [otpEnabled, setOtpEnabled] = useState(true);

  useEffect(() => {
    db.cloud.getAuthProviders().then(({ providers, otpEnabled }) => {
      setProviders(providers);
      setOtpEnabled(otpEnabled);
    });
  }, []);

  return (
    <div>
      {providers.map(provider => (
        <button 
          key={provider.name}
          onClick={() => db.cloud.login({ provider: provider.name })}
        >
          <img src={provider.iconUrl} alt="" />
          Sign in with {provider.displayName}
        </button>
      ))}
      {otpEnabled && (
        <button onClick={() => db.cloud.login({ grant_type: 'otp' })}>
          Sign in with Email
        </button>
      )}
    </div>
  );
}

// Open OAuth login with custom scheme redirect
await db.cloud.login({ 
  provider: 'google',
  redirectPath: 'myapp://'
});

import { App } from '@capacitor/app';
import { handleOAuthCallback } from 'dexie-cloud-addon';

App.addListener('appUrlOpen', async ({ url }) => {
  const callback = handleOAuthCallback(url);
  if (callback) {
    // Complete the OAuth flow
    await db.cloud.login({ 
      oauthCode: callback.code, 
      provider: callback.provider 
    });
  }
});

import { useState } from 'react'
import { useObservable } from 'dexie-react-hooks'
import { db } from './db' // A module that exports the Dexie instance with dexie-cloud-addon attached.
import {
  resolveText,
  DXCInputField,
  DXCUserInteraction,
  DXCOption,
} from 'dexie-cloud-addon'
import styled from 'styled-components'

/** Example login dialog
 *
 * This component showcases how to provide a custom login GUI for login dialog.
 * The principle is simple:
 *   * We use useObservable() to observe `db.cloud.userInteraction` into local variable ui.
 *   * If it is undefined, the system does not need to show any dialog (which is the most common case)
 *   * Else if ui is truthy, it will have the following properties:
 *     * ui.type = type of dialog ('email', 'otp', 'message-alert' or 'logout-confirmation')
 *     * ui.title = the suggested title of the dialog. You can use it or use your own based on ui.type.
 *     * ui.alerts = array of alerts (warnings, errors or information messages to show to user). This array
 *       may be present in any type of dialog.
 *     * ui.fields = input fields to collect from user. This is an object where key is the field name and
 *       value is a field description (DXCInputField)
 *     * ui.options = optional array of selectable options (e.g., OAuth providers). Each option has:
 *       - name: field name for the result
 *       - value: value to return when selected
 *       - displayName: human-readable label
 *       - iconUrl: optional URL to an icon image
 *       - styleHint: optional hint like 'google', 'github', 'microsoft', 'apple', 'otp'
 *     * ui.submitLabel = A suggested text for the submit / OK button
 *     * ui.cancelLabel = undefined if no cancel button is appropriate, or a suggested text for the cancel button.
 *     * ui.onSubmit = callback to call when fields have been collected from user OR when an option is selected.
 *       Accepts an object where key is the field/option name and value is the collected/selected value.
 *     * ui.onCancel = callback to call if user clicks cancel button.
 */
export function MyLoginGUI() {
  const ui = useObservable(db.cloud.userInteraction)
  if (!ui) return null // No user interaction is requested.
  return <MyLoginDialog ui={ui} />
}

export function MyLoginDialog({ ui }: { ui: DXCUserInteraction }) {
  const [params, setParams] = useState<{ [param: string]: string }>({})

  const fieldEntries = Object.entries(ui.fields || {}) as [string, DXCInputField][]
  const hasFields = fieldEntries.length > 0
  const hasOptions = ui.options && ui.options.length > 0

  // Handler for option clicks - calls onSubmit with { [option.name]: option.value }
  const handleOptionClick = (option: DXCOption) => {
    ui.onSubmit({ [option.name]: option.value })
  }

  return (
    <MyDialogStyling>
      <div className="fullscreen darken" />
      <div className="fullscreen dlg-outer">
        <div className="dlg-inner">
          <h2>My Custom Login Prompt</h2>
          <h3>{ui.title}</h3>
          {ui.alerts?.map((alert, i) => (
            <p key={i} className={`alert-${alert.type}`}>
              {resolveText(alert)}
            </p>
          ))}

          {/* Render OAuth provider options if present */}
          {hasOptions && (
            <div className="options-container">
              {ui.options!.map((option) => (
                <button
                  key={`${option.name}-${option.value}`}
                  type="button"
                  className={`option-btn ${option.styleHint ? `option-${option.styleHint}` : ''}`}
                  onClick={() => handleOptionClick(option)}
                >
                  {option.iconUrl && (
                    <img src={option.iconUrl} alt="" className="option-icon" />
                  )}
                  <span>{option.displayName}</span>
                </button>
              ))}
            </div>
          )}

          {/* Show divider if we have both options and fields */}
          {hasOptions && hasFields && (
            <div className="divider">
              <span>or</span>
            </div>
          )}

          {/* Render form fields if present */}
          {hasFields && (
            <form
              onSubmit={(ev) => {
                ev.preventDefault()
                ui.onSubmit(params)
              }}
            >
              {fieldEntries.map(
                ([fieldName, { type, label, placeholder }], idx) => (
                  <label key={idx}>
                    {label ? `${label}: ` : ''}
                    <input
                      type={type}
                      name={fieldName}
                      autoFocus={idx === 0}
                      placeholder={placeholder}
                      value={params[fieldName] || ''}
                      onChange={(ev) => {
                        const value = ev.target.value
                        setParams({
                          ...params,
                          [fieldName]: value,
                        })
                      }}
                    />
                  </label>
                )
              )}
              <div className="dxc-buttons">
                <button type="submit">{ui.submitLabel}</button>
                {ui.cancelLabel && (
                  <button type="button" onClick={ui.onCancel}>
                    {ui.cancelLabel}
                  </button>
                )}
              </div>
            </form>
          )}

          {/* If no fields, just show cancel button */}
          {!hasFields && ui.cancelLabel && (
            <div className="dxc-buttons">
              <button type="button" onClick={ui.onCancel}>
                {ui.cancelLabel}
              </button>
            </div>
          )}
        </div>
      </div>
    </MyDialogStyling>
  )
}

// Dialog styling
const MyDialogStyling = styled.div`
  .fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
  .darken {
    opacity: 0.5;
    background-color: #000;
    z-index: 150;
    backdrop-filter: blur(2px);
    webkit-backdrop-filter: blur(2px);
  }
  .dlg-outer {
    z-index: 150;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .dlg-inner {
    position: relative;
    color: #222;
    background-color: #fff;
    padding: 30px;
    margin-bottom: 2em;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    border: 3px solid #3d3d5d;
    border-radius: 8px;
    box-shadow: 0 0 80px 10px #666;
    width: auto;
    font-family: sans-serif;
  }
  .options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }
  .option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
  }
  .option-btn:hover {
    background-color: #f5f5f5;
  }
  .option-icon {
    width: 20px;
    height: 20px;
  }
  .option-google { border-color: #4285f4; }
  .option-github { border-color: #333; }
  .option-microsoft { border-color: #00a4ef; }
  .option-apple { border-color: #000; }
  .divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
  }
  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
  }
  .divider span {
    padding: 0 12px;
    color: #888;
    font-size: 14px;
  }
  .dlg-input {
    height: 35px;
    width: 17em;
    border-color: #ccf4;
    outline: none;
    font-size: 17pt;
    padding: 8px;
  }
  .alert-error {
    color: red;
    font-weight: bold;
  }
  .alert-warning {
    color: #f80;
    font-weight: bold;
  }
  .alert-info {
    color: black;
  }
`