feat(example): add CRUD example with next-connect and passport

examples/with-next-connect/README.md

@@ -0,0 +1,44 @@
+# User CRUD using next-connect and Passport
+
+This example creates a basic [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) app using [next-connect](https://github.com/hoangvvo/next-connect). It features cookie based authentication using [Passport.js](http://www.passportjs.org/).
+
+The example shows how to do a login and logout. It also allows authenticated user to create, edit, and remove posts. It utilizes [SWR](https://swr.now.sh/).
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-next-connect)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-next-connect with-next-connect-app
+# or
+yarn create next-app --example with-next-connect with-next-connect-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-connect
+cd with-next-connect
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-next-connect/assets/style.css

@@ -0,0 +1,79 @@
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none !important;
+  cursor: pointer;
+  color: #0070f3;
+}
+
+a:hover {
+  color: #0366d6;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: #111;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+}
+
+main {
+  padding: 1rem;
+  max-width: 1040px;
+  margin: 0 auto;
+}
+
+label {
+  display: flex;
+  margin-bottom: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+form {
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+input,
+textarea {
+  font-family: monospace;
+  flex: 1 1 0%;
+  margin-left: 0.5rem;
+  box-shadow: none;
+  width: 100%;
+  color: #000;
+  background-color: transparent;
+  border: 1px solid #d8d8d8;
+  border-radius: 5px;
+  outline: 0px;
+  padding: 10px 25px;
+}
+
+button {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #fff;
+  border-radius: 5px;
+  border: none;
+  background-color: #000;
+  cursor: pointer;
+  transition: all 0.2s ease 0s;
+  padding: 10px 25px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
+}
+
+button:hover,
+button:active {
+  transform: translate3d(0px, -1px, 0px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+}

examples/with-next-connect/components/Layout.jsx

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import { useUser } from '../lib/hooks'
+
+function Navbar() {
+  const [user, { mutate }] = useUser()
+  async function handleLogout() {
+    await fetch('/api/logout')
+    mutate(null)
+  }
+
+  return (
+    <>
+      <style jsx>{`
+        nav {
+          max-width: 1040px;
+          margin: auto;
+          padding: 1rem 2rem;
+          border-bottom: 1px solid #d8d8d8;
+        }
+        nav div {
+          float: right;
+        }
+        nav div a {
+          font-size: 0.9rem;
+          margin-left: 1rem;
+        }
+        nav h1 {
+          font-size: 1rem;
+          color: #444;
+          margin: 0;
+          font-weight: 700;
+          float: left;
+        }
+        nav:after {
+          content: '';
+          clear: both;
+          display: table;
+        }
+      `}</style>
+      <nav>
+        <Link href="/">
+          <a>Next.js CRUD</a>
+        </Link>
+        <div>
+          {!user ? (
+            <Link href="/login">
+              <a>Sign in</a>
+            </Link>
+          ) : (
+            <a role="button" onClick={handleLogout}>
+              Logout
+            </a>
+          )}
+        </div>
+      </nav>
+    </>
+  )
+}
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Navbar />
+      <main>{children}</main>
+    </>
+  )
+}

examples/with-next-connect/lib/hooks.jsx

@@ -0,0 +1,15 @@
+import useSWR from 'swr'
+
+const fetcher = url => fetch(url).then(r => r.json())
+
+export function usePost() {
+  const { data, mutate } = useSWR('/api/posts', fetcher)
+  const posts = data?.posts
+  return [posts, { mutate }]
+}
+
+export function useUser() {
+  const { data, mutate } = useSWR('/api/user', fetcher)
+  const user = data?.user
+  return [user, { mutate }]
+}

examples/with-next-connect/lib/passport.js

@@ -0,0 +1,32 @@
+import passport from 'passport'
+import LocalStrategy from 'passport-local'
+
+passport.serializeUser(function(user, done) {
+  // In practice, we do not serialize the whole user object but just the id
+  // done(null, user.id)
+  done(null, user)
+})
+
+passport.deserializeUser(function(id, done) {
+  // In practice, id will just be an id. In this case, it is the whole user object as shown in passport.serializeUser
+  // It is to used to query the database
+  // db.findUserById(id).then((user) => {
+  //  done(null, user);
+  // });
+  done(null, id)
+})
+
+passport.use(
+  new LocalStrategy((username, password, done) => {
+    // Here you should lookup for the user in your DB and compare the password
+    if (password === 'hackme') {
+      // return the user if the password is correct
+      done(null, { username })
+    } else {
+      // return null if the password is incorrect
+      done(null, null)
+    }
+  })
+)
+
+export default passport

examples/with-next-connect/middleware/auth.js

@@ -0,0 +1,15 @@
+import cookieSession from 'cookie-session'
+import nextConnect from 'next-connect'
+import passport from '../lib/passport'
+
+const auth = nextConnect()
+  .use(
+    cookieSession({
+      name: 'session',
+      keys: ['hackme'],
+    })
+  )
+  .use(passport.initialize())
+  .use(passport.session())
+
+export default auth

examples/with-next-connect/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-next-connect",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "cookie-session": "1.4.0",
+    "nanoid": "2.1.11",
+    "next": "9.3.1",
+    "next-connect": "0.6.1",
+    "passport": "0.4.1",
+    "passport-local": "1.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "swr": "0.1.18"
+  }
+}

