Make Next.js server actions and components 1st-class Sanctum citizens

.env.example

@@ -1 +1,4 @@
 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
+
+# Nextjs SSR variables
+LARAVEL_CSRF_COOKIE_NAME=XSRF-TOKEN

.gitattributes

@@ -1,4 +1,4 @@
-* text=auto
+* text=auto eol=lf
 
 /.github export-ignore
 .editorconfig export-ignore

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# IDE
+.idea

src/actions/actions.js

@@ -0,0 +1,8 @@
+'use server'
+
+import { serverFetch } from '@/lib/serverFetch'
+
+export const getUserAction = async () => {
+
+    return await serverFetch('/api/user')
+}

src/app/(app)/Navigation.js → src/app/(app)/Navigation.jsx

@@ -1,3 +1,5 @@
+'use client'
+
 import ApplicationLogo from '@/components/ApplicationLogo'
 import Dropdown from '@/components/Dropdown'
 import Link from 'next/link'
@@ -154,4 +156,4 @@ const Navigation = ({ user }) => {
     )
 }
 
-export default Navigation
+export default Navigation

src/app/(app)/UserRefresh.jsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { useAuth } from '@/hooks/auth'
+
+function UserRefresh() {
+
+    useAuth({
+        middleware: 'auth'
+    })
+
+    return <></>
+}
+
+export default UserRefresh

src/app/(app)/layout.js → src/app/(app)/layout.jsx

@@ -1,11 +1,11 @@
-'use client'
-
-import { useAuth } from '@/hooks/auth'
 import Navigation from '@/app/(app)/Navigation'
 import Loading from '@/app/(app)/Loading'
+import { getUserAction } from '@/actions/actions'
+import UserRefresh from '@/app/(app)/UserRefresh'
+
+const AppLayout = async ({ children }) => {
 
-const AppLayout = ({ children }) => {
-    const { user } = useAuth({ middleware: 'auth' })
+    const user = await getUserAction();
 
     if (!user) {
         return <Loading />
@@ -16,6 +16,8 @@ const AppLayout = ({ children }) => {
             <Navigation user={user} />
 
             <main>{children}</main>
+
+            <UserRefresh />
         </div>
     )
 }

src/hooks/auth.js

@@ -1,3 +1,5 @@
+'use client'
+
 import useSWR from 'swr'
 import axios from '@/lib/axios'
 import { useEffect } from 'react'
@@ -103,9 +105,9 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
         if (middleware === 'guest' && redirectIfAuthenticated && user)
             router.push(redirectIfAuthenticated)
 
-        if (middleware === 'auth' && !user?.email_verified_at)
+        if (middleware === 'auth' && user && !user?.email_verified_at)
             router.push('/verify-email')
-        
+
         if (
             window.location.pathname === '/verify-email' &&
             user?.email_verified_at

src/lib/serverFetch.js

@@ -0,0 +1,55 @@
+const DEFAULT_HEADERS = {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+    'X-Requested-With': 'XMLHttpRequest',
+}
+
+/**
+ * Forwards cookies from the client to the server if run on the server, adds base URL, and adds additional headers.
+ */
+export async function serverFetch(route, requestInit = {}) {
+
+    const options = {
+        ...requestInit,
+        credentials: 'include',
+        cache: 'no-cache',
+        headers: {
+            ...DEFAULT_HEADERS,
+            ...(await getHeaders()),
+            ...requestInit.headers,
+        },
+    }
+
+    // Strip leading slash from route.
+    const normalizedRoute = route.startsWith('/') ? route.slice(1) : route
+    const url = new URL(normalizedRoute, process.env.NEXT_PUBLIC_BACKEND_URL)
+
+    const response = await fetch(url, options)
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch ${route}. Status: ${response.status}`)
+    }
+
+    return await response.json()
+}
+
+const getHeaders = async () => {
+    // 💡 If running on server, include the headers of the current request.
+    return typeof window === 'undefined' ? getServerHeaders() : {}
+}
+
+const getServerHeaders = async () => {
+    const { headers, cookies } = await import('next/headers')
+    const headerStore = await headers()
+    const Referer = headerStore.get('host')
+    const cookie = headerStore.get('cookie')
+
+    const cookieStore = await cookies()
+    const csrf = cookieStore.get(process.env.LARAVEL_CSRF_COOKIE_NAME || 'XSRF-TOKEN')?.value
+
+    return {
+        ...(Referer && { Referer }),
+        ...(cookie && { cookie }),
+        ...(csrf && { 'X-XSRF-TOKEN': decodeURIComponent(csrf) }),
+    };
+};