With Supertokens example

examples/with-supertokens/.env.local.example

@@ -0,0 +1,5 @@
+# Public Environment variables that can be used in the browser.
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
+
+# Secret environment variables only available to Node.js
+APP_URL="http://localhost:3000"

examples/with-supertokens/.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

examples/with-supertokens/README.md

@@ -0,0 +1,47 @@
+# SuperTokens Example
+
+This is a simple set up for applications protected by SuperTokens.
+
+The SuperTokens back end configurations are in `supertokens.js`.
+
+The SuperTokens front end configurations are in `pages/_app.js`.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-supertokens&project-name=with-supertokens&repository-name=with-supertokens)
+
+## 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-supertokens with-supertokens-app
+# or
+yarn create next-app --example with-supertokens with-supertokens-app
+```
+
+## Configuration
+
+Create a `.env.local` file and copy the content of `.env.local.example` into it:
+
+```bash
+cp .env.local.example .env.local
+```
+
+## 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/new?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.
+
+## Notes
+
+Take a look at [SuperTokens documentation](https://supertokens.io/docs/emailpassword/introduction) to configure SuperTokens for your project.
+
+Especially, you will want to replace the use of the demo SuperTokens core with your own SuperTokens core instance. See https://supertokens.io/docs/emailpassword/quick-setup/supertokens-core/overview.

examples/with-supertokens/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "with-supertokens",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "supertokens-auth-react": "^0.5.1",
+    "supertokens-node": "^3.4.0"
+  },
+  "license": "MIT"
+}

examples/with-supertokens/pages/_app.js

@@ -0,0 +1,54 @@
+import '../styles/globals.css'
+import React from 'react'
+import SuperTokensReact from 'supertokens-auth-react'
+import EmailPasswordReact from 'supertokens-auth-react/recipe/emailpassword'
+import SessionReact from 'supertokens-auth-react/recipe/session'
+import SuperTokensNode from 'supertokens-node'
+import SessionNode from 'supertokens-node/recipe/session'
+import EmailPasswordNode from 'supertokens-node/recipe/emailpassword'
+const port = process.env.APP_PORT || 3000
+const websiteDomain =
+  process.env.APP_URL ||
+  process.env.NEXT_PUBLIC_APP_URL ||
+  `http://localhost:${port}`
+const apiBasePath = '/api/auth/'
+
+// Client Side configs.
+if (typeof window !== 'undefined') {
+  SuperTokensReact.init({
+    appInfo: {
+      appName: 'SuperTokens Demo App',
+      websiteDomain,
+      apiDomain: websiteDomain,
+      apiBasePath,
+    },
+    recipeList: [
+      EmailPasswordReact.init({
+        emailVerificationFeature: {
+          mode: 'REQUIRED',
+        },
+      }),
+      SessionReact.init(),
+    ],
+  })
+} else {
+  // Server Side configs.
+  SuperTokensNode.init({
+    supertokens: {
+      connectionURI: 'https://try.supertokens.io', // Replace with your SuperTokens core instance. See https://supertokens.io/docs/emailpassword/quick-setup/supertokens-core/overview
+    },
+    appInfo: {
+      appName: 'SuperTokens Demo App',
+      websiteDomain,
+      apiDomain: websiteDomain,
+      apiBasePath,
+    },
+    recipeList: [EmailPasswordNode.init(), SessionNode.init()],
+  })
+}
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-supertokens/pages/api/auth/[[...path]].js

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { superTokensNextWrapper } from 'supertokens-node/nextjs'
+import { middleware } from 'supertokens-node'
+
+export default async function superTokens(req, res) {
+  return await superTokensNextWrapper(
+    async (next) => {
+      await middleware()(req, res, next)
+    },
+    req,
+    res
+  )
+}

examples/with-supertokens/pages/api/user.js

