Programmatically create PrivateRoutes on Gatsby

Viewed 214

I need to create a client's only Blog. I followed gatsby docs to create a site with user authentication, but i need to programmatically create PrivateRoutes based on markdown files.

By now i'm using this component to render PrivateRoutes and they work, but how do I create a PrivateRoute for a dynamically created page if a component doesn't exist. Pages are created at build time with gatsby onCreatePage API but it only uses a template component.

  <Layout>
    <Router>
      <PrivateRoute path="/app/profile" component={Profile} />
      <PrivateRoute path="/app/contact" component={ContactPage} />
      <Login path="/app/login" />
    </Router>
  </Layout>
)

Static Pages Routes are created like this:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

And this is what I'm trying to do for blog posts:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/blog/)) {
    page.matchPath = "/blog/*"

    // Update the page.
    createPage(page)
  }
}
0 Answers
Related