Adds authentication

web/package.json

@@ -13,9 +13,11 @@
     ]
   },
   "dependencies": {
+    "@redwoodjs/auth": "^0.19.2",
     "@redwoodjs/forms": "^0.19.2",
     "@redwoodjs/router": "^0.19.2",
     "@redwoodjs/web": "^0.19.2",
+    "netlify-identity-widget": "^1.9.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

web/src/Routes.js

@@ -7,19 +7,21 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Private } from '@redwoodjs/router'
 
 const Routes = () => {
   return (
     <Router>
       <Route path="/contact" page={ContactPage} name="contact" />
       <Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" />
-      <Route path="/admin/posts/new" page={NewPostPage} name="newPost" />
-      <Route path="/admin/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
-      <Route path="/admin/posts/{id:Int}" page={PostPage} name="post" />
-      <Route path="/admin/posts" page={PostsPage} name="posts" />
       <Route path="/about" page={AboutPage} name="about" />
       <Route path="/" page={HomePage} name="home" />
+      <Private unauthenticated="home">
+        <Route path="/admin/posts/new" page={NewPostPage} name="newPost" />
+        <Route path="/admin/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
+        <Route path="/admin/posts/{id:Int}" page={PostPage} name="post" />
+        <Route path="/admin/posts" page={PostsPage} name="posts" />
+      </Private>
       <Route notfound page={NotFoundPage} />
     </Router>
   )

web/src/index.js

@@ -1,3 +1,5 @@
+import { AuthProvider } from '@redwoodjs/auth'
+import netlifyIdentity from 'netlify-identity-widget'
 import ReactDOM from 'react-dom'
 import { RedwoodProvider, FatalErrorBoundary } from '@redwoodjs/web'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -7,11 +9,15 @@ import Routes from 'src/Routes'
 import './scaffold.css'
 import './index.css'
 
+netlifyIdentity.init()
+
 ReactDOM.render(
   <FatalErrorBoundary page={FatalErrorPage}>
-    <RedwoodProvider>
-      <Routes />
-    </RedwoodProvider>
+    <AuthProvider client={netlifyIdentity} type="netlify">
+      <RedwoodProvider>
+        <Routes />
+      </RedwoodProvider>
+    </AuthProvider>
   </FatalErrorBoundary>,
   document.getElementById('redwood-app')
 )

web/src/layouts/BlogLayout/BlogLayout.js

@@ -1,6 +1,9 @@
-import { Link,routes } from '@redwoodjs/router'
+import { Link, routes } from '@redwoodjs/router'
+import { useAuth } from '@redwoodjs/auth'
 
 const BlogLayout = ({ children }) => {
+  const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
+
   return (
     <>
       <header>
@@ -15,6 +18,12 @@ const BlogLayout = ({ children }) => {
             <li>
               <Link to={routes.contact()}>Contact</Link>
             </li>
+            <li>
+              <a href="#" onClick={isAuthenticated ? logOut : logIn}>
+                {isAuthenticated ? 'Log Out' : 'Log In'}
+              </a>
+            </li>
+            {isAuthenticated && <li>{currentUser.email}</li>}
           </ul>
         </nav>
       </header>