From 433c563c7f03d77dc5c963fc25e53b8ad83a6e04 Mon Sep 17 00:00:00 2001
From: Hunter Cote <huntercote2@gmail.com>
Date: Wed, 17 Feb 2021 15:24:26 -0700
Subject: [PATCH] added nextjs, hasura templates. updated react template to
 include env file

---
 scaffolds/binance-smart-chain/scaffold.tsx    |   2 +-
 scaffolds/hasura/scaffold.tsx                 |  86 +++++++++++++++++
 scaffolds/hasura/template/.env.local          |   4 +
 scaffolds/hasura/template/README.md           |  16 +++
 .../hasura/template/components/loading.js     |   7 ++
 scaffolds/hasura/template/magic.js            |   5 +
 scaffolds/hasura/template/package.json        |  19 ++++
 scaffolds/hasura/template/pages/_app.js       |  15 +++
 scaffolds/hasura/template/pages/api/login.js  |  91 ++++++++++++++++++
 scaffolds/hasura/template/pages/callback.js   |  22 +++++
 scaffolds/hasura/template/pages/index.js      |  39 ++++++++
 scaffolds/hasura/template/pages/login.js      |  59 ++++++++++++
 scaffolds/hasura/template/public/favicon.ico  | Bin 0 -> 15086 bytes
 scaffolds/hasura/template/style.css           |  55 +++++++++++
 scaffolds/hello-world-react/template/.env     |   1 +
 .../hello-world-react/template/src/magic.js   |   4 +-
 scaffolds/next/scaffold.tsx                   |  32 ++++++
 scaffolds/next/template/.env.local            |   2 +
 scaffolds/next/template/components/loading.js |   7 ++
 scaffolds/next/template/magic.js              |   5 +
 scaffolds/next/template/package.json          |  17 ++++
 scaffolds/next/template/pages/_app.js         |  15 +++
 scaffolds/next/template/pages/api/login.js    |  13 +++
 scaffolds/next/template/pages/callback.js     |  22 +++++
 scaffolds/next/template/pages/index.js        |  39 ++++++++
 scaffolds/next/template/pages/login.js        |  59 ++++++++++++
 scaffolds/next/template/public/favicon.ico    | Bin 0 -> 15086 bytes
 scaffolds/next/template/style.css             |  55 +++++++++++
 scaffolds/prompts.ts                          |  24 +++++
 29 files changed, 712 insertions(+), 3 deletions(-)
 create mode 100644 scaffolds/hasura/scaffold.tsx
 create mode 100644 scaffolds/hasura/template/.env.local
 create mode 100644 scaffolds/hasura/template/README.md
 create mode 100644 scaffolds/hasura/template/components/loading.js
 create mode 100644 scaffolds/hasura/template/magic.js
 create mode 100644 scaffolds/hasura/template/package.json
 create mode 100644 scaffolds/hasura/template/pages/_app.js
 create mode 100644 scaffolds/hasura/template/pages/api/login.js
 create mode 100644 scaffolds/hasura/template/pages/callback.js
 create mode 100644 scaffolds/hasura/template/pages/index.js
 create mode 100644 scaffolds/hasura/template/pages/login.js
 create mode 100644 scaffolds/hasura/template/public/favicon.ico
 create mode 100644 scaffolds/hasura/template/style.css
 create mode 100644 scaffolds/hello-world-react/template/.env
 create mode 100644 scaffolds/next/scaffold.tsx
 create mode 100644 scaffolds/next/template/.env.local
 create mode 100644 scaffolds/next/template/components/loading.js
 create mode 100644 scaffolds/next/template/magic.js
 create mode 100644 scaffolds/next/template/package.json
 create mode 100644 scaffolds/next/template/pages/_app.js
 create mode 100644 scaffolds/next/template/pages/api/login.js
 create mode 100644 scaffolds/next/template/pages/callback.js
 create mode 100644 scaffolds/next/template/pages/index.js
 create mode 100644 scaffolds/next/template/pages/login.js
 create mode 100644 scaffolds/next/template/public/favicon.ico
 create mode 100644 scaffolds/next/template/style.css

