‘Add Plugins’<\/em> page in WP Admin and search for the Faust.js plugin.<\/p>\n\n\n\nOnce that is installed and activated, when you hover over the settings option in the left-side hamburger menu, it will display a Faust option. Click on that and you will see this page:<\/p>\n\n\n\n
![](\"https:\/\/lh7-us.googleusercontent.com\/uS50EXkewkPXoaMWqB74cymBUi9hyrlrL5Hg-TPwHD-A0ls_W2VwPPa_iXSUZHPRyYL4lAVzpbBBLlu4bWjiHjOPxQZ0Tqb1AAKYtmRmOlzHCkb8uWZsvDeuOmt1mpfG68H2E3CKdWPeuDVR53VXRhQ\")
<\/p>\n\n\n\n
It is on this page that you can grab your secret key and your front-end URL which in a development server case, it’s going to be off port 3000 on local host. The last thing you need to get is your WordPress site URL.<\/p>\n\n\n\n
Now, navigate over to your code editor. In the .env.local<\/code> file that you created when spinning up the boilerplate, you can add those values to their keys like so:<\/p>\n\n\n\n![](\"https:\/\/lh7-us.googleusercontent.com\/-f25-N8RO8FwswUX3odOU5Q_ByvUUrAaUoaVCicRbhdp_DwwsGP3kgG2jsJ_1C8vveoMo-ZtfvQR98QCZy0ELSKkhY4tP8K-QZ0Wr5ldYILiC93e-FU9RC7wV9iNHMf-fYka5C0vcCFtduQnKsKeQoA\")
<\/p>\n\n\n\n
Faust.js API Route Handler<\/h3>\n\n\n\n
Once you have your environment variables set, ensure that you have a directory in the root of the app folder called api<\/code>. In this api<\/code> folder, you should have a nested folder called faust which will contain a file called [route].ts<\/code>. It should look like this:
<\/p>\n\n\n\n![](\"https:\/\/lh7-us.googleusercontent.com\/UWvgM8ZnutJGTi6JqrvgdHm8aBDkoPiB4R65iABIWIEyC2KtbCTdSF95gQLlzKURFD-zj3FkBZgJ4O7mMA851uEGn3FNMOIsowf_moGDKD8hPdHHXHSubQEG-_QW1C_sfsgu_mepuLy00d3lDfzUa58\")
<\/p>\n\n\n\n
What this code executes is the handling of the endpoints for the auth token and login\/logout functionality. <\/p>\n\n\n\n
Authenticated Requests<\/h3>\n\n\n\n
Navigate to the dynamic route segment that is set by the slug as its parameter which is the [slug]\/hasPreviewProps.ts<\/code> file in the root of the app<\/code> folder. You should see this:<\/p>\n\n\nexport<\/span> function<\/span> hasPreviewProps<\/span>(props: any<\/span>) <\/span>{\n<\/span><\/span> return<\/span> props?.searchParams?.preview === 'true'<\/span> && !!props?.searchParams?.p;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe function hasPreviewProps<\/code> checks if the preview mode is activated and if there is a post ID present in the properties passed to it. It returns true<\/code> only if both conditions are met: the preview parameter is set to ‘true’ and a post ID is specified. This is used to determine if a post preview should be displayed. If either condition is not fulfilled, the function returns false<\/code>, indicating that the normal, non-preview content should be rendered. This helps in conditionally showing either the live post or its preview during development.<\/p>\n\n\n\nNow that we have a function to help check if previews are activated and present, let’s look at the page.tsx<\/code> file in the same directory to see how authentication and rendering the preview on the content works.<\/p>\n\n\nimport<\/span> { getAuthClient, getClient } from<\/span> '@faustwp\/experimental-app-router'<\/span>;\n<\/span><\/span>import<\/span> { gql } from<\/span> '@apollo\/client'<\/span>;\n<\/span><\/span>import<\/span> { hasPreviewProps } from<\/span> '.\/hasPreviewProps'<\/span>;\n<\/span><\/span>import<\/span> { PleaseLogin } from<\/span> '@\/components\/please-login'<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> async<\/span> function<\/span> Page<\/span>(props<\/span>) <\/span>{\n<\/span><\/span> const<\/span> isPreview = hasPreviewProps(props);\n<\/span><\/span> const<\/span> id = isPreview ? props.searchParams.p : props.params.slug;\n<\/span><\/span>\n<\/span><\/span> let<\/span> client = isPreview ? await<\/span> getAuthClient() : await<\/span> getClient();\n<\/span><\/span>\n<\/span><\/span> if<\/span> (!client) {\n<\/span><\/span> return<\/span> <PleaseLogin<\/span> \/><\/span><\/span>;\n<\/span><\/span> }\n<\/span><\/span>\n<\/span><\/span> const<\/span> { data } = await<\/span> client.query({\n<\/span><\/span> query<\/span>: gql`<\/span>\n<\/span><\/span> query GetContentNode(<\/span>\n<\/span><\/span> $id: ID!<\/span>\n<\/span><\/span> $idType: ContentNodeIdTypeEnum!<\/span>\n<\/span><\/span> $asPreview: Boolean!<\/span>\n<\/span><\/span> ) {<\/span>\n<\/span><\/span> contentNode(id: $id, idType: $idType, asPreview: $asPreview) {<\/span>\n<\/span><\/span> ... on NodeWithTitle {<\/span>\n<\/span><\/span> title<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span> ... on NodeWithContentEditor {<\/span>\n<\/span><\/span> content<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span> date<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span> `<\/span>,\n<\/span><\/span> variables<\/span>: {\n<\/span><\/span> id,\n<\/span><\/span> idType<\/span>: isPreview ? 'DATABASE_ID'<\/span> : 'URI'<\/span>,\n<\/span><\/span> asPreview<\/span>: isPreview,\n<\/span><\/span> },\n<\/span><\/span> });\n<\/span><\/span>\n<\/span><\/span> return<\/span> (\n<\/span><\/span> <main<\/span>><\/span><\/span>\n<\/span><\/span>