Migrating from App Bridge 2 to App Bridge 3

# Remove all legacy App Bridge packages
npm uninstall @shopify/app-bridge @shopify/app-bridge-utils @shopify/app-bridge-react

# Install the v3 package
npm install @shopify/app-bridge-react@latest

# If using the Remix adapter, upgrade it too
npm install @shopify/shopify-app-remix@latest

// BEFORE (App Bridge 2)
import { AppProvider } from '@shopify/app-bridge-react';

export default function Root({ children }: { children: React.ReactNode }) {
  const host = new URLSearchParams(window.location.search).get('host') ?? '';
  return (
    <AppProvider apiKey={process.env.SHOPIFY_API_KEY!} host={host}>
      {children}
    </AppProvider>
  );
}

// AFTER (App Bridge 3)
// No wrapper needed — just render your children directly.
export default function Root({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

// BEFORE (App Bridge 2)
import { Toast } from '@shopify/app-bridge/actions';
import { useAppBridge } from '@shopify/app-bridge-react';

function SaveButton() {
  const app = useAppBridge();
  const handleSave = () => {
    const toast = Toast.create(app, { message: 'Saved!', duration: 3000 });
    toast.dispatch(Toast.Action.SHOW);
  };
  return <button onClick={handleSave}>Save</button>;
}

// AFTER (App Bridge 3)
import { useToast } from '@shopify/app-bridge-react';

function SaveButton() {
  const { show } = useToast();
  const handleSave = () => {
    show('Saved!', { duration: 3000 });
  };
  return <button onClick={handleSave}>Save</button>;
}

// BEFORE (App Bridge 2 — manual token fetch)
import { getSessionToken } from '@shopify/app-bridge/utilities';
import { useAppBridge } from '@shopify/app-bridge-react';

function useAuthenticatedFetch() {
  const app = useAppBridge();
  return async (url: string, options?: RequestInit) => {
    const token = await getSessionToken(app);
    return fetch(url, {
      ...options,
      headers: { ...options?.headers, Authorization: `Bearer ${token}` },
    });
  };
}

// AFTER (App Bridge 3 — automatic via Remix loader)
// In a Remix loader/action, authenticate.admin() handles everything:
export async function loader({ request }: LoaderFunctionArgs) {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
    query getShop {
      shop { name }
    }`
  );
  const data = await response.json();
  return json(data);
}

// BEFORE (App Bridge 2)
import { Redirect } from '@shopify/app-bridge/actions';
import { useAppBridge } from '@shopify/app-bridge-react';

function BackButton() {
  const app = useAppBridge();
  return (
    <button onClick={() => Redirect.create(app).dispatch(Redirect.Action.APP, '/')}>
      Back to dashboard
    </button>
  );
}

// AFTER (App Bridge 3)
import { useNavigate } from '@shopify/app-bridge-react';

function BackButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/')}>Back to dashboard</button>
  );
}

import { SaveBar } from '@shopify/app-bridge-react';
import { useState } from 'react';

export default function ProductForm() {
  const [isDirty, setIsDirty] = useState(false);
  const [title, setTitle] = useState('');

  const handleDiscard = () => {
    setTitle('');
    setIsDirty(false);
  };

  const handleSave = async () => {
    await fetch('/api/save', { method: 'POST', body: JSON.stringify({ title }) });
    setIsDirty(false);
  };

  return (
    <>
      <SaveBar open={isDirty} onSave={handleSave} onDiscard={handleDiscard} />
      <input
        value={title}
        onChange={(e) => { setTitle(e.target.value); setIsDirty(true); }}
      />
    </>
  );
}

import { ResourcePicker } from '@shopify/app-bridge-react';
import { useState } from 'react';

export default function ProductSelector() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pick products</button>
      <ResourcePicker
        resourceType="Product"
        open={open}
        onSelection={({ selection }) => {
          setSelected(selection.map((p) => p.id));
          setOpen(false);
        }}
        onCancel={() => setOpen(false)}
      />
      <ul>{selected.map((id) => <li key={id}>{id}</li>)}</ul>
    </>
  );
}