diff --git a/scaffolds/binance-smart-chain/scaffold.tsx b/scaffolds/binance-smart-chain/scaffold.tsx
index e505a88..42f6e6b 100644
--- a/scaffolds/binance-smart-chain/scaffold.tsx
+++ b/scaffolds/binance-smart-chain/scaffold.tsx
@@ -15,7 +15,7 @@ export default createScaffold<BinanceSmartChainData>(
 
   {
     shortDescription: 'Binance Smart Chain',
-    order: 1,
+    order: 3,
     installDependenciesCommand: NpmClientPrompt.getInstallCommand,
     startCommand: NpmClientPrompt.getStartCommand,
     flags: {
diff --git a/scaffolds/hasura/scaffold.tsx b/scaffolds/hasura/scaffold.tsx
new file mode 100644
index 0000000..9962ac0
--- /dev/null
+++ b/scaffolds/hasura/scaffold.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Template, Zombi } from 'compiled/zombi';
+import { createScaffold } from 'cli/utils/scaffold-helpers';
+import { mergePrompts } from 'cli/utils/merge-prompts';
+import { NpmClientPrompt, PublishableApiKeyPrompt, SecretApiKeyPrompt } from 'scaffolds/prompts';
+import type { Questions } from 'compiled/zombi';
+import type { Flags } from 'cli/flags';
+
+// prompt specific to the Hasura template, therefore not in `scaffolds/prompts.ts`
+namespace HasuraUrlPrompt {
+  export type Data = {
+    hasuraUrl: 'npm' | 'yarn';
+  };
+
+  export const questions: Questions<Data> = {
+    type: 'input',
+    name: 'hasuraUrl',
+    message: "Enter your project's Hasura URL:",
+  };
+
+  export const flags: Flags<Data> = {
+    hasuraUrl: {
+      type: String,
+      description: 'The GraphQL URL for your Hasura app.',
+    },
+  };
+}
+
+// prompt specific to the Hasura template, therefore not in `scaffolds/prompts.ts`
+namespace JwtSecretPrompt {
+  export type Data = {
+    jwtSecret: 'npm' | 'yarn';
+  };
+
+  export const questions: Questions<Data> = {
+    type: 'input',
+    name: 'jwtSecret',
+    message: 'Enter your 32+ character JWT secret:',
+  };
+
+  export const flags: Flags<Data> = {
+    jwtSecret: {
+      type: String,
+      description: 'The shared JWT secret between your app and Hasura.',
+    },
+  };
+}
+
+type HasuraData = NpmClientPrompt.Data &
+  PublishableApiKeyPrompt.Data &
+  SecretApiKeyPrompt.Data &
+  HasuraUrlPrompt.Data &
+  JwtSecretPrompt.Data;
+
+export default createScaffold<HasuraData>(
+  (props) => (
+    <Zombi
+      {...props}
+      prompts={mergePrompts(
+        PublishableApiKeyPrompt.questions,
+        SecretApiKeyPrompt.questions,
+        HasuraUrlPrompt.questions,
+        JwtSecretPrompt.questions,
+        NpmClientPrompt.questions,
+      )}
+    >
+      <Template source="./" />
+    </Zombi>
+  ),
+
+  {
+    shortDescription: 'Hasura',
+    order: 2,
+    installDependenciesCommand: NpmClientPrompt.getInstallCommand,
+    startCommand: (data: HasuraData) => {
+      return data.npmClient === 'npm' ? 'npm run dev' : 'yarn dev';
+    },
+    flags: {
+      ...NpmClientPrompt.flags,
+      ...PublishableApiKeyPrompt.flags,
+      ...SecretApiKeyPrompt.flags,
+      ...HasuraUrlPrompt.flags,
+      ...JwtSecretPrompt.flags,
+    },
+  },
+);
diff --git a/scaffolds/hasura/template/.env.local b/scaffolds/hasura/template/.env.local
new file mode 100644
index 0000000..a922d9b
--- /dev/null
+++ b/scaffolds/hasura/template/.env.local
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=<%= publishableApiKey %>
+MAGIC_SECRET_KEY=<%= secretApiKey %>
+HASURA_URL=<%= hasuraUrl %>
+JWT_SECRET=<%= jwtSecret %>
\ No newline at end of file
diff --git a/scaffolds/hasura/template/README.md b/scaffolds/hasura/template/README.md
new file mode 100644
index 0000000..bb43cce
--- /dev/null
+++ b/scaffolds/hasura/template/README.md
@@ -0,0 +1,16 @@
+**Note one**: This template assumes you have created a table in your Hasura console called `users` with two columns, `issuer` (primary key) and `email`.
+
+**Note two**: the `JWT_SECRET` variable in `.env.local` should match the `key` value set in your `HASURA_GRAPHQL_JWT_SECRET` env variable. This is so Hasura can verify the JWT token sent inthe Authorization header when querying the database. You can set this in your Hasura project dashboard under "Env Vars". Hasura will throw an error if the `key` is less than 32 characters.
+
+#### For example
+
+HASURA_GRAPHQL_JWT_SECRET:
+
+```
+{
+  "key": "abcdefghijklmnopqrstuvwxyz1234567890",
+  "type": "HS256"
+}
+```
+
+In `.env.local`: JWT_SECRET=abcdefghijklmnopqrstuvwxyz1234567890
diff --git a/scaffolds/hasura/template/components/loading.js b/scaffolds/hasura/template/components/loading.js
new file mode 100644
index 0000000..8a69363
--- /dev/null
+++ b/scaffolds/hasura/template/components/loading.js
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className='container'>
+      <p>Loading...</p>
+    </div>
+  );
+}
diff --git a/scaffolds/hasura/template/magic.js b/scaffolds/hasura/template/magic.js
new file mode 100644
index 0000000..f6f5c26
--- /dev/null
+++ b/scaffolds/hasura/template/magic.js
@@ -0,0 +1,5 @@
+import { Magic } from 'magic-sdk';
+
+const createMagic = (key) => typeof window != 'undefined' && new Magic(key);
+
+export const magic = createMagic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);
diff --git a/scaffolds/hasura/template/package.json b/scaffolds/hasura/template/package.json
new file mode 100644
index 0000000..8f52508
--- /dev/null
+++ b/scaffolds/hasura/template/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@magic-sdk/admin": "^1.3.0",
+    "cookie": "^0.4.1",
+    "jsonwebtoken": "^8.5.1",
+    "magic-sdk": "^4.1.1",
+    "next": "10.0.6",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  }
+}
diff --git a/scaffolds/hasura/template/pages/_app.js b/scaffolds/hasura/template/pages/_app.js
new file mode 100644
index 0000000..ae52be9
--- /dev/null
+++ b/scaffolds/hasura/template/pages/_app.js
@@ -0,0 +1,15 @@
+import '../style.css';
+import Head from 'next/head';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>Magic Hasura</title>
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/scaffolds/hasura/template/pages/api/login.js b/scaffolds/hasura/template/pages/api/login.js
new file mode 100644
index 0000000..19fe9a8
--- /dev/null
+++ b/scaffolds/hasura/template/pages/api/login.js
@@ -0,0 +1,91 @@
+import { Magic } from '@magic-sdk/admin';
+import jwt from 'jsonwebtoken';
+
+const magic = new Magic(process.env.MAGIC_SECRET_KEY);
+
+export default async function login(req, res) {
+  try {
+    // Grab auth token from Authorization header
+    const didToken = req.headers.authorization.substr(7);
+
+    // Validate auth token with Magic
+    await magic.token.validate(didToken);
+
+    // Grab user data from auth token
+    const { email, issuer } = await magic.users.getMetadataByToken(didToken);
+
+    // Create a JWT, including user data which we use when saving new user in Hasura
+    const token = jwt.sign(
+      {
+        email,
+        issuer,
+        'https://hasura.io/jwt/claims': {
+          'x-hasura-allowed-roles': ['admin'],
+          'x-hasura-default-role': 'admin',
+          'x-hasura-user-id': `${issuer}`,
+        },
+        exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 7, // one week
+      },
+      process.env.JWT_SECRET
+    );
+
+    // Check if user trying to log in already exists
+    const newUser = await isNewUser(issuer, token);
+
+    // If not, create a new user in Hasura
+    newUser && (await createNewUser(issuer, email, token));
+
+    res.status(200).json({ authenticated: true });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+}
+
+async function isNewUser(issuer, token) {
+  let query = {
+    query: `{
+      users( where: {issuer: {_eq: "${issuer}"}}) {
+        email
+      }
+    }`,
+  };
+  try {
+    let data = await queryHasura(query, token);
+    return data?.users.length ? false : true;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+async function createNewUser(issuer, email, token) {
+  let query = {
+    query: `mutation {
+      insert_users_one( object: { issuer: "${issuer}", email: "${email}" }) {
+        email
+      }
+    }`,
+  };
+  try {
+    await queryHasura(query, token);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+async function queryHasura(query, token) {
+  try {
+    let res = await fetch(process.env.HASURA_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        Authorization: 'Bearer ' + token,
+      },
+      body: JSON.stringify(query),
+    });
+    let { data } = await res.json();
+    return data;
+  } catch (error) {
+    console.log(error);
+  }
+}
diff --git a/scaffolds/hasura/template/pages/callback.js b/scaffolds/hasura/template/pages/callback.js
new file mode 100644
index 0000000..8ee7b30
--- /dev/null
+++ b/scaffolds/hasura/template/pages/callback.js
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import Router from 'next/router';
+import Loading from '../components/loading';
+import { magic } from '../magic';
+
+export default function Callback() {
+  useEffect(() => {
+    // On mount, we try to login with a Magic credential in the URL query.
+    magic.auth.loginWithCredential().then(async (didToken) => {
+      // Validate auth token with server
+      const res = await fetch('/api/login', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + didToken,
+        },
+      });
+      res.status === 200 && Router.push('/');
+    });
+  }, []);
+
+  return <Loading />;
+}
diff --git a/scaffolds/hasura/template/pages/index.js b/scaffolds/hasura/template/pages/index.js
new file mode 100644
index 0000000..3b1a33a
--- /dev/null
+++ b/scaffolds/hasura/template/pages/index.js
@@ -0,0 +1,39 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Router from 'next/router';
+import { magic } from '../magic';
+import Loading from '../components/loading';
+
+export default function Index() {
+  const [userMetadata, setUserMetadata] = useState();
+
+  useEffect(() => {
+    // On mount, we check if a user is logged in.
+    // If so, we'll retrieve the authenticated user's profile.
+    magic.user.isLoggedIn().then((magicIsLoggedIn) => {
+      if (magicIsLoggedIn) {
+        magic.user.getMetadata().then(setUserMetadata);
+      } else {
+        // If no user is logged in, redirect to `/login`
+        Router.push('/login');
+      }
+    });
+  }, []);
+
+  /**
+   * Perform logout action via Magic.
+   */
+  const logout = useCallback(() => {
+    magic.user.logout().then(() => {
+      Router.push('/login');
+    });
+  }, [Router]);
+
+  return userMetadata ? (
+    <div className='container'>
+      <h1>Current user: {userMetadata.email}</h1>
+      <button onClick={logout}>Logout</button>
+    </div>
+  ) : (
+    <Loading />
+  );
+}
diff --git a/scaffolds/hasura/template/pages/login.js b/scaffolds/hasura/template/pages/login.js
new file mode 100644
index 0000000..13893c0
--- /dev/null
+++ b/scaffolds/hasura/template/pages/login.js
@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import Router from 'next/router';
+import { magic } from '../magic';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+  /**
+   * Perform login action via Magic's passwordless flow. Upon successuful
+   * completion of the login flow, a user is redirected to the homepage.
+   */
+  const login = useCallback(async () => {
+    setIsLoggingIn(true);
+
+    try {
+      // Grab auth token from loginWithMagicLink
+      const didToken = await magic.auth.loginWithMagicLink({
+        email,
+        redirectURI: new URL('/callback', window.location.origin).href,
+      });
+
+      // Validate auth token with server
+      const res = await fetch('/api/login', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + didToken,
+        },
+      });
+      res.status === 200 && Router.push('/');
+    } catch {
+      setIsLoggingIn(false);
+    }
+  }, [email]);
+
+  /**
+   * Saves the value of our email input into component state.
+   */
+  const handleInputOnChange = useCallback((event) => {
+    setEmail(event.target.value);
+  }, []);
+
+  return (
+    <div className='container'>
+      <h1>Please sign up or login</h1>
+      <input
+        type='email'
+        name='email'
+        required='required'
+        placeholder='Enter your email'
+        onChange={handleInputOnChange}
+        disabled={isLoggingIn}
+      />
+      <button onClick={login} disabled={isLoggingIn}>
+        Send
+      </button>
+    </div>
+  );
+}
diff --git a/scaffolds/hasura/template/public/favicon.ico b/scaffolds/hasura/template/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a
GIT binary patch
literal 15086
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
A761SM

