{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Purnima","description":"The latest articles on DEV Community by Purnima (@dhammapurnima).","link":"https:\/\/dev.to\/dhammapurnima","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F108451%2F42216a49-5c22-4b00-b094-a4f5041af393.jpeg","title":"DEV Community: Purnima","link":"https:\/\/dev.to\/dhammapurnima"},"language":"en","item":{"title":"Gatsby Private Route not working as intended","pubDate":"Thu, 10 Jun 2021 16:02:18 +0000","link":"https:\/\/dev.to\/dhammapurnima\/gatsby-private-route-not-working-as-intended-2cd3","guid":"https:\/\/dev.to\/dhammapurnima\/gatsby-private-route-not-working-as-intended-2cd3","description":"<p>Hi everyone,<\/p>\n\n<p>I'm trying to implement a blog with gated content using Gatsby as the front-end and Strapi as the CMS for authentication. Have been following the instructions from the official Gatsby docs on <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/routing\/client-only-routes-and-user-authentication\">client-only routes and user authentication<\/a>.<\/p>\n\n<p>I want to make the following URLs private:<\/p>\n\n<ul>\n<li>\n<code>\/app\/articles<\/code> : This is the articles list page<\/li>\n<li>\n<code>app\/articles\/:slug<\/code>: URL for individual article page<\/li>\n<\/ul>\n\n<p>If an unauthenticated user visits the above 2 URLs, they should be redirected to <code>\/app\/login<\/code> page.<\/p>\n\n<p>The issue I'm facing here is, the Private route seems to work <strong>only<\/strong> for <code>\/app\/articles<\/code> (the unauthenticated user gets redirected to <code>\/app\/login<\/code>), but not for <code>app\/articles\/:slug<\/code> - the page displays the complete article even when the user is unauthenticated.<\/p>\n\n<p>All the pages under both the URLs are prebuilt when I run the gatsby-server so that I can take advantage of static-site performance. I want to just prevent a user from seeing the content if they aren't logged in.<\/p>\n\n<p>Can you please help me understand if I'm doing something wrong? Here is my <a href=\"https:\/\/github.com\/purnimagupta\/Gatbsy-Authentication-With-Strapi\">code<\/a> to get the complete picture.<\/p>\n\n<p><strong>File: <code>\/src\/pages\/app.js<\/code><\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const Index = ({location, history}) =&gt; {\n    return(\n        &lt;Layout&gt; \n            &lt;Logout\/&gt;\n            &lt;Router&gt;\n                &lt;PrivateRoute path=\"\/app\/articles\/:slug\" component={Article} \/&gt;\n                &lt;PrivateRoute exact path=\"\/app\/articles\" component={Home}\/&gt;\n                &lt;Login path=\"\/app\/login\" location={location} history={history}\/&gt;\n                &lt;Signup path=\"\/app\/signup\" \/&gt;\n            &lt;\/Router&gt;\n        &lt;\/Layout&gt;\n    )\n}\nexport default Index;\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Individual Article pages is being generated using gatsby <code>createPages<\/code>  API inside <code>gatsby-node.js<\/code>. And the template resides inside <code>\/src\/templates\/article.js<\/code><\/p>\n\n<p><strong>File: <code>gatsby-node.js<\/code><\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>exports.onCreatePage = async ({ page, actions }) =&gt; {\n    const { createPage } = actions\n    if (page.path.match(\/^\\\/app\/)) {\n        console.log(\"matched app\", page.path.match(\/^\\\/app\/))\n        page.matchPath = \"\/app\/*\"\n        \/\/ Update the page.\n        createPage(page)\n    }\n}\n\nexports.createPages = async function ({ actions, graphql }) {\n    const { data } = await graphql(`\n        query {\n            allStrapiArticle {\n                edges {\n                    node {\n                        slug\n                    }\n                }\n            }\n        }      \n    `)\n\n    data.allStrapiArticle.edges.forEach(article =&gt; {\n        const slug = article.node.slug;\n        console.log(\"node.slug\", article.node.slug);\n        actions.createPage({\n            path: `\/app\/articles\/${slug}`,\n            component: require.resolve(`.\/src\/templates\/article.js`),\n            context: { slug: slug },\n        })\n    })\n\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Thank you!<\/p>\n\n","category":["help","gatsbyprivateroute"]}}}