feat: improve package development experience (#1064)

* chore(deps): add next and react to dev dependencies

* chore: move build configs to avoid crash with next dev

* chore: add next js dev app

* chore: remove .txt extension from LICENSE file

* chore: update CONTRIBUTING.md

* chore: watch css under development

* style(lint): run linter on index.css

* chore: fix some imports for dev server

* refactor: simplify client code

* chore: mention VSCode extension for linting

* docs: reword CONTRIBUTING.md

* chore: ignore linting pages and components

CONTRIBUTING.md

@@ -17,70 +17,47 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea
 * Pull Requests should be raised for any change
 * Pull Requests need approval of a [core contributor](https://next-auth.js.org/contributors#core-team) before merging
 * Rebasing in Pull Requests is preferred to keep a clean commit history (see below)
-* Running `npm run lint:fix` before committing can make resolving conflicts easier
+* Run `npm run lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this extension](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs) to fix lint issues in development)
 * We encourage you to test your changes, and if you have the opportunity, please make those tests part of the Pull Request
 * If you add new functionality, please provide the corresponding documentation as well and make it part of the Pull Request
 
 ### Setting up local environment
 
-A quick and dirty guide on how to setup *next-auth* locally to work on it and test out any changes:
+A quick guide on how to setup *next-auth* locally to work on it and test out any changes:
 
 1. Clone the repo:
+```sh
+git clone git@github.com:nextauthjs/next-auth.git
+cd next-auth
+```
 
-       git clone git@github.com:nextauthjs/next-auth.git
-       cd next-auth/
+2. Install packages:
+```sh
+npm i
+```
 
-2. Install packages and run the build command:
+3. Populate `.env.local`:
+   
+    Copy `.env.example` to `.env.local`, and add your env variables for each provider you want to test.
 
-       npm i
-       npm run build
+>NOTE: You can configure providers of the dev app in `pages/api/auth/[...nextauth].js`
 
-3. Link your project back to your local copy of next auth:
+4. Start the dev application/server and CSS watching:
+```sh
+npm run dev
+```
 
-       cd ../your-application
-       npm link ../next-auth
+Your dev application will be available on ```http://localhost:3000```
 
-4. Finally link React between the repo and the version installed in your project:
-
-       cd ../next-auth
-       npm link ../your-application/node_modules/react
-
-*This is an annoying step and not obvious, but is needed because of how React has been written (otherwise React crashes when you try to use the `useSession()` hook in your project).*
-
-That's it!
-
-Notes: You may need to repeat both `npm link` steps if you install / update additional dependencies with `npm i`.
+That's it! 🎉
 
 If you need an example project to link to, you can use [next-auth-example](https://github.com/iaincollins/next-auth-example).
 
 #### Hot reloading
 
-You might find it helpful to use the `npm run watch` command in the next-auth project, which will automatically (and silently) rebuild JS and CSS files as you edit them.
+When running `npm run dev`, you start a Next.js dev server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
 
-    cd next-auth/
-    npm run watch
-
-If you are working on `next-auth/src/client/index.js` hot reloading will work as normal in your Next.js app.
-
-However, if you are working on anything else (e.g. `next-auth/src/server/*` etc) then you will need to *stop and start* your app for changes to apply as **Next.js will not hot reload those changes by default**. To facilitate this, you can try [this webpack plugin](https://www.npmjs.com/package/webpack-clear-require-cache-plugin). Note that the `next.config.js` syntax in the plugin README may be out of date. It should look like this:
-
-```
-const clearRequireCachePlugin = require('webpack-clear-require-cache-plugin')
-
-module.exports = {
-  webpack: (config, {
-    buildId, dev, isServer, defaultLoaders, webpack,
-  }) => {
-    config.plugins.push(clearRequireCachePlugin([
-      /\.next\/server\/static\/development\/pages/,
-      /\.next\/server\/ssr-module-cache.js/,
-      /next-auth/,
-    ]))
-
-    return config
-  },
-}
-```
+>NOTE: When working on CSS, you will need to manually refresh the page after changes. (Improving this through a PR is very welcome!)
 
 #### Databases
 
@@ -90,7 +67,7 @@ It will use port `3306`, `5432`, and `27017` on localhost respectively; please m
 
 You can start them with `npm run db:start` and stop them with `npm run db:stop`.
 
-You will need Docker installed to be able to start / stop the databases.
+You will need Docker and Docker Compose installed to be able to start / stop the databases.
 
 When stopping the databases, it will reset their contents.
 

babel.config.json

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": { "esmodules": true } } ]
-  ],
-  "comments": false,
-  "overrides": [
-    {
-      "test": [ "./src/server/pages/**" ],
-      "presets": [ "preact" ]
-    }
-  ]
-}

components/access-denied.js

@@ -0,0 +1,16 @@
+import { signIn } from 'next-auth/client'
+
+export default function AccessDenied () {
+  return (
+    <>
+      <h1>Access Denied</h1>
+      <p>
+        <a href="/api/auth/signin"
+           onClick={(e) => {
+           e.preventDefault()
+           signIn()
+        }}>You must be signed in to view this page</a>
+      </p>
+    </>
+  )
+}

components/footer.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import styles from './footer.module.css'
+import { version } from 'package.json'
+
+export default function Footer () {
+  return (
+    <footer className={styles.footer}>
+      <hr />
+      <ul className={styles.navItems}>
+        <li className={styles.navItem}><a href='https://next-auth.js.org'>Documentation</a></li>
+        <li className={styles.navItem}><a href='https://www.npmjs.com/package/next-auth'>NPM</a></li>
+        <li className={styles.navItem}><a href='https://github.com/nextauthjs/next-auth-example'>GitHub</a></li>
+        <li className={styles.navItem}><Link href='/policy'><a>Policy</a></Link></li>
+        <li className={styles.navItem}><em>{version}</em></li>
+      </ul>
+    </footer>
+  )
+}

components/footer.module.css

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

components/header.js

@@ -0,0 +1,103 @@
+import Link from 'next/link'
+import { signIn, signOut, useSession } from 'next-auth/client'
+import * as client from 'next-auth/client'
+import styles from './header.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.
+export default function Header () {
+  const [session, loading] = useSession()
+
+  return (
+    <header>
+      <noscript>
+        <style>{'.nojs-show { opacity: 1; top: 0; }'}</style>
+      </noscript>
+      <div className={styles.signedInStatus}>
+        <p
+          className={`nojs-show ${
+            !session && loading ? styles.loading : styles.loaded
+          }`}
+        >
+          {!session && (
+            <>
+              <span className={styles.notSignedInText}>
+                You are not signed in
+              </span>
+              <a
+                href="/api/auth/signin"
+                className={styles.buttonPrimary}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signIn('github')
+                }}
+              >
+                Sign in
+              </a>
+            </>
+          )}
+          {session && (
+            <>
+              {session.user.image && (
+                <span
+                  style={{ backgroundImage: `url(${session.user.image})` }}
+                  className={styles.avatar}
+                />
+              )}
+              <span className={styles.signedInText}>
+                <small>Signed in as</small>
+                <br />
+                <strong>{session.user.email || session.user.name}</strong>
+              </span>
+              <a
+                href="/api/auth/signout"
+                className={styles.button}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signOut()
+                }}
+              >
+                Sign out
+              </a>
+            </>
+          )}
+        </p>
+      </div>
+      <nav>
+        <ul className={styles.navItems}>
+          <li className={styles.navItem}>
+            <Link href='/'>
+              <a>Home</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href='/client'>
+              <a>Client</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href='/server'>
+              <a>Server</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href='/protected'>
+              <a>Protected</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href='/protected-ssr'>
+              <a>Protected(SSR)</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href='/api-example'>
+              <a>API</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}

