moved utils

functions/utils/getId.js

@@ -0,0 +1,3 @@
+module.exports = function getId(urlPath) {
+    return urlPath.match(/([^\/]*)\/*$/)[0]
+}

gatsby-config.js

@@ -5,6 +5,12 @@ module.exports = {
     author: `@gatsbyjs`,
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-netlify-identity`,
+      options: {
+        url: `gracious-johnson-d124e9.netlify.com` // required!
+      }
+    },
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,

package.json

@@ -9,6 +9,7 @@
     "gatsby": "^2.17.6",
     "gatsby-image": "^2.2.30",
     "gatsby-plugin-manifest": "^2.2.25",
+    "gatsby-plugin-netlify-identity": "0.0.3",
     "gatsby-plugin-offline": "^3.0.17",
     "gatsby-plugin-react-helmet": "^3.1.13",
     "gatsby-plugin-sharp": "^2.2.34",

src/pages/login.js

@@ -0,0 +1,29 @@
+// src/components/Layout.js
+import React from "react"
+import IdentityModal, { useIdentityContext } from "react-netlify-identity-widget"
+import "react-netlify-identity-widget/styles.css" // delete if you want to bring your own CSS
+
+const Layout = ({ children }) => {
+    const identity = useIdentityContext()
+    const [dialog, setDialog] = React.useState(false)
+    const name =
+        (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
+
+    console.log(JSON.stringify(identity))
+    const isLoggedIn = identity && identity.isLoggedIn
+    return (
+        <>
+            <nav style={{ background: "green" }}>
+                {" "}
+                Login Status:
+        <button className="btn" onClick={() => setDialog(true)}>
+                    {isLoggedIn ? `Hello ${name}, Log out here!` : "LOG IN"}
+                </button>
+            </nav>
+            <main>{children}</main>
+            <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
+        </>
+    )
+}
+
+export default Layout