literal 0
HcmV?d00001

diff --git a/scaffolds/hasura/template/style.css b/scaffolds/hasura/template/style.css
new file mode 100644
index 0000000..1ef76df
--- /dev/null
+++ b/scaffolds/hasura/template/style.css
@@ -0,0 +1,55 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    'Helvetica Neue', sans-serif;
+  height: 100vh;
+  display: grid;
+  font-size: 18px;
+}
+
+#__next {
+  align-self: center;
+  justify-self: center;
+}
+
+.container {
+  width: 300px;
+  background-color: #eee;
+  text-align: center;
+  padding: 27px 18px;
+  margin-bottom: 27px;
+}
+
+h1 {
+  margin: 0;
+  padding-bottom: 18px;
+  font-size: 18px;
+}
+
+.info {
+  max-width: 21ch;
+  margin: 0 auto;
+  margin-bottom: 18px;
+  background-color: #ddd;
+  padding: 12px 24px;
+  word-wrap: break-word;
+  font-family: 'Lucida Console', Monaco, monospace;
+  font-size: 15px;
+}
+
+.info a {
+  color: black;
+}
+
+input,
+button {
+  padding: 9px;
+  font-size: 18px;
+  margin-bottom: 9px;
+}
+
+input.full-width {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 9px;
+  text-align: center;
+}
diff --git a/scaffolds/hello-world-react/template/.env b/scaffolds/hello-world-react/template/.env
new file mode 100644
index 0000000..c9e8899
--- /dev/null
+++ b/scaffolds/hello-world-react/template/.env
@@ -0,0 +1 @@
+REACT_APP_MAGIC_PUBLISHABLE_KEY=<%= publishableApiKey %>
\ No newline at end of file
diff --git a/scaffolds/hello-world-react/template/src/magic.js b/scaffolds/hello-world-react/template/src/magic.js
index c1bc432..3e0439b 100644
--- a/scaffolds/hello-world-react/template/src/magic.js
+++ b/scaffolds/hello-world-react/template/src/magic.js
@@ -1,2 +1,2 @@
-import { Magic } from "magic-sdk";
-export const magic = new Magic("<%= publishableApiKey %>");
+import { Magic } from 'magic-sdk';
+export const magic = new Magic(process.env.REACT_APP_MAGIC_PUBLISHABLE_KEY);
diff --git a/scaffolds/next/scaffold.tsx b/scaffolds/next/scaffold.tsx
new file mode 100644
index 0000000..6db4260
--- /dev/null
+++ b/scaffolds/next/scaffold.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Template, Zombi } from 'compiled/zombi';
+import { createScaffold } from 'cli/utils/scaffold-helpers';
+import { mergePrompts } from 'cli/utils/merge-prompts';
+import { NpmClientPrompt, PublishableApiKeyPrompt, SecretApiKeyPrompt } from 'scaffolds/prompts';
+
+type NextData = NpmClientPrompt.Data & PublishableApiKeyPrompt.Data & SecretApiKeyPrompt.Data;
+
+export default createScaffold<NextData>(
+  (props) => (
+    <Zombi
+      {...props}
+      prompts={mergePrompts(PublishableApiKeyPrompt.questions, SecretApiKeyPrompt.questions, NpmClientPrompt.questions)}
+    >
+      <Template source="./" />
+    </Zombi>
+  ),
+
+  {
+    shortDescription: 'Next.js',
+    order: 1,
+    installDependenciesCommand: NpmClientPrompt.getInstallCommand,
+    startCommand: (data: NextData) => {
+      return data.npmClient === 'npm' ? 'npm run dev' : 'yarn dev';
+    },
+    flags: {
+      ...NpmClientPrompt.flags,
+      ...PublishableApiKeyPrompt.flags,
+      ...SecretApiKeyPrompt.flags,
+    },
+  },
+);
diff --git a/scaffolds/next/template/.env.local b/scaffolds/next/template/.env.local
new file mode 100644
index 0000000..ac5bb2b
--- /dev/null
+++ b/scaffolds/next/template/.env.local
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=<%= publishableApiKey %>
+MAGIC_SECRET_KEY=<%= secretApiKey %>
\ No newline at end of file
diff --git a/scaffolds/next/template/components/loading.js b/scaffolds/next/template/components/loading.js
new file mode 100644
index 0000000..8a69363
--- /dev/null
+++ b/scaffolds/next/template/components/loading.js
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className='container'>
+      <p>Loading...</p>
+    </div>
+  );
+}
diff --git a/scaffolds/next/template/magic.js b/scaffolds/next/template/magic.js
new file mode 100644
index 0000000..f6f5c26
--- /dev/null
+++ b/scaffolds/next/template/magic.js
@@ -0,0 +1,5 @@
+import { Magic } from 'magic-sdk';
+
+const createMagic = (key) => typeof window != 'undefined' && new Magic(key);
+
+export const magic = createMagic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);
diff --git a/scaffolds/next/template/package.json b/scaffolds/next/template/package.json
new file mode 100644
index 0000000..6de562c
--- /dev/null
+++ b/scaffolds/next/template/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@magic-sdk/admin": "^1.3.0",
+    "magic-sdk": "^4.1.1",
+    "next": "10.0.6",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  }
+}
diff --git a/scaffolds/next/template/pages/_app.js b/scaffolds/next/template/pages/_app.js
new file mode 100644
index 0000000..0f316bc
--- /dev/null
+++ b/scaffolds/next/template/pages/_app.js
@@ -0,0 +1,15 @@
+import '../style.css';
+import Head from 'next/head';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>Magic Next.js</title>
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/scaffolds/next/template/pages/api/login.js b/scaffolds/next/template/pages/api/login.js
new file mode 100644
index 0000000..d1b941e
--- /dev/null
+++ b/scaffolds/next/template/pages/api/login.js
@@ -0,0 +1,13 @@
+import { Magic } from '@magic-sdk/admin';
+
+const magic = new Magic(process.env.MAGIC_SECRET_KEY);
+
+export default async function login(req, res) {
+  try {
+    const didToken = req.headers.authorization.substr(7);
+    await magic.token.validate(didToken);
+    res.status(200).json({ authenticated: true });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+}
diff --git a/scaffolds/next/template/pages/callback.js b/scaffolds/next/template/pages/callback.js
new file mode 100644
index 0000000..8ee7b30
--- /dev/null
+++ b/scaffolds/next/template/pages/callback.js
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import Router from 'next/router';
+import Loading from '../components/loading';
+import { magic } from '../magic';
+
+export default function Callback() {
+  useEffect(() => {
+    // On mount, we try to login with a Magic credential in the URL query.
+    magic.auth.loginWithCredential().then(async (didToken) => {
+      // Validate auth token with server
+      const res = await fetch('/api/login', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + didToken,
+        },
+      });
+      res.status === 200 && Router.push('/');
+    });
+  }, []);
+
+  return <Loading />;
+}
diff --git a/scaffolds/next/template/pages/index.js b/scaffolds/next/template/pages/index.js
new file mode 100644
index 0000000..3b1a33a
--- /dev/null
+++ b/scaffolds/next/template/pages/index.js
@@ -0,0 +1,39 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Router from 'next/router';
+import { magic } from '../magic';
+import Loading from '../components/loading';
+
+export default function Index() {
+  const [userMetadata, setUserMetadata] = useState();
+
+  useEffect(() => {
+    // On mount, we check if a user is logged in.
+    // If so, we'll retrieve the authenticated user's profile.
+    magic.user.isLoggedIn().then((magicIsLoggedIn) => {
+      if (magicIsLoggedIn) {
+        magic.user.getMetadata().then(setUserMetadata);
+      } else {
+        // If no user is logged in, redirect to `/login`
+        Router.push('/login');
+      }
+    });
+  }, []);
+
+  /**
+   * Perform logout action via Magic.
+   */
+  const logout = useCallback(() => {
+    magic.user.logout().then(() => {
+      Router.push('/login');
+    });
+  }, [Router]);
+
+  return userMetadata ? (
+    <div className='container'>
+      <h1>Current user: {userMetadata.email}</h1>
+      <button onClick={logout}>Logout</button>
+    </div>
+  ) : (
+    <Loading />
+  );
+}
diff --git a/scaffolds/next/template/pages/login.js b/scaffolds/next/template/pages/login.js
new file mode 100644
index 0000000..13893c0
--- /dev/null
+++ b/scaffolds/next/template/pages/login.js
@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import Router from 'next/router';
+import { magic } from '../magic';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+  /**
+   * Perform login action via Magic's passwordless flow. Upon successuful
+   * completion of the login flow, a user is redirected to the homepage.
+   */
+  const login = useCallback(async () => {
+    setIsLoggingIn(true);
+
+    try {
+      // Grab auth token from loginWithMagicLink
+      const didToken = await magic.auth.loginWithMagicLink({
+        email,
+        redirectURI: new URL('/callback', window.location.origin).href,
+      });
+
+      // Validate auth token with server
+      const res = await fetch('/api/login', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + didToken,
+        },
+      });
+      res.status === 200 && Router.push('/');
+    } catch {
+      setIsLoggingIn(false);
+    }
+  }, [email]);
+
+  /**
+   * Saves the value of our email input into component state.
+   */
+  const handleInputOnChange = useCallback((event) => {
+    setEmail(event.target.value);
+  }, []);
+
+  return (
+    <div className='container'>
+      <h1>Please sign up or login</h1>
+      <input
+        type='email'
+        name='email'
+        required='required'
+        placeholder='Enter your email'
+        onChange={handleInputOnChange}
+        disabled={isLoggingIn}
+      />
+      <button onClick={login} disabled={isLoggingIn}>
+        Send
+      </button>
+    </div>
+  );
+}
diff --git a/scaffolds/next/template/public/favicon.ico b/scaffolds/next/template/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a
GIT binary patch
literal 15086
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
A761SM