components/header.module.css

@@ -0,0 +1,92 @@
+/* Set min-height to avoid page reflow while session loading */
+.signedInStatus {
+  display: block;
+  min-height: 4rem;
+  width: 100%;
+}
+
+.loading,
+.loaded {
+  position: relative;
+  top: 0;
+  opacity: 1;
+  overflow: hidden;
+  border-radius: 0 0 .6rem .6rem;
+  padding: .6rem 1rem;
+  margin: 0;
+  background-color: rgba(0,0,0,.05);
+  transition: all 0.2s ease-in;
+}
+
+.loading {
+  top: -2rem;
+  opacity: 0;
+}
+
+.signedInText,
+.notSignedInText {
+  position: absolute;
+  padding-top: .8rem;
+  left: 1rem;
+  right: 6.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inherit;  
+  z-index: 1;
+  line-height: 1.3rem;
+}
+
+.signedInText {
+  padding-top: 0rem;
+  left: 4.6rem;
+}
+
+.avatar {
+  border-radius: 2rem;
+  float: left;
+  height: 2.8rem;
+  width: 2.8rem;
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.button,
+.buttonPrimary {
+  float: right;
+  margin-right: -.4rem;
+  font-weight: 500;
+  border-radius: .3rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.4rem;
+  padding: .7rem .8rem;
+  position: relative;
+  z-index: 10;
+  background-color: transparent;
+  color: #555;
+}
+
+.buttonPrimary {
+  background-color: #346df1;
+  border-color: #346df1;
+  color: #fff;
+  text-decoration: none;
+  padding: .7rem 1.4rem;
+}
+
+.buttonPrimary:hover {
+  box-shadow: inset 0 0 5rem rgba(0,0,0,0.2)
+}
+
+.navItems {
+  margin-bottom: 2rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

components/layout.js

@@ -0,0 +1,14 @@
+import Header from 'components/header'
+import Footer from 'components/footer'
+
+export default function Layout ({ children }) {
+  return (
+    <>
+      <Header />
+      <main>
+        {children}
+      </main>
+      <Footer />
+    </>
+  )
+}

config/babel.config.json

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "esmodules": true } }]
+  ],
+  "comments": false,
+  "overrides": [
+    {
+      "test": ["../src/server/pages/**"],
+      "presets": ["preact"]
+    }
+  ]
+}

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "next-auth/*": ["./src/*"],
+      "next-auth": ["./src"]
+    }
+  }
+}

