Как аутентифицировать пользователя в gatsby

Я следовал учебнику это, чтобы реализовать аутентификацию в моем проекте gatsby. Проблема в том, что я сначала настроил проект, и маршрутизация выполняется из папки pages, а затем я реализовал приведенный выше код авторизации, но он по-прежнему использует маршруты из папки страницы, а не из файла app.js. Может кто-нибудь помочь, как я могу направить свои компоненты из папки app.js вместо использования из папки страницы.

Это мой файл gatsby-nodejs

// 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)
  }
}

вот источник/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.info('vvvvvvvvvvvvvvvvvvvvv')

const PrivateRoute = ({ component: Component, location, ...rest }) => {
    console.info('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