Merge remote-tracking branch 'upstream/canary' into patch-1

examples/with-cookie-auth/README.md

@@ -4,3 +4,4 @@ This example has been deprecated and removed in favor of one of the following ex
 - [with-cookie-auth-fauna](https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth-fauna)
 - [with-passport](https://github.com/vercel/next.js/tree/canary/examples/with-passport)
 - [with-iron-session](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session)
+- [with-next-auth](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth)

examples/with-firebase-authentication/pages/index.js

@@ -15,7 +15,6 @@ const Index = () => {
     user ? ['/api/getFood', user.token] : null,
     fetcher
   )
-
   if (!user) {
     return (
       <>
@@ -52,7 +51,11 @@ const Index = () => {
         </Link>
       </div>
       {error && <div>Failed to fetch food!</div>}
-      {data && <div>Your favorite food is {data.food}.</div>}
+      {data ? (
+        <div>Your favorite food is {data.food}.</div>
+      ) : (
+        <div>Loading...</div>
+      )}
     </div>
   )
 }

examples/with-next-auth/.env.development

@@ -0,0 +1 @@
+SITE=http://localhost:3000

examples/with-next-auth/.env.local.example

@@ -0,0 +1,11 @@
+GOOGLE_ID=
+GOOGLE_SECRET=
+FACEBOOK_ID=
+FACEBOOK_SECRET=
+TWITTER_ID=
+TWITTER_SECRET=
+GITHUB_ID=
+GITHUB_SECRET=
+EMAIL_SERVER=smtp://username:[email protected]:587
+EMAIL_FROM=NextAuth <[email protected]>
+DATABASE_URL=sqlite://localhost/:memory:?synchronize=true

examples/with-next-auth/README.md

@@ -0,0 +1,50 @@
+# NextAuth.js Example
+
+Next.js example with [`next-auth`](https://github.com/iaincollins/next-auth), an open source, easy to use, and secure by default authentication library.
+
+## How to use
+
+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, you'll need to fill at least one of the authentication providers by adding the required secrets for it, be that in the form of OAuth keys/secrets from a provider (Google, Twitter, etc.) or an SMTP connection string to enable email authentication.
+
+More details about the providers can be found [here](https://next-auth.js.org/configuration/providers), and for a more complete introduction to `next-auth` check out their [introduction guide](https://next-auth.js.org/getting-started/introduction)
+
+It is vital that you know the deployment URL and define it in the environment file.
+
+### Using `create-next-app`
+
+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 next-auth with-next-auth-app
+# or
+yarn create next-app --example next-auth with-next-auth-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/next-auth
+cd next-auth
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+**Note:** For production you need to know in advance the domain (deployment URL) of your application, as it would be required for OAuth to work, once you have it set it to the `VERCEL_URL` environment variable under the settings of your Vercel project.

examples/with-next-auth/components/footer.js

@@ -0,0 +1,17 @@
+import styles from './footer.module.css'
+
+const Footer = () => (
+  <div className={styles.footer}>
+    <hr />
+    <ul className={styles.navigation}>
+      <li className={styles.navigationItem}>
+        <a href="https://github.com/iaincollins/next-auth-example">Source</a>
+      </li>
+      <li className={styles.navigationItem}>
+        <a href="https://next-auth.js.org">Documentation</a>
+      </li>
+    </ul>
+  </div>
+)
+
+export default Footer

examples/with-next-auth/components/footer.module.css

@@ -0,0 +1,14 @@
+.footer {
+  margin-top: 2rem;
+}
+
+.navigation {
+  margin-bottom: 2rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navigationItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

examples/with-next-auth/components/nav.js

@@ -0,0 +1,61 @@
+import { signin, signout, useSession } from 'next-auth/client'
+import styles from './nav.module.css'
+
+/**
+ * The approach used in this component shows how to built a sign in and sign out
+ * component that works on pages which support both client and server side
+ * rendering, and avoids any flash incorrect content on initial page load.
+ **/
+const Nav = () => {
+  const [session, loading] = useSession()
+
+  return (
+    <nav>
+      <noscript>
+        <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
+      </noscript>
+      <p
+        className={`nojs-show ${
+          !session && loading ? styles.loading : styles.loaded
+        }`}
+      >
+        {!session && (
+          <>
+            <span className={styles.notSignedIn}>Not signed in</span>
+            <a
+              href={`/api/auth/signin`}
+              onClick={(e) => {
+                e.preventDefault()
+                signin()
+              }}
+            >
+              <button className={styles.signinButton}>Sign in</button>
+            </a>
+          </>
+        )}
+        {session && (
+          <>
+            <span
+              style={{ backgroundImage: `url(${session.user.image})` }}
+              className={styles.avatar}
+            />
+            <span className={styles.signedIn}>
+              Signed in as <strong>{session.user.email}</strong>
+            </span>
+            <a
+              href={`/api/auth/signout`}
+              onClick={(e) => {
+                e.preventDefault()
+                signout()
+              }}
+            >
+              <button className={styles.signoutButton}>Sign out</button>
+            </a>
+          </>
+        )}
+      </p>
+    </nav>
+  )
+}
+
+export default Nav

examples/with-next-auth/components/nav.module.css

@@ -0,0 +1,79 @@
+.loading,
+.loaded {
+  position: relative;
+  top: 0;
+  opacity: 1;
+  overflow: auto;
+  border-radius: 0 0 0.6rem 0.6rem;
+  padding: 0.4rem 0.8rem;
+  margin: 0;
+  background-color: #f5f5f5;
+  transition: all 0.2s ease-in-out;
+}
+
+.loading {
+  top: -2rem;
+  opacity: 0;
+}
+
+.signedIn,
+.notSignedIn {
+  position: absolute;
+  padding: 0.6rem 0 0.4rem 0;
+  left: 1rem;
+  right: 7rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inherit;
+  z-index: 1;
+}
+
+.signedIn {
+  left: 3.8rem;
+}
+
+.avatar {
+  border-radius: 2rem;
+  float: left;
+  height: 2.2rem;
+  width: 2.2rem;
+  background-color: white;
+  background-size: cover;
+  border: 2px solid #ddd;
+}
+
+.signinButton,
+.signoutButton {
+  float: right;
+  margin-right: -0.4rem;
+  font-weight: 500;
+  background-color: #1eb1fc;
+  color: #fff;
+  border: 1px solid #1eb1fc;
+  border-radius: 2rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1rem;
+  padding: 0.5rem 1rem;
+  position: relative;
+  z-index: 10;
+}
+
+.signinButton:hover {
+  background-color: #1b9fe2;
+  border-color: #1b9fe2;
+  color: #fff;
+}
+
+.signoutButton {
+  background-color: #fff;
+  border-color: #bbb;
+  color: #555;
+}
+
+.signoutButton:hover {
+  background-color: #fff;
+  border-color: #aaa;
+  color: #333;
+}

examples/with-next-auth/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "next-auth-example",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "next": "latest",
+    "next-auth": "^2.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "sqlite3": "^4.2.0"
+  }
+}

examples/with-next-auth/pages/_app.js

@@ -0,0 +1,13 @@
+import { Provider } from 'next-auth/client'
+import '../styles.css'
+
+const App = ({ Component, pageProps }) => {
+  const { session } = pageProps
+  return (
+    <Provider options={{ site: process.env.SITE }} session={session}>
+      <Component {...pageProps} />
+    </Provider>
+  )
+}
+
+export default App