@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { superTokensNextWrapper } from 'supertokens-node/nextjs'
+import { verifySession } from 'supertokens-node/recipe/session'
+
+export default async function user(req, res) {
+  if (req.method !== 'GET') {
+    return res.end()
+  }
+
+  await superTokensNextWrapper(
+    async (next) => {
+      return await verifySession()(req, res, next)
+    },
+    req,
+    res
+  )
+
+  return res.json({
+    note:
+      'Fetch any data from your application for authenticated user after using verifySession middleware',
+    userId: req.session.userId,
+    sessionHandle: req.session.sessionHandle,
+    userDataInJWT: req.session.userDataInJWT,
+  })
+}

examples/with-supertokens/pages/auth/[[...path]].js

@@ -0,0 +1,36 @@
+import Head from 'next/head'
+import React, { useEffect } from 'react'
+import styles from '../../styles/Home.module.css'
+import dynamic from 'next/dynamic'
+import SuperTokens from 'supertokens-auth-react'
+
+const SuperTokensComponentNoSSR = dynamic(
+  () =>
+    Promise.resolve().then(() => {
+      return () => SuperTokens.getRoutingComponent() || null
+    }),
+  {
+    ssr: false,
+  }
+)
+
+export default function Auth() {
+  useEffect(() => {
+    if (SuperTokens.canHandleRoute() === false) {
+      window.location.href = '/'
+    }
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SuperTokens 💫</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <SuperTokensComponentNoSSR />
+      </main>
+    </div>
+  )
+}

examples/with-supertokens/pages/index.js

@@ -0,0 +1,143 @@
+import React from 'react'
+import Head from 'next/head'
+import styles from '../styles/Home.module.css'
+import EmailPassword from 'supertokens-auth-react/recipe/emailpassword'
+import dynamic from 'next/dynamic'
+
+const EmailPasswordAuthNoSSR = dynamic(
+  () => Promise.resolve().then(() => EmailPassword.EmailPasswordAuth),
+  {
+    ssr: false,
+  }
+)
+
+export default function Home() {
+  async function logoutClicked() {
+    await EmailPassword.signOut()
+    window.location.href = '/auth'
+  }
+
+  async function fetchUserData() {
+    const res = await fetch('/api/user')
+    const json = await res.json()
+    alert(JSON.stringify(json))
+  }
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SuperTokens 💫</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+        <EmailPasswordAuthNoSSR>
+          <p className={styles.description}>
+            You are authenticated with SuperTokens!
+          </p>
+
+          <div
+            style={{
+              display: 'flex',
+              height: '70px',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              paddingLeft: '75px',
+              paddingRight: '75px',
+            }}
+          >
+            <div
+              onClick={logoutClicked}
+              style={{
+                display: 'flex',
+                width: '116px',
+                height: '42px',
+                backgroundColor: '#000000',
+                borderRadius: '10px',
+                cursor: 'pointer',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#ffffff',
+                fontWeight: 'bold',
+              }}
+            >
+              SIGN OUT
+            </div>
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              height: '70px',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              paddingLeft: '75px',
+              paddingRight: '75px',
+            }}
+          >
+            <div
+              onClick={fetchUserData}
+              style={{
+                display: 'flex',
+                width: '150px',
+                height: '42px',
+                backgroundColor: 'rgb(247 54 54)',
+                borderRadius: '10px',
+                cursor: 'pointer',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#ffffff',
+                fontWeight: 'bold',
+              }}
+            >
+              FETCH USER API
+            </div>
+          </div>
+        </EmailPasswordAuthNoSSR>
+
+        <div className={styles.grid}>
+          <a href="https://nextjs.org/docs" className={styles.card}>
+            <h3>Documentation &rarr;</h3>
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://nextjs.org/learn" className={styles.card}>
+            <h3>Learn &rarr;</h3>
+            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/master/examples"
+            className={styles.card}
+          >
+            <h3>Examples &rarr;</h3>
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+          >
+            <h3>Deploy &rarr;</h3>
+            <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+
+      <footer className={styles.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" className={styles.logo} />
+        </a>
+      </footer>
+    </div>
+  )
+}