How to authenticate user in gatsby

Question

I have followed this tutorial to implement authentication in my gatsby project. The problem is I have first setup the project and the routing is made from the pages folder and then I have implemented the above auth code but it still taking the routes from the pages folder and not from the app.js file. Could someone please help how can I route my components from the app.js instead of using from pages folder.

This is my gatsby-nodejs file

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
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)
  }
}

here is src/pages.app.js

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"


console.log('vvvvvvvvvvvvvvvvvvvvv')

const PrivateRoute = ({ component: Component, location, ...rest }) => {
    console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
  if (!isLoggedIn() && location.pathname !== `/app/login`) {
    // If the user is not logged in, redirect to the login page.
    navigate(`/app/login`)
    return null
  }

  return <Component {...rest} />
}

const App = () => (
  <Layout>
    <Router>
      <PrivateRoute path="/ddddddddddddddddddd" component={Home} />
      <Login path="/" />
    </Router>
  </Layout>
)

export default App

Can we have a look at your `src/pages/app.js` file? – etarhan Apr 04 '19 at 12:42 — etarhan, Apr 04 '19 at 12:42
@etarhan Thank you I have updated my question – Profer Apr 04 '19 at 12:44 — Profer, Apr 04 '19 at 12:44

etarhan · Accepted Answer · 2020-08-31T08:59:25.913

1

The paths that you have in your App.js should have /app/ prepended in front of them since your PrivateRoute logic uses that to check for a login. Furthermore what your gatsby-node.js file is really saying is that for routes starting with app it should create a new page. Your src/pages/app.js has the task to define how these pages should be created (since they won't be the usual generated static pages by gatsby)

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"


console.log('vvvvvvvvvvvvvvvvvvvvv')

const PrivateRoute = ({ component: Component, location, ...rest }) => {
    console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
  if (!isLoggedIn() && location.pathname !== `/app/login`) {
    // If the user is not logged in, redirect to the login page.
    navigate(`/app/login`)
    return null
  }

  return <Component {...rest} />
}

const App = () => (
  <Layout>
    <Router>
      <PrivateRoute path="/app/home" component={Home} />
      <Login path="/app/login" />
    </Router>
  </Layout>
)

export default App

Read the gatsby client-only routes documentation for reference or have a look at this github issue

edited Aug 31 '20 at 08:59

answered Apr 04 '19 at 13:00

etarhan

4,138
2
15
29

I tried this. When I hit `/app/home` it does not render anything. `Gatsby.js development 404 page` – Profer Apr 04 '19 at 13:05
No it is also not working. Actually only that pages are working which I have defined inside my **pages** folder. It still taking from the pages folder. I need to render them from the above routing – Profer Apr 04 '19 at 13:16
***My guess is that what you have in your pages folder other than app.js, index.js and 404.js is somehow causing problems*** yes I have other files in my pages folder which creates routes. – Profer Apr 04 '19 at 13:36
Thank you very much. I think I am close to the target. I owe you one – Profer Apr 04 '19 at 15:40
Hi just a small thing. My routes are prefixed with **`/app`** I don't want that. I only need `/`. How can I do this? – Profer Apr 05 '19 at 05:17
Hi etarhan Can I use `this.props.location` in `layout` file? If you know the answer I will raise a question – Profer Apr 11 '19 at 11:04
Thanks here it is https://stackoverflow.com/questions/55631403/how-to-get-pathname-in-the-layout-file-in-gatsby – Profer Apr 11 '19 at 11:26

How to authenticate user in gatsby

1 Answers1