Preload a CSRF token on the registration page

app/[slug]/page.tsx

@@ -5,10 +5,22 @@
 import LoginForm from '@/app/ui/components/login-form';
 import RegistrationForm from '@/app/ui/components/registration-form';
 import { useParams } from 'next/navigation'
+import { useEffect } from 'react';
+import { retrieveCSRFToken } from '../api/authentication';
+import { getCsrfToken } from '../lib/utils';
 
 export default async function Page() {
   const params = useParams<{ slug: string }>()
+
+  useEffect(() => {
+    if (getCsrfToken() == 'unknown') {
+      retrieveCSRFToken();
+    }
+  }, []);
+
+  if (typeof window !== 'undefined') {
     localStorage.setItem('slug', await params.slug);
+  }
 
   return (
     <main className="flex min-h-screen flex-col p-6">

app/api/authentication.tsx

@@ -43,6 +43,15 @@ function flattenErrors(errors: StructuredErrors): string[] {
   });
 }
 
+// At this moment we're making an initial request to get a valid CSRF token
+export function retrieveCSRFToken() {
+  return fetch(`/api/token`, {
+    headers: {
+      'Accept': 'application/json',
+    }
+  }).then((response) => { return null });
+}
+
 export function register({ slug, email, password, passwordConfirmation, captcha, onRegister, onError }: {
   slug: string,
   email: string,