package.json

@@ -8,11 +8,12 @@
   "main": "index.js",
   "scripts": {
     "build": "npm run build:js && npm run build:css",
-    "build:js": "babel src --out-dir dist",
-    "build:css": "postcss src/**/*.css --base src --dir dist && node scripts/wrap-css.js",
+    "build:js": "babel --config-file ./config/babel.config.json src --out-dir dist",
+    "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir dist && node config/wrap-css.js",
+    "dev": "next | npm run watch:css",
     "watch": "npm run watch:js | npm run watch:css",
-    "watch:js": "babel --watch src --out-dir dist",
-    "watch:css": "postcss --watch src/**/*.css --base src --dir dist",
+    "watch:js": "babel --config-file ./config/babel.config.json --watch src --out-dir dist",
+    "watch:css": "postcss --config config/postcss.config.js --watch src/**/*.css --base src --dir dist",
     "test:app:start": "docker-compose -f test/docker/app.yml up -d",
     "test:app:rebuild": "npm run build && docker-compose -f test/docker/app.yml up -d --build",
     "test:app:stop": "docker-compose -f test/docker/app.yml down",
@@ -83,17 +84,22 @@
     "mongodb": "^3.5.9",
     "mssql": "^6.2.1",
     "mysql": "^2.18.1",
+    "next": "^10.0.5",
     "pg": "^8.2.1",
     "postcss-cli": "^7.1.1",
     "postcss-nested": "^4.2.1",
     "puppeteer": "^5.2.1",
     "puppeteer-extra": "^3.1.15",
     "puppeteer-extra-plugin-stealth": "^2.6.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "standard": "^16.0.3"
   },
   "standard": {
     "ignore": [
-      "test/"
+      "test/",
+      "pages/",
+      "components/"
     ]
   }
 }

pages/_app.js