examples/with-next-connect/pages/_app.jsx

@@ -0,0 +1,10 @@
+import Layout from '../components/Layout'
+import '../assets/style.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}

examples/with-next-connect/pages/api/login.js

@@ -0,0 +1,15 @@
+import nextConnect from 'next-connect'
+import auth from '../../middleware/auth'
+import passport from '../../lib/passport'
+
+const handler = nextConnect()
+
+handler.use(auth).post(passport.authenticate('local'), (req, res) => {
+  if (req.user) {
+    // For demo purpose only. See pages/api/posts/
+    req.session.posts = []
+  }
+  res.json({ user: req.user })
+})
+
+export default handler

examples/with-next-connect/pages/api/logout.js

@@ -0,0 +1,11 @@
+import nextConnect from 'next-connect'
+import auth from '../../middleware/auth'
+
+const handler = nextConnect()
+
+handler.use(auth).get((req, res) => {
+  req.logOut()
+  res.status(204).end()
+})
+
+export default handler

examples/with-next-connect/pages/api/posts/[id].js

@@ -0,0 +1,35 @@
+import nextConnect from 'next-connect'
+import auth from '../../../middleware/auth'
+
+const handler = nextConnect()
+
+handler
+  .use(auth)
+  .put((req, res) => {
+    if (!req.user) {
+      res.status(401).send('unauthenticated')
+      return
+    }
+    const { id } = req.query
+    const { content } = req.body
+    // Here you will edit the post in the database
+    // db.updatePostByIdAndUserId(id, req.user.id, content);
+    // We will use req.session for demo purpose
+    const editingPost = req.session.posts.find(post => post.id === id)
+    editingPost.content = content
+    res.json({ posts: req.session.posts })
+  })
+  .delete((req, res) => {
+    if (!req.user) {
+      res.status(401).send('unauthenticated')
+      return
+    }
+    const { id } = req.query
+    // Here you will edit the post in the database
+    // db.deletePostByIdAndUserId(id, req.user.id, content);
+    // We will use req.session for demo purpose
+    req.session.posts = req.session.posts.filter(post => post.id !== id)
+    res.json({ posts: req.session.posts })
+  })
+
+export default handler

examples/with-next-connect/pages/api/posts/index.js

@@ -0,0 +1,33 @@
+import nextConnect from 'next-connect'
+import auth from '../../../middleware/auth'
+import nanoid from 'nanoid'
+
+const handler = nextConnect()
+
+handler
+  .use(auth)
+  .get((req, res) => {
+    if (!req.user) res.json({ posts: [] })
+    // Here you will read all posts to the database
+    // db.findPostsByUserId(req.user.id, post)
+    // We will use req.session for demo purpose
+    res.json({ posts: req.session.posts })
+  })
+  .post((req, res) => {
+    const { content } = req.body
+    if (!req.user) {
+      res.status(401).send('unauthenticated')
+      return
+    }
+    const post = {
+      id: nanoid(),
+      content,
+    }
+    // Here you will add the posts to the database
+    // db.createPost(req.user.id, post)
+    // We will use req.session for demo purpose
+    req.session.posts = req.session.posts.concat([post])
+    res.json({ posts: req.session.posts })
+  })
+
+export default handler

examples/with-next-connect/pages/api/user.js

@@ -0,0 +1,9 @@
+import nextConnect from 'next-connect'
+import auth from '../../middleware/auth'
+
+const handler = nextConnect()
+handler.use(auth).get((req, res) => {
+  res.json({ user: req.user })
+})
+
+export default handler