{"pageProps":{"preview":false,"currentGuide":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]},"guideMeta":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/meta.json","data":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]}},"markdownFile":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/authenticating-with-strapi.md","data":{"frontmatter":{"title":"Authenticating with Strapi"},"excerpt":" Before we can implement an editing experience, we need to set up an authentication experience. To do this, we'll be running through setting up credentials through Strapi. Using Next.js Preview Mode&hellip;","markdownBody":"\nBefore we can implement an editing experience, we need to set up an authentication experience. To do this, we'll be running through setting up credentials through Strapi.\n\n## Using Next.js Preview Mode\n\nIf we're authenticated, we're going to display the pages to the user using [Next.js' Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) and display an editing interface to the user.\n\nFirst, we're going to create two API's: one to set `previewData` when we're authenticated, and one to clear `previewData` when we want to unauthenticate.\n\nCreate a file called `pages/api/preview.js` and give it the following content.\n\n**pages/api/preview.js**\n\n```js\nimport { STRAPI_JWT } from 'react-tinacms-strapi'\nconst previewHandler = (req, res) => {\n  const previewData = {\n    strapi_jwt: req.cookies[STRAPI_JWT],\n  }\n\n  res.setPreviewData(previewData)\n  res.status(200).end()\n}\n\nexport default previewHandler\n```\n\nUpon authenticating, Strapi will pass us a JWT. We store this JWT in `previewData` from where we will pull it anytime we want to call a Strapi API.\n\nCreate another file called `pages/api/reset-preview.ts` and give it the following content.\n\n**pages/api/reset-preview.js**\n\n```js\nexport default (_req, res) => {\n  res.clearPreviewData()\n  res.status(200).end()\n}\n```\n\nWhenever we call this API, we will clear the preview data, and the user will become unauthenticated.\n\n## Modify Strapi's Authenticated Role\n\nIn the previous step you gave **Public** users read-access. Now we want to give edit access to **Authenticated** users. Head back to [Roles & Permissions](http://localhost:1337/admin/plugins/users-permissions/roles) in Strapi and click on the **Authenticated** role.\n\nTo keep things simple, we'll give **Authenticated** users full permissions on **Authors** and **Blog Posts**. Click **Select All** on both of these types and click **Save**.\n\nAdditionally we want these users to be able to upload images to use as a `coverImage`. Click on the **UPLOAD** header on this page and give the role the **upload** permission. Again, click **Save**.\n\nWhile we're here, let's also set up a user with the **Authenticated** role. Head over to [Users->Add New User](http://localhost:1337/admin/plugins/content-manager/collectionType/plugins::users-permissions.user/create?redirectUrl=/plugins/content-manager/collectionType/plugins::users-permissions.user). Give them a **Username**, **Email**, **Password**, and set the **Confirmed** toggle to \"ON\". Give them the **Authenticated** role and then hit the **Save** button.\n\n## Setup a Simple Authentication Interface\n\nHead into `pages/_app.js`. We're going to add a button to our pages that will pop-up a window asking for authentication and then put us into preview mode if everything goes well.\n\nFirst we'll enable or disable Tina based on whether we're in preview mode.\n\n**pages/\\_app.js**\n\n```diff\n  const cms = useMemo(() => new TinaCMS({\n-   toolbar: true,\n-   enabled: true,\n+   toolbar: pageProps.preview,\n+   enabled: pageProps.preview,\n    apis: {\n      strapi: new StrapiClient(process.env.STRAPI_URL),\n    },\n    media: {\n      store: new StrapiMediaStore(process.env.STRAPI_URL),\n    },\n  }), []);\n```\n\nNext, we need to create functions that let our Strapi provider know what we want to do when authenticating/unauthenticating. Add the following two methods to the bottom of `_app.js`.\n\n**pages/\\_app.js**\n\n```js\nconst enterEditMode = () => {\n  return fetch(`/api/preview`).then(() => {\n    window.location.href = window.location.pathname\n  })\n}\n\nconst exitEditMode = () => {\n  return fetch(`/api/reset-preview`).then(() => {\n    window.location.reload()\n  })\n}\n```\n\nPass these two functions into the Strapi provider, and give Strapi knowledge of whether or not we're in preview mode.\n\n**pages/\\_app.js**\n\n```diff\n      <StrapiProvider\n-       onLogin={() => {\n-         /* we'll come back to this */\n-       }}\n-       onLogout={() => {\n-         /* we'll come back to this */\n-       }}}\n+       onLogin={enterEditMode}\n+       onLogout={exitEditMode}\n      >\n        <Component {...pageProps} />\n      </StrapiProvider>\n```\n\nNow the Strapi provider knows to call our two API functions whenever authentication is successful.\n\nFinally, we'll go ahead and actually create a button that will let us enter/exit editing mode. Create a new component:\n\n**pages/\\_app.js**\n\n```js\nimport { useCMS } from '@tinacms/react-core'\n\n// ...\n\nexport const EditButton = () => {\n  const cms = useCMS()\n  return (\n    <button onClick={() => (cms.enabled ? cms.disable() : cms.enable())}>\n      {cms.enabled ? `Stop Editing ` : `Edit this Site `}\n    </button>\n  )\n}\n```\n\nFor simplicity, we'll just have that button be displayed at the top of every page.\n\n**pages/\\_app.js**\n\n```diff\n  return (\n    <TinaProvider cms={cms}>\n      <StrapiProvider\n        onLogin={enterEditMode}\n        onLogout={exitEditMode}\n      >\n+       <EditButton />\n        <Component {...pageProps} />\n      </StrapiProvider>\n    </TinaProvider>\n  );\n```\n\nNow go into our index page and make a quick change to `getStaticProps`. Change the signature so that it accepts a `preview` flag and so that we'll have access to `previewData`.\n\n**pages/index.js**\n\n```diff\n- export async function getStaticProps() {\n+ export async function getStaticProps({ params, preview, previewData }) {\n\n  // ...\n\n+ if (preview) {\n+   return {\n+     props: { allPosts: postResults.data.blogPosts, preview, ...previewData },\n+   };\n+ }\n\n  return {\n-    props: { allPosts: postResults.data.blogPosts },\n+    props: { allPosts: postResults.data.blogPosts, preview: false },\n  };\n```\n\nNow refresh the index page and should see a link that says \"Edit This Site\". Clicking on it will bring up a login screen. Log in with the credentials you created earlier. You should see the Tina toolbar appear and the link should change to \"Stop Editing\".\n\nWe also need our blog post pages to use `preview` and `previewData`. So exactly as we did for the index, go into `[slug].js` and add in the following\n\n**pages/posts/\\[slug.js\\]**\n\n```diff\n- export async function getStaticProps({ params }) {\n+ export async function getStaticProps({ params, preview, previewData }) {\n\n  // ...\n+ if (preview) {\n+   return {\n+     props: {\n+       post: {\n+         ...post,\n+         content\n+       },\n+       preview,\n+       ...previewData,\n+     },\n+   };\n+ }\n\n  return {\n    props: {\n      post: {\n        ...post,\n        content,\n      },\n+     preview: false,\n    },\n  };\n```\n\nWith this taken care of, we can move onto adding an editing experience to our blog posts.\n"}},"allGuides":[{"weight":300,"id":"gatsby","title":"Gatsby","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Gatsby Site","slug":"/guides/gatsby/adding-tina/project-setup"},{"id":"git","title":"Using a Git Backend with Gatsby","slug":"/guides/gatsby/git/installation"}]},{"weight":100,"id":"general","title":"General","collapsible":false,"items":[{"id":"inline-blocks","title":"Working with Inline Blocks","slug":"/guides/general/inline-blocks/overview"}]},{"weight":200,"id":"nextjs","title":"Next.js","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Next.js Site","slug":"/guides/nextjs/adding-tina/overview"},{"id":"git","title":"Using a Git Backend with Next.js","slug":"/guides/nextjs/git/getting-started"},{"id":"github","title":"Using GitHub with Next.js","slug":"/guides/nextjs/github/initial-setup"},{"id":"tina-with-strapi","title":"Using Tina With Strapi","slug":"/guides/nextjs/tina-with-strapi/overview"}]}],"tocItems":"- [Using Next.js Preview Mode](#using-nextjs-preview-mode)\n- [Modify Strapi's Authenticated Role](#modify-strapis-authenticated-role)\n- [Setup a Simple Authentication Interface](#setup-a-simple-authentication-interface)"},"__N_SSG":true}