@@ -0,0 +1,31 @@
+import { Provider } from 'next-auth/client'
+import './styles.css'
+
+// Use the <Provider> to improve performance and allow components that call
+// `useSession()` anywhere in your application to access the `session` object.
+export default function App ({ Component, pageProps }) {
+  return (
+    <Provider
+      // Provider options are not required but can be useful in situations where
+      // you have a short session maxAge time. Shown here with default values.
+      options={{
+        // Client Max Age controls how often the useSession in the client should
+        // contact the server to sync the session state. Value in seconds.
+        // e.g.
+        // * 0  - Disabled (always use cache value)
+        // * 60 - Sync session state with server if it's older than 60 seconds
+        clientMaxAge: 0,
+        // Keep Alive tells windows / tabs that are signed in to keep sending
+        // a keep alive request (which extends the current session expiry) to
+        // prevent sessions in open windows from expiring. Value in seconds.
+        //
+        // Note: If a session has expired when keep alive is triggered, all open
+        // windows / tabs will be updated to reflect the user is signed out.
+        keepAlive: 0
+      }}
+      session={pageProps.session}
+    >
+      <Component {...pageProps} />
+    </Provider>
+  )
+}

pages/api-example.js

@@ -0,0 +1,17 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>API Example</h1>
+      <p>The examples below show responses from the example API endpoints.</p>
+      <p><em>You must be signed in to see responses.</em></p>
+      <h2>Session</h2>
+      <p>/api/examples/session</p>
+      <iframe src="/api/examples/session"/>
+      <h2>JSON Web Token</h2>
+      <p>/api/examples/jwt</p>
+      <iframe src="/api/examples/jwt"/>
+    </Layout>
+  )
+}

pages/api/auth/[...nextauth].js

