Updated integrity token fetch to be optional

ref https://linear.app/ghost/issue/ONC-535/
- this reverts the reverted integrity token changes
- this makes the integrity token endpoint and use optional

We need to keep the handling for the integrity token otherwise signups are broken with newer versions of Ghost. This change attempts to improve backwards compatibility by making it optional - if the request fails, it should continue the request to `send-magic-link` w/o the needed token.

apps/signup-form/src/Preview.stories.tsx

@@ -45,6 +45,13 @@ const Preview: React.FC<SignupFormOptions & {
                 }
 
                 return;
+            },
+            getIntegrityToken: async () => {
+                await new Promise((resolve) => {
+                    setTimeout(resolve, 500);
+                });
+
+                return 'testtoken';
             }
         },
         t: i18n.t,

apps/signup-form/src/components/pages/FormPage.tsx

@@ -20,9 +20,18 @@ export const FormPage: React.FC = () => {
         setError('');
         setLoading(true);
 
-        try {
-            await api.sendMagicLink({email, labels: options.labels});
+        let integrityToken: string | undefined;
 
+        try {
+            integrityToken = await api.getIntegrityToken();
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            console.warn('Failed to fetch integrity token, Ghost may need to be updated:', (err as Error).message);
+        }
+
+        try {
+            await api.sendMagicLink({email, labels: options.labels, integrityToken});
+            
             if (minimal) {
                 // Don't go to the success page, but show the success state in the form
                 setSuccess(true);

apps/signup-form/src/utils/api.tsx

@@ -12,14 +12,31 @@ export const setupGhostApi = ({siteUrl}: {siteUrl: string}) => {
     }
 
     return {
-        sendMagicLink: async ({email, labels}: {email: string, labels: string[]}) => {
+        getIntegrityToken: async (): Promise<string> => {
+            const url = endpointFor({type: 'members', resource: 'integrity-token'});
+
+            const response = await fetch(url, {
+                headers: {
+                    'app-pragma': 'no-cache',
+                    'x-ghost-version': '5.90'
+                }
+            });
+
+            if (response.status < 200 || response.status >= 300) {
+                throw new Error(response.statusText);
+            }
+
+            return response.text();
+        },
+        sendMagicLink: async ({email, integrityToken, labels}: {email: string, labels: string[], integrityToken?: string}) => {
             const url = endpointFor({type: 'members', resource: 'send-magic-link'});
 
             const payload = JSON.stringify({
                 email,
                 emailType: 'signup',
                 labels,
-                urlHistory: getUrlHistory({siteUrl})
+                urlHistory: getUrlHistory({siteUrl}),
+                ...(integrityToken && {integrityToken})
             });
 
             const response = await fetch(url, {

apps/signup-form/test/utils/e2e.ts

@@ -65,5 +65,9 @@ export async function mockApi({page, status = 200}: {page: any, status?: number}
         await route.abort('addressunreachable');
     });
 
+    await page.route(`${MOCKED_SITE_URL}/members/api/integrity-token/`, async (route) => {
+        await route.fulfill('testtoken');
+    });
+
     return lastApiRequest;
 }