literal 0
HcmV?d00001

diff --git a/scaffolds/next/template/style.css b/scaffolds/next/template/style.css
new file mode 100644
index 0000000..1ef76df
--- /dev/null
+++ b/scaffolds/next/template/style.css
@@ -0,0 +1,55 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    'Helvetica Neue', sans-serif;
+  height: 100vh;
+  display: grid;
+  font-size: 18px;
+}
+
+#__next {
+  align-self: center;
+  justify-self: center;
+}
+
+.container {
+  width: 300px;
+  background-color: #eee;
+  text-align: center;
+  padding: 27px 18px;
+  margin-bottom: 27px;
+}
+
+h1 {
+  margin: 0;
+  padding-bottom: 18px;
+  font-size: 18px;
+}
+
+.info {
+  max-width: 21ch;
+  margin: 0 auto;
+  margin-bottom: 18px;
+  background-color: #ddd;
+  padding: 12px 24px;
+  word-wrap: break-word;
+  font-family: 'Lucida Console', Monaco, monospace;
+  font-size: 15px;
+}
+
+.info a {
+  color: black;
+}
+
+input,
+button {
+  padding: 9px;
+  font-size: 18px;
+  margin-bottom: 9px;
+}
+
+input.full-width {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 9px;
+  text-align: center;
+}
diff --git a/scaffolds/prompts.ts b/scaffolds/prompts.ts
index d2f0696..2af9c2a 100644
--- a/scaffolds/prompts.ts
+++ b/scaffolds/prompts.ts
@@ -28,6 +28,30 @@ export namespace PublishableApiKeyPrompt {
   };
 }
 
+export namespace SecretApiKeyPrompt {
+  export type Data = {
+    secretApiKey: 'npm' | 'yarn';
+  };
+
+  const validate = (value: string) =>
+    value.startsWith('sk') ? true : '--secret-api-key should look like `sk_live_...` or `sk_test_...`';
+
+  export const questions: Questions<Data> = {
+    type: 'input',
+    name: 'secretApiKey',
+    validate,
+    message: 'Enter your Magic secret API key:',
+  };
+
+  export const flags: Flags<Data> = {
+    secretApiKey: {
+      type: String,
+      validate,
+      description: 'The Magic secret API key for your app.',
+    },
+  };
+}
+
 export namespace NpmClientPrompt {
   const clients = ['npm', 'yarn'];