@@ -0,0 +1,83 @@
+// @ts-check
+import NextAuth from "next-auth"
+import Providers from "next-auth/providers"
+
+export default NextAuth({
+  // https://next-auth.js.org/configuration/providers
+  providers: [
+    Providers.GitHub({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+  ],
+  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
+  // https://next-auth.js.org/configuration/databases
+  //
+  // Notes:
+  // * You must to install an appropriate node_module for your database
+  // * The Email provider requires a database (OAuth providers do not)
+
+  // The secret should be set to a reasonably long random string.
+  // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
+  // a separate secret is defined explicitly for encrypting the JWT.
+
+  session: {
+    // Use JSON Web Tokens for session instead of database sessions.
+    // This option can be used with or without a database for users/accounts.
+    // Note: `jwt` is automatically set to `true` if no database is specified.
+    jwt: true,
+
+    // Seconds - How long until an idle session expires and is no longer valid.
+    // maxAge: 30 * 24 * 60 * 60, // 30 days
+
+    // Seconds - Throttle how frequently to write to database to extend a session.
+    // Use it to limit write operations. Set to 0 to always update the database.
+    // Note: This option is ignored if using JSON Web Tokens
+    // updateAge: 24 * 60 * 60, // 24 hours
+  },
+
+  // JSON Web tokens are only used for sessions if the `jwt: true` session
+  // option is set - or by default if no database is specified.
+  // https://next-auth.js.org/configuration/options#jwt
+  jwt: {
+    encryption: true,
+    secret: process.env.SECRET,
+    // A secret to use for key generation (you should set this explicitly)
+    // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
+    // Set to true to use encryption (default: false)
+    // encryption: true,
+    // You can define your own encode/decode functions for signing and encryption
+    // if you want to override the default behaviour.
+    // encode: async ({ secret, token, maxAge }) => {},
+    // decode: async ({ secret, token, maxAge }) => {},
+  },
+
+  // You can define custom pages to override the built-in pages.
+  // The routes shown here are the default URLs that will be used when a custom
+  // pages is not specified for that route.
+  // https://next-auth.js.org/configuration/pages
+  pages: {
+    // signIn: '/api/auth/signin',  // Displays signin buttons
+    // signOut: '/api/auth/signout', // Displays form with sign out button
+    // error: '/api/auth/error', // Error code passed in query string as ?error=
+    // verifyRequest: '/api/auth/verify-request', // Used for check email page
+    // newUser: null // If set, new users will be directed here on first sign in
+  },
+
+  // Callbacks are asynchronous functions you can use to control what happens
+  // when an action is performed.
+  // https://next-auth.js.org/configuration/callbacks
+  callbacks: {
+    // signIn: async (user, account, profile) => { return Promise.resolve(true) },
+    // redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
+    // session: async (session, user) => { return Promise.resolve(session) },
+    // jwt: async (token, user, account, profile, isNewUser) => { return Promise.resolve(token) }
+  },
+
+  // Events are useful for logging
+  // https://next-auth.js.org/configuration/events
+  events: {},
+
+  // Enable debug messages in the console if you are having problems
+  debug: false,
+})

pages/api/examples/jwt.js

@@ -0,0 +1,9 @@
+// This is an example of how to read a JSON Web Token from an API route
+import jwt from "next-auth/jwt"
+
+const secret = process.env.SECRET
+
+export default async (req, res) => {
+  const token = await jwt.getToken({ req, secret, encryption: true })
+  res.send(JSON.stringify(token, null, 2))
+}

pages/api/examples/protected.js

@@ -0,0 +1,12 @@
+// This is an example of to protect an API route
+import { getSession } from 'next-auth/client'
+
+export default async (req, res) => {
+  const session = await getSession({ req })
+
+  if (session) {
+    res.send({ content: 'This is protected content. You can access this content because you are signed in.' })
+  } else {
+    res.send({ error: 'You must be sign in to view the protected content on this page.' })
+  }
+}

pages/api/examples/session.js

@@ -0,0 +1,7 @@
+// This is an example of how to access a session from an API route
+import { getSession } from 'next-auth/client'
+
+export default async (req, res) => {
+  const session = await getSession({ req })
+  res.send(JSON.stringify(session, null, 2))
+}

pages/client.js

@@ -0,0 +1,22 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>Client Side Rendering</h1>
+      <p>
+        This page uses the <strong>useSession()</strong> React Hook in the <strong>&lt;/Header&gt;</strong> component.
+      </p>
+      <p>
+        The <strong>useSession()</strong> React Hook easy to use and allows pages to render very quickly.
+      </p>
+      <p>
+        The advantage of this approach is that session state is shared between pages by using the <strong>Provider</strong> in <strong>_app.js</strong> so
+        that navigation between pages using <strong>useSession()</strong> is very fast.
+      </p>
+      <p>
+        The disadvantage of <strong>useSession()</strong> is that it requires client side JavaScript.
+      </p>
+    </Layout>
+  )
+}

pages/index.js

@@ -0,0 +1,12 @@
+import Layout from 'components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>NextAuth.js Example</h1>
+      <p>
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
+      </p>
+    </Layout>
+  )
+}

pages/policy.js

@@ -0,0 +1,30 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <p>
+        This is an example site to demonstrate how to use <a href={`https://next-auth.js.org`}>NextAuth.js</a> for authentication.
+      </p>
+      <h2>Terms of Service</h2>
+      <p>
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+      </p>
+      <h2>Privacy Policy</h2>
+      <p>
+        This site uses JSON Web Tokens and an in-memory database which resets every ~2 hours.
+      </p>
+      <p>
+        Data provided to this site is exclusively used to support signing in
+        and is not passed to any third party services, other than via SMTP or OAuth for the
+        purposes of authentication.
+      </p>
+    </Layout>
+  )
+}

pages/protected-ssr.js

@@ -0,0 +1,37 @@
+// This is an example of how to protect content using server rendering
+import { getSession } from 'next-auth/client'
+import Layout from '../components/layout'
+import AccessDenied from '../components/access-denied'
+
+export default function Page ({ content, session }) {
+  // If no session exists, display access denied message
+  if (!session) { return  <Layout><AccessDenied/></Layout> }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p><strong>{content}</strong></p>
+    </Layout>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const session = await getSession(context)
+  let content = null
+
+  if (session) {
+    const hostname = process.env.NEXTAUTH_URL || 'http://localhost:3000'
+    const options = { headers: { cookie: context.req.headers.cookie } }
+    const res = await fetch(`${hostname}/api/examples/protected`, options)
+    const json = await res.json()
+    if (json.content) { content = json.content }
+  }
+
+  return {
+    props: {
+      session,
+      content
+    }
+  }
+}

