Create client side locally

Author: Maricris Bonzo

.env.local.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=
+MAGIC_SECRET_KEY=
+TOKEN_SECRET="this-is-a-secret-value-with-at-least-32-characters"

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -0,0 +1,69 @@
+# Magic Example
+
+This example shows how to use [Magic](https://magic.link) with Next.js. The example features cookie-based, passwordless authentication with email-based magic links.
+
+The example shows how to do a login and logout; and to get the user info using a hook with [SWR](https://swr.now.sh).
+
+A DB is not included. But you can add any DB you like!.
+
+The login cookie is `httpOnly`, meaning it can only be accessed by the API, and it's encrypted using [@hapi/iron](https://hapi.dev/family/iron) for more security.
+
+## Deploy your own
+
+Once you have access to [the environment variables you'll need](#configuration), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-magic&env=NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY,MAGIC_SECRET_KEY,TOKEN_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Magic&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-magic%23configuration)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/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-magic with-magic-app
+# or
+yarn create next-app --example with-magic with-magic-app
+```
+
+## Configuration
+
+Login to the [Magic Dashboard](https://dashboard.magic.link/) and get the keys of your application
+
+![Magic Dashboard](https://gblobscdn.gitbook.com/assets%2F-M1XNjqusnKyXZc7t7qQ%2F-M3HsSftOAghkNs-ttU3%2F-M3HsllfdwdDmeFXBK3U%2Fdashboard-pk.png?alt=media&token=4d6e7543-ae20-4355-951c-c6421b8f1b5f)
+
+Next, copy the `.env.local.example` file in this directory to .env.local (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Then set each variable on `.env.local`:
+
+- `NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY` should look like `pk_test_abc` or `pk_live_ABC`
+- `MAGIC_SECRET_KEY` should look like `sk_test_ABC` or `sk_live_ABC`
+- `TOKEN_SECRET` should be a string with at least 32 characters
+
+Now, run Next.js in development mode
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+## Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+#### Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-magic&env=NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY,MAGIC_SECRET_KEY,TOKEN_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Magic&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-magic%23configuration)

components/form.js

@@ -0,0 +1,56 @@
+const Form = ({ errorMessage, onSubmit }) => (
+  <form onSubmit={onSubmit}>
+    <label>
+      <span>Email</span>
+      <input type="email" name="email" required />
+    </label>
+
+    <div className="submit">
+      <button type="submit">Sign Up / Login</button>
+    </div>
+
+    {errorMessage && <p className="error">{errorMessage}</p>}
+
+    <style jsx>{`
+      form,
+      label {
+        display: flex;
+        flex-flow: column;
+      }
+      label > span {
+        font-weight: 600;
+      }
+      input {
+        padding: 8px;
+        margin: 0.3rem 0 1rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .submit {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .submit > a {
+        text-decoration: none;
+      }
+      .submit > button {
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .submit > button:hover {
+        border-color: #888;
+      }
+      .error {
+        color: brown;
+        margin: 1rem 0 0;
+      }
+    `}</style>
+  </form>
+)
+
+export default Form

components/header.js

@@ -0,0 +1,62 @@
+import Link from 'next/link'
+import { useUser } from '../lib/hooks'
+
+const Header = () => {
+  const user = useUser()
+
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          {user ? (
+            <>
+              <li>
+                <a href="/api/logout">Logout</a>
+              </li>
+            </>
+          ) : (
+            <li>
+              <Link href="/login">
+                <a>Login</a>
+              </Link>
+            </li>
+          )}
+        </ul>
+      </nav>
+      <style jsx>{`
+        nav {
+          max-width: 42rem;
+          margin: 0 auto;
+          padding: 0.2rem 1.25rem;
+        }
+        ul {
+          display: flex;
+          list-style: none;
+          margin-left: 0;
+          padding-left: 0;
+        }
+        li {
+          margin-right: 1rem;
+        }
+        li:first-child {
+          margin-left: auto;
+        }
+        a {
+          color: #fff;
+          text-decoration: none;
+        }
+        header {
+          color: #fff;
+          background-color: #333;
+        }
+      `}</style>
+    </header>
+  )
+}
+
+export default Header

components/layout.js

@@ -0,0 +1,57 @@
+import Head from 'next/head'
+import Header from './header'
+
+const Layout = (props) => (
+  <>
+    <Head>
+      <title>✨ Secure Your Go Rest API with Magic Auth ✨</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    <Header />
+
+    <main>
+      <div className="container">{props.children}</div>
+    </main>
+
+    <footer>
+      <a
+        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Powered by <img src="/vercel.svg" alt="Vercel Logo" />
+      </a>
+    </footer>
+
+    <style jsx global>{`
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        color: #333;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+      }
+      .container {
+        max-width: 42rem;
+        margin: 0 auto;
+        padding: 2rem 1.25rem;
+      }
+      footer {
+        width: 100%;
+        height: 100px;
+        border-top: 1px solid #eaeaea;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    `}</style>
+  </>
+)
+
+export default Layout

lib/auth-cookies.js

@@ -0,0 +1,41 @@
+import { serialize, parse } from 'cookie'
+
+const TOKEN_NAME = 'token'
+
+export const MAX_AGE = 60 * 60 * 8 // 8 hours
+
+export function setTokenCookie(res, token) {
+  const cookie = serialize(TOKEN_NAME, token, {
+    maxAge: MAX_AGE,
+    expires: new Date(Date.now() + MAX_AGE * 1000),
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    path: '/',
+    sameSite: 'lax',
+  })
+
+  res.setHeader('Set-Cookie', cookie)
+}
+
+export function removeTokenCookie(res) {
+  const cookie = serialize(TOKEN_NAME, '', {
+    maxAge: -1,
+    path: '/',
+  })
+
+  res.setHeader('Set-Cookie', cookie)
+}
+
+export function parseCookies(req) {
+  // For API Routes we don't need to parse the cookies.
+  if (req.cookies) return req.cookies
+
+  // For pages we do need to parse the cookies.
+  const cookie = req.headers?.cookie
+  return parse(cookie || '')
+}
+
+export function getTokenCookie(req) {
+  const cookies = parseCookies(req)
+  return cookies[TOKEN_NAME]
+}

lib/auth.js

@@ -0,0 +1,29 @@
+import Iron from '@hapi/iron'
+import { MAX_AGE, setTokenCookie, getTokenCookie } from './auth-cookies'
+
+const TOKEN_SECRET = process.env.TOKEN_SECRET
+
+export async function setLoginSession(res, session) {
+  const createdAt = Date.now()
+  // Create a session object with a max age that we can validate later
+  const obj = { ...session, createdAt, maxAge: MAX_AGE }
+  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults)
+
+  setTokenCookie(res, token)
+}
+
+export async function getLoginSession(req) {
+  const token = getTokenCookie(req)
+
+  if (!token) return
+
+  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults)
+  const expiresAt = session.createdAt + session.maxAge * 1000
+
+  // Validate the expiration date of the session
+  if (Date.now() > expiresAt) {
+    throw new Error('Session expired')
+  }
+
+  return session
+}

lib/hooks.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import Router from 'next/router'
+import useSWR from 'swr'
+
+const fetcher = (url) =>
+  fetch(url)
+    .then((r) => r.json())
+    .then((data) => {
+      return { user: data?.user || null }
+    })
+
+export function useUser({ redirectTo, redirectIfFound } = {}) {
+  const { data, error } = useSWR('/api/user', fetcher)
+  const user = data?.user
+  const finished = Boolean(data)
+  const hasUser = Boolean(user)
+
+  useEffect(() => {
+    if (!redirectTo || !finished) return
+    if (
+      // If redirectTo is set, redirect if the user was not found.
+      (redirectTo && !redirectIfFound && !hasUser) ||
+      // If redirectIfFound is also set, redirect if the user was found
+      (redirectIfFound && hasUser)
+    ) {
+      Router.push(redirectTo)
+    }
+  }, [redirectTo, redirectIfFound, finished, hasUser])
+
+  return error ? null : user
+}

lib/magic.js

@@ -0,0 +1,3 @@
+const { Magic } = require('@magic-sdk/admin')
+
+export const magic = new Magic(process.env.MAGIC_SECRET_KEY)