Frontend Integration

This guide covers how to integrate PocketDNS into your frontend application using various frameworks and approaches.

Basic Integration

The simplest way to integrate PocketDNS is using an iframe with the login URL from the user session API.

<iframe 
  src="{login_url}"
  width="100%"
  height="600px"
  frameborder="0"
  allow="payment"
  title="PocketDNS Domain Interface">
</iframe>

React Components

Basic React Integration

import React, { useState, useEffect } from 'react';

const PocketDNSEmbed = ({ userIdentifier, email }) => {
  const [loginUrl, setLoginUrl] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const createSession = async () => {
      try {
        const response = await fetch('/api/pocketdns/session', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ userIdentifier, email })
        });

        if (!response.ok) {
          throw new Error('Failed to create session');
        }

        const { login_url } = await response.json();
        setLoginUrl(login_url);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    createSession();
  }, [userIdentifier, email]);

  if (loading) return <div>Loading domain interface...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="pocketdns-embed">
      <iframe
        src={loginUrl}
        width="100%"
        height="600px"
        frameBorder="0"
        allow="payment"
        title="Domain Management"
      />
    </div>
  );
};

export default PocketDNSEmbed;

Advanced React Hook

import { useState, useEffect, useCallback } from 'react';

export const usePocketDNS = (userIdentifier, email) => {
  const [session, setSession] = useState(null);
  const [domains, setDomains] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const createSession = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/pocketdns/session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userIdentifier, email })
      });

      const sessionData = await response.json();
      setSession(sessionData);
      return sessionData;
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [userIdentifier, email]);

  const fetchDomains = useCallback(async () => {
    try {
      const response = await fetch(`/api/pocketdns/domains/${userIdentifier}`);
      const { domains } = await response.json();
      setDomains(domains);
      return domains;
    } catch (err) {
      setError(err.message);
    }
  }, [userIdentifier]);

  return {
    session,
    domains,
    loading,
    error,
    createSession,
    fetchDomains
  };
};

Advanced Integration

Event Communication

You can listen to events from the embedded interface:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://embed.pocketdns.com') return;
  
  switch (event.data.type) {
    case 'domain_purchased':
      console.log('Domain purchased:', event.data.domain);
      // Refresh your UI, update user account, etc.
      break;
    case 'session_expired':
      console.log('Session expired, need to refresh');
      // Create new session
      break;
    default:
      break;
  }
});

Styling and Customization

The embedded interface respects your app's theme through CSS custom properties:

:root {
  --pocketdns-primary-color: #3b82f6;
  --pocketdns-secondary-color: #64748b;
  --pocketdns-background: #ffffff;
  --pocketdns-text: #1e293b;
  --pocketdns-border-radius: 8px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --pocketdns-background: #0f172a;
    --pocketdns-text: #f1f5f9;
  }
}

Next.js Integration

For Next.js applications, create an API route to handle session creation:

// pages/api/pocketdns/session.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  const { userIdentifier, email } = req.body;

  try {
    const response = await fetch('https://api.pocketdns.com/api/v1/users', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.POCKETDNS_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ user_identifier: userIdentifier, email })
    });

    if (!response.ok) {
      throw new Error('Failed to create session');
    }

    const sessionData = await response.json();
    res.status(200).json(sessionData);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
}

Vue.js Integration

<template>
  <div class="pocketdns-container">
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <iframe
      v-else
      :src="loginUrl"
      width="100%"
      height="600px"
      frameborder="0"
      allow="payment"
    />
  </div>
</template>

<script>
export default {
  props: ['userIdentifier', 'email'],
  data() {
    return {
      loginUrl: null,
      loading: true,
      error: null
    };
  },
  async mounted() {
    try {
      const response = await fetch('/api/pocketdns/session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userIdentifier: this.userIdentifier,
          email: this.email
        })
      });

      if (!response.ok) throw new Error('Failed to create session');

      const { login_url } = await response.json();
      this.loginUrl = login_url;
    } catch (error) {
      this.error = error.message;
    } finally {
      this.loading = false;
    }
  }
};
</script>

Best Practices

1. Security: Never expose API keys client-side
2. Error Handling: Always handle API failures gracefully
3. Loading States: Provide feedback while creating sessions
4. Session Management: Handle expired sessions appropriately
5. Responsive Design: Ensure the embed works on mobile devices