Authentication with gatsby.

[rautNitesh]

I tried to search a lot for authentication with the gatsby but couldn't find any good resources that covers my need.

I need to make an authenticated system with gatsby for which I need to define private routes. I looked into gatsby docs and found a solution , pretty straightforward but the problem is that it requires a page with some prefix (app.js) is used in the docs for demonstration and similarly we need to define any route via 'app/[our-route]' and the logic for authentication is defined there. I tried to search extensively to have multiple protected route in the base form that is without any prefix. Its been a long and I haven't found anything at all.

[JustFly1984]

We had different approach, creating layout component, which based on redux state isLoggedIn renders restricted page, or login form as fallback. SSG always renders fallback.
Working for any kind of page.

[jon-sully]

I was actually just reading up on this last night and I don't have a link handy but you can just setup a new <Router> in your ./src/pages/index.js:

const Index = () => (
  <Layout>
    <Router>
      <PrivateRoute path="/" component={Dashboard} />
    </Router>
  </Layout>
)

Although if you're just using one route then there's no sense in having a <Router> and you can instead just gate your content directly. The following is adapted from gatsby-plugin-netlify-identity-gotrue-demo, the demo site for gatsby-plugin-netlify-identity-gotrue, which is an integration between Gatsby sites and Netlify Identity.

const Index = () => {
  const identity = useIdentityContext()

  return (
    identity.user
      ? <Dashboard />
      : <p>You're not logged in</p>
  )
}

Hope that gives you some ideas :)