pages/protected.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react'
+import { useSession } from 'next-auth/client'
+import Layout from '../components/layout'
+import AccessDenied from '../components/access-denied'
+
+export default function Page () {
+  const [ session, loading ] = useSession()
+  const [ content , setContent ] = useState()
+
+  // Fetch content from protected route
+  useEffect(()=>{
+    const fetchData = async () => {
+      const res = await fetch('/api/examples/protected')
+      const json = await res.json()
+      if (json.content) { setContent(json.content) }
+    }
+    fetchData()
+  },[session])
+
+  // When rendering client side don't display anything until loading is complete
+  if (typeof window !== 'undefined' && loading) return null
+
+  // If no session exists, display access denied message
+  if (!session) { return  <Layout><AccessDenied/></Layout> }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p><strong>{content}</strong></p>
+    </Layout>
+  )
+}

pages/server.js

@@ -0,0 +1,38 @@
+import { useSession, getSession } from 'next-auth/client'
+import Layout from '../components/layout'
+
+export default function Page () {
+  // As this page uses Server Side Rendering, the `session` will be already
+  // populated on render without needing to go through a loading stage.
+  // This is possible because of the shared context configured in `_app.js` that
+  // is used by `useSession()`.
+  const [ session, loading ] = useSession()
+
+  return (
+    <Layout>
+      <h1>Server Side Rendering</h1>
+      <p>
+        This page uses the universal <strong>getSession()</strong> method in <strong>getServerSideProps()</strong>.
+      </p>
+      <p>
+        Using <strong>getSession()</strong> in <strong>getServerSideProps()</strong> is the recommended approach if you need to
+        support Server Side Rendering with authentication.
+      </p>
+      <p>
+        The advantage of Server Side Rendering is this page does not require client side JavaScript.
+      </p>
+      <p>
+        The disadvantage of Server Side Rendering is that this page is slower to render.
+      </p>
+    </Layout>
+  )
+}
+
+// Export the `session` prop to use sessions with Server Side Rendering
+export async function getServerSideProps(context) {
+  return {
+    props: {
+      session: await getSession(context)
+    }
+  }
+}

pages/styles.css

@@ -0,0 +1,30 @@
+body {
+  font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  padding: 0 1rem 1rem 1rem;
+  max-width: 680px;
+  margin: 0 auto;
+  background: #fff;
+  color: #333;
+}
+
+li,
+p {
+  line-height: 1.5rem;
+}
+
+a {
+  font-weight: 500;
+}
+
+hr {
+  border: 1px solid #ddd;
+}
+
+iframe {
+  background: #ccc;
+  border: 1px solid #ccc;
+  height: 10rem;
+  width: 100%;
+  border-radius: .5rem;
+  filter: invert(1);
+}

src/client/index.js

