TryMellon

Framework examples

Framework examples

Minimal integration examples for React, Vue, Svelte, and Vanilla JS. In all cases you install the SDK and create a client; the only difference is how you hook it into the framework’s lifecycle and DOM.

Vanilla JS

import { TryMellon } from '@trymellon/js';
const client = TryMellon.create({ appId: 'YOUR_APP_ID' });

document.getElementById('sign-in').addEventListener('click', async () => {
  const result = await client.authenticate();
  if (result.isOk()) {
    const { session_token } = result.value;
    await fetch('/api/auth/set-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ session_token }),
    });
    window.location.href = '/dashboard';
  }
});

React

Create the client once (e.g. in a module or context) and call it from event handlers.

import { TryMellon } from '@trymellon/js';

const client = TryMellon.create({ appId: 'YOUR_APP_ID' });

export function LoginButton() {
  const [loading, setLoading] = useState(false);
  const handleLogin = async () => {
    setLoading(true);
    const result = await client.authenticate();
    setLoading(false);
    if (result.isOk()) {
      await fetch('/api/auth/set-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ session_token: result.value.session_token }),
      });
      window.location.href = '/dashboard';
    }
  };
  return <button onClick={handleLogin} disabled={loading}>{loading ? 'Signing in…' : 'Sign in'}</button>;
}

Vue

Same pattern: create the client once, call from a method.

<script setup>
import { TryMellon } from '@trymellon/js';
import { ref } from 'vue';
const client = TryMellon.create({ appId: 'YOUR_APP_ID' });
const loading = ref(false);
async function login() {
  loading.value = true;
  const result = await client.authenticate();
  loading.value = false;
  if (result.isOk()) {
    await fetch('/api/auth/set-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ session_token: result.value.session_token }),
    });
    window.location.href = '/dashboard';
  }
}
</script>
<template>
  <button @click="login" :disabled="loading">{{ loading ? 'Signing in…' : 'Sign in' }}</button>
</template>

Svelte

Create the client at the top level and call from an async handler.

<script>
  import { TryMellon } from '@trymellon/js';
  const client = TryMellon.create({ appId: 'YOUR_APP_ID' });
  let loading = false;
  async function login() {
    loading = true;
    const result = await client.authenticate();
    loading = false;
    if (result.isOk()) {
      await fetch('/api/auth/set-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ session_token: result.value.session_token }),
      });
      window.location.href = '/dashboard';
    }
  }
</script>
<button on:click={login} disabled={loading}>{loading ? 'Signing in…' : 'Sign in'}</button>

Next steps