@@ -142,7 +142,7 @@ const getProviders = async () => {
 const SessionContext = createContext()
 
 // Client side method
-const useSession = (session) => {
+export const useSession = (session) => {
   // Try to use context if we can
   const value = useContext(SessionContext)
 
@@ -223,13 +223,13 @@ const _useSessionHook = (session) => {
 }
 
 // Client side method
-const signIn = async (provider, args = {}) => {
+export const signIn = async (provider, args = {}) => {
   const baseUrl = _apiBaseUrl()
-  const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
+  const callbackUrl = args.callbackUrl ?? window.location
   const providers = await getProviders()
 
   // Redirect to sign in page if no valid provider specified
-  if (!provider || !providers[provider]) {
+  if (!(provider in providers)) {
     // If Provider not recognized, redirect to sign in page
     window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
   } else {
@@ -253,13 +253,13 @@ const signIn = async (provider, args = {}) => {
     }
     const res = await fetch(signInUrl, fetchOptions)
     const data = await res.json()
-    window.location = data.url ? data.url : callbackUrl
+    window.location = data.url ?? callbackUrl
   }
 }
 
 // Client side method
-const signOut = async (args = {}) => {
-  const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
+export const signOut = async (args = {}) => {
+  const callbackUrl = args.callbackUrl ?? window.location
 
   const baseUrl = _apiBaseUrl()
   const fetchOptions = {
@@ -276,11 +276,11 @@ const signOut = async (args = {}) => {
   const res = await fetch(`${baseUrl}/signout`, fetchOptions)
   const data = await res.json()
   _sendMessage({ event: 'session', data: { trigger: 'signout' } })
-  window.location = data.url ? data.url : callbackUrl
+  window.location = data.url ?? callbackUrl
 }
 
 // Provider to wrap the app in to make session data available globally
-const Provider = ({ children, session, options }) => {
+export const Provider = ({ children, session, options }) => {
   setOptions(options)
   return createElement(SessionContext.Provider, { value: useSession(session) }, children)
 }

src/css/index.css

@@ -46,7 +46,7 @@ input[type] {
   background: var(--color-background);
   font-size: 1rem;
   border-radius: var(--border-radius);
-  box-shadow: inset 0 .1rem .2rem rgba(0,0,0,.2);
+  box-shadow: inset 0 .1rem .2rem rgba(0, 0, 0, .2);
 
   &:focus {
     box-shadow: none;
@@ -63,6 +63,7 @@ p {
 a.button {
   text-decoration: none;
   line-height: 1rem;
+
   &:link,
   &:visited {
     background-color: var(--color-background);
@@ -79,17 +80,17 @@ a.button {
   background-color: var(--color-background);
   font-size: 1rem;
   border-radius: var(--border-radius);
-  transition: all .1s ease-in-out;  
-  box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,.15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0,0,0,.05);
+  transition: all .1s ease-in-out;
+  box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, .15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0, 0, 0, .05);
   font-weight: 500;
   position: relative;
 
   &:hover {
     cursor: pointer;
   }
-  
+
   &:active {
-    box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,.15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0,0,0,.1);
+    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, .15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0, 0, 0, .1);
     background-color: var(--color-button-active-background);
     border-color: var(--color-button-active-border);
     cursor: pointer;
@@ -101,20 +102,21 @@ a.site {
   text-decoration: none;
   font-size: 1rem;
   line-height: 2rem;
+
   &:hover {
     text-decoration: underline;
   }
 }
 
 .page {
-  position: absolute; 
-	width: 100%;
+  position: absolute;
+  width: 100%;
   height: 100%;
   display: table;
   margin: 0;
   padding: 0;
 
-  > div {
+  >div {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
@@ -129,12 +131,14 @@ a.site {
     padding-right: 2rem;
     margin-top: .5rem;
   }
+
   .message {
     margin-bottom: 1.5rem;
   }
 }
 
 .signin {
+
   button,
   a.button,
   input[type="text"] {
@@ -166,6 +170,7 @@ a.site {
     border-radius: 0.3rem;
     background: var(--color-info);
     color: #fff;
+
     p {
       text-align: left;
       padding: 0.5rem 1rem;
@@ -174,16 +179,19 @@ a.site {
     }
   }
 
-  > div,
+  >div,
   form {
     display: block;
     margin: 0 auto 0.5rem auto;
+
     input[type] {
       margin-bottom: 0.5rem;
     }
+
     button {
       width: 100%;
     }
+
     max-width: 300px;
   }
 }

src/css/index.js

@@ -4,7 +4,8 @@
 import fs from 'fs'
 import path from 'path'
 
-const pathToCss = path.join(__dirname, '/index.css')
-const css = fs.readFileSync(pathToCss, 'utf8')
+const pathToCss = path.join(process.cwd(), '/dist/css/index.css')
 
-export default () => css
+export default function css () {
+  return fs.readFileSync(pathToCss, 'utf8')
+}

src/index.js

@@ -0,0 +1 @@
+export { default } from './server'