diff --git a/.gitignore b/.gitignore
index c9c23d890a..0a945f3d2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,9 @@ yarn-debug.log*
 yarn-error.log*
 
 # Docusaurus
-www/build
\ No newline at end of file
+www/build
+
+#VS
+/.vs/slnx.sqlite-journal
+/.vs/slnx.sqlite
+/.vs
diff --git a/package-lock.json b/package-lock.json
index cf0e8f80e7..8a1c8345b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "next-auth",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 2dcfb83187..068583fd0c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-auth",
-  "version": "2.2.0",
+  "version": "3.0.0-beta.18",
   "description": "An authentication library for Next.js",
   "repository": "https://github.com/iaincollins/next-auth.git",
   "author": "Iain Collins <me@iaincollins.com>",
diff --git a/src/adapters/index.js b/src/adapters/index.js
index 6b7e0c304d..38cbe0b109 100644
--- a/src/adapters/index.js
+++ b/src/adapters/index.js
@@ -1,6 +1,8 @@
 import TypeORM from './typeorm'
+import Prisma from './prisma'
 
 export default {
   Default: TypeORM.Adapter,
-  TypeORM
+  TypeORM,
+  Prisma
 }
diff --git a/src/adapters/prisma/index.js b/src/adapters/prisma/index.js
new file mode 100644
index 0000000000..769c01a783
--- /dev/null
+++ b/src/adapters/prisma/index.js
@@ -0,0 +1,331 @@
+import { createHash } from 'crypto'
+
+import { CreateUserError } from '../../lib/errors'
+import logger from '../../lib/logger'
+
+const Adapter = (prismaConfig, options = {}) => {
+  const {
+    prisma, modelMapping = {
+      User: 'user',
+      Account: 'account',
+      Session: 'session',
+      VerificationRequest: 'verificationRequest'
+    }
+  } = prismaConfig
+
+  const { User, Account, Session, VerificationRequest } = modelMapping
+
+  async function getAdapter (appOptions) {
+    function debugMessage (debugCode, ...args) {
+      if (appOptions && appOptions.debug) {
+        logger.debug(`PRISMA_${debugCode}`, ...args)
+      }
+    }
+
+    if (appOptions && (!appOptions.session || !appOptions.session.maxAge)) {
+      debugMessage('GET_ADAPTER', 'Session expiry not configured (defaulting to 30 days')
+    }
+    const defaultSessionMaxAge = 30 * 24 * 60 * 60 * 1000
+    const sessionMaxAge = (appOptions && appOptions.session && appOptions.session.maxAge)
+      ? appOptions.session.maxAge * 1000
+      : defaultSessionMaxAge
+    const sessionUpdateAge = (appOptions && appOptions.session && appOptions.session.updateAge)
+      ? appOptions.session.updateAge * 1000
+      : 0
+
+    async function createUser (profile) {
+      debugMessage('CREATE_USER', profile)
+      try {
+        return prisma[User].create({
+          data: {
+            name: profile.name,
+            email: profile.email,
+            image: profile.image,
+            emailVerified: profile.emailVerified &&
+            Object.prototype.toString.call(profile.emailVerified) === '[object Date]'
+              ? profile.emailVerified.toISOString()
+              : null
+          }
+        })
+      } catch (error) {
+        logger.error('CREATE_USER_ERROR', error)
+        return Promise.reject(new CreateUserError(error))
+      }
+    }
+
+    async function getUser (id) {
+      debugMessage('GET_USER', id)
+      try {
+        return prisma[User].findOne({ where: { id } })
+      } catch (error) {
+        logger.error('GET_USER_BY_ID_ERROR', error)
+        return Promise.reject(new Error('GET_USER_BY_ID_ERROR', error))
+      }
+    }
+
+    async function getUserByEmail (email) {
+      debugMessage('GET_USER_BY_EMAIL', email)
+      try {
+        if (!email) { return Promise.resolve(null) }
+        return prisma[User].findOne({ where: { email } })
+      } catch (error) {
+        logger.error('GET_USER_BY_EMAIL_ERROR', error)
+        return Promise.reject(new Error('GET_USER_BY_EMAIL_ERROR', error))
+      }
+    }
+
+    async function getUserByProviderAccountId (providerId, providerAccountId) {
+      debugMessage('GET_USER_BY_PROVIDER_ACCOUNT_ID', providerId, providerAccountId)
+      try {
+        return prisma[Account].findOne({ where: { providerAccountId: `${providerAccountId}` } })[User]()
+      } catch (error) {
+        logger.error('GET_USER_BY_PROVIDER_ACCOUNT_ID_ERROR', error)
+        return Promise.reject(new Error('GET_USER_BY_PROVIDER_ACCOUNT_ID_ERROR', error))
+      }
+    }
+
+    async function updateUser (user) {
+      debugMessage('UPDATE_USER', user)
+      try {
+        const { id, ...rest } = user
+        return prisma[User].update({ where: { id }, data: rest })
+      } catch (error) {
+        logger.error('UPDATE_USER_ERROR', error)
+        return Promise.reject(new Error('UPDATE_USER_ERROR', error))
+      }
+    }
+
+    async function deleteUser (userId) {
+      debugMessage('DELETE_USER', userId)
+      try {
+        return prisma[User].delete({ where: { id: userId } })
+      } catch (error) {
+        logger.error('DELETE_USER_ERROR', error)
+        return Promise.reject(new Error('DELETE_USER_ERROR', error))
+      }
+    }
+
+    async function linkAccount (userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires) {
+      debugMessage('LINK_ACCOUNT', userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires)
+      try {
+        return prisma[Account].create({
+          data: {
+            accessToken,
+            refreshToken,
+            compoundId: createHash('sha256').update(`${providerId}:${providerAccountId}`).digest('hex'),
+            providerAccountId: `${providerAccountId}`,
+            providerId,
+            providerType,
+            accessTokenExpires,
+            [User]: {
+              connect: {
+                id: userId
+              }
+            }
+          }
+        })
+      } catch (error) {
+        logger.error('LINK_ACCOUNT_ERROR', error)
+        return Promise.reject(new Error('LINK_ACCOUNT_ERROR', error))
+      }
+    }
+
+    async function unlinkAccount (userId, providerId, providerAccountId) {
+      debugMessage('UNLINK_ACCOUNT', userId, providerId, providerAccountId)
+      try {
+        return prisma[Account].delete({ where: { providerAccountId: `${providerAccountId}` } })
+      } catch (error) {
+        logger.error('UNLINK_ACCOUNT_ERROR', error)
+        return Promise.reject(new Error('UNLINK_ACCOUNT_ERROR', error))
+      }
+    }
+
+    async function createSession (user) {
+      debugMessage('CREATE_SESSION', user)
+      try {
+        let expires = null
+        if (sessionMaxAge) {
+          const dateExpires = new Date()
+          dateExpires.setTime(dateExpires.getTime() + sessionMaxAge)
+          expires = dateExpires.toISOString()
+        }
+
+        return prisma[Session].create({
+          data: {
+            expires,
+            [User]: {
+              connect: {
+                id: user.id
+              }
+            }
+          }
+        })
+      } catch (error) {
+        logger.error('CREATE_SESSION_ERROR', error)
+        return Promise.reject(new Error('CREATE_SESSION_ERROR', error))
+      }
+    }
+
+    async function getSession (sessionToken) {
+      debugMessage('GET_SESSION', sessionToken)
+      try {
+        const session = await prisma[Session].findOne({ where: { sessionToken } })
+
+        // Check session has not expired (do not return it if it has)
+        if (session && session.expires && new Date() > session.expires) {
+          await prisma[Session].delete({ where: { sessionToken } })
+          return null
+        }
+
+        return session
+      } catch (error) {
+        logger.error('GET_SESSION_ERROR', error)
+        return Promise.reject(new Error('GET_SESSION_ERROR', error))
+      }
+    }
+
+    async function updateSession (session, force) {
+      debugMessage('UPDATE_SESSION', session)
+      try {
+        if (sessionMaxAge && (sessionUpdateAge || sessionUpdateAge === 0) && session.expires) {
+          // Calculate last updated date, to throttle write updates to database
+          // Formula: ({expiry date} - sessionMaxAge) + sessionUpdateAge
+          //     e.g. ({expiry date} - 30 days) + 1 hour
+          //
+          // Default for sessionMaxAge is 30 days.
+          // Default for sessionUpdateAge is 1 hour.
+          const dateSessionIsDueToBeUpdated = new Date(session.expires)
+          dateSessionIsDueToBeUpdated.setTime(dateSessionIsDueToBeUpdated.getTime() - sessionMaxAge)
+          dateSessionIsDueToBeUpdated.setTime(dateSessionIsDueToBeUpdated.getTime() + sessionUpdateAge)
+
+          // Trigger update of session expiry date and write to database, only
+          // if the session was last updated more than {sessionUpdateAge} ago
+          if (new Date() > dateSessionIsDueToBeUpdated) {
+            const newExpiryDate = new Date()
+            newExpiryDate.setTime(newExpiryDate.getTime() + sessionMaxAge)
+            session.expires = newExpiryDate
+          } else if (!force) {
+            return null
+          }
+        } else {
+          // If session MaxAge, session UpdateAge or session.expires are
+          // missing then don't even try to save changes, unless force is set.
+          if (!force) { return null }
+        }
+
+        const { id, ...rest } = session
+        return prisma[Session].update({ where: { id }, data: rest })
+      } catch (error) {
+        logger.error('UPDATE_SESSION_ERROR', error)
+        return Promise.reject(new Error('UPDATE_SESSION_ERROR', error))
+      }
+    }
+
+    async function deleteSession (sessionToken) {
+      debugMessage('DELETE_SESSION', sessionToken)
+      try {
+        return prisma[Session].delete({ where: { sessionToken } })
+      } catch (error) {
+        logger.error('DELETE_SESSION_ERROR', error)
+        return Promise.reject(new Error('DELETE_SESSION_ERROR', error))
+      }
+    }
+
+    async function createVerificationRequest (identifier, url, token, secret, provider) {
+      debugMessage('CREATE_VERIFICATION_REQUEST', identifier)
+      try {
+        const { baseUrl } = appOptions
+        const { sendVerificationRequest, maxAge } = provider
+
+        // Store hashed token (using secret as salt) so that tokens cannot be exploited
+        // even if the contents of the database is compromised.
+        // @TODO Use bcrypt function here instead of simple salted hash
+        const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
+
+        let expires = null
+        if (maxAge) {
+          const dateExpires = new Date()
+          dateExpires.setTime(dateExpires.getTime() + (maxAge * 1000))
+          expires = dateExpires.toISOString()
+        }
+
+        // Save to database
+        const verificationRequest = await prisma[VerificationRequest].create({
+          data: {
+            identifier,
+            token: hashedToken,
+            expires
+          }
+        })
+
+        // With the verificationCallback on a provider, you can send an email, or queue
+        // an email to be sent, or perform some other action (e.g. send a text message)
+        await sendVerificationRequest({ identifier, url, token, baseUrl, provider })
+
+        return verificationRequest
+      } catch (error) {
+        logger.error('CREATE_VERIFICATION_REQUEST_ERROR', error)
+        return Promise.reject(new Error('CREATE_VERIFICATION_REQUEST_ERROR', error))
+      }
+    }
+
+    async function getVerificationRequest (identifier, token, secret, provider) {
+      debugMessage('GET_VERIFICATION_REQUEST', identifier, token)
+      try {
+        // Hash token provided with secret before trying to match it with database
+        // @TODO Use bcrypt instead of salted SHA-256 hash for token
+        const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
+        const verificationRequest = await prisma[VerificationRequest].findOne({ where: { token: hashedToken } })
+
+        if (verificationRequest && verificationRequest.expires && new Date() > verificationRequest.expires) {
+          // Delete verification entry so it cannot be used again
+          await prisma[VerificationRequest].delete({ where: { token: hashedToken } })
+          return null
+        }
+
+        return verificationRequest
+      } catch (error) {
+        logger.error('GET_VERIFICATION_REQUEST_ERROR', error)
+        return Promise.reject(new Error('GET_VERIFICATION_REQUEST_ERROR', error))
+      }
+    }
+
+    async function deleteVerificationRequest (identifier, token, secret, provider) {
+      debugMessage('DELETE_VERIFICATION', identifier, token)
+      try {
+        // Delete verification entry so it cannot be used again
+        const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
+        await prisma[VerificationRequest].delete({ where: { token: hashedToken } })
+      } catch (error) {
+        logger.error('DELETE_VERIFICATION_REQUEST_ERROR', error)
+        return Promise.reject(new Error('DELETE_VERIFICATION_REQUEST_ERROR', error))
+      }
+    }
+
+    return Promise.resolve({
+      createUser,
+      getUser,
+      getUserByEmail,
+      getUserByProviderAccountId,
+      updateUser,
+      deleteUser,
+      linkAccount,
+      unlinkAccount,
+      createSession,
+      getSession,
+      updateSession,
+      deleteSession,
+      createVerificationRequest,
+      getVerificationRequest,
+      deleteVerificationRequest
+    })
+  }
+
+  return {
+    getAdapter
+  }
+}
+
+export default {
+  Adapter
+}
diff --git a/src/adapters/typeorm/index.js b/src/adapters/typeorm/index.js
index 8030fc0176..b57d0f7546 100644
--- a/src/adapters/typeorm/index.js
+++ b/src/adapters/typeorm/index.js
@@ -193,6 +193,30 @@ const Adapter = (typeOrmConfig, options = {}) => {
       return false
     }
 
+    async function getAccounts (userId) {
+      debugMessage('GET_ACCOUNTS', userId)
+      try {
+        const accounts = await connection.getRepository(Account).find({ userId })
+        if (!accounts) { return null }
+        return accounts
+      } catch (error) {
+        logger.error('GET_ACCOUNTS_ERROR', error)
+        return Promise.reject(new Error('GET_ACCOUNTS_ERROR', error))
+      }
+    }
+
+    async function getAccount (userId, providerId) {
+      debugMessage('GET_ACCOUNT', userId)
+      try {
+        const account = await connection.getRepository(Account).findOne({ userId, providerType: 'oauth', providerId })
+        if (!account) { return null }
+        return account
+      } catch (error) {
+        logger.error('GET_ACCOUNT_ERROR', error)
+        return Promise.reject(new Error('GET_ACCOUNT_ERROR', error))
+      }
+    }
+
     async function createSession (user) {
       debugMessage('CREATE_SESSION', user)
       try {
@@ -279,7 +303,7 @@ const Adapter = (typeOrmConfig, options = {}) => {
     async function createVerificationRequest (identifier, url, token, secret, provider) {
       debugMessage('CREATE_VERIFICATION_REQUEST', identifier)
       try {
-        const { site } = appOptions
+        const { baseUrl } = appOptions
         const { sendVerificationRequest, maxAge } = provider
 
         // Store hashed token (using secret as salt) so that tokens cannot be exploited
@@ -300,7 +324,7 @@ const Adapter = (typeOrmConfig, options = {}) => {
 
         // With the verificationCallback on a provider, you can send an email, or queue
         // an email to be sent, or perform some other action (e.g. send a text message)
-        await sendVerificationRequest({ identifier, url, token, site, provider })
+        await sendVerificationRequest({ identifier, url, token, baseUrl, provider })
 
         return verificationRequest
       } catch (error) {
@@ -351,6 +375,8 @@ const Adapter = (typeOrmConfig, options = {}) => {
       deleteUser,
       linkAccount,
       unlinkAccount,
+      getAccounts,
+      getAccount,
       createSession,
       getSession,
       updateSession,
diff --git a/src/adapters/typeorm/lib/transform.js b/src/adapters/typeorm/lib/transform.js
index 136c7ac4ae..2b636f4e95 100644
--- a/src/adapters/typeorm/lib/transform.js
+++ b/src/adapters/typeorm/lib/transform.js
@@ -7,40 +7,29 @@ const postgres = (models, options) => {
     options.namingStrategy = new SnakeCaseNamingStrategy()
   }
 
-  // Only transforms models that are not custom models
-  const { models: customModels = {} } = options
-
   // For Postgres we need to use the `timestamp with time zone` type
   // aka `timestamptz` to store timestamps correctly in UTC.
-  if (!customModels.User) {
-    for (const column in models.User.schema.columns) {
-      if (models.User.schema.columns[column].type === 'timestamp') {
-        models.User.schema.columns[column].type = 'timestamptz'
-      }
+  for (const column in models.User.schema.columns) {
+    if (models.User.schema.columns[column].type === 'timestamp') {
+      models.User.schema.columns[column].type = 'timestamptz'
     }
   }
 
-  if (!customModels.Account) {
-    for (const column in models.Account.schema.columns) {
-      if (models.Account.schema.columns[column].type === 'timestamp') {
-        models.Account.schema.columns[column].type = 'timestamptz'
-      }
+  for (const column in models.Account.schema.columns) {
+    if (models.Account.schema.columns[column].type === 'timestamp') {
+      models.Account.schema.columns[column].type = 'timestamptz'
     }
   }
 
-  if (!customModels.Session) {
-    for (const column in models.Session.schema.columns) {
-      if (models.Session.schema.columns[column].type === 'timestamp') {
-        models.Session.schema.columns[column].type = 'timestamptz'
-      }
+  for (const column in models.Session.schema.columns) {
+    if (models.Session.schema.columns[column].type === 'timestamp') {
+      models.Session.schema.columns[column].type = 'timestamptz'
     }
   }
 
-  if (!customModels.VerificationRequest) {
-    for (const column in models.VerificationRequest.schema.columns) {
-      if (models.VerificationRequest.schema.columns[column].type === 'timestamp') {
-        models.VerificationRequest.schema.columns[column].type = 'timestamptz'
-      }
+  for (const column in models.VerificationRequest.schema.columns) {
+    if (models.VerificationRequest.schema.columns[column].type === 'timestamp') {
+      models.VerificationRequest.schema.columns[column].type = 'timestamptz'
     }
   }
 }
@@ -66,44 +55,33 @@ const mongodb = (models, options) => {
   //    Object ID in every property of type Object ID in the result (but the
   //    database will look fine); so use `type: 'objectId'` for them instead.
 
-  // Only transforms models that are not custom models
-  const { models: customModels = {} } = options
-
-  if (!customModels.User) {
-    delete models.User.schema.columns.id.type
-    models.User.schema.columns.id.objectId = true
-
-    // The options `unique: true` and `nullable: true` don't work the same
-    // with MongoDB as they do with SQL databases like MySQL and Postgres,
-    // we also to add sparce to the index. This still doesn't allow multiple
-    // *null* values, but does allow some records to omit the property.
-    delete models.User.schema.columns.email.unique
-    models.User.schema.indices = [
-      {
-        name: 'email',
-        unique: true,
-        sparse: true,
-        columns: ['email']
-      }
-    ]
-  }
+  delete models.User.schema.columns.id.type
+  models.User.schema.columns.id.objectId = true
+
+  // The options `unique: true` and `nullable: true` don't work the same
+  // with MongoDB as they do with SQL databases like MySQL and Postgres,
+  // we also to add sparce to the index. This still doesn't allow multiple
+  // *null* values, but does allow some records to omit the property.
+  delete models.User.schema.columns.email.unique
+  models.User.schema.indices = [
+    {
+      name: 'email',
+      unique: true,
+      sparse: true,
+      columns: ['email']
+    }
+  ]
 
-  if (!customModels.Account) {
-    delete models.Account.schema.columns.id.type
-    models.Account.schema.columns.id.objectId = true
-    models.Account.schema.columns.userId.type = 'objectId'
-  }
+  delete models.Account.schema.columns.id.type
+  models.Account.schema.columns.id.objectId = true
+  models.Account.schema.columns.userId.type = 'objectId'
 
-  if (!customModels.Session) {
-    delete models.Session.schema.columns.id.type
-    models.Session.schema.columns.id.objectId = true
-    models.Session.schema.columns.userId.type = 'objectId'
-  }
+  delete models.Session.schema.columns.id.type
+  models.Session.schema.columns.id.objectId = true
+  models.Session.schema.columns.userId.type = 'objectId'
 
-  if (!customModels.VerificationRequest) {
-    delete models.VerificationRequest.schema.columns.id.type
-    models.VerificationRequest.schema.columns.id.objectId = true
-  }
+  delete models.VerificationRequest.schema.columns.id.type
+  models.VerificationRequest.schema.columns.id.objectId = true
 }
 
 const sqlite = (models, options) => {
@@ -112,9 +90,6 @@ const sqlite = (models, options) => {
     options.namingStrategy = new SnakeCaseNamingStrategy()
   }
 
-  // Only transforms models that are not custom models
-  const { models: customModels = {} } = options
-
   // SQLite does not support `timestamp` fields so we remap them to `datetime`
   // in all models.
   //
@@ -123,35 +98,27 @@ const sqlite = (models, options) => {
   //
   // NB: SQLite adds 'create' and 'update' fields to allow rows, but that is
   // specific to SQLite and so we ignore that behaviour.
-  if (!customModels.User) {
-    for (const column in models.User.schema.columns) {
-      if (models.User.schema.columns[column].type === 'timestamp') {
-        models.User.schema.columns[column].type = 'datetime'
-      }
+  for (const column in models.User.schema.columns) {
+    if (models.User.schema.columns[column].type === 'timestamp') {
+      models.User.schema.columns[column].type = 'datetime'
     }
   }
 
-  if (!customModels.Account) {
-    for (const column in models.Account.schema.columns) {
-      if (models.Account.schema.columns[column].type === 'timestamp') {
-        models.Account.schema.columns[column].type = 'datetime'
-      }
+  for (const column in models.Account.schema.columns) {
+    if (models.Account.schema.columns[column].type === 'timestamp') {
+      models.Account.schema.columns[column].type = 'datetime'
     }
   }
 
-  if (!customModels.Session) {
-    for (const column in models.Session.schema.columns) {
-      if (models.Session.schema.columns[column].type === 'timestamp') {
-        models.Session.schema.columns[column].type = 'datetime'
-      }
+  for (const column in models.Session.schema.columns) {
+    if (models.Session.schema.columns[column].type === 'timestamp') {
+      models.Session.schema.columns[column].type = 'datetime'
     }
   }
 
-  if (!customModels.VerificationRequest) {
-    for (const column in models.VerificationRequest.schema.columns) {
-      if (models.VerificationRequest.schema.columns[column].type === 'timestamp') {
-        models.VerificationRequest.schema.columns[column].type = 'datetime'
-      }
+  for (const column in models.VerificationRequest.schema.columns) {
+    if (models.VerificationRequest.schema.columns[column].type === 'timestamp') {
+      models.VerificationRequest.schema.columns[column].type = 'datetime'
     }
   }
 }
diff --git a/src/client/index.js b/src/client/index.js
index 7f149f46cb..e65ba1e083 100644
--- a/src/client/index.js
+++ b/src/client/index.js
@@ -1,176 +1,280 @@
-// fetch() is built in to Next.js 9.4 (you can use a polyfill if using an older version)
+/// Note: fetch() is built in to Next.js 9.4
+//
+// Note about signIn() and signOut() methods:
+//
+// On signIn() and signOut() we pass 'json: true' to request a response in JSON
+// instead of HTTP as redirect URLs on other domains are not returned to
+// requests made using the fetch API in the browser, and we need to ask the API
+// to return the response as a JSON object (the end point still defaults to
+// returning an HTTP response with a redirect for non-JavaScript clients).
+//
+// We use HTTP POST requests with CSRF Tokens to protect against CSRF attacks.
+
 /* global fetch:false */
 import { useState, useEffect, useContext, createContext, createElement } from 'react'
 import logger from '../lib/logger'
+import parseUrl from '../lib/parse-url'
 
+// This behaviour mirrors the default behaviour for getting the site name that
+// happens server side in server/index.js
+// 1. An empty value is legitimate when the code is being invoked client side as
+//    relative URLs are valid in that context and so defaults to empty.
+// 2. When invoked server side the value is picked up from an environment
+//    variable and defaults to 'http://localhost:3000'.
 const __NEXTAUTH = {
-  site: '',
-  basePath: '/api/auth',
-  clientMaxAge: 0 // e.g. 0 == disabled, 60 == 60 seconds
+  baseUrl: parseUrl(process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
+  basePath: parseUrl(process.env.NEXTAUTH_URL).basePath,
+  keepAlive: 0, // 0 == disabled (don't send); 60 == send every 60 seconds
+  clientMaxAge: 0, // 0 == disabled (only use cache); 60 == sync if last checked > 60 seconds ago
+  // Properties starting with _ are used for tracking internal app state
+  _clientLastSync: 0, // used for timestamp since last sycned (in seconds)
+  _clientSyncTimer: null, // stores timer for poll interval
+  _eventListenersAdded: false, // tracks if event listeners have been added,
+  _clientSession: undefined, // stores last session response from hook,
+  // Generate a unique ID to make it possible to identify when a message
+  // was sent from this tab/window so it can be ignored to avoid event loops.
+  _clientId: Math.random().toString(36).substring(2) + Date.now().toString(36),
+  // Used to store to function export by getSession() hook
+  _getSession: () => {}
 }
 
-let __NEXTAUTH_EVENT_LISTENER_ADDED = false
+// Add event listners on load
+if (typeof window !== 'undefined') {
+  if (__NEXTAUTH._eventListenersAdded === false) {
+    __NEXTAUTH._eventListenersAdded = true
+
+    // Listen for storage events and update session if event fired from
+    // another window (but suppress firing another event to avoid a loop)
+    window.addEventListener('storage', async (event) => {
+      if (event.key === 'nextauth.message') {
+        const message = JSON.parse(event.newValue)
+        if (message.event && message.event === 'session' && message.data) {
+          // Ignore storage events fired from the same window that created them
+          if (__NEXTAUTH._clientId === message.clientId) {
+            return
+          }
+
+          // Fetch new session data but pass 'true' to it not to fire an event to
+          // avoid an infinite loop.
+          //
+          // Note: We could pass session data through and do something like
+          // `setData(message.data)` but that can cause problems depending
+          // on how the session object is being used in the client; it is
+          // more robust to have each window/tab fetch it's own copy of the
+          // session object rather than share it across instances.
+          await __NEXTAUTH._getSession({ event: 'storage' })
+        }
+      }
+    })
+
+    // Listen for window focus/blur events
+    window.addEventListener('focus', async (event) => __NEXTAUTH._getSession({ event: 'focus' }))
+    window.addEventListener('blur', async (event) => __NEXTAUTH._getSession({ event: 'blur' }))
+  }
+}
 
 // Method to set options. The documented way is to use the provider, but this
 // method is being left in as an alternative, that will be helpful if/when we
 // expose a vanilla JavaScript version that doesn't depend on React.
 const setOptions = ({
-  site,
+  baseUrl,
   basePath,
-  clientMaxAge
+  clientMaxAge,
+  keepAlive
 } = {}) => {
-  if (site) { __NEXTAUTH.site = site }
+  if (baseUrl) { __NEXTAUTH.baseUrl = baseUrl }
   if (basePath) { __NEXTAUTH.basePath = basePath }
   if (clientMaxAge) { __NEXTAUTH.clientMaxAge = clientMaxAge }
+  if (keepAlive) {
+    __NEXTAUTH.keepAlive = keepAlive
+
+    if (typeof window !== 'undefined' && keepAlive > 0) {
+      // Clear existing timer (if there is one)
+      if (__NEXTAUTH._clientSyncTimer !== null) { clearTimeout(__NEXTAUTH._clientSyncTimer) }
+
+      // Set next timer to trigger in number of seconds
+      __NEXTAUTH._clientSyncTimer = setTimeout(async () => {
+        // Only invoke keepalive when a session exists
+        if (__NEXTAUTH._clientSession) {
+          await __NEXTAUTH._getSession({ event: 'timer' })
+        }
+      }, keepAlive * 1000)
+    }
+  }
 }
 
 // Universal method (client + server)
-const getSession = async ({ req, ctx } = {}) => {
-  if (!req && ctx.req) {
-    req = ctx.req
-  }
+const getSession = async ({ req, ctx, triggerEvent = true } = {}) => {
+  // If passed 'appContext' via getInitialProps() in _app.js then get the req
+  // object from ctx and use that for the req value to allow getSession() to
+  // work seemlessly in getInitialProps() on server side pages *and* in _app.js.
+  if (!req && ctx && ctx.req) { req = ctx.req }
 
-  const baseUrl = _baseUrl()
-  const options = req ? { headers: { cookie: req.headers.cookie } } : {}
-  const session = await _fetchData(`${baseUrl}/session`, options)
-  _sendMessage({ event: 'session', data: { trigger: 'getSession' } })
+  const baseUrl = _apiBaseUrl()
+  const fetchOptions = req ? { headers: { cookie: req.headers.cookie } } : {}
+  const session = await _fetchData(`${baseUrl}/session`, fetchOptions)
+  if (triggerEvent) {
+    _sendMessage({ event: 'session', data: { trigger: 'getSession' } })
+  }
   return session
 }
 
 // Universal method (client + server)
-const getProviders = async () => {
-  const baseUrl = _baseUrl()
-  return _fetchData(`${baseUrl}/providers`)
-}
+const getCsrfToken = async ({ req, ctx } = {}) => {
+  // If passed 'appContext' via getInitialProps() in _app.js then get the req
+  // object from ctx and use that for the req value to allow getCsrfToken() to
+  // work seemlessly in getInitialProps() on server side pages *and* in _app.js.
+  if (!req && ctx && ctx.req) { req = ctx.req }
 
-// Universal method (client + server)
-const getCsrfToken = async () => {
-  const baseUrl = _baseUrl()
-  const data = await _fetchData(`${baseUrl}/csrf`)
+  const baseUrl = _apiBaseUrl()
+  const fetchOptions = req ? { headers: { cookie: req.headers.cookie } } : {}
+  const data = await _fetchData(`${baseUrl}/csrf`, fetchOptions)
   return data && data.csrfToken ? data.csrfToken : null
 }
 
+// Universal method (client + server); does not require request headers
+const getProviders = async () => {
+  const baseUrl = _apiBaseUrl()
+  return _fetchData(`${baseUrl}/providers`)
+}
+
 // Context to store session data globally
 const SessionContext = createContext()
 
 // Client side method
-// Hook to access the session data stored in the context
 const useSession = (session) => {
+  // Try to use context if we can
   const value = useContext(SessionContext)
-  // If we have no Provider in the tree we call the actual hook for fetching the session
+
+  // If we have no Provider in the tree, call the actual hook
   if (value === undefined) {
-    return useSessionData(session)
+    return _useSessionHook(session)
   }
 
   return value
 }
 
 // Internal hook for getting session from the api.
-const useSessionData = (session) => {
-  const clientMaxAge = __NEXTAUTH.clientMaxAge * 1000
+const _useSessionHook = (session) => {
   const [data, setData] = useState(session)
   const [loading, setLoading] = useState(true)
-  const _getSession = async (sendEvent = true) => {
+  const _getSession = async ({ event = null } = {}) => {
     try {
-      setData(await getSession())
-      setLoading(false)
+      const triggredByEvent = (event !== null)
+      const triggeredByStorageEvent = !!((event && event === 'storage'))
 
-      // Send event to trigger other tabs to update (unless sendEvent is false)
-      if (sendEvent) {
-        _sendMessage({ event: 'session', data: { trigger: 'useSessionData' } })
-      }
+      const clientMaxAge = __NEXTAUTH.clientMaxAge
+      const clientLastSync = parseInt(__NEXTAUTH._clientLastSync)
+      const currentTime = Math.floor(new Date().getTime() / 1000)
+      const clientSession = __NEXTAUTH._clientSession
 
-      if (typeof window !== 'undefined' && __NEXTAUTH_EVENT_LISTENER_ADDED === false) {
-        __NEXTAUTH_EVENT_LISTENER_ADDED = true
-        window.addEventListener('storage', async (event) => {
-          if (event.key === 'nextauth.message') {
-            const message = JSON.parse(event.newValue)
-            if (message.event && message.event === 'session' && message.data) {
-              // Fetch new session data but tell it not to fire an event to
-              // avoid an infinite loop.
-              //
-              // Note: We could pass session data through and do something like
-              // `setData(message.data)` but that causes problems depending on
-              // how the session object is being used and may expose session
-              // data to 3rd party scripts, it's safer to update the session
-              // this way.
-              await _getSession(false)
-            }
-          }
-        })
+      // Updates triggered by a storage event *always* trigger an update and we
+      // always update if we don't have any value for the current session state.
+      if (triggeredByStorageEvent === false && clientSession !== undefined) {
+        if (clientMaxAge === 0 && triggredByEvent !== true) {
+          // If there is no time defined for when a session should be considered
+          // stale, then it's okay to use the value we have until an event is
+          // triggered which updates it.
+          return
+        } else if (clientMaxAge > 0 && clientSession === null) {
+          // If the client doesn't have a session then we don't need to call
+          // the server to check if it does (if they have signed in via another
+          // tab or window that will come through as a triggeredByStorageEvent
+          // event and will skip this logic)
+          return
+        } else if (clientMaxAge > 0 && currentTime < (clientLastSync + clientMaxAge)) {
+          // If the session freshness is within clientMaxAge then don't request
+          // it again on this call (avoids too many invokations).
+          return
+        }
       }
 
-      // If CLIENT_MAXAGE is greater than zero, trigger auto re-fetching session
-      if (clientMaxAge > 0) {
-        setTimeout(async (session) => {
-          await _getSession()
-        }, clientMaxAge)
-      }
+      if (clientSession === undefined) { __NEXTAUTH._clientSession = null }
+
+      // Update clientLastSync before making response to avoid repeated
+      // invokations that would otherwise be triggered while we are still
+      // waiting for a response.
+      __NEXTAUTH._clientLastSync = Math.floor(new Date().getTime() / 1000)
+
+      // If this call was invoked via a storage event (i.e. another window) then
+      // tell getSession not to trigger an event when it calls to avoid an
+      // infinate loop.
+      const triggerEvent = (triggeredByStorageEvent === false)
+      const newClientSessionData = await getSession({ triggerEvent })
+
+      // Save session state internally, just so we can track that we've checked
+      // if a session exists at least once.
+      __NEXTAUTH._clientSession = newClientSessionData
+
+      setData(newClientSessionData)
+      setLoading(false)
     } catch (error) {
       logger.error('CLIENT_USE_SESSION_ERROR', error)
     }
   }
-  useEffect(() => { _getSession() }, [])
+
+  __NEXTAUTH._getSession = _getSession
+
+  useEffect(() => {
+    _getSession()
+  })
   return [data, loading]
 }
 
 // Client side method
-const signin = async (provider, args) => {
+const signIn = async (provider, args = {}) => {
+  const baseUrl = _apiBaseUrl()
   const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
-
-  if (!provider) {
-    // Redirect to sign in page if no provider specified
-    const baseUrl = _baseUrl()
-    window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
-    return
-  }
-
   const providers = await getProviders()
-  if (!providers[provider]) {
+
+  // Redirect to sign in page if no valid provider specified
+  if (!provider || !providers[provider]) {
     // If Provider not recognized, redirect to sign in page
-    const baseUrl = _baseUrl()
     window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
-  } else if (providers[provider].type === 'oauth') {
-    // If is an OAuth provider, redirect to providers[provider].signinUrl
-    window.location = `${providers[provider].signinUrl}?callbackUrl=${encodeURIComponent(callbackUrl)}`
   } else {
-    // If is any other provider type, POST to providers[provider].signinUrl (with CSRF Token)
-    const options = {
+    const signInUrl = (providers[provider].type === 'credentials')
+      ? `${baseUrl}/callback/${provider}`
+      : `${baseUrl}/signin/${provider}`
+    // If is any other provider type, POST to provider URL with CSRF Token,
+    // callback URL and any other parameters supplied.
+    const fetchOptions = {
       method: 'post',
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: _encodedForm({
+        ...args,
         csrfToken: await getCsrfToken(),
         callbackUrl: callbackUrl,
-        ...args
+        json: true
       })
     }
-    const res = await fetch(providers[provider].signinUrl, options)
-    window.location = res.url ? res.url : callbackUrl
+    const res = await fetch(signInUrl, fetchOptions)
+    const data = await res.json()
+    window.location = data.url ? data.url : callbackUrl
   }
 }
 
 // Client side method
-const signout = async (args) => {
+const signOut = async (args = {}) => {
   const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
 
-  const baseUrl = _baseUrl()
-  const options = {
+  const baseUrl = _apiBaseUrl()
+  const fetchOptions = {
     method: 'post',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     },
     body: _encodedForm({
       csrfToken: await getCsrfToken(),
-      callbackUrl: callbackUrl
+      callbackUrl: callbackUrl,
+      json: true
     })
   }
-  const res = await fetch(`${baseUrl}/signout`, options)
-
+  const res = await fetch(`${baseUrl}/signout`, fetchOptions)
+  const data = await res.json()
   _sendMessage({ event: 'session', data: { trigger: 'signout' } })
-
-  window.location = res.url ? res.url : callbackUrl
+  window.location = data.url ? data.url : callbackUrl
 }
 
 // Provider to wrap the app in to make session data available globally
@@ -190,7 +294,18 @@ const _fetchData = async (url, options = {}) => {
   }
 }
 
-const _baseUrl = () => `${__NEXTAUTH.site}${__NEXTAUTH.basePath}`
+const _apiBaseUrl = () => {
+  if (typeof window === 'undefined') {
+    // NEXTAUTH_URL should always be set explicitly to support server side calls - log warning if not set
+    if (!process.env.NEXTAUTH_URL) { logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set') }
+
+    // Return absolute path when called server side
+    return `${__NEXTAUTH.baseUrl}${__NEXTAUTH.basePath}`
+  } else {
+    // Return relative path when called client side
+    return __NEXTAUTH.basePath
+  }
+}
 
 const _encodedForm = (formData) => {
   return Object.keys(formData).map((key) => {
@@ -200,27 +315,29 @@ const _encodedForm = (formData) => {
 
 const _sendMessage = (message) => {
   if (typeof localStorage !== 'undefined') {
-    localStorage.setItem('nextauth.message', JSON.stringify(message)) // eslint-disable-line
+    const timestamp = Math.floor(new Date().getTime() / 1000)
+    localStorage.setItem('nextauth.message', JSON.stringify({ ...message, clientId: __NEXTAUTH._clientId, timestamp })) // eslint-disable-line
   }
 }
 
 export default {
-  // Call config() from _app.js to set options globally in the app.
-  // You need to set at least the site name to use server side calls.
-  options: setOptions,
-  setOptions,
-  // Some methods are exported with more than one name. This provides
-  // flexibility over how they can be invoked and compatibility with earlier
-  // releases (going back to v1 and earlier v2 beta releases).
-  // e.g. NextAuth.session() or const { getSession } from 'next-auth/client'
-  session: getSession,
-  providers: getProviders,
-  csrfToken: getCsrfToken,
   getSession,
-  getProviders,
   getCsrfToken,
+  getProviders,
   useSession,
+  signIn,
+  signOut,
   Provider,
-  signin,
-  signout
+  /* Deprecated / unsupported features below this line */
+  // Use setOptions() set options globally in the app.
+  setOptions,
+  // Some methods are exported with more than one name. This provides some
+  // flexibility over how they can be invoked and backwards compatibility
+  // with earlier releases.
+  options: setOptions,
+  session: getSession,
+  providers: getProviders,
+  csrfToken: getCsrfToken,
+  signin: signIn,
+  signout: signOut
 }
diff --git a/src/lib/jwt.js b/src/lib/jwt.js
index 7412c04995..cadab1b076 100644
--- a/src/lib/jwt.js
+++ b/src/lib/jwt.js
@@ -1,37 +1,98 @@
 import jwt from 'jsonwebtoken'
 import CryptoJS from 'crypto-js'
 
-const encode = async ({ secret, key = secret, token = {}, maxAge }) => {
+const SIGNING_ALGORITHM = 'HS256' // Specified explicitly to prevent tampering
+const DEFAULT_ENCRYPTION_TYPE = 'AES' // Can be one of [ 'AES', false ]
+
+const encode = async ({
+  secret,
+  key = secret,
+  token = {},
+  maxAge,
+  encryption = DEFAULT_ENCRYPTION_TYPE
+}) => {
   // If maxAge is set remove any existing created/expiry dates and replace them
   if (maxAge) {
     if (token.iat) { delete token.iat }
     if (token.exp) { delete token.exp }
   }
-  const signedToken = jwt.sign(token, secret, { expiresIn: maxAge })
-  const encryptedToken = CryptoJS.AES.encrypt(signedToken, key).toString()
-  return encryptedToken
+
+  const signedToken = jwt.sign(token, secret, { algorithm: SIGNING_ALGORITHM, expiresIn: maxAge })
+
+  switch (encryption) {
+    case false:
+      return signedToken
+    case 'AES':
+      return CryptoJS.AES.encrypt(signedToken, key).toString()
+    default:
+      throw new Error('Unsupported value for `encryption` passed to JWT encode()', encryption)
+  }
 }
 
-const decode = async ({ secret, key = secret, token, maxAge }) => {
+const decode = async ({
+  secret,
+  key = secret,
+  token,
+  maxAge,
+  encryption = DEFAULT_ENCRYPTION_TYPE
+}) => {
   if (!token) return null
-  const decryptedBytes = CryptoJS.AES.decrypt(token, key)
-  const decryptedToken = decryptedBytes.toString(CryptoJS.enc.Utf8)
-  const verifiedToken = jwt.verify(decryptedToken, secret, { maxAge })
-  return verifiedToken
+  let tokenToVerify
+
+  switch (encryption) {
+    case false:
+      tokenToVerify = token
+      break
+    case 'AES': {
+      const decryptedBytes = CryptoJS.AES.decrypt(token, key)
+      const decryptedToken = decryptedBytes.toString(CryptoJS.enc.Utf8)
+      tokenToVerify = decryptedToken
+      break
+    }
+    default:
+      throw new Error('Unsupported value for `encryption` passed to JWT decode()', encryption)
+  }
+
+  return jwt.verify(tokenToVerify, secret, { algorithms: [SIGNING_ALGORITHM], maxAge })
 }
 
-// This is a simple helper method to make it easier to use JWT from an API route
-const getJwt = async ({ req, secret, cookieName, maxAge }) => {
-  if (!req || !secret) throw new Error('Must pass { req, secret } to getJWT()')
+const getToken = async ({
+  req,
+  secret,
+  key = secret,
+  maxAge,
+  encryption,
+  secureCookie,
+  cookieName
+}) => {
+  if (!req) throw new Error('Must pass `req` to JWT getToken()')
 
-  const secureCookieName = '__Secure-next-auth.session-token'
-  const insecureCookieName = 'next-auth.session-token'
-  const cookieValue = cookieName ? req.cookies[cookieName] : req.cookies[secureCookieName] || req.cookies[insecureCookieName]
+  // If cookie is not specified, choose what cookie name to use in a secure way
+  if (!cookieName) {
+    if (typeof secureCookie === 'undefined') {
+      // If secureCookie is not specified, assume unprefixed cookie in local dev
+      // environments or if an explictly non HTTPS url is specified. Otherwise
+      // asssume a secure prefixed cookie should be used.
+      secureCookie = !((!process.env.NEXTAUTH_URL || process.env.NEXTAUTH_URL.startsWith('http://')))
+    }
+    // Use secure prefixed cookie by default. Only use unprefixed cookie name if
+    // secureCookie is false or if the site URL is HTTP (and not HTTPS).
+    cookieName = (secureCookie) ? '__Secure-next-auth.session-token' : 'next-auth.session-token'
+  }
 
-  if (!cookieValue) { return null }
+  // Try to get token from cookie
+  let token = req.cookies[cookieName]
+
+  // If cookie not provided, look for bearer token in HTTP authorization header
+  // This allows clients that pass through tokens in headers rather than as
+  // cookies to use this helper function.
+  if (!token && req.headers.authorization && req.headers.authorization.split(' ')[0] === 'Bearer') {
+    const urlEncodedToken = req.headers.authorization.split(' ')[1]
+    token = decodeURIComponent(urlEncodedToken)
+  }
 
   try {
-    return await decode({ secret, token: cookieValue, maxAge })
+    return await decode({ secret, key, token, maxAge, encryption })
   } catch (error) {
     return null
   }
@@ -40,5 +101,5 @@ const getJwt = async ({ req, secret, cookieName, maxAge }) => {
 export default {
   encode,
   decode,
-  getJwt
+  getToken
 }
diff --git a/src/lib/logger.js b/src/lib/logger.js
index a2fc5dcad3..d4b21c44a2 100644
--- a/src/lib/logger.js
+++ b/src/lib/logger.js
@@ -4,16 +4,26 @@ const logger = {
       !text
         ? console.error(errorCode)
         : console.error(
-            `[next-auth][error][${errorCode}]`,
-            text,
-            `\nhttps://next-auth.js.org/errors#${errorCode.toLowerCase()}`
+          `[next-auth][error][${errorCode.toLowerCase()}]`,
+          text,
+          `\nhttps://next-auth.js.org/errors#${errorCode.toLowerCase()}`
+        )
+    }
+  },
+  warn: (warnCode, ...text) => {
+    if (console) {
+      !text
+        ? console.warn(warnCode)
+        : console.warn(
+          `[next-auth][warn][${warnCode.toLowerCase()}]`,
+          text
         )
     }
   },
   debug: (debugCode, ...text) => {
     if (process && process.env && process.env._NEXTAUTH_DEBUG) {
       console.log(
-        `[next-auth][debug][${debugCode}]`,
+        `[next-auth][debug][${debugCode.toLowerCase()}]`,
         text
       )
     }
diff --git a/src/lib/parse-url.js b/src/lib/parse-url.js
new file mode 100644
index 0000000000..0428925fc0
--- /dev/null
+++ b/src/lib/parse-url.js
@@ -0,0 +1,27 @@
+// Simple universal (client/server) function to split host and path
+// We use this rather than a library because we need to use the same logic both
+// client and server side and we only need to parse out the host and path, while
+// supporting a default value, so a simple split is sufficent.
+export default (url) => {
+  // Default values
+  const defaultHost = 'http://localhost:3000'
+  const defaultPath = '/api/auth'
+
+  if (!url) { url = `${defaultHost}${defaultPath}` }
+
+  // Default to HTTPS if no protocol explictly specified
+  const protocol = url.match(/^http?:\/\//) ? 'http' : 'https'
+
+  // Normalize URLs by stripping protocol and no trailing slash
+  url = url.replace(/^https?:\/\//, '').replace(/\/$/, '')
+
+  // Simple split based on first /
+  const [_host, ..._path] = url.split('/')
+  const baseUrl = _host ? `${protocol}://${_host}` : defaultHost
+  const basePath = _path.length > 0 ? `/${_path.join('/')}` : defaultPath
+
+  return {
+    baseUrl,
+    basePath
+  }
+}
diff --git a/src/providers/apple.js b/src/providers/apple.js
index 4b926454d5..ddfec79575 100644
--- a/src/providers/apple.js
+++ b/src/providers/apple.js
@@ -12,10 +12,12 @@ export default (options) => {
     authorizationUrl: 'https://appleid.apple.com/auth/authorize?response_type=code&id_token&response_mode=form_post',
     profileUrl: null,
     idToken: true,
+    state: false, // Apple doesn't support state verfication
     profile: (profile) => {
+      // The name of the user will only return on first login
       return {
         id: profile.sub,
-        name: profile.name == null ? profile.sub : profile.name,
+        name: profile.user != null ? profile.user.name.firstName + ' ' + profile.user.name.lastName : null,
         email: profile.email
       }
     },
@@ -35,7 +37,9 @@ export default (options) => {
           aud: 'https://appleid.apple.com',
           sub: appleId
         },
-        privateKey,
+        // Automatically convert \\n into \n if found in private key. If the key
+        // is passed in an environment variable \n can get escaped as \\n
+        privateKey.replace(/\\n/g, '\n'),
         {
           algorithm: 'ES256',
           keyid: keyId
diff --git a/src/providers/email.js b/src/providers/email.js
index cee04b43f0..5f0acdf370 100644
--- a/src/providers/email.js
+++ b/src/providers/email.js
@@ -22,10 +22,11 @@ export default (options) => {
   }
 }
 
-const sendVerificationRequest = ({ identifier: email, url, token, site, provider }) => {
+const sendVerificationRequest = ({ identifier: email, url, baseUrl, provider }) => {
   return new Promise((resolve, reject) => {
     const { server, from } = provider
-    site = site.replace(/^https?:\/\//, '') // Strip protocol from site
+    // Strip protocol from URL and use domain as site name
+    const site = baseUrl.replace(/^https?:\/\//, '')
 
     nodemailer
       .createTransport(server)
diff --git a/src/providers/spotify.js b/src/providers/spotify.js
index 9320572c2a..933eee7c09 100644
--- a/src/providers/spotify.js
+++ b/src/providers/spotify.js
@@ -15,8 +15,8 @@ export default (options) => {
         id: profile.id,
         name: profile.display_name,
         email: profile.email,
-        image: profile.images[0].url,
-      };
+        image: profile.images[0].url
+      }
     },
     ...options
   }
diff --git a/src/server/index.js b/src/server/index.js
index 0c6d5315cf..f4ca74ee4e 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -1,5 +1,6 @@
 import { createHash, randomBytes } from 'crypto'
 import jwt from '../lib/jwt'
+import parseUrl from '../lib/parse-url'
 import cookie from './lib/cookie'
 import callbackUrlHandler from './lib/callback-url-handler'
 import parseProviders from './lib/providers'
@@ -10,11 +11,16 @@ import signin from './routes/signin'
 import signout from './routes/signout'
 import callback from './routes/callback'
 import session from './routes/session'
+import tokens from './routes/tokens'
 import pages from './pages'
 import adapters from '../adapters'
+import logger from '../lib/logger'
 
-const DEFAULT_SITE = 'http://localhost:3000'
-const DEFAULT_BASE_PATH = '/api/auth'
+// To work properly in production with OAuth providers the NEXTAUTH_URL
+// environment variable must be set.
+if (!process.env.NEXTAUTH_URL) {
+  logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set')
+}
 
 export default async (req, res, userSuppliedOptions) => {
   // To the best of my knowledge, we need to return a promise here
@@ -39,10 +45,10 @@ export default async (req, res, userSuppliedOptions) => {
       csrfToken: csrfTokenFromPost
     } = body
 
-    // Allow site name, path prefix to be overriden
-    const site = userSuppliedOptions.site || DEFAULT_SITE
-    const basePath = userSuppliedOptions.basePath || DEFAULT_BASE_PATH
-    const baseUrl = `${site}${basePath}`
+    // @todo refactor all existing references to site, baseUrl and basePath
+    const parsedUrl = parseUrl(process.env.NEXTAUTH_URL || process.env.VERCEL_URL)
+    const baseUrl = parsedUrl.baseUrl
+    const basePath = parsedUrl.basePath
 
     // Parse database / adapter
     let adapter
@@ -116,6 +122,7 @@ export default async (req, res, userSuppliedOptions) => {
     const jwtOptions = {
       secret,
       key: secret,
+      encryption: 'AES', // One of [ 'AES', false ] (default 'AES')
       encode: jwt.encode,
       decode: jwt.decode,
       ...userSuppliedOptions.jwt
@@ -171,6 +178,20 @@ export default async (req, res, userSuppliedOptions) => {
       cookie.set(res, cookies.csrfToken.name, newCsrfTokenCookie, cookies.csrfToken.options)
     }
 
+    // Helper method for handling redirects, this is passed to all routes
+    // @TODO Refactor into a lib instead of passing as an option
+    //       e.g. and call as redirect(req, res, url)
+    const redirect = (redirectUrl) => {
+      const reponseAsJson = !!((req.body && req.body.json === 'true'))
+      if (reponseAsJson) {
+        res.json({ url: redirectUrl })
+      } else {
+        res.status(302).setHeader('Location', redirectUrl)
+        res.end()
+      }
+      return done()
+    }
+
     // User provided options are overriden by other options,
     // except for the options with special handling above
     const options = {
@@ -182,21 +203,20 @@ export default async (req, res, userSuppliedOptions) => {
       // These computed settings can values in userSuppliedOptions but override them
       // and are request-specific.
       adapter,
-      site,
-      basePath,
       baseUrl,
+      basePath,
       action,
       provider,
       cookies,
       secret,
       csrfToken,
-      csrfTokenVerified,
-      providers: parseProviders(userSuppliedOptions.providers, baseUrl),
+      providers: parseProviders(userSuppliedOptions.providers, baseUrl, basePath),
       session: sessionOption,
       jwt: jwtOptions,
       events: eventsOption,
       callbacks: callbacksOption,
-      callbackUrl: site
+      callbackUrl: baseUrl,
+      redirect
     }
 
     // If debug enabled, set ENV VAR so that logger logs debug messages
@@ -205,12 +225,6 @@ export default async (req, res, userSuppliedOptions) => {
     // Get / Set callback URL based on query param / cookie + validation
     options.callbackUrl = await callbackUrlHandler(req, res, options)
 
-    const redirect = (redirectUrl) => {
-      res.status(302).setHeader('Location', redirectUrl)
-      res.end()
-      return done()
-    }
-
     if (req.method === 'GET') {
       switch (action) {
         case 'providers':
@@ -219,22 +233,21 @@ export default async (req, res, userSuppliedOptions) => {
         case 'session':
           session(req, res, options, done)
           break
+        case 'tokens':
+            tokens(req, res, options, done)
+          break
         case 'csrf':
           res.json({ csrfToken })
           return done()
         case 'signin':
-          if (provider && options.providers[provider]) {
-            signin(req, res, options, done)
-          } else {
-            if (options.pages.signin) { return redirect(`${options.pages.signin}${options.pages.signin.includes('?') ? '&' : '?'}callbackUrl=${options.callbackUrl}`) }
+          if (options.pages.signIn) { return redirect(`${options.pages.signIn}${options.pages.signIn.includes('?') ? '&' : '?'}callbackUrl=${options.callbackUrl}`) }
 
-            pages.render(req, res, 'signin', { site, providers: Object.values(options.providers), callbackUrl: options.callbackUrl, csrfToken }, done)
-          }
+          pages.render(req, res, 'signin', { baseUrl, basePath, providers: Object.values(options.providers), callbackUrl: options.callbackUrl, csrfToken }, done)
           break
         case 'signout':
-          if (options.pages.signout) { return redirect(`${options.pages.signout}${options.pages.signout.includes('?') ? '&' : '?'}callbackUrl=${options.callbackUrl}`) }
+          if (options.pages.signOut) { return redirect(`${options.pages.signOut}${options.pages.signOut.includes('?') ? '&' : '?'}callbackUrl=${options.callbackUrl}`) }
 
-          pages.render(req, res, 'signout', { site, baseUrl, csrfToken, callbackUrl: options.callbackUrl }, done)
+          pages.render(req, res, 'signout', { baseUrl, basePath, csrfToken, callbackUrl: options.callbackUrl }, done)
           break
         case 'callback':
           if (provider && options.providers[provider]) {
@@ -247,12 +260,12 @@ export default async (req, res, userSuppliedOptions) => {
         case 'verify-request':
           if (options.pages.verifyRequest) { return redirect(options.pages.verifyRequest) }
 
-          pages.render(req, res, 'verify-request', { site }, done)
+          pages.render(req, res, 'verify-request', { baseUrl }, done)
           break
         case 'error':
           if (options.pages.error) { return redirect(`${options.pages.error}${options.pages.error.includes('?') ? '&' : '?'}error=${error}`) }
 
-          pages.render(req, res, 'error', { site, error, baseUrl }, done)
+          pages.render(req, res, 'error', { baseUrl, basePath, error }, done)
           break
         default:
           res.status(404).end()
@@ -261,17 +274,30 @@ export default async (req, res, userSuppliedOptions) => {
     } else if (req.method === 'POST') {
       switch (action) {
         case 'signin':
-          // Signin POST requests are used for email sign in
+          // Verified CSRF Token required for all sign in routes
+          if (!csrfTokenVerified) {
+            return redirect(`${baseUrl}${basePath}/signin?csrf=true`)
+          }
+
           if (provider && options.providers[provider]) {
             signin(req, res, options, done)
-            break
           }
           break
         case 'signout':
+          // Verified CSRF Token required for signout
+          if (!csrfTokenVerified) {
+            return redirect(`${baseUrl}${basePath}/signout?csrf=true`)
+          }
+
           signout(req, res, options, done)
           break
         case 'callback':
           if (provider && options.providers[provider]) {
+            // Verified CSRF Token required for credentials providers only
+            if (options.providers[provider].type === 'credentials' && !csrfTokenVerified) {
+              return redirect(`${baseUrl}${basePath}/signin?csrf=true`)
+            }
+
             callback(req, res, options, done)
           } else {
             res.status(400).end(`Error: HTTP POST is not supported for ${url}`)
diff --git a/src/server/lib/callback-url-handler.js b/src/server/lib/callback-url-handler.js
index 8a6ca986c2..7bb6c6fddf 100644
--- a/src/server/lib/callback-url-handler.js
+++ b/src/server/lib/callback-url-handler.js
@@ -3,21 +3,21 @@ import cookie from '../lib/cookie'
 export default async (req, res, options) => {
   const { query } = req
   const { body } = req
-  const { cookies, site, defaultCallbackUrl, callbacks } = options
+  const { cookies, baseUrl, defaultCallbackUrl, callbacks } = options
 
   // Handle preserving and validating callback URLs
   // If no defaultCallbackUrl option specified, default to the homepage for the site
-  let callbackUrl = defaultCallbackUrl || site
+  let callbackUrl = defaultCallbackUrl || baseUrl
 
   // Try reading callbackUrlParamValue from request body (form submission) then from query param (get request)
   const callbackUrlParamValue = body.callbackUrl || query.callbackUrl || null
   const callbackUrlCookieValue = req.cookies[cookies.callbackUrl.name] || null
   if (callbackUrlParamValue) {
     // If callbackUrl form field or query parameter is passed try to use it if allowed
-    callbackUrl = await callbacks.redirect(callbackUrlParamValue, site)
+    callbackUrl = await callbacks.redirect(callbackUrlParamValue, baseUrl)
   } else if (callbackUrlCookieValue) {
     // If no callbackUrl specified, try using the value from the cookie if allowed
-    callbackUrl = await callbacks.redirect(callbackUrlCookieValue, site)
+    callbackUrl = await callbacks.redirect(callbackUrlCookieValue, baseUrl)
   }
 
   // Save callback URL in a cookie so that can be used for subsequent requests in signin/signout/callback flow
diff --git a/src/server/lib/callbacks.js b/src/server/lib/callbacks.js
index ec4e79aa38..4c760c20b6 100644
--- a/src/server/lib/callbacks.js
+++ b/src/server/lib/callbacks.js
@@ -1,5 +1,5 @@
 /**
- * Use the signin callback to control if a user is allowed to sign in or not.
+ * Use the signIn callback to control if a user is allowed to sign in or not.
  *
  * This is triggered before sign in flow completes, so the user profile may be
  * a user object (with an ID) or it may be just their name and email address,
@@ -15,7 +15,7 @@
  * @return {boolean|object}  Return `true` (or a modified JWT) to allow sign in
  *                           Return `false` to deny access
  */
-const signin = async (profile, account, metadata) => {
+const signIn = async (profile, account, metadata) => {
   const isAllowedToSignIn = true
   if (isAllowedToSignIn) {
     return Promise.resolve(true)
@@ -68,7 +68,7 @@ const jwt = async (token, oAuthProfile) => {
 }
 
 export default {
-  signin,
+  signIn,
   redirect,
   session,
   jwt
diff --git a/src/server/lib/cookie.js b/src/server/lib/cookie.js
index bdc63dc054..078aaca3f3 100644
--- a/src/server/lib/cookie.js
+++ b/src/server/lib/cookie.js
@@ -15,7 +15,9 @@ const set = (res, name, value, options = {}) => {
   }
 
   // Preserve any existing cookies that have already been set in the same session
-  const setCookieHeader = res.getHeader('Set-Cookie') || []
+  let setCookieHeader = res.getHeader('Set-Cookie') || []
+  // If not an array (i.e. a string with a single cookie) convert it into an array
+  if (!Array.isArray(setCookieHeader)) { setCookieHeader = [setCookieHeader] }
   setCookieHeader.push(_serialize(name, String(stringValue), options))
   res.setHeader('Set-Cookie', setCookieHeader)
 }
diff --git a/src/server/lib/events.js b/src/server/lib/events.js
index a95172d5d0..6b53a4a0d3 100644
--- a/src/server/lib/events.js
+++ b/src/server/lib/events.js
@@ -1,9 +1,9 @@
-const signin = async (message) => {
+const signIn = async (message) => {
   // Event triggered on successful sign in
 }
 
-const signout = async (message) => {
-  // Event triggered on signout
+const signOut = async (message) => {
+  // Event triggered on sign out
 }
 
 const createUser = async (message) => {
@@ -28,8 +28,8 @@ const error = async (message) => {
 }
 
 export default {
-  signin,
-  signout,
+  signIn,
+  signOut,
   createUser,
   updateUser,
   linkAccount,
diff --git a/src/server/lib/oauth/callback.js b/src/server/lib/oauth/callback.js
index aa2cb23742..474efd4c74 100644
--- a/src/server/lib/oauth/callback.js
+++ b/src/server/lib/oauth/callback.js
@@ -1,6 +1,8 @@
-import oAuthClient from './client'
+
+import { createHash } from 'crypto'
 import querystring from 'querystring'
 import jwtDecode from 'jwt-decode'
+import oAuthClient from './client'
 import logger from '../../../lib/logger'
 
 // @TODO Refactor monkey patching in _getOAuthAccessToken() and _get()
@@ -10,18 +12,37 @@ import logger from '../../../lib/logger'
 // come up, as the node-oauth package does not seem to be actively maintained.
 
 // @TODO Refactor to use promises and not callbacks
-
 // @TODO Refactor to use jsonwebtoken instead of jwt-decode & remove dependancy
-
-export default async (req, provider, callback) => {
-  let { oauth_token, oauth_verifier, code } = req.query // eslint-disable-line camelcase
+export default async (req, provider, csrfToken, callback) => {
+  // The "user" object is specific to apple provider and is provided on first sign in
+  // e.g. {"name":{"firstName":"Johnny","lastName":"Appleseed"},"email":"johnny.appleseed@nextauth.com"}
+  let { oauth_token, oauth_verifier, code, user, state } = req.query // eslint-disable-line camelcase
   const client = oAuthClient(provider)
 
   if (provider.version && provider.version.startsWith('2.')) {
+    // For OAuth 2.0 flows, check state returned and matches expected value
+    // (a hash of the NextAuth.js CSRF token).
+    //
+    // This check can be disabled for providers that do not support it by
+    // setting `state: false` as a option on the provider (defaults to true).
+    if (!Object.prototype.hasOwnProperty.call(provider, 'state') || provider.state === true) {
+      const expectedState = createHash('sha256').update(csrfToken).digest('hex')
+      if (state !== expectedState) {
+        return callback(new Error('Invalid state returned from oAuth provider'))
+      }
+    }
+
     if (req.method === 'POST') {
-      // Get the CODE from Body
-      const body = JSON.parse(JSON.stringify(req.body))
-      code = body.code
+      try {
+        const body = JSON.parse(JSON.stringify(req.body))
+        if (body.error) { throw new Error(body.error) }
+
+        code = body.code
+        user = body.user != null ? JSON.parse(body.user) : null
+      } catch (e) {
+        logger.error('OAUTH_CALLBACK_HANDLER_ERROR', e, req.body, provider.id, code)
+        return callback()
+      }
     }
 
     // Pass authToken in header by default (unless 'useAuthTokenHeader: false' is set)
@@ -38,12 +59,22 @@ export default async (req, provider, callback) => {
       code,
       provider,
       (error, accessToken, refreshToken, results) => {
-        // @TODO Handle error
         if (error || results.error) {
           logger.error('OAUTH_GET_ACCESS_TOKEN_ERROR', error, results, provider.id, code)
+          return callback(error || results.error)
         }
 
         if (provider.idToken) {
+          // If we don't have an ID Token most likely the user hit a cancel
+          // button when signing in (or the provider is misconfigured).
+          //
+          // Unfortunately, we can't tell which, so we can't treat it as an
+          // error, so instead we just returning nothing, which will cause the
+          // user to be redirected back to the sign in page.
+          if (!results || !results.id_token) {
+            return callback()
+          }
+
           // Support services that use OpenID ID Tokens to encode profile data
           _decodeToken(
             provider,
@@ -51,7 +82,7 @@ export default async (req, provider, callback) => {
             refreshToken,
             results.id_token,
             async (error, profileData) => {
-              const { profile, account, OAuthProfile } = await _getProfile(error, profileData, accessToken, refreshToken, provider)
+              const { profile, account, OAuthProfile } = await _getProfile(error, profileData, accessToken, refreshToken, provider, user)
               callback(error, profile, account, OAuthProfile)
             }
           )
@@ -96,7 +127,11 @@ export default async (req, provider, callback) => {
   }
 }
 
-async function _getProfile (error, profileData, accessToken, refreshToken, provider) {
+/**
+ * //6/30/2020 @geraldnolan added userData parameter to attach additional data to the profileData object
+ * Returns profile, raw profile and auth provider details
+ */
+async function _getProfile (error, profileData, accessToken, refreshToken, provider, userData) {
   // @TODO Handle error
   if (error) {
     logger.error('OAUTH_GET_PROFILE_ERROR', error)
@@ -107,6 +142,13 @@ async function _getProfile (error, profileData, accessToken, refreshToken, provi
     // Convert profileData into an object if it's a string
     if (typeof profileData === 'string' || profileData instanceof String) { profileData = JSON.parse(profileData) }
 
+    // If a user object is supplied (e.g. Apple provider) add it to the profile object
+    if (userData != null) {
+      profileData.user = userData
+    }
+
+    logger.debug('PROFILE_DATA', profileData)
+
     profile = await provider.profile(profileData)
   } catch (exception) {
     // If we didn't get a response either there was a problem with the provider
diff --git a/src/server/lib/providers.js b/src/server/lib/providers.js
index 9ea308cca2..20b28aa96d 100644
--- a/src/server/lib/providers.js
+++ b/src/server/lib/providers.js
@@ -1,12 +1,12 @@
-export default (_providers, baseUrl) => {
+export default (_providers, baseUrl, basePath) => {
   const providers = {}
 
   _providers.forEach(provider => {
     const providerId = provider.id
     providers[providerId] = {
       ...provider,
-      signinUrl: `${baseUrl}/signin/${providerId}`,
-      callbackUrl: `${baseUrl}/callback/${providerId}`
+      signinUrl: `${baseUrl}${basePath}/signin/${providerId}`,
+      callbackUrl: `${baseUrl}${basePath}/callback/${providerId}`
     }
   })
 
diff --git a/src/server/lib/signin/email.js b/src/server/lib/signin/email.js
index cfff245b5b..da4563c8f7 100644
--- a/src/server/lib/signin/email.js
+++ b/src/server/lib/signin/email.js
@@ -2,7 +2,7 @@ import { randomBytes } from 'crypto'
 
 export default async (email, provider, options) => {
   try {
-    const { baseUrl, adapter } = options
+    const { baseUrl, basePath, adapter } = options
 
     const { createVerificationRequest } = await adapter.getAdapter(options)
 
@@ -13,7 +13,7 @@ export default async (email, provider, options) => {
     const token = randomBytes(32).toString('hex')
 
     // Send email with link containing token (the unhashed version)
-    const url = `${baseUrl}/callback/${encodeURIComponent(provider.id)}?email=${encodeURIComponent(email)}&token=${encodeURIComponent(token)}`
+    const url = `${baseUrl}${basePath}/callback/${encodeURIComponent(provider.id)}?email=${encodeURIComponent(email)}&token=${encodeURIComponent(token)}`
 
     // @TODO Create invite (send secret so can be hashed)
     await createVerificationRequest(email, url, token, secret, provider, options)
diff --git a/src/server/lib/signin/oauth.js b/src/server/lib/signin/oauth.js
index b43d257178..b97ef74261 100644
--- a/src/server/lib/signin/oauth.js
+++ b/src/server/lib/signin/oauth.js
@@ -1,8 +1,8 @@
 import oAuthClient from '../oauth/client'
-import crypto from 'crypto'
+import { createHash } from 'crypto'
 import logger from '../../../lib/logger'
 
-export default (provider, callback) => {
+export default (provider, csrfToken, callback) => {
   const { callbackUrl } = provider
   const client = oAuthClient(provider)
   if (provider.version && provider.version.startsWith('2.')) {
@@ -10,7 +10,8 @@ export default (provider, callback) => {
     let url = client.getAuthorizeUrl({
       redirect_uri: provider.callbackUrl,
       scope: provider.scope,
-      state: crypto.randomBytes(64).toString('hex')
+      // A hash of the NextAuth.js CSRF token is used as the state
+      state: createHash('sha256').update(csrfToken).digest('hex')
     })
 
     // If the authorizationUrl specified in the config has query parameters on it
diff --git a/src/server/pages/error.js b/src/server/pages/error.js
index a04b691900..ad263c1628 100644
--- a/src/server/pages/error.js
+++ b/src/server/pages/error.js
@@ -1,12 +1,12 @@
 import { h } from 'preact' // eslint-disable-line no-unused-vars
 import render from 'preact-render-to-string'
 
-export default ({ site, error, baseUrl, res }) => {
-  const signinPageUrl = `${baseUrl}/signin` // @TODO Make sign in URL configurable
+export default ({ baseUrl, basePath, error, res }) => {
+  const signinPageUrl = `${baseUrl}${basePath}/signin` // @TODO Make sign in URL configurable
 
   let statusCode = 200
   let heading = <h1>Error</h1>
-  let message = <p><a className='site' href={site}>{site.replace(/^https?:\/\//, '')}</a></p>
+  let message = <p><a className='site' href={baseUrl}>{baseUrl.replace(/^https?:\/\//, '')}</a></p>
 
   switch (error) {
     case 'Signin':
diff --git a/src/server/pages/signin.js b/src/server/pages/signin.js
index bb934ee943..9bea8f6dfa 100644
--- a/src/server/pages/signin.js
+++ b/src/server/pages/signin.js
@@ -2,7 +2,6 @@ import { h } from 'preact' // eslint-disable-line no-unused-vars
 import render from 'preact-render-to-string'
 
 export default ({ req, csrfToken, providers, callbackUrl }) => {
-  const withCallbackUrl = callbackUrl ? `?callbackUrl=${callbackUrl}` : ''
   const { email } = req.query
 
   // We only want to render providers
@@ -24,7 +23,11 @@ export default ({ req, csrfToken, providers, callbackUrl }) => {
       {providersToRender.map((provider, i) =>
         <div key={provider.id} className='provider'>
           {provider.type === 'oauth' &&
-            <a className='button' data-provider={provider.id} href={`${provider.signinUrl}${withCallbackUrl}`}>Sign in with {provider.name}</a>}
+            <form action={provider.signinUrl} method='POST'>
+              <input type='hidden' name='csrfToken' value={csrfToken} />
+              {callbackUrl && <input type='hidden' name='callbackUrl' value={callbackUrl} />}
+              <button type='submit' className='button'>Sign in with {provider.name}</button>
+            </form>}
           {(provider.type === 'email' || provider.type === 'credentials') && (i > 0) &&
             providersToRender[i - 1].type !== 'email' && providersToRender[i - 1].type !== 'credentials' &&
               <hr />}
diff --git a/src/server/pages/signout.js b/src/server/pages/signout.js
index 89a9663f66..5047b0587c 100644
--- a/src/server/pages/signout.js
+++ b/src/server/pages/signout.js
@@ -1,11 +1,11 @@
 import { h } from 'preact' // eslint-disable-line no-unused-vars
 import render from 'preact-render-to-string'
 
-export default ({ baseUrl, csrfToken }) => {
+export default ({ baseUrl, basePath, csrfToken }) => {
   return render(
     <div className='signout'>
       <h1>Are you sure you want to sign out?</h1>
-      <form action={`${baseUrl}/signout`} method='POST'>
+      <form action={`${baseUrl}${basePath}/signout`} method='POST'>
         <input type='hidden' name='csrfToken' value={csrfToken} />
         <button type='submit'>Sign out</button>
       </form>
diff --git a/src/server/pages/verify-request.js b/src/server/pages/verify-request.js
index 848aae909a..6c9f50e776 100644
--- a/src/server/pages/verify-request.js
+++ b/src/server/pages/verify-request.js
@@ -1,12 +1,12 @@
 import { h } from 'preact' // eslint-disable-line no-unused-vars
 import render from 'preact-render-to-string'
 
-export default ({ site }) => {
+export default ({ baseUrl }) => {
   return render(
     <div className='verify-request'>
       <h1>Check your email</h1>
       <p>A sign in link has been sent to your email address.</p>
-      <p><a className='site' href={site}>{site.replace(/^https?:\/\//, '')}</a></p>
+      <p><a className='site' href={baseUrl}>{baseUrl.replace(/^https?:\/\//, '')}</a></p>
     </div>
   )
 }
diff --git a/src/server/routes/callback.js b/src/server/routes/callback.js
index f5555d12e8..0ec1c2af54 100644
--- a/src/server/routes/callback.js
+++ b/src/server/routes/callback.js
@@ -10,15 +10,17 @@ export default async (req, res, options, done) => {
     provider: providerName,
     providers,
     adapter,
-    site,
-    secret,
     baseUrl,
+    basePath,
+    secret,
     cookies,
     callbackUrl,
     pages,
     jwt,
     events,
-    callbacks
+    callbacks,
+    csrfToken,
+    redirect
   } = options
   const provider = providers[providerName]
   const { type } = provider
@@ -30,13 +32,11 @@ export default async (req, res, options, done) => {
 
   if (type === 'oauth') {
     try {
-      oAuthCallback(req, provider, async (error, profile, account, OAuthProfile) => {
+      oAuthCallback(req, provider, csrfToken, async (error, profile, account, OAuthProfile) => {
         try {
           if (error) {
             logger.error('CALLBACK_OAUTH_ERROR', error)
-            res.status(302).setHeader('Location', `${baseUrl}/error?error=oAuthCallback`)
-            res.end()
-            return done()
+            return redirect(`${baseUrl}${basePath}/error?error=oAuthCallback`)
           }
 
           // Make it easier to debug when adding a new provider
@@ -51,18 +51,14 @@ export default async (req, res, options, done) => {
           // should at least be visible to developers what happened if it is an
           // error with the provider.
           if (!profile) {
-            res.status(302).setHeader('Location', `${baseUrl}/signin`)
-            res.end()
-            return done()
+            return redirect(`${baseUrl}${basePath}/signin`)
           }
 
           // Check if user is allowed to sign in
-          const signinCallbackResponse = await callbacks.signin(profile, account, OAuthProfile)
+          const signInCallbackResponse = await callbacks.signIn(profile, account, OAuthProfile)
 
-          if (signinCallbackResponse === false) {
-            res.status(302).setHeader('Location', `${baseUrl}/error?error=AccessDenied`)
-            res.end()
-            return done()
+          if (signInCallbackResponse === false) {
+            return redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
           }
 
           // Sign user in
@@ -73,7 +69,7 @@ export default async (req, res, options, done) => {
             const jwtPayload = await callbacks.jwt(defaultJwtPayload, OAuthProfile)
 
             // Sign and encrypt token
-            const newEncodedJwt = await jwt.encode({ secret: jwt.secret, token: jwtPayload, maxAge: sessionMaxAge })
+            const newEncodedJwt = await jwt.encode({ secret: jwt.secret, key: jwt.key, token: jwtPayload, maxAge: sessionMaxAge, encryption: jwt.encryption })
 
             // Set cookie expiry date
             const cookieExpires = new Date()
@@ -85,48 +81,38 @@ export default async (req, res, options, done) => {
             cookie.set(res, cookies.sessionToken.name, session.sessionToken, { expires: session.expires || null, ...cookies.sessionToken.options })
           }
 
-          await dispatchEvent(events.signin, { user, account, isNewUser })
+          await dispatchEvent(events.signIn, { user, account, isNewUser })
 
           // Handle first logins on new accounts
           // e.g. option to send users to a new account landing page on initial login
           // Note that the callback URL is preserved, so the journey can still be resumed
           if (isNewUser && pages.newUser) {
-            res.status(302).setHeader('Location', pages.newUser)
-            res.end()
-            return done()
+            return redirect(pages.newUser)
           }
 
           // Callback URL is already verified at this point, so safe to use if specified
-          res.status(302).setHeader('Location', callbackUrl || site)
-          res.end()
-          return done()
+          return redirect(callbackUrl || baseUrl)
         } catch (error) {
           if (error.name === 'AccountNotLinkedError') {
             // If the email on the account is already linked, but nto with this oAuth account
-            res.status(302).setHeader('Location', `${baseUrl}/error?error=OAuthAccountNotLinked`)
+            return redirect(`${baseUrl}${basePath}/error?error=OAuthAccountNotLinked`)
           } else if (error.name === 'CreateUserError') {
-            res.status(302).setHeader('Location', `${baseUrl}/error?error=OAuthCreateAccount`)
+            return redirect(`${baseUrl}${basePath}/error?error=OAuthCreateAccount`)
           } else {
             logger.error('OAUTH_CALLBACK_HANDLER_ERROR', error)
-            res.status(302).setHeader('Location', `${baseUrl}/error?error=Callback`)
+            return redirect(`${baseUrl}${basePath}/error?error=Callback`)
           }
-          res.end()
-          return done()
         }
       })
     } catch (error) {
       logger.error('OAUTH_CALLBACK_ERROR', error)
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=Callback`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=Callback`)
     }
   } else if (type === 'email') {
     try {
       if (!adapter) {
         logger.error('EMAIL_REQUIRES_ADAPTER_ERROR')
-        res.status(302).setHeader('Location', `${baseUrl}/error?error=Configuration`)
-        res.end()
-        return done()
+        return redirect(`${baseUrl}${basePath}/error?error=Configuration`)
       }
 
       const { getVerificationRequest, deleteVerificationRequest, getUserByEmail } = await adapter.getAdapter(options)
@@ -136,9 +122,7 @@ export default async (req, res, options, done) => {
       // Verify email and verification token exist in database
       const invite = await getVerificationRequest(email, verificationToken, secret, provider)
       if (!invite) {
-        res.status(302).setHeader('Location', `${baseUrl}/error?error=Verification`)
-        res.end()
-        return done()
+        return redirect(`${baseUrl}${basePath}/error?error=Verification`)
       }
 
       // If verification token is valid, delete verification request token from
@@ -150,12 +134,10 @@ export default async (req, res, options, done) => {
       const account = { id: provider.id, type: 'email', providerAccountId: email }
 
       // Check if user is allowed to sign in
-      const signinCallbackResponse = await callbacks.signin(profile, account, null)
+      const signInCallbackResponse = await callbacks.signIn(profile, account, null)
 
-      if (signinCallbackResponse === false) {
-        res.status(302).setHeader('Location', `${baseUrl}/error?error=AccessDenied`)
-        res.end()
-        return done()
+      if (signInCallbackResponse === false) {
+        return redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
       }
 
       // Sign user in
@@ -166,7 +148,7 @@ export default async (req, res, options, done) => {
         const jwtPayload = await callbacks.jwt(defaultJwtPayload)
 
         // Sign and encrypt token
-        const newEncodedJwt = await jwt.encode({ secret: jwt.secret, token: jwtPayload, maxAge: sessionMaxAge })
+        const newEncodedJwt = await jwt.encode({ secret: jwt.secret, key: jwt.key, token: jwtPayload, maxAge: sessionMaxAge, encryption: jwt.encryption })
 
         // Set cookie expiry date
         const cookieExpires = new Date()
@@ -178,49 +160,38 @@ export default async (req, res, options, done) => {
         cookie.set(res, cookies.sessionToken.name, session.sessionToken, { expires: session.expires || null, ...cookies.sessionToken.options })
       }
 
-      await dispatchEvent(events.signin, { user, account, isNewUser })
+      await dispatchEvent(events.signIn, { user, account, isNewUser })
 
       // Handle first logins on new accounts
       // e.g. option to send users to a new account landing page on initial login
       // Note that the callback URL is preserved, so the journey can still be resumed
       if (isNewUser && pages.newUser) {
-        res.status(302).setHeader('Location', pages.newUser)
-        res.end()
-        return done()
+        return redirect(pages.newUser)
       }
 
       // Callback URL is already verified at this point, so safe to use if specified
       if (callbackUrl) {
-        res.status(302).setHeader('Location', callbackUrl)
-        res.end()
+        return redirect(callbackUrl)
       } else {
-        res.status(302).setHeader('Location', site)
-        res.end()
+        return redirect(baseUrl)
       }
-      return done()
     } catch (error) {
       if (error.name === 'CreateUserError') {
-        res.status(302).setHeader('Location', `${baseUrl}/error?error=EmailCreateAccount`)
+        return redirect(`${baseUrl}${basePath}/error?error=EmailCreateAccount`)
       } else {
-        res.status(302).setHeader('Location', `${baseUrl}/error?error=Callback`)
         logger.error('CALLBACK_EMAIL_ERROR', error)
+        return redirect(`${baseUrl}${basePath}/error?error=Callback`)
       }
-      res.end()
-      return done()
     }
   } else if (type === 'credentials' && req.method === 'POST') {
     if (!useJwtSession) {
       logger.error('CALLBACK_CREDENTIALS_JWT_ERROR', 'Signin in with credentials is only supported if JSON Web Tokens are enabled')
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=Configuration`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=Configuration`)
     }
 
     if (!provider.authorize) {
       logger.error('CALLBACK_CREDENTIALS_HANDLER_ERROR', 'Must define an authorize() handler to use credentials authentication provider')
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=Configuration`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=Configuration`)
     }
 
     const credentials = req.body
@@ -230,9 +201,7 @@ export default async (req, res, options, done) => {
     try {
       userObjectReturnedFromAuthorizeHandler = await provider.authorize(credentials)
     } catch (error) {
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=Configuration`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=Configuration`)
     }
 
     const user = userObjectReturnedFromAuthorizeHandler
@@ -240,24 +209,20 @@ export default async (req, res, options, done) => {
 
     // If no user is returned, credentials are not valid
     if (!user) {
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=CredentialsSignin&provider=${encodeURIComponent(provider.id)}`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=CredentialsSignin&provider=${encodeURIComponent(provider.id)}`)
     }
 
-    const signinCallbackResponse = await callbacks.signin(user, account, credentials)
+    const signInCallbackResponse = await callbacks.signIn(user, account, credentials)
 
-    if (signinCallbackResponse === false) {
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=AccessDenied`)
-      res.end()
-      return done()
+    if (signInCallbackResponse === false) {
+      return redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
     }
 
     const defaultJwtPayload = { user, account }
     const jwtPayload = await callbacks.jwt(defaultJwtPayload)
 
     // Sign and encrypt token
-    const newEncodedJwt = await jwt.encode({ secret: jwt.secret, token: jwtPayload, maxAge: sessionMaxAge })
+    const newEncodedJwt = await jwt.encode({ secret: jwt.secret, key: jwt.key, token: jwtPayload, maxAge: sessionMaxAge, encryption: jwt.encryption })
 
     // Set cookie expiry date
     const cookieExpires = new Date()
@@ -265,17 +230,9 @@ export default async (req, res, options, done) => {
 
     cookie.set(res, cookies.sessionToken.name, newEncodedJwt, { expires: cookieExpires.toISOString(), ...cookies.sessionToken.options })
 
-    await dispatchEvent(events.signin, { user, account })
+    await dispatchEvent(events.signIn, { user, account })
 
-    if (callbackUrl) {
-      res.status(302).setHeader('Location', callbackUrl)
-      res.end()
-    } else {
-      res.status(302).setHeader('Location', site)
-      res.end()
-    }
-
-    return done()
+    return redirect(callbackUrl || baseUrl)
   } else {
     res.status(500).end(`Error: Callback for provider type ${type} not supported`)
     return done()
diff --git a/src/server/routes/session.js b/src/server/routes/session.js
index 807d9e2923..7f91c612a0 100644
--- a/src/server/routes/session.js
+++ b/src/server/routes/session.js
@@ -19,7 +19,7 @@ export default async (req, res, options, done) => {
   if (useJwtSession) {
     try {
       // Decrypt and verify token
-      const decodedJwt = await jwt.decode({ secret: jwt.secret, token: sessionToken, maxAge: sessionMaxAge })
+      const decodedJwt = await jwt.decode({ secret: jwt.secret, key: jwt.key, token: sessionToken, maxAge: sessionMaxAge, encryption: jwt.encryption })
 
       // Generate new session expiry date
       const sessionExpiresDate = new Date()
@@ -45,7 +45,7 @@ export default async (req, res, options, done) => {
       response = sessionPayload
 
       // Refresh JWT expiry by re-signing it, with an updated expiry date
-      const newEncodedJwt = await jwt.encode({ secret: jwt.secret, token: jwtPayload, maxAge: sessionMaxAge })
+      const newEncodedJwt = await jwt.encode({ secret: jwt.secret, key: jwt.key, token: jwtPayload, maxAge: sessionMaxAge, encryption: jwt.encryption })
 
       // Set cookie, to also update expiry date on cookie
       cookie.set(res, cookies.sessionToken.name, newEncodedJwt, { expires: sessionExpires, ...cookies.sessionToken.options })
diff --git a/src/server/routes/signin.js b/src/server/routes/signin.js
index 9eb32b7165..d6da8378b7 100644
--- a/src/server/routes/signin.js
+++ b/src/server/routes/signin.js
@@ -8,9 +8,11 @@ export default async (req, res, options, done) => {
     provider: providerName,
     providers,
     baseUrl,
-    csrfTokenVerified,
+    basePath,
     adapter,
-    callbacks
+    callbacks,
+    csrfToken,
+    redirect
   } = options
   const provider = providers[providerName]
   const { type } = provider
@@ -20,29 +22,19 @@ export default async (req, res, options, done) => {
     return done()
   }
 
-  if (type === 'oauth') {
-    oAuthSignin(provider, (error, oAuthSigninUrl) => {
+  if (type === 'oauth' && req.method === 'POST') {
+    oAuthSignin(provider, csrfToken, (error, oAuthSigninUrl) => {
       if (error) {
         logger.error('SIGNIN_OAUTH_ERROR', error)
-        res
-          .status(302)
-          .setHeader('Location', `${baseUrl}/error?error=oAuthSignin`)
-        res.end()
-        return done()
+        return redirect(`${baseUrl}${basePath}/error?error=oAuthSignin`)
       }
 
-      res.status(302).setHeader('Location', oAuthSigninUrl)
-      res.end()
-      return done()
+      return redirect(oAuthSigninUrl)
     })
   } else if (type === 'email' && req.method === 'POST') {
     if (!adapter) {
       logger.error('EMAIL_REQUIRES_ADAPTER_ERROR')
-      res
-        .status(302)
-        .setHeader('Location', `${baseUrl}/error?error=Configuration`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=Configuration`)
     }
     const { getUserByEmail } = await adapter.getAdapter(options)
 
@@ -58,54 +50,23 @@ export default async (req, res, options, done) => {
     const account = { id: provider.id, type: 'email', providerAccountId: email }
 
     // Check if user is allowed to sign in
-    const signinCallbackResponse = await callbacks.signin(profile, account)
+    const signinCallbackResponse = await callbacks.signIn(profile, account)
 
     if (signinCallbackResponse === false) {
-      res.status(302).setHeader('Location', `${baseUrl}/error?error=AccessDenied`)
-      res.end()
-      return done()
-    }
-
-    // If CSRF token not verified, send the user to sign in page, which will
-    // display a new form with a valid token so that submitting it should work.
-    //
-    // Note: Adds ?csrf=true query string param to URL for debugging/tracking
-    if (!csrfTokenVerified) {
-      res
-        .status(302)
-        .setHeader(
-          'Location',
-          `${baseUrl}/signin?email=${encodeURIComponent(email)}&csrf=true`
-        )
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
     }
 
     try {
       await emailSignin(email, provider, options)
     } catch (error) {
       logger.error('SIGNIN_EMAIL_ERROR', error)
-      res
-        .status(302)
-        .setHeader('Location', `${baseUrl}/error?error=EmailSignin`)
-      res.end()
-      return done()
+      return redirect(`${baseUrl}${basePath}/error?error=EmailSignin`)
     }
 
-    res
-      .status(302)
-      .setHeader(
-        'Location',
-        `${baseUrl}/verify-request?provider=${encodeURIComponent(
-          provider.id
-        )}&type=${encodeURIComponent(provider.type)}`
-      )
-    res.end()
-    return done()
+    return redirect(`${baseUrl}${basePath}/verify-request?provider=${encodeURIComponent(
+      provider.id
+    )}&type=${encodeURIComponent(provider.type)}`)
   } else {
-    // If provider not supported, redirect to sign in page
-    res.status(302).setHeader('Location', `${baseUrl}/signin`)
-    res.end()
-    return done()
+    return redirect(`${baseUrl}${basePath}/signin`)
   }
 }
diff --git a/src/server/routes/signout.js b/src/server/routes/signout.js
index 868e10108d..1fbc88c4b1 100644
--- a/src/server/routes/signout.js
+++ b/src/server/routes/signout.js
@@ -4,28 +4,16 @@ import logger from '../../lib/logger'
 import dispatchEvent from '../lib/dispatch-event'
 
 export default async (req, res, options, done) => {
-  const { adapter, cookies, events, jwt, callbackUrl, csrfTokenVerified, baseUrl } = options
+  const { adapter, cookies, events, jwt, callbackUrl, redirect } = options
   const sessionMaxAge = options.session.maxAge
   const useJwtSession = options.session.jwt
   const sessionToken = req.cookies[cookies.sessionToken.name]
 
-  if (!csrfTokenVerified) {
-    // If a csrfToken was not verified with this request, send the user to
-    // the signout page, as they should have a valid one now and clicking
-    // the signout button should work.
-    //
-    // Note: Adds ?csrf=true query string param to URL for debugging/tracking.
-    // @TODO Add support for custom signin URLs
-    res.status(302).setHeader('Location', `${baseUrl}/signout?csrf=true`)
-    res.end()
-    return done()
-  }
-
   if (useJwtSession) {
     // Dispatch signout event
     try {
-      const decodedJwt = await jwt.decode({ secret: jwt.secret, token: sessionToken, maxAge: sessionMaxAge })
-      await dispatchEvent(events.signout, decodedJwt)
+      const decodedJwt = await jwt.decode({ secret: jwt.secret, key: jwt.key, token: sessionToken, maxAge: sessionMaxAge, encryption: jwt.encryption })
+      await dispatchEvent(events.signOut, decodedJwt)
     } catch (error) {
       // Do nothing if decoding the JWT fails
     }
@@ -36,7 +24,7 @@ export default async (req, res, options, done) => {
     try {
       // Dispatch signout event
       const session = await getSession(sessionToken)
-      await dispatchEvent(events.signout, session)
+      await dispatchEvent(events.signOut, session)
     } catch (error) {
       // Do nothing if looking up the session fails
     }
@@ -56,7 +44,5 @@ export default async (req, res, options, done) => {
     maxAge: 0
   })
 
-  res.status(302).setHeader('Location', callbackUrl)
-  res.end()
-  return done()
+  return redirect(callbackUrl)
 }
diff --git a/src/server/routes/tokens.js b/src/server/routes/tokens.js
new file mode 100644
index 0000000000..5efc9438e5
--- /dev/null
+++ b/src/server/routes/tokens.js
@@ -0,0 +1,74 @@
+import cookie from '../lib/cookie'
+import logger from '../../lib/logger'
+
+export default async (req, res, options, done) => {
+  const { query } = req
+  const {
+    nextauth,
+    tokenType = nextauth[2]
+  } = query
+  const providerName = options ? options.provider : undefined
+
+  const { cookies, adapter } = options
+  const useJwtSession = options.session.jwt
+  const sessionToken = req.cookies[cookies.sessionToken.name]
+
+  if (!sessionToken) {
+    res.setHeader('Content-Type', 'application/json')
+    res.json({})
+    return done()
+  }
+
+  let response = {}
+  if (!useJwtSession) {
+    if (req.method === 'GET') {
+      try {
+        const { getSession, updateSession, getAccounts, getAccount } = await adapter.getAdapter(options)
+        const session = await getSession(sessionToken)
+        if (session) {
+          // Trigger update to session object to update session expiry
+          await updateSession(session)
+  
+          if (!providerName) {
+            response = await getAccounts(session.userId)
+          } else {
+            const account = await getAccount(session.userId, providerName)
+            if (account) {
+              switch (tokenType) {
+                case undefined:
+                case 'access':
+                  response = {
+                    type: 'access',
+                    token: account.accessToken
+                  }
+                  break
+                case 'refresh':
+                  response = {
+                    type: 'refresh',
+                    token: account.refreshToken
+                  }
+                  break
+                default:
+                  res.status(404).end()
+                  return done()
+              }
+            } else {
+              res.status(404).end()
+              return done()  
+            }
+          }
+        } else if (sessionToken) {
+          // If sessionToken was found set but it's not valid for a session then
+          // remove the sessionToken cookie from browser.
+          cookie.set(res, cookies.sessionToken.name, '', { ...cookies.sessionToken.options, maxAge: 0 })
+        }
+      } catch (error) {
+        logger.error('TOKEN_ERROR', error)
+      }
+    }
+  }
+
+  res.setHeader('Content-Type', 'application/json')
+  res.json(response)
+  return done()
+}
diff --git a/www/docs/configuration/callbacks.md b/www/docs/configuration/callbacks.md
index 19cbd31f5b..765c4b942e 100644
--- a/www/docs/configuration/callbacks.md
+++ b/www/docs/configuration/callbacks.md
@@ -13,62 +13,61 @@ You can specify a handler for any of the callbacks below.
 
 ```js title="pages/api/auth/[...nextauth.js]"
 callbacks: {
-  signin: async (profile, account, metadata) => { },
+  signIn: async (profile, account, metadata) => { },
   redirect: async (url, baseUrl) => { },
   session: async (session, token) => { },
-  jwt: async (token, oAuthProfile) => { }
+  jwt: async (token, profile) => { }
 }
 ```
 
 The documentation below shows how to implement each callback and their default behaviour.
 
-## Signin
+## Sign In
 
 Use the signin callback to control if a user is allowed to sign in or not.
 
-This is triggered before sign in flow completes, so the user profile may be a
-user object (with an ID) or it may be just their name and email address,
-depending on the sign in flow and if they have an account already.
-
-When using email sign in, this method is triggered both when the user requests
-to sign in and again when they activate the link in the sign in email.
-
-```js
-/**
- * @param  {object} profile  User profile (e.g. user id, name, email)
- * @param  {object} account  Account used to sign in (e.g. OAuth account)
- * @param  {object} metadata Provider specific metadata (e.g. OAuth Profile)
- * @return {boolean|object}  Return `true` (or a modified JWT) to allow sign in
- *                           Return `false` to deny access
- */
-const signin = async (profile, account, metadata) => {
-  const isAllowedToSignIn = true
-  if (isAllowedToSignIn) {
-    return Promise.resolve(true)
-  } else {
-    return Promise.resolve(false)
+This is triggered before sign in flow completes, so the user profile may be a user object (with an ID) or it may be just their name and email address, depending on the sign in flow and if they have an account already.
+
+When using email sign in, this method is triggered both when the user requests to sign in and again when they activate the link in the sign in email.
+
+```js title="pages/api/auth/[...nextauth.js]"
+callbacks: {
+  /**
+   * @param  {object} profile  User profile (e.g. user id, name, email)
+   * @param  {object} account  Account used to sign in (e.g. OAuth account)
+   * @param  {object} metadata Provider specific metadata (e.g. OAuth Profile)
+   * @return {boolean|object}  Return `true` (or a modified JWT) to allow sign in
+   *                           Return `false` to deny access
+   */
+  signIn: async (profile, account, metadata) => {
+    const isAllowedToSignIn = true
+    if (isAllowedToSignIn) {
+      return Promise.resolve(true)
+    } else {
+      return Promise.resolve(false)
+    }
   }
 }
 ```
 
 ## Redirect
 
-The redirect callback is called anytime the user is redirected to a callback URL
-(e.g. on signin or signout).
-
-By default, for security, only Callback URLs on the same URL as the site are
-allowed, you can use the redirect callback to customise that behaviour.
-
-```js
-/**
- * @param  {string} url      URL provided as callback URL by the client
- * @param  {string} baseUrl  Default base URL of site (can be used as fallback)
- * @return {string}          URL the client will be redirect to
- */
-const redirect = async (url, baseUrl) => {
-  return url.startsWith(baseUrl)
-    ? Promise.resolve(url)
-    : Promise.resolve(baseUrl)
+The redirect callback is called anytime the user is redirected to a callback URL (e.g. on signin or signout).
+
+By default, for security, only Callback URLs on the same URL as the site are allowed, you can use the redirect callback to customise that behaviour.
+
+```js title="pages/api/auth/[...nextauth.js]"
+callbacks: {
+  /**
+   * @param  {string} url      URL provided as callback URL by the client
+   * @param  {string} baseUrl  Default base URL of site (can be used as fallback)
+   * @return {string}          URL the client will be redirect to
+   */
+  redirect: async (url, baseUrl) => {
+    return url.startsWith(baseUrl)
+      ? Promise.resolve(url)
+      : Promise.resolve(baseUrl)
+  }
 }
 ```
 
@@ -78,20 +77,21 @@ The session callback is called whenever a session is checked.
 
 e.g. `getSession()`, `useSession()`, `/api/auth/session` (etc)
 
-If JSON Web Tokens are enabled, you can also access the decrypted token and use
-this method to pass information from the encoded token back to the client.
+If JSON Web Tokens are enabled, you can also access the decrypted token and use this method to pass information from the encoded token back to the client.
 
 The JWT callback is invoked before the session() callback is called, so anything you add to the
 JWT will be immediately available in the session callback.
 
-```js
-/**
- * @param  {object} session  Session object
- * @param  {object} token    JSON Web Token (if enabled)
- * @return {object}          Session that will be returned to the client 
- */
-const session = async (session, token) => {
-  return Promise.resolve(session)
+```js title="pages/api/auth/[...nextauth.js]"
+callbacks: {
+  /**
+   * @param  {object} session  Session object
+   * @param  {object} token    JSON Web Token (if enabled)
+   * @return {object}          Session that will be returned to the client 
+   */
+  session: async (session, token) => {
+    return Promise.resolve(session)
+  }
 }
 ```
 
@@ -104,16 +104,19 @@ e.g. `/api/auth/signin`, `getSession()`, `useSession()`, `/api/auth/session` (et
 
 * The JWT expiry time is updated / extended whenever a session is accessed.
 
-* On sign in, the raw profile object returned by the provider is also passed as a parameter.
-It is not available on subsequent calls. You can take advantage of this to persist additional data from the profile in the JWT.
-
-```js
-/**
- * @param  {object} token    Decrypted JSON Web Token
- * @param  {object} profile  Profile - only available on sign in
- * @return {object}          JSON Web Token that will be saved
- */
-const jwt = async (token, profile) => {
-  return Promise.resolve(token)
+* On sign in, the raw profile for a user returned by the provider is also passed as a parameter.
+
+The raw profile is not available after the initial callback that is triggered when the user signs in. You can take advantage of it beomg present on the first callback, to persist any additional data you need from the users profile in the JWT.
+
+```js title="pages/api/auth/[...nextauth.js]"
+callbacks: {
+  /**
+   * @param  {object} token    Decrypted JSON Web Token
+   * @param  {object} profile  Profile - only available on sign in
+   * @return {object}          JSON Web Token that will be saved
+   */
+  jwt: async (token, profile) => {
+    return Promise.resolve(token)
+  }
 }
 ```
diff --git a/www/docs/configuration/events.md b/www/docs/configuration/events.md
index be91d0cbaf..03d713094e 100644
--- a/www/docs/configuration/events.md
+++ b/www/docs/configuration/events.md
@@ -3,7 +3,7 @@ id: events
 title: Events
 ---
 
-Events are asynchronous functions that do not return a response, they are useful for audit logging.
+Events are asynchronous functions that do not return a response, they are useful for audit logs / reporting.
 
 ### Example
 
@@ -11,8 +11,8 @@ You can specify a handler for any of these events below - e.g. for debugging or
 
 ```js title="pages/api/auth/[...nextauth.js]"
 events: {
-  signin: async (message) => { /* on successful sign in */ },
-  signout: async (message) => { /* on signout */ },
+  signIn: async (message) => { /* on successful sign in */ },
+  signOut: async (message) => { /* on signout */ },
   createUser: async (message) => { /* user created */ },
   linkAccount: async (message) => { /* account linked to a user */ },
   session: async (message) => { /* session is active */ },
@@ -20,4 +20,4 @@ events: {
 }
 ```
 
-The content of the message object varies depending on the flow (e.g. OAuth or Email authentication flow, JWT or database sessions, etc), but typically contains a user object and/or contents of the JSON Web Token and other information relevent to the event.
+The content of the message object varies depending on the flow (e.g. OAuth or Email authentication flow, JWT or database sessions, etc) but typically contains a user object and/or contents of the JSON Web Token and other information relevent to the event.
diff --git a/www/docs/configuration/options.md b/www/docs/configuration/options.md
index 2500b8f7db..fb10c9a6e9 100644
--- a/www/docs/configuration/options.md
+++ b/www/docs/configuration/options.md
@@ -3,27 +3,30 @@ id: options
 title: Options
 ---
 
-Options are passed to NextAuth.js when initializing it in an API route.
+## Environment Variables
 
-:::note
-The only *required* options are **site** and **providers**.
-:::
+### NEXTAUTH_URL 
 
-## Options
+When deploying to production, set the `NEXTAUTH_URL` environment variable to the canonical URL of your site.
 
-### site
+```
+NEXTAUTH_URL=https://example.com
+```
 
-* **Default value**: `empty string`
-* **Required**: *Yes*
+If your Next.js application uses a custom base path, specify the route to the API endpoint in full.
 
-#### Description 
+_e.g. `NEXTAUTH_URL=https://example.com/custom-route/api/auth`_
 
-The fully qualified URL for the root of your site.
-
-e.g. `http://localhost:3000` or `https://www.example.com`
+:::tip
+To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `now env` command.
+:::
 
 ---
 
+## Options
+
+Options are passed to NextAuth.js when initializing it in an API route.
+
 ### providers
 
 * **Default value**: `[]`
@@ -110,27 +113,28 @@ session: {
 
 #### Description
 
-JSON Web Tokens are only used if JWT sessions are enabled with `session: { jwt: true }` (see `session` documentation).
+JSON Web Tokens are can be used for session tokens (instead of database sessions) if enabled with `session: { jwt: true }` option is set. They are enabled by default if you have not specified a database.
 
-The `jwt` object and all properties on it are optional.
+You can use JSON Web Tokens for session data in conjuction with a database for user data, or you can use JSON Web Tokens without a database.
 
-When enabled, JSON Web Tokens is signed with `HMAC SHA256` and encrypted with symmetric `AES`.
-
-Using JWT to store sessions is often faster, cheaper and more scaleable relying on a database.
-
-Default values for this option are shown below:
+Options and values for JSON Web Tokens:
 
 ```js
 jwt: {
-  // secret: 'my-secret-123', // Secret auto-generated if not specified.
+  // JWT secret and keys use the NextAuth.js secret if not specified
+  // secret: 'my-secret-123', // Secret used for signing tokens
+  // key: 'my-key-abc', // Key used for encrypting tokens (defaults to secret)
   
-  // By default the JSON Web Token is signed with SHA256 and encrypted with AES.
+  // Encryption scheme to use when encrypting a token.
+  // Specify a value of false to sign but not encrypt tokens.
+  // encryption: 'AES', // One of [ 'AES', false ] (default 'AES')
+
+  // By default tokens are signed with HMAC-SHA256 and encrypted with AES.
   //
   // You can define your own encode/decode functions for signing + encryption if
-  // you want to override the default behaviour (or to add/remove information
-  // from the JWT when it is encoded).
-  // encode: async ({ secret, key, token, maxAge }) => {},
-  // decode: async ({ secret, key, token, maxAge }) => {},
+  // you want to override the default behaviour.
+  // encode: async ({ secret, key, token, maxAge, encryption }) => {},
+  // decode: async ({ secret, key, token, maxAge, encryption }) => {},
 }
 ```
 
@@ -155,28 +159,45 @@ An example JSON WebToken contains an encrypted payload like this:
     accessToken: '931400799b4a980715bb55af1bb8e01d92316956',
     accessTokenExpires: null
   },
-  isNewUser: true, // Is set to true if is first sign in
+  isNewUser: true, // When using a database, is set to true if first sign in
   iat: 1591150735, // Issued at
   exp: 4183150735  // Expires in
 }
 ```
 
-You can use the built-in `getJwt()` helper method to read the token, like this:
+#### JWT Helper
+
+You can use the built-in `getToken()` helper method to verify and decrypt the token, like this:
 
 ```js
 import jwt from 'next-auth/jwt'
 
 const secret = process.env.JWT_SECRET
 
-export default async (req, res) =>  {
-  // Automatically decrypts and verifies JWT
-  const token = await jwt.getJwt({ req, secret })
-  res.end(JSON.stringify(token, null, 2))
+export default async (req, res) => {
+  const token = await jwt.getToken({ req, secret })
+  console.log('JSON Web Token', token)
+  res.end()
 }
 ```
 
+The getToken() helper supports the following options:
+
+* req - The request object (required)
+* secret - The secret used for signing tokens (required)
+* key - The key used for decrypting tokens (optional)
+* encryption - One of [ 'AES', false ] (optional, default 'AES')
+* secureCookie - Boolean. Uses secure prefixed cookie if true (optional)
+* cookieName - Use custom session token cookie name (optional)
+
+_For convenience, this helper function is also able to read and decode tokens passed in an HTTP Bearer header._
+
+:::note
+The helper function will attempt to determine if it should use the secure prefixed cookie automatically (e.g. `true` in production, `false` in development instances). You can set either `secureCookie` explicitly or specify the cookie name explicitly if you need to.
+:::
+
 :::note
-The JWT is stored in the Session Token cookie – the same cookie used for database sessions.
+The JWT is stored in the Session Token cookie, the same cookie used for tokens when using a database session.
 :::
 
 ---
@@ -223,10 +244,10 @@ You can specify a handler for any of the callbacks below.
 
 ```js
 callbacks: {
-  signin: async (profile, account, metadata) => { },
+  signIn: async (profile, account, metadata) => { },
   redirect: async (url, baseUrl) => { },
   session: async (session, token) => { },
-  jwt: async (token) => => { }
+  jwt: async (token, profile) => => { }
 }
 ```
 
@@ -249,8 +270,8 @@ The content of the message object varies depending on the flow (e.g. OAuth or Em
 
 ```js
 events: {
-  signin: async (message) => { /* on successful sign in */ },
-  signout: async (message) => { /* on signout */ },
+  signIn: async (message) => { /* on successful sign in */ },
+  signOut: async (message) => { /* on signout */ },
   createUser: async (message) => { /* user created */ },
   linkAccount: async (message) => { /* account linked to a user */ },
   session: async (message) => { /* session is active */ },
@@ -260,61 +281,39 @@ events: {
 
 ---
 
-### debug
+### adapter
 
-* **Default value**: `false`
+* **Default value**: *Adapater.Default()*
 * **Required**: *No*
 
 #### Description
 
-Set debug to `true` to enable debug messages for authentication and database operations.
+By default NextAuth.js uses a database adapter that uses TypeORM and supports MySQL, MariaDB, Postgres and MongoDB and SQLite databases. An alternative adapter that uses Prisma, which currently supports MySQL, MariaDB and Postgres, is also included.
 
----
-
-## Advanced Options
+You can use the `adapter` option to use the Prisma adapter - or pass in your own adapter if you want to use a database that is not supported by one of the built-in adapters.
 
+See the [adapter documentation](/schemas/adapters) for more information.
 
-:::warning
-Advanced options are passed the same way as basic options, but may have complex implications or side effects. You should try to avoid using advanced options unless you are very comfortable using them.
+:::note
+If the `adapter` option is specified it overrides the `database` option, only specify one or the other.
 :::
 
 ---
 
-### basePath
+### debug
 
-* **Default value**: `/api/auth`
+* **Default value**: `false`
 * **Required**: *No*
 
 #### Description
 
-This option allows you to specify a different base path if you don't want to use `/api/auth` for some reason.
-
-If you set this option you **must** also configure it along with the `site` property in `pages/_app.js`
-
-```js title="pages/_app.js"
-import { config } from 'next-auth/client'
-config({ 
-  site: process.env.SITE, // e.g. 'http://localhost:3000'
-  basePath: process.env.BASE_PATH // e.g. '/api/some-other-route-name'
-})
-```
+Set debug to `true` to enable debug messages for authentication and database operations.
 
 ---
 
-### adapter
-
-* **Default value**: *Adapater.Default()*
-* **Required**: *No*
-
-#### Description
-
-A custom provider is an advanced option intended for use only you need to use NextAuth.js with a database configuration that is not supported by the default `database` adapter.
-
-See the [adapter documentation](/schemas/adapters) for more information.
+## Advanced Options
 
-:::note
-If the `adapter` option is specified it overrides the `database` option.
-:::
+Advanced options are passed the same way as basic options, but may have complex implications or side effects. You should try to avoid using advanced options unless you are very comfortable using them.
 
 ---
 
@@ -336,7 +335,7 @@ Properties on any custom `cookies` that are specified override this option.
 :::
 
 :::warning
-Setting this option to *false* in production is a security risk and may allow sessions to hijacked.
+Setting this option to *false* in production is a security risk and may allow sessions to hijacked if used in production. It is intended to support development and testing. Using this option is not recommended.
 :::
 
 ---
@@ -388,5 +387,5 @@ cookies: {
 ```
 
 :::warning
-Changing the cookie options may introduce security flaws into your application and may break NextAuth.js integration now or in a future update. Using this option is not recommended.
+Using a custom cookie policy may introduce security flaws into your application and is intended as an option for advanced users who understand the implications. Using this option is not recommended.
 :::
diff --git a/www/docs/configuration/pages.md b/www/docs/configuration/pages.md
index 04a9e54629..9659c51a67 100644
--- a/www/docs/configuration/pages.md
+++ b/www/docs/configuration/pages.md
@@ -7,15 +7,15 @@ NextAuth.js automatically creates simple, unbranded authentication pages for han
 
 The options displayed on the sign up page are automatically generated based on the providers specified in the options passed to NextAuth.js.
 
-### Example
+### Configuration
 
 To add a custom login page, for example. You can use the `pages` option:
 
 ```javascript title="pages/api/auth/[...nextauth].js"
   ...
   pages: {
-    signin: '/auth/signin',
-    signout: '/auth/signout',
+    signIn: '/auth/signin',
+    signOut: '/auth/signout',
     error: '/auth/error', // Error code passed in query string as ?error=
     verifyRequest: '/auth/verify-request', // (used for check email message)
     newUser: null // If set, new users will be directed here on first sign in
@@ -23,67 +23,46 @@ To add a custom login page, for example. You can use the `pages` option:
   ...
 ```
 
-## Sign in
+## Examples
 
-### OAuth sign in page
+### OAuth Sign in
 
 In order to get the available authentication providers and the URLs to use for them, you can make a request to the API endpoint `/api/auth/providers`:
 
 ```jsx title="pages/auth/signin"
 import React from 'react'
-import { providers, signin } from 'next-auth/client'
+import { providers, signIn } from 'next-auth/client'
 
 export default ({ providers }) => {
   return (
     <>
       {Object.values(providers).map(provider => (
-        <p key={provider.name}>
-          <a href={provider.signinUrl} onClick={(e) => e.preventDefault()}>
-            <button onClick={() => signin(provider.id)}>Sign in with {provider.name}</button>
-          </a>
-        </p>
+        <div key={provider.name}>
+          <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
+        </div>
       ))}
     </>
   )
 }
 
-export async function getServerSideProps (context) {
+export async function getInitalProps(context) {
   return {
-    props: {
-      providers: await providers(context)
-    }
+    providers: await providers(context)
   }
 }
 ```
 
-:::tip
-The **signin()** method automatically sets the callback URL to the current page. Using a link as a fallback means it sign in can work even without client side JavaScript.
-:::
-
-### Email sign in page
+### Email Sign in
 
 If you create a custom sign in form for email sign in, you will need to submit both fields for the **email** address and **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/signin/email**.
 
-This is easier if you use the build in `signin()` function, as it sets the CSRF token automatically.
-
-:::tip
-To create a sign in page that works on clients with and without client side JavaScript, you can use both the **signin()** method and the **csrfToken()** method
-:::
-
 ```jsx title="pages/auth/email-signin"
 import React from 'react'
-import { csrfToken, signin } from 'next-auth/client'
+import { csrfToken } from 'next-auth/client'
 
 export default ({ csrfToken }) => {
   return (
-    <form
-      method='post'
-      action='/api/auth/signin/email'
-      onSubmit={(e) => {
-        e.preventDefault()
-        signin('email', { email: document.getElementById('email').value })
-      }}
-    >
+    <form method='post' action='/api/auth/signin/email'>
       <input name='csrfToken' type='hidden' defaultValue={csrfToken}/>
       <label>
         Email address
@@ -94,11 +73,53 @@ export default ({ csrfToken }) => {
   )
 }
 
-export async function getServerSideProps (context) {
+export async function getInitalProps(context) {
+  return {
+    csrfToken: await csrfToken(context)
+  }
+}
+```
+
+You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
+
+```js
+signIn('email', { email: 'jsmith@example.com' })
+```
+
+### Credentials Sign in
+
+If you create a sign in form for credentials based authenticaiton, you will needt to pass a **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/callback/credentials**.
+
+```jsx title="pages/auth/credentials-signin"
+import React from 'react'
+import { csrfToken } from 'next-auth/client'
+
+export default ({ csrfToken }) => {
+  return (
+    <form method='post' action='/api/auth/callback/credentials'>
+      <input name='csrfToken' type='hidden' defaultValue={csrfToken}/>
+      <label>
+        Username
+        <input name='username' type='text'/>
+      </label>
+      <label>
+        Password
+        <input name='password' type='text'/>
+      </label>
+      <button type='submit'>Sign in</button>
+    </form>
+  )
+}
+
+export async function getInitalProps(context) {
   return {
-    props: {
-      csrfToken: await csrfToken(context)
-    }
+    csrfToken: await csrfToken(context)
   }
 }
 ```
+
+You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
+
+```js
+signIn('credentials', { username: 'jsmith', password: '1234' })
+```
\ No newline at end of file
diff --git a/www/docs/configuration/providers.md b/www/docs/configuration/providers.md
index 0b6009d203..b04e279bb3 100644
--- a/www/docs/configuration/providers.md
+++ b/www/docs/configuration/providers.md
@@ -132,15 +132,15 @@ providers: [
 ...
 ```
 
-#### Options
+### OAuth provider options
 
 |       Name       |                     Description                     | Required |
 | :--------------: | :-------------------------------------------------: | :------: |
-|        id        |        An unique ID for your custom provider        |   Yes    |
-|       name       |       An unique name for your custom provider       |   Yes    |
+|        id        |        Unique ID for the provider        |   Yes    |
+|       name       |       Descriptive name for the provider       |   Yes    |
 |       type       | Type of provider, in this case it should be `oauth` |   Yes    |
-|     version      |                   OAuth version.                    |   Yes    |
-|      scope       |                 OAuth access scopes                 |    No    |
+|     version      |     OAuth version (e.g. '1.0', '1.0a', '2.0')       |   Yes    |
+|      scope       |       OAuth access scopes (expects array or string) |    No    |
 |      params      |       Additional authorization URL parameters       |    No    |
 |  accessTokenUrl  |        Endpoint to retrieve an access token         |   Yes    |
 | requestTokenUrl  |        Endpoint to retrieve a request token         |    No    |
@@ -150,6 +150,7 @@ providers: [
 |     clientId     |           Client ID of the OAuth provider           |   Yes    |
 |   clientSecret   |         Client Secret of the OAuth provider         |    No    |
 |      idToken     |  Set to `true` for services that use ID Tokens (e.g. OpenID)     |    No    |
+|      state     | Set to `false` for services that do not support `state` verfication |    No    |
 
 :::note
 Feel free to open a PR for your custom configuration if you've created one for a provider that others may be interested in so we can add it to the list of built-in OAuth providers!
diff --git a/www/docs/errors.md b/www/docs/errors.md
index 1e58de5fca..570685787d 100644
--- a/www/docs/errors.md
+++ b/www/docs/errors.md
@@ -21,34 +21,7 @@ This error occurs when the `useSession()` React Hook has a problem fetching sess
 
 #### CLIENT_FETCH_ERROR
 
-If you see `CLIENT_FETCH_ERROR` and "_TypeError: Only absolute URLs are supported_" in the console when accessing a page it means you have tried to use the client method server side without first configuring the site name in `pages/app.js` correctly.
-
-* This usually happens when calling `getSession()` from `getServerSideProps()` but the site property in the Provider in `pages/_app.js` is not set.
-
-* Check you have configured your environment variable correctly by [checking out the example project](https://github.com/iaincollins/next-auth-example) and following the instructions in the README.
-
-You should not use log bugs against `CLIENT_FETCH_ERROR` unless you are certain it is a bug in NextAuth.js.
-
-*If it works in the [live demo of the example project](https://next-auth-example.now.sh/ssr) it is not a bug in NextAuth.js*
-
-**How to use getSession() from an API Route**
-
-In the special case of calling `getSession()` in an API route, `pages/_app.js` is not used and won't help.
-
-You can use an undocumented feature called `setOptions()` in API routes to configure the site name so you can use `getSession()` in an API route. This is not yet a supported feature and it's possible it may be changed or removed in future but it exists specifically to address this problem as an interim solution.
-
-_You should not use this approach in pages, only in API routes._
-
-```js
-import { setOptions, getSession } from 'next-auth/client'
-setOptions({ site: process.env.SITE })
-
-export default async (req, res) =>  {
-  const session = await getSession({ req })
-  console.log('session', session)
-  res.end()
-}
-```
+If you see `CLIENT_FETCH_ERROR` make sure you have configured the `NEXTAUTH_URL` envionment variable.
 
 ---
 
diff --git a/www/docs/faq.md b/www/docs/faq.md
new file mode 100644
index 0000000000..eb3b3760a3
--- /dev/null
+++ b/www/docs/faq.md
@@ -0,0 +1,145 @@
+---
+id: faq
+title: Frequently Asked Questions
+---
+
+## About NextAuth.js
+
+### Is NextAuth.js commercial software?
+
+NextAuth.js is an open source project built by individual contributors.
+
+It is not commercial software and is not associated with a commercial organization.
+
+---
+
+## Compatibility
+
+### What databases does NextAuth.js support?
+
+You can use NextAuth.js with MySQL, MariaDB, Postgres, MongoDB and SQLite or without a database.
+
+You can use also NextAuth.js with any database using a custom database adapter, or by using a custom credentials authentication provider (e.g. to support signing in with a username and password stored in an existing database).
+
+### What authentication services does NextAuth.js support?
+
+NextAuth.js includes built-in support for signing in with Apple, Auth0, Google, Battle.net, Box, AWS Cognito, Discord, Facebook, GitHub, GitLab, Google, Open ID Identity Server, Mixer, Okta, Slack, Spotify, Twitch, Twitter and Yandex.
+
+NextAuth.js also supports email for passwordless sign in, which is useful for account recovery - or for people who are not able to use an account with the configured OAuth services.
+
+You can also use a custom based provider to support signing in with a username and password stored in an external database and/or using two factor authentication.
+
+### Does NextAuth.js support signing in with a username and password?
+
+NextAuth.js is designed to avoid the need to store passwords for user accounts.
+
+If you have an existing database of usernames and passwords, you can use a custom credentials provider to allow signing in with a username and password stored in an existing database.
+
+_If you use a custom credentials provider user accounts will not be persisted in a database by NextAuth.js (even if one is configured). The option to use JSON Web Tokens for session tokens (which allow sign in without using a session database) must be enabled to use a custom credentials provider._
+
+### Can I use NextAuth.js with a website that does not use Next.js?
+
+NextAuth.js is designed for use with Next.js and Serverless.
+
+You can built a website that handles sign in with Next.js and use access those sessions on a website that does not use Next.js as long as the websites are on the same domain (e.g. 'example.com', 'account.example.com') and a suitable cookie domain policy set for the Session Token cookie.
+
+NextAuth.js does not supporting signing into sites on different domains using the same service.
+
+### Can I use NextAuth.js with React Native?
+
+NextAuth.js is designed to handle sign in a Next.js web application.
+
+It is designed as secure, confidental OAuth2 client with server side authentication flow, which allows it to do things public clients (which store embedded secrets) and browser-only clients cannot do.
+
+It is not intended to be used in native applications on desktop or mobile applications, which typically use public clients (e.g. with client / secrets embedded in the application).
+
+---
+
+## Security 
+
+### I think I've found a security problem, what should I do?
+
+Less serious or edge case issues (e.g. queries about compatibility with optional RFC specifications) can be raised as public issues on GitHub.
+
+If you discover what you think may be a potentially serious security problem, please contact a core team member via a private channel (e.g. via email to me@iaincollins.com) or raise a public issue requesting someone get in touch with you via whatever means you prefer for more details.
+
+### What is the disclosure policy for NextAuth.js?
+
+We practice responsible disclosure.
+
+If you contact us regarding a potentially serious issue, we will endeavor to get back to you within 72 hours and to publish a fix within 30 days. We will responsibly disclose the issue (and credit you with your consent) once a fix to resolve the issue has been released - or after 90 days, which ever is sooner.
+
+### How do I get Refresh Tokens and Access Tokens for an OAuth account?
+
+NextAuth.js provides a solution for authentication, session management and user account creation.
+
+NextAuth.js records Refresh Tokens and Access Tokens on sign in (if supplied by the provider) and it will save them (along with the User ID, Provider and Provider Account ID) to either:
+
+1. A database - if a database connection string is provided
+2. A JSON Web Token - if JWT sessions are enabled (e.g. if no database specified)
+
+However, NextAuth.js does not also handle Access Token rotation for you. If this is something you need, currently you will need to write the logic to handle that yourself. 
+
+_This is something we would like to have support for in future but is not in active development._
+
+---
+
+## Feature Requests
+
+### Why doesn't NextAuth.js support [a particular feature]?
+
+NextAuth.js is an open source project built by individual contributors who are volunteers who writing code and providing support to help folks out in their spare time.
+
+If you would like NextAuth.js to support a particular feature the best way to help make that happen is to raise a feature request describing the feature and to offer to work with other contributors to develop and test it.
+
+If you are not able to develop a feature yourself, you can offer sponsor someone to work on it.
+
+### I disagree with a design decision, how can I change your mind?
+
+Product design decisions on NextAuth.js are made by core team members.
+
+You can raise suggestions as feature requests / requests for enhancement.
+
+Requests that provide the detail requested in the template and follow the format requested may be more likely to be supported, as additional detail prompted in the templates often provides important context.
+
+Ultimately if your request is not accepted or is not actively in development, you are always free to fork the project under the terms of the ISC License.
+
+---
+
+## JSON Web Tokens 
+
+### Does NextAuth.js use JSON Web Tokens?
+
+NextAuth.js supports both database session tokens and JWT session tokens.
+
+* If a database is specified, database session tokens will be used by default.
+* If no database is specified, JWT session tokens will be used by default.
+* JWT sessions can be used in conjuction with a database to persist user account data.
+
+### What are the advantages of JSON Web Tokens?
+
+JSON Web Tokens can be used for session tokens, but are also used for lots of other things, such as sending signed objects between services in authentication flows.
+
+Advantages of using a JWT as a session token include that they do not require a database to store sessions and can be faster and cheaper to run and services using JWT can be easier to scale. You can also include confidential information directly in a JWT (such as an API key you may not wish to expose publically).
+
+### What are the disadvantages of JSON Web Tokens?
+
+You cannot as easily expire a JSON Web Token remotely - doing so requires maintaining a server side blacklist of invalid accounts. Shorter session expiry times are used when using JSON Web Tokens as session tokens to allow sessions to be invalidated sooner, though any session token can be invalidated sooner by rejecting at run time (e.g. when a client tries to perform an action).
+
+NextAuth.js client includes advanced features such as automatic session token rotation, supports sending keep alive messages and tab/window syncing to support secure services that use sessions with short expiry times (e.g. 5-15 minutes), though typically session expiry times are longer as a short expiry times typically an impact on the cost of running a service.
+
+As with database session tokens, JSON Web Tokens are limited in the amount of data you can store in them. There is typically a limit of around 4096 bytes in total for all cookies on a domain, though the exact limit varies between browsers, proxies and hosting services. The more data you try to store in a cookie and the more cookies you send, the closer you will come to this limit.
+
+### Why does NextAuth.js encrypt JSON Web Tokens?
+
+JSON Web Tokens are signed (to prevent tampering) and the contents encoded using Base64, but JSON Web Tokens are not encrypted on their own - anyone with access to a token, including a signed token, can decode it and read the contents.
+
+NextAuth.js implements [JSON Web Tokens (RFC 7519)](https://tools.ietf.org/html/rfc7519) and uses a sign-then-encrypt model, using [Advanced Encryption Standard (RFC 3826)](https://tools.ietf.org/html/rfc3826) to encrypt tokens after signing and encapsulate the result in an opaque token, so that the contents of the token is not visible to the client and that token metadata cannot be manipulated.
+
+Advanced options are also supported:
+
+* You can disable encryption on tokens by setting the `encryption` option on the JWT to `false`, this allows you to have tokens are signed (but not encrypted) so they can be more easily used by other services running on the same domain.
+
+* You can also define custom `encoding` and `decoding` routines to use for JSON Web Tokens. This allows you to use any encryption or signing method, including JSON Web Encryption (JWE) and/or Javascript Object Signing and Encryption (JOSE).
+
+Note: Changing these options may have implications for the security of your site.
\ No newline at end of file
diff --git a/www/docs/getting-started/client.md b/www/docs/getting-started/client.md
index 4f80726813..3e891c34f5 100644
--- a/www/docs/getting-started/client.md
+++ b/www/docs/getting-started/client.md
@@ -5,27 +5,6 @@ title: Client API
 
 The NextAuth.js client library makes it easy to interact with sessions from React applications.
 
-Some of the methods can be called both client side and server side.
-
-:::note
-To use client methods server side in `getServerSideProp()` or `getInitialProps()` you should add the NextAuth.js  `<Provider>` in `pages/app.js`
-
-```jsx title="pages/_app.js"
-import { Provider } from 'next-auth/client'
-
-export default ({ Component, pageProps }) => {
-  const { session } = pageProps
-  return (
-    <Provider options={{ site: process.env.SITE }} session={session} >
-      <Component {...pageProps} />
-    </Provider>
-  )
-}
-```
-
-Specify the same site name as used in the route. [Documentation for `<Provider>`](/getting-started/client#provider)
-:::
-
 ## useSession()
 
 * Client Side: **Yes**
@@ -55,7 +34,7 @@ export default () => {
 * Client Side: **Yes**
 * Server Side: **Yes**
 
-NextAuth.js also provides a `getSession()` method which can be called client or server side to return a session.
+NextAuth.js provides a `getSession()` method which can be called client or server side to return a session.
 
 It calls `/api/auth/session` and returns a promise with a session object, or null if no session exists.
 
@@ -73,14 +52,20 @@ A session object looks like this:
 }
 ```
 
-You can call `getSession()` inside a function to check if a user is signed in, or use it for server side rendered pages that supporting signing in without requiring client side JavaScript.
+You can call `getSession()` inside a function to check if a user is signed in. 
 
-:::info
-Note that because it exposed to the client it does not contain sensitive information such as the Session Token or OAuth service related tokens. It includes enough information (e.g name, email) to display information on a page about the user who is signed in, and an Access Token that can be used to identify the session without exposing the Session Token itself.
+You can also use it in API routes or in server side rendered pages that supporting signing in without requiring client side JavaScript.
+
+:::note
+The session data returned to the client it does not contain sensitive information such as the Session Token or OAuth tokens. It only includes enough data needed to display information on a page about the user who is signed in (e.g name, email) .
+
+You can use the [session callback](/configuration/callbacks#session) to customize the session object returned to the client if you need to add additional data to it.
 :::
 
 Because it is a Universal method, you can use `getSession()` in both client and server side functions.
 
+#### Server Side Rendered Page
+
 ```jsx title="pages/index.js"
 import { getSession } from 'next-auth/client'
 
@@ -104,8 +89,20 @@ Page.getInitialProps = async (context) => {
 export default Page
 ```
 
+#### API Route
+
+```jsx title="pages/api/example.js"
+import { getSession } from 'next-auth/client'
+
+export default async (req, res) => {
+  const session = await getSession({ req })
+  console.log('Session', session)
+  res.end()
+}
+```
+
 :::note
-When calling `getSession()` server side, you must pass the request object or you can the pass entire `context` object as it contains the `req` object. e.g. `getSession(context)` or `getSession({req})`
+When calling `getSession()` server side, you must pass the request object or you can the pass entire `context` object as it contains the `req` object as shown in the examples. e.g. `getSession(context)` or `getSession({req})`
 :::
 
 ---
@@ -126,40 +123,40 @@ It can be use useful if you are creating a dynamic custom sign in page.
 ## getCsrfToken()
 
 * Client Side: **Yes**
-* Server Side: **Yes**
+* Server Side: No
 
 The `getCsrfToken()` method returns the current Cross Site Request Forgery (CSRF Token) required to make POST requests (e.g. for signing in and signing out). It calls `/api/auth/csrf`.
 
-You likely only need to use this if you are not using the built-in `signin()` and `signout()` methods.
+You likely only need to use this if you are not using the built-in `signIn()` and `signOut()` methods.
 
 ---
 
-## signin()
+## signIn()
 
 * Client Side: **Yes**
 * Server Side: No
 
-Using the `signin()` method ensures the user ends back on the page they started on after completing a sign in flow. It will also handle CSRF tokens for you automatically when signing in with email.
+Using the `signIn()` method ensures the user ends back on the page they started on after completing a sign in flow. It will also handle CSRF tokens for you automatically when signing in with email.
 
-The `signin()` method can be called from the client in different ways, as shown below.
+The `signIn()` method can be called from the client in different ways, as shown below.
 
 #### Redirects to sign in page when clicked
 
 ```js
-import { signin } from 'next-auth/client'
+import { signIn } from 'next-auth/client'
 
 export default () => (
-  <button onClick={signin}>Sign in</button>
+  <button onClick={signIn}>Sign in</button>
 )
 ```
 
 #### Starts Google OAuth sign-in flow when clicked
 
 ```js
-import { signin } from 'next-auth/client'
+import { signIn } from 'next-auth/client'
 
 export default () => (
-  <button onClick={() => signin('google')}>Sign in with Google</button>
+  <button onClick={() => signIn('google')}>Sign in with Google</button>
 )
 ```
 
@@ -168,10 +165,10 @@ export default () => (
 When using it with the email flow, pass the target `email` as an option.
 
 ```js
-import { signin } from 'next-auth/client'
+import { signIn } from 'next-auth/client'
 
 export default ({ email }) => (
-  <button onClick={() => signin('email', { email })}>Sign in with Email</button>
+  <button onClick={() => signIn('email', { email })}>Sign in with Email</button>
 )
 ```
 
@@ -179,44 +176,40 @@ export default ({ email }) => (
 
 By default, the URL of page the client is on when they sign in is used as the `callbackUrl` and that is the URL the client will be redirected to after signing in.
 
-You can specify a different URL as the `callbackUrl` parameter by passing it in the second argument to `signin()`. This works for all calls to `signin()`.
+You can specify a different URL as the `callbackUrl` parameter by passing it in the second argument to `signIn()`. This works for all calls to `signIn()`.
 
 e.g.
 
-* `signin(null, { callbackUrl: 'http://localhost:3000/foo' })`
-* `signin('google', { callbackUrl: 'http://localhost:3000/foo' })`
-* `signin('email', { email, callbackUrl: 'http://localhost:3000/foo' })`
+* `signIn(null, { callbackUrl: 'http://localhost:3000/foo' })`
+* `signIn('google', { callbackUrl: 'http://localhost:3000/foo' })`
+* `signIn('email', { email, callbackUrl: 'http://localhost:3000/foo' })`
 
 The URL must be considered valid by the [redirect callback handler](/configuration/callbacks#redirect). By default this means it must be an absolute URL at the same hostname (or else it will default to the homepage); you can define your own custom redirect callback to allow other URLs, including supporting relative URLs.
 
-:::tip
-To also support signing in from clients that do not have client side JavaScript, use a regular link, add an onClick handler to it and call **e.preventDefault()** before calling the **signin()** method.
-:::
-
 ---
 
-## signout()
+## signOut()
 
 * Client Side: **Yes**
 * Server Side: No
 
-Using the `signout()` method ensures the user ends back on the page they started on after completing the sign out flow. It also handles CSRF tokens for you automatically.
+Using the `signOut()` method ensures the user ends back on the page they started on after completing the sign out flow. It also handles CSRF tokens for you automatically.
 
 It reloads the page in the browser when complete.
 
 ```js
-import { signout } from 'next-auth/client'
+import { signOut } from 'next-auth/client'
 
 export default () => (
-  <button onClick={signout}>Sign out</button>
+  <button onClick={signOut}>Sign out</button>
 )
 ```
 
 #### Specifying a callbackUrl
 
-As with the `signin()` function, you can specify a `callbackUrl` parameter by passing it as an option.
+As with the `signIn()` function, you can specify a `callbackUrl` parameter by passing it as an option.
 
-e.g. `signout({ callbackUrl: 'http://localhost:3000/foo' })`
+e.g. `signOut({ callbackUrl: 'http://localhost:3000/foo' })`
 
 The URL must be considered valid by the [redirect callback handler](/configuration/callbacks#redirect). By default this means it must be an absolute URL at the same hostname (or else it will default to the homepage); you can define your own custom redirect callback to allow other URLs, including supporting relative URLs.
 
@@ -228,15 +221,13 @@ Using the supplied React `<Provider>` allows instances of `useSession()` to shar
 
 This improves performance, reduces network calls and avoids page flicker when rendering. It is highly recommended and can be easily added to all pages in Next.js apps by using `pages/_app.js`.
 
-It is also *required* if you want to use client methods like `getSession()` in server side functions like `getServerSideProp()` or `getInitialProps()`.
-
 ```jsx title="pages/_app.js"
 import { Provider } from 'next-auth/client'
 
 export default ({ Component, pageProps }) => {
   const { session } = pageProps
   return (
-    <Provider options={{ site: process.env.SITE }} session={session} >
+    <Provider session={session} >
       <Component {...pageProps} />
     </Provider>
   )
@@ -247,19 +238,58 @@ If you pass the `session` page prop to the `<Provider>` – as in the example ab
 
 ### Options
 
-* `site` (required) - The URL of the site (e.g. `http://localhost:3000`)
-* `baseUrl` (optional) - The base URL for NextAuth.js (e.g. `/api/auth`)
-* `clientMaxAge` (optional) - How often to refresh the session the background (in seconds)
+The session state is automatically synchronized across all open tabs/windows and they are all updated whenever they gain or lose focus or the state changes in any of them (e.g. a user signs in or out).
+
+If you have session expiry times of 30 days (the default) or more then you probably don't need to change any of the default options in the Provider. If you need to, you can can trigger an update of the session object across all tabs/windows by calling `getSession()` from a client side function.
+
+However, if you need to customise the session behaviour and/or are using short session expiry times, you can pass options to the provider to customise the behaviour of the `useSession()` hook.
+
+```jsx title="pages/_app.js"
+import { Provider } from 'next-auth/client'
 
+export default ({ Component, pageProps }) => {
+  const { session } = pageProps
+  return (
+    <Provider options={{ 
+      clientMaxAge: 60 // Re-fetch session if cache is older than 60 seconds
+      keepAlive: 5 * 60 // Send keepAlive message every 5 minutes
+     }} session={session} >
+      <Component {...pageProps} />
+    </Provider>
+  )
+}
+```
 
-When `clientMaxAge` is set to `0` (the default) sessions are not re-checked automatically, only when a new window or tab is opened or when `getSession()` is called. If set to any other value, specifies how many seconds the client should poll the server to check the session is valid and to keep it alive.
+:::note
+**These options have no effect on clients that are not signed in.**
 
-It can be useful to use this option to prevent sessions from timing out if your application has a short session expiry time. This option usually has cost implications as checking session status triggers a call to a server side route and/or a database.
+Every tab/window maintains it's own copy of the local session state; the session it is not stored in shared storage like localStorage or sessionStorage. Any update in one tab/window triggers a message to other tabs/windows to update their own session state.
 
-:::tip
-In NextAuth.js session state is automatically synchronized across all open windows and tabs in the same browser. If you have session expiry times of 30 days or more (the default) you probably don't need to use the `clientMaxAge` option, or can set it to a high value (e.g. every 24 hours).
+Using low values for `clientMaxAge` or `keepAlive` will increase network traffic and load on  authenticated clients and may impact hosting costs and performance.
 :::
 
+#### Client Max Age
+
+The `clientMaxAge` option is the maximum age a session data can be on the client before it is considerd stale.
+
+When `clientMaxAge` is set to `0` (the default) the cache will always be used when useSession is called and only explicit calls made to get the session status (i.e. `getSession()`) or event triggers, such as signing in or out in another tab/window, or a tab/window gaining or losing focus, will trigger an update of the session state.
+
+If set to any value other than zero, it specifies in seconds the maxium age of session data on the client before the `useSession()` hook will call the server again to sync the session state.
+
+Unless you have a short session expiry time (e.g. < 24 hours) you probably don't need to change this option. Setting this option to too short a value will increase load (and potentially hosting costs).
+
+The value for `clientMaxAge` should always be lower than the value of the session `maxAge` option.
+
+#### Keep Alive
+
+The `keepAlive` option is how often the client should contact the server to avoid a session expirying.
+
+When `keepAlive` is set to `0` (the default) it will not send a keep alive message.
+
+If set to any value other than zero, it specifies in seconds how often the client should contact the server to update the session state. If the session state has expired when it is triggered, all open tabs/windows will be updated to reflect this.
+
+The value for `keepAlive` should always be lower than the value of the session `maxAge` option.
+
 :::note
 See [**the Next.js documentation**](https://nextjs.org/docs/advanced-features/custom-app) for more information on **_app.js** in Next.js applications.
 :::
diff --git a/www/docs/getting-started/example.md b/www/docs/getting-started/example.md
index 2b81dbc063..97abac0305 100644
--- a/www/docs/getting-started/example.md
+++ b/www/docs/getting-started/example.md
@@ -3,15 +3,15 @@ id: example
 title: Example
 ---
 
-## Example with live demo
+## Example project
 
 The easiest way to get started is to clone the example Next.js application from the [next-auth-example](https://github.com/iaincollins/next-auth-example) repository and to the instructions in the [README](https://github.com/iaincollins/next-auth-example/blob/main/README.md).
 
 You can find a live demo of the example project at [next-auth-example.now.sh](https://next-auth-example.now.sh)
 
-## How to use NextAuth.js
+## Adding NextAuth.js to an existing project
 
-*The examples below show how to add authentication with NextAuth.js to an existing Next.js project.*
+*The examples code below shows how to add authentication with NextAuth.js to an existing Next.js project.*
 
 ### Add API route
 
@@ -22,14 +22,13 @@ import NextAuth from 'next-auth'
 import Providers from 'next-auth/providers'
 
 const options = {
-  site: process.env.SITE || 'http://localhost:3000',
-
   // Configure one or more authentication providers
   providers: [
     Providers.GitHub({
       clientId: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET
     }),
+    // ...add more providers here
   ],
 
   // A database is optional, but required to persist accounts in a database
@@ -51,26 +50,40 @@ The `useSession()` React Hook in the NextAuth.js client is the easiest way to ch
 
 ```jsx title="pages/index.js"
 import React from 'react'
-import { useSession } from 'next-auth/client'
+import {
+  signIn, 
+  signOut,
+  useSession
+} from 'next-auth/client'
 
 export default () => {
   const [ session, loading ] = useSession()
 
-  return <p>
+  return <>
     {!session && <>
       Not signed in <br/>
-      <a href="/api/auth/signin">Sign in</a>
+      <button onClick={signIn}>Sign in</button>
     </>}
     {session && <>
       Signed in as {session.user.email} <br/>
-      <a href="/api/auth/signout">Sign out</a>
+      <button onClick={signOut}>Sign out</button>
     </>}
-  </p>
+  </>
 }
 ```
 
 *That's all the code you need to add authentication to a project!*
 
+### Configuration
+
+When deploying to production, set the `NEXTAUTH_URL` environment variable to the canonical URL of your site.
+
+```
+NEXTAUTH_URL=https://example.com
+```
+
+To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `now env` command.
+
 :::tip
 Check out the [client documentation](/getting-started/client) to see how you can improve the user experience and page performance by using the NextAuth.js client.
 :::
diff --git a/www/docs/getting-started/rest-api.md b/www/docs/getting-started/rest-api.md
index 1098c5ba1e..4451092e75 100644
--- a/www/docs/getting-started/rest-api.md
+++ b/www/docs/getting-started/rest-api.md
@@ -5,21 +5,13 @@ title: REST API
 
 NextAuth.js exposes a REST API which is used by the NextAuth.js client.
 
-:::note
-The default base path is `/api/auth` but it is configurable with the `basePath` option.
-:::
-
 #### GET /api/auth/signin
 
 Displays the sign in page.
 
-#### GET /api/auth/signin/:provider
-
-Starts an OAuth signin flow for the specified provider.
-
 #### POST /api/auth/signin/:provider
 
-A POST submission is required for email sign in.
+Starts an OAuth signin flow for the specified provider.
 
 The POST submission requires CSRF token from `/api/auth/csrf`.
 
@@ -27,6 +19,8 @@ The POST submission requires CSRF token from `/api/auth/csrf`.
 
 Handles retuning requests from OAuth services during sign in.
 
+For OAuth 2.0 providers, the value of the `state` parameter is checked against the one that was generated when the sign in flow was started.
+
 #### GET /api/auth/signout
 
 Displays the sign out page.
@@ -49,6 +43,12 @@ The CSRF token returned by this endpoint must be passed as form variable named `
 
 #### GET /api/auth/providers
 
-Returns a list of configured OAuth services and the configuration (e.g. sign in and callback URLs) for each service.
+Returns a list of configured OAuth services and details (e.g. sign in and callback URLs) for each service.
+
+It can be used to dynamically generate custom sign up pages and to check what callback URLs are configured for each OAuth provider that is configured.
 
-It can be used to dynamically generate custom sign up pages and to check what callback URLs are configured for each OAuth provider that is configured.
\ No newline at end of file
+---
+
+:::note
+The default base path used here is `/api/auth` but it is configurable with the `basePath` option.
+:::
\ No newline at end of file
diff --git a/www/docs/providers/apple.md b/www/docs/providers/apple.md
index 9c43c38923..94c6fd371c 100644
--- a/www/docs/providers/apple.md
+++ b/www/docs/providers/apple.md
@@ -38,16 +38,17 @@ providers: [
 
 :::tip
 
-  Mac
- 
-  Convert your apple key to a single line to use as a environment variable.
-  ```bash
-  awk 'NF {sub(/\r/, ""); printf "%s\\n",$0;}'  AuthKey_ID.k8
-  ```
+You can convert your Apple key to a single line to use it in a environment variable.
+
+**Mac**
+   
+```bash
+awk 'NF {sub(/\r/, ""); printf "%s\\n",$0;}'  AuthKey_ID.k8
+```
   
-  Windows
+**Windows**
   
-  ```powershell
+```powershell
  $k8file = "AuthKey_ID.k8"
 (Get-Content "C:\Users\$env:UserName\Downloads\${k8file}") -join "\n" 
 ```
@@ -126,7 +127,8 @@ openssl req -x509 -out localhost.crt -keyout localhost.key \
 ```
 
 :::tip
-On Windows?  
+**Windows**
+
 The OpenSSL executable is distributed with [Git](https://git-scm.com/download/win]9) for Windows. 
 Once installed you will find the openssl.exe file in `C:/Program Files/Git/mingw64/bin` which you can add to the system PATH environment variable if it’s not already done.
 
diff --git a/www/docs/providers/email.md b/www/docs/providers/email.md
index 194de51715..321dc852fa 100644
--- a/www/docs/providers/email.md
+++ b/www/docs/providers/email.md
@@ -101,10 +101,11 @@ The following code shows the complete source for the built-in `sendVerificationR
 ```js
 import nodemailer from 'nodemailer'
 
-const sendVerificationRequest = ({ identifier: email, url, token, site, provider }) => {
+const sendVerificationRequest = ({ identifier: email, url, token, baseUrl, provider }) => {
   return new Promise((resolve, reject) => {
     const { server, from } = provider
-    site = site.replace(/^https?:\/\//, '') // Strip protocol from site
+    // Strip protocol from URL and use domain as site name
+    const site = baseUrl.replace(/^https?:\/\//, '')
 
     nodemailer
       .createTransport(server)
diff --git a/www/docs/providers/google.md b/www/docs/providers/google.md
index 648af0e3a8..0b88fcf378 100644
--- a/www/docs/providers/google.md
+++ b/www/docs/providers/google.md
@@ -23,3 +23,7 @@ providers: [
   })
 ]
 ...
+```
+## Notes
+
+Unlike most other providers, Google only Provide the Refresh Token on first sign in.
\ No newline at end of file
diff --git a/www/docs/providers/identity-server4.md b/www/docs/providers/identity-server4.md
index 9f02fd495e..0842a025f0 100644
--- a/www/docs/providers/identity-server4.md
+++ b/www/docs/providers/identity-server4.md
@@ -26,12 +26,13 @@ providers: [
 ...
 ```
 
+## Demo IdentityServer
 
-## Example using Demo IdentityServer
-https://demo.identityserver.io/
+The configuration below is for the demo server at https://demo.identityserver.io/
 
-**The demo below is using a live server!  You can copy and paste the values below and it will work out of the box.
-  This intended as an example only. (use either <b>bob/bob</b>, <b>alice/alice</b>) 
+If you want to try it out, you can copy and paste the configuration below.
+
+You can sign in to the demo service with either <b>bob/bob</b> or <b>alice/alice</b>.
  
 ```js
 import Providers from `next-auth/providers`
diff --git a/www/docs/schemas/adapters.md b/www/docs/schemas/adapters.md
index ee110a7502..3eecbbd436 100644
--- a/www/docs/schemas/adapters.md
+++ b/www/docs/schemas/adapters.md
@@ -3,15 +3,11 @@ id: adapters
 title: Database Adapters
 ---
 
-An "*Adapter*" in NextAuth.js is the thing that connects your application to whatever database or backend system you want to use to store data for user accounts, sessions, etc.
+An **Adapter** in NextAuth.js connects your application to whatever database or backend system you want to use to store data for user accounts, sessions, etc.
 
-You do not need to specify an adapter explicltly unless you want to use advanced options such as custom models or schemas, or if you are creating a custom adapter to connect to a database that is not one of the supported datatabases.
+You do not need to specify an adapter explicltly unless you want to use advanced options such as custom models or schemas, or if you are creating a custom adapter to connect to a database that is not one of the supported databases.
 
-:::tip
-*The **adapter** option is currently considered advanced usage intended for use by NextAuth.js contributors.*
-:::
-
-## TypeORM (default adapter)
+## TypeORM Adapter
 
 NextAuth.js comes with a default adapter that uses [TypeORM](https://typeorm.io/) so that it can be used with many different databases without any further configuration, you simply add the database driver you want to use to your project and tell  NextAuth.js to use it.
 
@@ -47,178 +43,136 @@ adapter: Adapters.TypeORM.Adapter({
 })
 ```
 
-## Custom adapters
+## Prisma Adapter
 
-Using a custom adapter you can connect to any database backend or even several different databases.
+You can also use NextAuth.js with [Prisma](https://www.prisma.io/docs/).
 
-Creating a custom adapter is considerable undertaking and will require some trial and error and some reverse engineering as it is not currently well documented. The hope and expectation is to grow both the number of included (and third party) adapters over time.
+To use this adapter, configure your `[...nextauth].js` like this:
 
-An adapter in NextAuth.js is a function which returns an async  `getAdapter()` method, which in turn returns a Promise with a list of functions used to handle operations such as creating user, linking a user and an OAuth account or handling reading and writing sessions.
+```javascript
+import NextAuth from 'next-auth'
+import Providers from 'next-auth/providers'
+import Adapters from 'next-auth/adapters'
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+const options = {
+  site: 'http://localhost:3000',
+  providers: [
+    Providers.Google({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET
+    })
+  ],
+  adapter: Adapters.Prisma.Adapter({ prisma }),
+}
 
-It uses this approach to allow database connection logic to live in the `getAdapter()` method. By calling the function just before an action needs to happen, it is possible to check database connection status and handle connecting / reconnecting to a database as required.
+export default (req, res) => NextAuth(req, res, options)
+```
 
-### Required methods
+:::tip
+If you experience issues with Prisma opening too many database connections opening in local development mode (e.g. due to Hot Module Reloading) you can use an approach like this:
 
-These methods are required for all sign in flows:
+```js
+let prisma
 
-* createUser
-* getUser
-* getUserByEmail
-* getUserByProviderAccountId
-* linkAccount
-* createSession
-* getSession
-* updateSession
-* deleteSession
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient()
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient()
+  }
+  prisma = global.prisma
+}
+```
+:::
 
-These methods are required to support email / passwordless sign in:
+You should use a `schema.prisma` file similar to this one:
 
-* createVerificationRequest
-* getVerificationRequest
-* deleteVerificationRequest
+```
+datasource sqlite {
+  provider = "sqlite"
+  url      = "file:./dev.db"
+}
 
-### Unimplemented methods
+generator client {
+  provider = "prisma-client-js"
+}
 
-These methods will be required in a future release, but are not yet invoked:
+model User {
+  id            String    @default(uuid()) @id
+  email         String?   @unique
+  emailVerified DateTime?
+  image         String?
+  name          String?
+  sessions      Session[]
+  accounts      Account[]
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt @default(now())
+}
 
-* getUserByCredentials
-* updateUser
-* deleteUser
-* unlinkAccount
+model Session {
+  id                 String    @default(uuid()) @id
+  userId             String
+  user               User      @relation(fields: [userId], references: [id])
+  accessToken        String    @default(cuid()) @unique
+  sessionToken       String    @default(cuid()) @unique
+  accessTokenExpires DateTime?
+  expires            DateTime?
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt @default(now())
+}
 
-### Example code
+model Account {
+  id                 String    @default(uuid()) @id
+  compoundId         String    @unique
+  userId             String
+  user               User      @relation(fields: [userId], references: [id])
+  providerId         String
+  providerType       String
+  providerAccountId  String    @unique
+  refreshToken       String?
+  accessToken        String?
+  accessTokenExpires DateTime?
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt @default(now())
+}
 
-An example of adapter structure is shown below:
+model VerificationRequest {
+  id         String   @default(uuid()) @id
+  identifier String
+  token      String   @unique
+  expires    DateTime
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt @default(now())
+}
+```
 
-```js
-const Adapter = (config, options = {}) => {
-
-  async function getAdapter (appOptions) {
-
-    async function createUser (profile) {
-      return null
-    }
-
-    async function getUser (id) {
-      return null
-    }
-
-    async function getUserByEmail (email) {
-      return null
-    }
-
-    async function getUserByProviderAccountId (
-      providerId,
-      providerAccountId
-    ) {
-      return null
-    }
-
-    async function getUserByCredentials (credentials) {
-      return null
-    }
-
-    async function updateUser (user) {
-      return null
-    }
-
-    async function deleteUser (userId) {
-      return null
-    }
-
-    async function linkAccount (
-      userId,
-      providerId,
-      providerType,
-      providerAccountId,
-      refreshToken,
-      accessToken,
-      accessTokenExpires
-    ) {
-      return null
-    }
-
-    async function unlinkAccount (
-      userId,
-      providerId,
-      providerAccountId
-    ) {
-      return null
-    }
-
-    async function createSession (user) {
-      return null
-    }
-
-    async function getSession (sessionToken) {
-      return null
-    }
-
-    async function updateSession (
-      session,
-      force
-    ) {
-      return null
-    }
-
-    async function deleteSession (sessionToken) {
-      return null
-    }
-
-    async function createVerificationRequest (
-      identifier,
-      url,
-      token,
-      secret,
-      provider
-    ) {
-      return null
-    }
-
-    async function getVerificationRequest (
-      identifier,
-      token,
-      secret,
-      provider
-    ) {
-      return null
-    }
-
-    async function deleteVerificationRequest (
-      identifier,
-      token,
-      secret,
-      provider
-    ) {
-      return null
-    }
-
-    return Promise.resolve({
-      createUser,
-      getUser,
-      getUserByEmail,
-      getUserByProviderAccountId,
-      getUserByCredentials,
-      updateUser,
-      deleteUser,
-      linkAccount,
-      unlinkAccount,
-      createSession,
-      getSession,
-      updateSession,
-      deleteSession,
-      createVerificationRequest,
-      getVerificationRequest,
-      deleteVerificationRequest
-    })
-  }
+:::tip
+You can add properties to the schema, but do not change the base properties or types.
+:::
 
-  return {
-    getAdapter
-  }
-}
+#### Using custom model names
 
-export default {
-  Adapter
-}
+The properties in the models need to be defined as above, but the model names themselves can be changed with a configuration option, and the datasource can be changed to anything supported by Prisma.
+
+This example shows using `model ProviderAccount` instead of `model Account` and `model Verification` instead of `model VerificationRequest`:
+
+```javascript
+...
+adapter: Adapters.Prisma.Adapter({ 
+  prisma,
+  modelMapping: {
+    User: 'user',
+    Account: 'providerAccount',
+    Session: 'session',
+    VerificationRequest: 'verification'
+  }  
+})
+...
 ```
+
+## Custom Adapter
+
+See the tutorial for [creating a database adapter](/tutorials/creating-a-database-adapter) for more information on how to create a custom adapter.
diff --git a/www/docs/schemas/models.md b/www/docs/schemas/models.md
index 743b4be5f5..2dfac298be 100644
--- a/www/docs/schemas/models.md
+++ b/www/docs/schemas/models.md
@@ -5,9 +5,9 @@ title: Models
 
 ## Overview
 
-This a description of the models and data structure used by NextAuth.js default database adapter.
+This a description of the models and data structure used by NextAuth.js default database adapter (TypeORM).
 
-You are free to define your own models and schemas if you want to use a custom database adapter.
+You can define your own models and schemas or [create your own database adapter](/tutorials/creating-a-database-adapter).
 
 In NextAuth.js all table/collection names are plural, and all table names and column names use snake_case when used with an SQL database and camelCase when used with Document database. Indexes are declared on properties where appropriate.
 
diff --git a/www/docs/schemas/mongodb.md b/www/docs/schemas/mongodb.md
index 4a0db5a15d..85ba1ded85 100644
--- a/www/docs/schemas/mongodb.md
+++ b/www/docs/schemas/mongodb.md
@@ -3,15 +3,13 @@ id: mongodb
 title: MongoDB
 ---
 
-The schema generated for a MySQL database when using the built-in models.
+MongoDB is a document database and does not use schemas in the same way as most RDBMS databases.
 
-:::note
-When using MySQL the timezone is set to `Z` (aka Zulu time / UTC / GMT) in the adapter and all timestamps on all models are stored in UTC.
-:::
+However, objects stored in MongoDB use similar datatypes to SQL, with some differences.
 
-MongoDB does not use schemas in the same way as most RDBMS databases, but the objects stored in MongoDB use similar datatypes to SQL, with some differences:
+* ID fields are of type `ObjectID` rather than type `int`.
+* All collection names and property names use `camelCase` rather than `snake_case`.
+* All timestamps are stored as `ISODate()` in MongoDB and all date/time values are stored in UTC.
+* A sparse index is used on the User `email` property to allow it to not be specified, while still enforcing uniqueness if it is present on a User object.
 
-* ID fields are of type `ObjectID` rather than `int`
-* By convention all collection names and object properties are `camelCase` rather than `snake_case`
-* A sparse index is used on the User `email` property to allow it to not be specified, while enforcing uniqueness if it is - this ensures it is functionally equivalent to the ANSI SQL behaviour for a `unique` but `nullable` property
-* All timestamps are stored as `ISODate()` in MongoDB, all timestamps on all models are stored in UTC (aka Zulu time)
+  This ensures the behaviour functionally equivalent to the ANSI SQL behaviour for a `unique` but `nullable` property, so that it works the same way as the MySQL and Postgres schemas.
diff --git a/www/docs/schemas/mysql.md b/www/docs/schemas/mysql.md
index 60fe97facf..2751e702cf 100644
--- a/www/docs/schemas/mysql.md
+++ b/www/docs/schemas/mysql.md
@@ -6,7 +6,7 @@ title: MySQL
 The schema generated for a MySQL database when using the built-in models.
 
 :::note
-When using MySQL the timezone is set to `Z` (aka Zulu time / UTC / GMT) in the adapter and all timestamps on all models are stored in UTC.
+When using a MySQL database with the default adapter the timezone is set to `Z` (aka Zulu Time / UTC) and all timestamps are stored in UTC.
 :::
 
 ## User
diff --git a/www/docs/schemas/postgres.md b/www/docs/schemas/postgres.md
index 75f6a577ab..015401a0a3 100644
--- a/www/docs/schemas/postgres.md
+++ b/www/docs/schemas/postgres.md
@@ -6,7 +6,9 @@ title: Postgres
 The schema generated for a Postgres database when using the built-in models.
 
 :::note
-When using Postgres all timestamps on all models use the type `timestamp with time zone` (aka `timestamptz`) to store timestamps in UTC.
+When using a Postgres database with the default adapter all properties of type `timestamp` are transformed to `timestamp with time zone`/`timestamptz` and all timestamps are stored in UTC.
+
+This transform is also applied to any properties of type `timestamp` when using custom models.
 :::
 
 ## User
diff --git a/www/docs/tutorials/creating-a-database-adapter.md b/www/docs/tutorials/creating-a-database-adapter.md
new file mode 100644
index 0000000000..a7fabc8dd5
--- /dev/null
+++ b/www/docs/tutorials/creating-a-database-adapter.md
@@ -0,0 +1,180 @@
+---
+id: creating-a-database-adapter
+title: Creating a database adapter
+---
+
+Using a custom adapter you can connect to any database backend or even several different databases.
+
+Creating a custom adapter can be considerable undertaking and will require some trial and error and some reverse engineering using the built-in adapters for reference.
+
+## How to create an adapter
+
+From an implementation perspective, an adapter in NextAuth.js is a function which returns an async  `getAdapter()` method, which in turn returns a Promise with a list of functions used to handle operations such as creating user, linking a user and an OAuth account or handling reading and writing sessions.
+
+It uses this approach to allow database connection logic to live in the `getAdapter()` method. By calling the function just before an action needs to happen, it is possible to check database connection status and handle connecting / reconnecting to a database as required.
+
+_See the code below for practical example._
+
+### Required methods
+
+These methods are required for all sign in flows:
+
+* createUser
+* getUser
+* getUserByEmail  
+* getUserByProviderAccountId
+* linkAccount
+* createSession
+* getSession
+* updateSession
+* deleteSession
+* updateUser
+
+These methods are required to support email / passwordless sign in:
+
+* createVerificationRequest
+* getVerificationRequest
+* deleteVerificationRequest
+
+### Unimplemented methods
+
+These methods will be required in a future release, but are not yet invoked:
+
+* getUserByCredentials
+* deleteUser
+* unlinkAccount
+
+### Example code
+
+```js
+const Adapter = (config, options = {}) => {
+
+  async function getAdapter (appOptions) {
+
+    async function createUser (profile) {
+      return null
+    }
+
+    async function getUser (id) {
+      return null
+    }
+
+    async function getUserByEmail (email) {
+      return null
+    }
+
+    async function getUserByProviderAccountId (
+      providerId,
+      providerAccountId
+    ) {
+      return null
+    }
+
+    async function getUserByCredentials (credentials) {
+      return null
+    }
+
+    async function updateUser (user) {
+      return null
+    }
+
+    async function deleteUser (userId) {
+      return null
+    }
+
+    async function linkAccount (
+      userId,
+      providerId,
+      providerType,
+      providerAccountId,
+      refreshToken,
+      accessToken,
+      accessTokenExpires
+    ) {
+      return null
+    }
+
+    async function unlinkAccount (
+      userId,
+      providerId,
+      providerAccountId
+    ) {
+      return null
+    }
+
+    async function createSession (user) {
+      return null
+    }
+
+    async function getSession (sessionToken) {
+      return null
+    }
+
+    async function updateSession (
+      session,
+      force
+    ) {
+      return null
+    }
+
+    async function deleteSession (sessionToken) {
+      return null
+    }
+
+    async function createVerificationRequest (
+      identifier,
+      url,
+      token,
+      secret,
+      provider
+    ) {
+      return null
+    }
+
+    async function getVerificationRequest (
+      identifier,
+      token,
+      secret,
+      provider
+    ) {
+      return null
+    }
+
+    async function deleteVerificationRequest (
+      identifier,
+      token,
+      secret,
+      provider
+    ) {
+      return null
+    }
+
+    return Promise.resolve({
+      createUser,
+      getUser,
+      getUserByEmail,
+      getUserByProviderAccountId,
+      getUserByCredentials,
+      updateUser,
+      deleteUser,
+      linkAccount,
+      unlinkAccount,
+      createSession,
+      getSession,
+      updateSession,
+      deleteSession,
+      createVerificationRequest,
+      getVerificationRequest,
+      deleteVerificationRequest
+    })
+  }
+
+  return {
+    getAdapter
+  }
+}
+
+export default {
+  Adapter
+}
+```
diff --git a/www/docs/tutorials/testing.md b/www/docs/tutorials/testing-with-cypress.md
similarity index 98%
rename from www/docs/tutorials/testing.md
rename to www/docs/tutorials/testing-with-cypress.md
index 1fea7086d8..25b649d70d 100644
--- a/www/docs/tutorials/testing.md
+++ b/www/docs/tutorials/testing-with-cypress.md
@@ -1,6 +1,6 @@
 ---
-id: testing
-title: Testing
+id: testing-with-cypress
+title: Testing with Cypress
 ---
 
 To test an implementation of NextAuth.js, we encourage you to use [Cypress](https://cypress.io). 
diff --git a/www/docs/tutorials/typeorm-custom-models.md b/www/docs/tutorials/typeorm-custom-models.md
new file mode 100644
index 0000000000..748fe111da
--- /dev/null
+++ b/www/docs/tutorials/typeorm-custom-models.md
@@ -0,0 +1,85 @@
+---
+id: typeorm-custom-models
+title: Custom models with TypeORM
+---
+
+NextAuth.js provides a set of [models and schemas](https://next-auth.js.org/schemas/models) for the built-in TypeORM adapter that you can easily extend.
+
+You can use these models with MySQL, MariaDB, Postgres, MongoDB and SQLite.
+
+## Creating custom models
+
+```js title="models/User.js"
+import Adapters from "next-auth/adapters"
+
+// Extend the built-in models using class inheritance
+export default class User extends Adapters.TypeORM.Models.User.model {
+  // You can extend the options in a model but you should not remove the base
+  // properties or change the order of the built-in options on the constructor
+  constructor(name, email, image, emailVerified) {
+    super(name, email, image, emailVerified)
+  }
+}
+
+export const UserSchema = {
+  name: "User",
+  target: User,
+  columns: {
+    ...Adapters.TypeORM.Models.User.schema.columns,
+    // Adds a phoneNumber to the User schema
+    phoneNumber: {
+      type: "varchar",
+      nullable: true,
+    },
+  },
+}
+```
+
+```js title="models/index.js"
+// To make importing them easier, you can export all models from single file
+import User, { UserSchema } from "./User"
+
+export default {
+  User: {
+    model: User,
+    schema: UserSchema,
+  },
+}
+```
+
+:::note
+[View source for built-in TypeORM models and schemas](https://github.com/iaincollins/next-auth/tree/main/src/adapters/typeorm/models)
+:::
+
+## Using custom models
+
+You can use custom models by specifying the TypeORM adapter explicitly and passing them as an option.
+
+```js title="pages/api/auth/[...nextauth].js"
+import NextAuth from "next-auth"
+import Providers from "next-auth/providers"
+import Adapters from "next-auth/adapters"
+
+import Models from "../../../models"
+
+const options = {
+  providers: [
+    // Your providers
+  ],
+
+  adapter: Adapters.TypeORM.Adapter(
+    // The first argument should be a database connection string or TypeORM config object
+    "mysql://username:password@127.0.0.1:3306/database_name",
+    // The second argument can be used to pass custom models and schemas
+    {
+      models: {
+        User: Models.User,
+      },
+    }
+  ),
+}
+
+export default (req, res) => NextAuth(req, res, options)
+```
+
+
diff --git a/www/docusaurus.config.js b/www/docusaurus.config.js
index c39d05e5d4..38b9d1d4cc 100644
--- a/www/docusaurus.config.js
+++ b/www/docusaurus.config.js
@@ -21,6 +21,12 @@ module.exports = {
           label: 'Documentation',
           position: 'left'
         },
+        {
+          to: '/faq',
+          activeBasePath: 'docs',
+          label: 'FAQ',
+          position: 'left'
+        },
         {
           href: 'https://www.npmjs.com/package/next-auth',
           label: 'npm',
diff --git a/www/package-lock.json b/www/package-lock.json
index 7c84af7e65..efbf0d1318 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -1277,6 +1277,29 @@
         }
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@endiliey/static-site-generator-webpack-plugin": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@endiliey/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.0.tgz",
@@ -2144,6 +2167,22 @@
         "@babel/helper-plugin-utils": "7.8.3"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
+      "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -2639,6 +2678,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3378,6 +3422,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3462,6 +3511,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7149,6 +7208,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.times": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.times/-/lodash.times-4.3.2.tgz",
+      "integrity": "sha1-Ph8lZcQxdU1Uq1fy7RdBk5KFyh0="
+    },
     "lodash.toarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
@@ -10044,6 +10108,11 @@
       "resolved": "https://registry.npmjs.org/react-loadable-ssr-addon/-/react-loadable-ssr-addon-0.2.0.tgz",
       "integrity": "sha512-gTfPaxWZa5mHKeSOE61RpoLe7hyjcJHgNa5m0ZZGV3OCkWsOKlfYgoBxXzu9ENg/ePR/kFd5H3ncF4K5eyyNTQ=="
     },
+    "react-marquee-slider": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/react-marquee-slider/-/react-marquee-slider-1.0.16.tgz",
+      "integrity": "sha512-zs4Ys2NQauqrgwly5WUqwYhlYfl/1GhHtffuYTyNI0sCJ/5YySq7hj7q6gCIrgdl0vgLQQ1fT0YzqbdizaDlig=="
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -10866,6 +10935,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -11563,6 +11637,23 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "styled-components": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz",
+      "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
diff --git a/www/package.json b/www/package.json
index 218541412d..6ca84cc989 100644
--- a/www/package.json
+++ b/www/package.json
@@ -14,8 +14,11 @@
     "@docusaurus/preset-classic": "^2.0.0-alpha.54",
     "classnames": "^2.2.6",
     "docusaurus-lunr-search": "^1.0.3",
+    "lodash.times": "^4.3.2",
     "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react-dom": "^16.8.4",
+    "react-marquee-slider": "^1.0.16",
+    "styled-components": "^5.1.1"
   },
   "browserslist": {
     "production": [
diff --git a/www/sidebars.js b/www/sidebars.js
index 8da3fa33f2..659136df76 100644
--- a/www/sidebars.js
+++ b/www/sidebars.js
@@ -1,49 +1,53 @@
 module.exports = {
   sidebar: {
-    "Getting Started": [
-      "getting-started/introduction",
-      "getting-started/example",
-      "getting-started/client",
-      "getting-started/rest-api",
+    'Getting Started': [
+      'getting-started/introduction',
+      'getting-started/example',
+      'getting-started/client',
+      'getting-started/rest-api'
     ],
     Configuration: [
-      "configuration/options",
-      "configuration/providers",
-      "configuration/databases",
-      "configuration/pages",
-      "configuration/callbacks",
-      "configuration/events",
+      'configuration/options',
+      'configuration/providers',
+      'configuration/databases',
+      'configuration/pages',
+      'configuration/callbacks',
+      'configuration/events'
     ],
     Providers: [
-      "providers/apple",
-      "providers/auth0",
-      "providers/battle.net",
-      "providers/box",
-      "providers/cognito",
-      "providers/discord",
-      "providers/email",
-      "providers/credentials",
-      "providers/facebook",
-      "providers/github",
-      "providers/gitlab",
-      "providers/google",
-      "providers/identity-server4",
-      "providers/mixer",
-      "providers/okta",
-      "providers/slack",
-      "providers/spotify",
-      "providers/twitch",
-      "providers/twitter",
-      "providers/yandex",
+      'providers/apple',
+      'providers/auth0',
+      'providers/battle.net',
+      'providers/box',
+      'providers/cognito',
+      'providers/discord',
+      'providers/email',
+      'providers/credentials',
+      'providers/facebook',
+      'providers/github',
+      'providers/gitlab',
+      'providers/google',
+      'providers/identity-server4',
+      'providers/mixer',
+      'providers/okta',
+      'providers/slack',
+      'providers/spotify',
+      'providers/twitch',
+      'providers/twitter',
+      'providers/yandex'
     ],
-    "Models & Schemas": [
-      "schemas/models",
-      "schemas/mysql",
-      "schemas/postgres",
-      "schemas/mongodb",
-      "schemas/adapters",
+    'Models & Schemas': [
+      'schemas/models',
+      'schemas/mysql',
+      'schemas/postgres',
+      'schemas/mongodb',
+      'schemas/adapters'
     ],
-    Tutorials: ["tutorials/testing"],
+    Tutorials: [
+      'tutorials/creating-a-database-adapter',
+      'tutorials/testing-with-cypress',
+      'tutorials/typeorm-custom-models'
+    ]
     /*
     'Version 1 (Legacy)': [
       'v1/getting-started-v1',
@@ -51,5 +55,5 @@ module.exports = {
       'v1/auth-v1'
     ]
   */
-  },
-};
+  }
+}
diff --git a/www/src/components/ProviderMarquee.js b/www/src/components/ProviderMarquee.js
new file mode 100644
index 0000000000..141de3a4a0
--- /dev/null
+++ b/www/src/components/ProviderMarquee.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import Marquee, { Motion, randomIntFromInterval } from 'react-marquee-slider'
+import * as S from './ProviderMarqueeStyle'
+import times from 'lodash.times'
+
+const icons = [
+  '/img/providers/apple-black.svg',
+  '/img/providers/auth0.svg',
+  '/img/providers/aws-cognito.svg',
+  '/img/providers/battle.net.svg',
+  '/img/providers/box.svg',
+  '/img/providers/facebook-2.svg',
+  '/img/providers/github-1.svg',
+  '/img/providers/gitlab.svg',
+  '/img/providers/google-icon.svg',
+  '/img/providers/okta-3.svg',
+  '/img/providers/openid.svg',
+  '/img/providers/slack.svg',
+  '/img/providers/spotify.svg',
+  '/img/providers/twitter.svg'
+]
+
+const ProviderMarquee = React.memo(({ size }) => {
+  let scale = 0.5
+
+  if (typeof window !== 'undefined') {
+    const width = window.outerWidth
+    if (width > 800) {
+      scale = 0.6
+    }
+
+    if (width > 1100) {
+      scale = 0.7
+    }
+
+    if (width > 1400) {
+      scale = 0.8
+    }
+  }
+
+  return (
+    <S.FullWidth>
+      <S.Height height={500}>
+        <Marquee
+          key='1'
+          velocity={5}
+          scatterRandomly
+          minScale={0.5}
+          resetAfterTries={200}
+        >
+          {times(icons.length, Number).map(id => (
+            <Motion
+              key={`marquee-example-company-${id}`}
+              initDeg={randomIntFromInterval(0, 360)}
+              direction={Math.random() > 0.5 ? 'clockwise' : 'counterclockwise'}
+              velocity={10}
+              radius={scale * 70}
+            >
+              <S.Company scale={scale}>
+                <S.Circle scale={scale}>
+                  <S.Logo src={icons[id]} alt='' />
+                </S.Circle>
+              </S.Company>
+            </Motion>
+          ))}
+        </Marquee>
+      </S.Height>
+    </S.FullWidth>
+  )
+})
+
+export default ProviderMarquee
diff --git a/www/src/components/ProviderMarqueeStyle.js b/www/src/components/ProviderMarqueeStyle.js
new file mode 100644
index 0000000000..5d64df2f67
--- /dev/null
+++ b/www/src/components/ProviderMarqueeStyle.js
@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+
+export const Circle = styled.div`
+  position: absolute;
+  object-position: center center;
+  will-change: transform, opacity;
+  width: ${props => props.scale * 150}px;
+  height: ${props => props.scale * 150}px;
+  top: -50%;
+  left: -50%;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+`
+
+export const Logo = styled.img`
+  display: block;
+  width: 65%;
+  height: 65%;
+  filter: grayscale(100%);
+  opacity: 0.1;
+`
+
+export const FullWidth = styled.div`
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+`
+
+export const Height = styled.div`
+  position: relative;
+  width: 100%;
+  height: ${props => (props.height ? props.height + 'px' : 'auto')};
+`
+
+export const Company = styled.div`
+  position: relative;
+  width: ${props => props.scale * 75}px;
+  height: ${props => props.scale * 75}px;
+`
diff --git a/www/src/css/admonitions.css b/www/src/css/admonitions.css
new file mode 100644
index 0000000000..fedeedb657
--- /dev/null
+++ b/www/src/css/admonitions.css
@@ -0,0 +1,58 @@
+.admonition.admonition-tip,
+.admonition.admonition-note,
+.admonition.admonition-warning {
+  background-color: #eee;
+  color: #444;
+  border: none;
+  border-left: .4rem solid #666;
+  border-radius: 0;
+}
+
+.admonition.admonition-tip a,
+.admonition.admonition-note a,
+.admonition.admonition-warning a {
+  color: #444;
+}
+
+.admonition-icon svg {
+  fill: #444;
+}
+
+.admonition.admonition-note .admonition-icon svg,
+.admonition.admonition-note .admonition-heading {
+  color: #444;
+  fill: #444;
+}
+
+html[data-theme="dark"] .admonition.admonition-tip,
+html[data-theme="dark"] .admonition.admonition-note,
+html[data-theme="dark"] .admonition.admonition-warning {
+  color: #eee;
+  background-color: #222;
+}
+
+html[data-theme="dark"] .admonition.admonition-tip a,
+html[data-theme="dark"] .admonition.admonition-note a,
+html[data-theme="dark"] .admonition.admonition-warning a{
+  color: #eee;
+}
+
+.admonition.admonition-tip {
+  border-color: var(--ifm-color-info);
+}
+
+.admonition.admonition-tip .admonition-icon svg,
+.admonition.admonition-tip .admonition-heading {
+  color: var(--ifm-color-info);
+  fill: var(--ifm-color-info);
+}
+
+.admonition.admonition-warning {
+  border-color: var(--ifm-color-warning);
+}
+
+.admonition.admonition-warning .admonition-icon svg,
+.admonition.admonition-warning .admonition-heading {
+  color: var(--ifm-color-warning);
+  fill: var(--ifm-color-warning);
+}
\ No newline at end of file
diff --git a/www/src/css/buttons.css b/www/src/css/buttons.css
new file mode 100644
index 0000000000..6b17722d47
--- /dev/null
+++ b/www/src/css/buttons.css
@@ -0,0 +1,29 @@
+
+.button {
+  border-width: .15rem;
+  transition-duration: 0s;
+  box-shadow: 0 0 2rem rgba(0,0,0,.1);
+}
+
+.button--primary,
+.button--primary:hover {
+  background: linear-gradient(0deg, var(--ifm-color-primary-dark) 0%, var(--ifm-color-primary) 100%);
+  color: #fff;
+  border-color: transparent;
+}
+
+.button.button--secondary.button--outline,
+.button.button--secondary.button--outline:link,
+.button.button--secondary.button--outline:visited,
+.button.button--secondary.button--outline:hover,
+.button.button--secondary.button--outline:active {
+  border-color: #ccc;
+  background: #fff;
+  color: #444 !important
+}
+
+html[data-theme="dark"] .button.button--secondary.button--outline {
+  border-color: #444;
+  background: #000;
+  color: #ccc !important
+}
\ No newline at end of file
diff --git a/www/src/css/custom.css b/www/src/css/custom.css
index 7bd18f18d8..9dbb549bb6 100644
--- a/www/src/css/custom.css
+++ b/www/src/css/custom.css
@@ -23,11 +23,16 @@
   --ifm-font-family-base: -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';
 }
 
+@import "hero.css";
+@import "admonitions.css";
+@import "buttons.css";
+
 html {
   background: #f9f9f9;
 }
 
 html[data-theme='dark'] {
+  color: #ddd;
   background: #191A1B;
 }
 
@@ -60,8 +65,8 @@ html[data-theme='dark'] .menu__list .menu__list-item a[href="#!"] {
 }
 
 .menu__list .menu__list-item a.menu__link.menu__link--active:not(.menu__link--sublist) {
- background: var(--ifm-color-primary);
- background: linear-gradient(0deg, var(--ifm-color-primary-darker) 0%, var(--ifm-color-primary) 100%);
+ background: var(--ifm-color-primary-darkest);
+ background: linear-gradient(0deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary-darker) 100%);
  color: #fff;
  font-weight: normal;
 }
@@ -121,7 +126,6 @@ html[data-theme='dark'] .main-wrapper h1 {
 }
 
 .navbar {
-  box-shadow: 0 0 .5rem rgba(0,0,0,.2);
   box-shadow: none;
 }
 
@@ -141,58 +145,10 @@ html[data-theme='dark'] .main-wrapper h1 {
   }
 }
 
-
-.hero {
-  margin-top: -2rem;
-  background: none;
-  color: black;
-  background: linear-gradient(0deg, rgba(222,222,222,.6) 0%, rgba(255,255,255,1) 100%);
-}
-
-html[data-theme='dark'] .hero {
-  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(35,35,35,1) 100%);
-}
-
-.hero .container {
-  margin: 4rem auto 2rem auto;
-}
-
-.hero .hero__title {  
-  font-size: 3rem;
-  margin-bottom: 0.5rem;
-  padding: 0;
-  border: none;
-  text-shadow: 0 .1rem 0 rgba(255,255,255,1), 0 0 8rem rgba(0,0,0,.5);
-}
-
-@media screen and (min-width: 689px) {
-  .hero .hero__title {
-    text-align: left;
-    font-size: 4.8rem;
-  }
-}
-
-html[data-theme="dark"] .hero .hero__title {
-  text-shadow: 0 .1rem 0 rgba(255,255,255,.1), 0 0 5rem rgba(255,255,255,.5);
-}
-
-.hero .hero__subtitle {
-  font-size: 1rem;
-  margin-bottom: 1.5rem;
-  opacity: 0.6;
-  font-weight: 500;
-}
-
-@media screen and (min-width: 689px) {
-  .hero .hero__subtitle {
-    font-size: 1.5rem;
-  }
-}
-
 .home-subtitle {
   justify-content: center;
-  padding-top: 1rem;
-  opacity: 0.7;
+  padding: 0rem 0 2rem 0;
+  opacity: 0.6;
   font-style: italic;
 }
 
@@ -271,21 +227,26 @@ html[data-theme='dark'] {
   padding: 0.6rem;
   border-radius: 10rem;
   overflow: visible;
-  background-color: #f9f9f9;
-  background: var(--ifm-color-primary);
-  background: linear-gradient(0deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary) 100%);
+  background-color: var(--ifm-color-primary);
+  margin-bottom: 1rem;
+  box-shadow: 0 0 2rem rgba(0,0,0,.1);
+  background-image: linear-gradient(0deg, #4FA852 0%, #9ADA5E 100%);
+}
+
+.home-main .section-features .row .col:nth-child(2) .feature-image-wrapper {
+  background-image: linear-gradient(0deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary) 100%);
+}
+
+.home-main .section-features .row .col:nth-child(3) .feature-image-wrapper {
+  background-image: linear-gradient(0deg, #E95595 0%, #F988BA 100%);
 }
 
 .home-main .feature-image-wrapper img {
-  filter: saturate(.25) contrast(2);
-  zoom: .9;
+  filter: saturate(0.5) contrast(2);
+  zoom: .85;
 }
 
-html[data-theme="dark"] .hero .hero__title,
-html[data-theme="dark"] .hero .hero__subtitle,
-html[data-theme="dark"] .home-subtitle,
-html[data-theme="dark"] .hero .button:not(.button--outline),
-html[data-theme="dark"] .hero .button:hover {
+html[data-theme="dark"] .home-subtitle {
   color: white;
 }
 
@@ -293,70 +254,40 @@ html[data-theme='dark'] .footer.footer--dark {
   --ifm-footer-background-color: #242526;
 }
 
-.button {
-  border-width: .15rem;
-}
 
-.button--primary,
-.button--primary:hover {
-  background: linear-gradient(0deg, var(--ifm-color-primary-dark) 0%, var(--ifm-color-primary) 100%);
-  color: #fff;
-  border-color: transparent;
-}
 
-.button.button--primary.button--outline,
-.button.button--primary.button--outline:active {
-  background: transparent;
-  color: var(--ifm-color-primary);
-  border-color: var(--ifm-color-primary);
-}
 
 .button.button--secondary.button--sm.menu__button {
-  border-radius: 0;
-  margin: 0;
-  top: 3.6rem;
-  right: 0;
-  bottom: auto;
-  width: 100%;
-  border-color: transparent;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  padding: .5rem 1rem;
-  z-index: 50;
+  position: fixed;
+  top: auto;
+  left: auto;  
+  right: 1.5rem;
+  bottom: 1.5rem;
+  width: auto;
+  padding: 0.5rem;
+  border-radius: 2rem;
+  border: none;
   background: #fff;
+  box-shadow: 0 0 1rem rgba(0,0,0,0.2);
 }
 
 html[data-theme='dark'] .button.button--secondary.button--sm.menu__button {
-  border-bottom: 1px solid rgba(255,255,255,.1);
   background: #242526;
   color: #fff;
-}
-
-.menu--show .button.button--secondary.button--sm.menu__button {
-  top: .25rem;
-  right: .25rem;
-  width: auto;
-  padding: 0 .4rem;
-  border: none;
-  border-radius: 2rem;
+  box-shadow: 0 0 1rem rgba(0,0,0,0.4);
 }
 
 .button.button--secondary.button--sm.menu__button:before {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  content: "Browse Documentation";
-  text-decoration: underline;
+  font-size: 2rem;
+  line-height: 2rem;
+  content: "📖";
+  opacity: 0.8;
   display: block;
 }
 
+.menu--show .button.button--secondary.button--sm.menu__button,
 .menu--show .button.button--secondary.button--sm.menu__button:before {
-  font-size: 1rem;
-  line-height: 1.4rem;
-  content: "✕";
-  text-decoration: none;
-  display: block;
-  color: #888;
-  border: none;
+  display: none;
 }
 
 .button.button--secondary.button--sm.menu__button svg,
@@ -365,7 +296,20 @@ html[data-theme='dark'] .button.button--secondary.button--sm.menu__button {
 }
 
 @media screen and (max-width: 996px) {
-  .main-wrapper {
-    padding-top: 1.5rem;
+  .menu.menu--responsive {
+    top: 3.5rem;
+    padding: 0;
+  }
+  .navbar {
+    z-index: 1000 !important;
+  }
+  /* Force all menus expanded on mobile */
+  /*
+  .menu .menu__list-item.menu__list-item--collapsed .menu__list {
+    height: auto;
+  }
+ .menu__link.menu__link--sublist:after {
+    display: none !important;
   }
+  */
 }
\ No newline at end of file
diff --git a/www/src/css/hero.css b/www/src/css/hero.css
new file mode 100644
index 0000000000..c8b1cbfa19
--- /dev/null
+++ b/www/src/css/hero.css
@@ -0,0 +1,134 @@
+
+.hero {
+  margin-top: -2rem;
+  margin-bottom: 4rem;
+  background: none;
+  color: black;
+  background: linear-gradient(0deg, #f1f1f1 0%, #ffffff 100%);
+}
+
+html[data-theme='dark'] .hero {
+  background: linear-gradient(0deg, #111111 0%, #242526 100%);
+}
+
+.hero-inner {
+  position: relative;
+  z-index: 2;
+  padding-bottom: 4rem;
+}
+
+.hero-wave {
+  position: absolute;
+  left: 0;
+  bottom: -4rem;
+  height: 4rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.hero-wave-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #f1f1f1; 
+  height: 40%;
+}
+
+.hero-wave:before {
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 100% 30%;
+  width: 56%;
+  height: 3rem;
+  background-color: #f9f9f9;
+  right: -2%;
+  top: 0;
+  z-index: 2;
+}
+
+.hero-wave:after {
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 100% 30%;
+  width: 52%;
+  height: 3rem;
+  background-color: #f1f1f1;
+  left: -2%;
+  top: 0;
+}
+
+html[data-theme='dark'] .hero-wave-inner,
+html[data-theme='dark'] .hero-wave:after {
+  background-color: #111111;
+}
+
+html[data-theme='dark'] .hero-wave:before {
+  background-color: #191A1B;
+}
+
+.hero .container {
+  margin: 4rem auto 0 auto;
+  border-radius: 10rem;
+}
+
+.hero .hero__title {  
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+  padding: 0;
+  border: none;
+  text-shadow: 0 .1rem 0 rgba(255,255,255,1), 0 0 8rem rgba(0,0,0,.5);
+}
+
+@media screen and (min-width: 689px) {
+  .hero .hero__title {
+    text-align: left;
+    font-size: 4.8rem;
+  }
+}
+
+html[data-theme="dark"] .hero .hero__title {
+  text-shadow: 0 .1rem 0 rgba(255,255,255,.1), 0 0 5rem rgba(255,255,255,.5);
+}
+
+.hero .hero__subtitle {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+  opacity: 0.6;
+  font-weight: 500;
+}
+
+@media screen and (min-width: 689px) {
+  .hero .hero__subtitle {
+    font-size: 1.5rem;
+  }
+}
+
+html[data-theme="dark"] .hero .hero__title,
+html[data-theme="dark"] .hero .hero__subtitle,
+html[data-theme="dark"] .hero .button:not(.button--outline),
+html[data-theme="dark"] .hero .button:hover {
+  color: white;
+}
+
+.hero-marquee {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation: hero-marquee-fadein 5s;
+  overflow: hidden;
+}
+
+@keyframes hero-marquee-fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.hero-marquee div {
+  overflow: visible;
+}
+
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 3f00339342..c66cc012c7 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -5,6 +5,7 @@ import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import CodeBlock from '@theme/CodeBlock'
+import ProviderMarquee from '../components/ProviderMarquee'
 import Seo from './seo'
 import styles from './styles.module.css'
 
@@ -76,34 +77,42 @@ function Home () {
       <Seo />
       <header className={classnames('hero', styles.heroBanner)}>
         <div className='container'>
-          <img
-            src='/img/logo/logo-sm.png'
-            alt='Shield with key icon'
-            className={styles.heroLogo}
-          />
-          <div className={styles.heroText}>
-            <h1 className='hero__title'>{siteConfig.title}</h1>
-            <p className='hero__subtitle'>{siteConfig.tagline}</p>
+          <div className='hero-inner'>
+            <img
+              src='/img/logo/logo-sm.png'
+              alt='Shield with key icon'
+              className={styles.heroLogo}
+            />
+            <div className={styles.heroText}>
+              <h1 className='hero__title'>{siteConfig.title}</h1>
+              <p className='hero__subtitle'>{siteConfig.tagline}</p>
+            </div>
+            <div className={styles.buttons}>
+              <a
+                className={classnames(
+                  'button button--outline button--secondary button--lg rounded-pill',
+                  styles.button
+                )}
+                href='https://next-auth-example.now.sh'
+              >Live Demo
+              </a>
+              <Link
+                className={classnames(
+                  'button button--primary button--lg rounded-pill',
+                  styles.button
+                )}
+                to={useBaseUrl('/getting-started/introduction')}
+              >Get Started
+              </Link>
+            </div>
           </div>
-          <div className={styles.buttons}>
-            <a
-              className={classnames(
-                'button button--outline button--primary button--lg rounded-pill',
-                styles.button
-              )}
-              href='https://next-auth-example.now.sh'
-            >Live Demo
-            </a>
-            <Link
-              className={classnames(
-                'button button--primary button--lg rounded-pill',
-                styles.button
-              )}
-              to={useBaseUrl('/getting-started/introduction')}
-            >Get Started
-            </Link>
+          <div className='hero-marquee'>
+            <ProviderMarquee />
           </div>
         </div>
+        <div className='hero-wave'>
+          <div className='hero-wave-inner' />
+        </div>
       </header>
       <main className='home-main'>
         <section className={`section-features ${styles.features}`}>
@@ -131,24 +140,24 @@ function Home () {
             <div className='row'>
               <div className='col col--6'>
                 <div className='code'>
-                  <h4 className='code-heading'>Step 1 – Add API Route</h4>
+                  <h4 className='code-heading'>Server</h4>
                   <CodeBlock className='javascript'>{serverlessFunctionCode}</CodeBlock>
                 </div>
               </div>
               <div className='col col--6'>
                 <div className='code'>
-                  <h4 className='code-heading'>Step 2 – Add React Component</h4>
+                  <h4 className='code-heading'>Client</h4>
                   <CodeBlock className='javascript'>{reactComponentCode}</CodeBlock>
                 </div>
               </div>
             </div>
             <div className='row'>
               <div className='col'>
-                <p className='text--center'>
+                <p className='text--center' style={{ marginTop: '2rem' }}>
                   <Link
                     to='/getting-started/example'
-                    className='button button--primary button--ouline button--lg rounded-pill'
-                  >View Example Code
+                    className='button button--primary button--lg rounded-pill'
+                  >Get Started
                   </Link>
                 </p>
               </div>
@@ -167,25 +176,25 @@ function Home () {
 
 const reactComponentCode = `
 import React from 'react'
-import { 
-  useSession, 
-  signin, 
-  signout 
+import {
+  signIn, 
+  signOut,
+  useSession
 } from 'next-auth/client'
 
 export default () => {
   const [ session, loading ] = useSession()
 
-  return <p>
+  return <>
     {!session && <>
       Not signed in <br/>
-      <button onClick={signin}>Sign in</button>
+      <button onClick={signIn}>Sign in</button>
     </>}
     {session && <>
       Signed in as {session.user.email} <br/>
-      <button onClick={signout}>Sign out</button>
+      <button onClick={signOut}>Sign out</button>
     </>}
-  </p>
+  </>
 }
 `.trim()
 
@@ -194,13 +203,16 @@ import NextAuth from 'next-auth'
 import Providers from 'next-auth/providers'
 
 const options = {
-  site: 'https://example.com',
   providers: [
     // OAuth authentication providers
     Providers.Apple({
       clientId: process.env.APPLE_ID,
       clientSecret: process.env.APPLE_SECRET
     }),
+    Providers.Facebook({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET
+    }),
     Providers.Google({
       clientId: process.env.GOOGLE_ID,
       clientSecret: process.env.GOOGLE_SECRET
diff --git a/www/src/pages/styles.module.css b/www/src/pages/styles.module.css
index c4268b12f4..a25af8468b 100644
--- a/www/src/pages/styles.module.css
+++ b/www/src/pages/styles.module.css
@@ -5,15 +5,14 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 4rem 0 0 0;
   text-align: center;
   position: relative;
-  overflow: hidden;
 }
 
 @media screen and (max-width: 966px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 2rem 2rem 0 2rem;
   }
 }
 
diff --git a/www/static/img/providers/apple-black.svg b/www/static/img/providers/apple-black.svg
new file mode 100644
index 0000000000..9b1c580002
--- /dev/null
+++ b/www/static/img/providers/apple-black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2036" height="2500" viewBox="0 0 456.008 560.035" fill="#3c5a9a"><path d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655"/></svg>
diff --git a/www/static/img/providers/auth0.svg b/www/static/img/providers/auth0.svg
new file mode 100644
index 0000000000..a51cd9428c
--- /dev/null
+++ b/www/static/img/providers/auth0.svg
@@ -0,0 +1 @@
+<svg width="2230" height="2500" viewBox="0 0 256 287" xmlns="http://www.w3.org/2000/svg"><path d="M203.24 231.531l-28.73-88.434 75.208-54.64h-92.966L128.019.025l-.009-.024h92.98l28.74 88.446.002-.002.024-.013c16.69 51.31-.5 109.67-46.516 143.098zm-150.45 0l-.023.017 75.228 54.655 75.245-54.67-75.221-54.656-75.228 54.654zM6.295 88.434c-17.57 54.088 2.825 111.4 46.481 143.108l.007-.028 28.735-88.429-75.192-54.63h92.944L128.004.024 128.01 0H35.025L6.294 88.434z" fill="#EB5424"/></svg>
diff --git a/www/static/img/providers/aws-cognito.svg b/www/static/img/providers/aws-cognito.svg
new file mode 100644
index 0000000000..816b57db99
--- /dev/null
+++ b/www/static/img/providers/aws-cognito.svg
@@ -0,0 +1 @@
+<svg width="2140" height="2500" viewBox="0 0 256 299" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M208.752 58.061l25.771-6.636.192.283.651 155.607-.843.846-5.31.227-20.159-3.138-.302-.794V58.061M59.705 218.971l.095.007 68.027 19.767.173.133.296.236-.096 59.232-.2.252-68.295-33.178v-46.449" fill="#7A3E65"/><path d="M208.752 204.456l-80.64 19.312-40.488-9.773-27.919 4.976L128 238.878l105.405-28.537 1.118-2.18-25.771-3.705" fill="#CFB2C1"/><path d="M196.295 79.626l-.657-.749-66.904-19.44-.734.283-.672-.343L22.052 89.734l-.575.703.845.463 24.075 3.53.851-.289 80.64-19.311 40.488 9.773 27.919-4.977" fill="#512843"/><path d="M47.248 240.537l-25.771 6.221-.045-.149-1.015-155.026 1.06-1.146 25.771 3.704v146.396" fill="#C17B9E"/><path d="M82.04 180.403l45.96 5.391.345-.515.187-71.887-.532-.589-45.96 5.392v62.208" fill="#7A3E65"/><path d="M173.96 180.403L128 185.794v-72.991l45.96 5.392v62.208M196.295 79.626L128 59.72V0l68.295 33.177v46.449" fill="#C17B9E"/><path d="M128 0L0 61.793v175.011l21.477 9.954V90.437L128 59.72V0" fill="#7A3E65"/><path d="M234.523 51.425v156.736L128 238.878v59.72l128-61.794V61.793l-21.477-10.368" fill="#C17B9E"/></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/battle.net.svg b/www/static/img/providers/battle.net.svg
new file mode 100644
index 0000000000..2efa9f8139
--- /dev/null
+++ b/www/static/img/providers/battle.net.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 43.113281 22.152344 C 43.113281 22.152344 47.058594 22.351563 47.058594 20.03125 C 47.058594 16.996094 41.804688 14.261719 41.804688 14.261719 C 41.804688 14.261719 42.628906 12.515625 43.140625 11.539063 C 43.65625 10.5625 45.101563 6.753906 45.230469 5.886719 C 45.394531 4.792969 45.144531 4.449219 45.144531 4.449219 C 44.789063 6.792969 40.972656 13.539063 40.671875 13.769531 C 36.949219 12.023438 31.835938 11.539063 31.835938 11.539063 C 31.835938 11.539063 26.832031 1 22.125 1 C 17.457031 1 17.480469 10.023438 17.480469 10.023438 C 17.480469 10.023438 16.160156 7.464844 14.507813 7.464844 C 12.085938 7.464844 11.292969 11.128906 11.292969 15.097656 C 6.511719 15.097656 2.492188 16.164063 2.132813 16.265625 C 1.773438 16.371094 0.644531 17.191406 1.15625 17.089844 C 2.203125 16.753906 7.113281 15.992188 11.410156 16.367188 C 11.648438 20.140625 13.851563 25.054688 13.851563 25.054688 C 13.851563 25.054688 9.128906 31.894531 9.128906 36.78125 C 9.128906 38.066406 9.6875 40.417969 13.078125 40.417969 C 15.917969 40.417969 19.105469 38.710938 19.707031 38.363281 C 19.183594 39.113281 18.796875 40.535156 18.796875 41.191406 C 18.796875 41.726563 19.113281 43.246094 21.304688 43.246094 C 24.117188 43.246094 27.257813 41.089844 27.257813 41.089844 C 27.257813 41.089844 30.222656 46.019531 32.761719 48.28125 C 33.445313 48.890625 34.097656 49 34.097656 49 C 34.097656 49 31.578125 46.574219 28.257813 40.324219 C 31.34375 38.417969 34.554688 33.921875 34.554688 33.921875 C 34.554688 33.921875 34.933594 33.933594 37.863281 33.933594 C 42.453125 33.933594 48.972656 32.96875 48.972656 29.320313 C 48.972656 25.554688 43.113281 22.152344 43.113281 22.152344 Z M 43.625 19.886719 C 43.625 21.21875 42.359375 21.199219 42.359375 21.199219 L 41.394531 21.265625 C 41.394531 21.265625 39.566406 20.304688 38.460938 19.855469 C 38.460938 19.855469 40.175781 17.207031 40.578125 16.46875 C 40.882813 16.644531 43.625 18.363281 43.625 19.886719 Z M 24.421875 6.308594 C 26.578125 6.308594 29.65625 11.402344 29.65625 11.402344 C 29.65625 11.402344 24.851563 10.972656 20.898438 13.296875 C 21.003906 9.628906 22.238281 6.308594 24.421875 6.308594 Z M 15.871094 10.4375 C 16.558594 10.4375 17.230469 11.269531 17.507813 11.976563 C 17.507813 12.445313 17.75 15.171875 17.75 15.171875 L 13.789063 15.023438 C 13.789063 11.449219 15.1875 10.4375 15.871094 10.4375 Z M 15.464844 35.246094 C 13.300781 35.246094 12.851563 34.039063 12.851563 32.953125 C 12.851563 30.496094 14.8125 27.058594 14.8125 27.058594 C 14.8125 27.058594 17.011719 31.683594 20.851563 33.636719 C 18.945313 34.753906 17.375 35.246094 15.464844 35.246094 Z M 22.492188 40.089844 C 20.972656 40.089844 20.789063 39.105469 20.789063 38.878906 C 20.789063 38.171875 21.339844 37.335938 21.339844 37.335938 C 21.339844 37.335938 23.890625 35.613281 24.054688 35.429688 L 25.9375 38.945313 C 25.9375 38.945313 24.007813 40.089844 22.492188 40.089844 Z M 27.226563 38.171875 C 26.300781 36.554688 25.621094 34.867188 25.621094 34.867188 C 25.621094 34.867188 29.414063 35.113281 31.453125 33.007813 C 30.183594 33.578125 28.15625 34.300781 25.800781 34.082031 C 30.726563 29.742188 33.601563 26.597656 36.03125 23.34375 C 35.824219 23.09375 34.710938 22.316406 34.4375 22.1875 C 32.972656 23.953125 27.265625 30.054688 21.984375 33.074219 C 15.292969 29.425781 13.890625 18.691406 13.746094 16.460938 L 17.402344 16.8125 C 17.402344 16.8125 16.027344 19.246094 16.027344 21.039063 C 16.027344 22.828125 16.242188 22.925781 16.242188 22.925781 C 16.242188 22.925781 16.195313 19.800781 18.125 17.390625 C 19.59375 25.210938 21.125 29.21875 22.320313 31.605469 C 22.925781 31.355469 24.058594 30.851563 24.058594 30.851563 C 24.058594 30.851563 20.683594 21.121094 20.871094 14.535156 C 22.402344 13.71875 24.667969 12.875 27.226563 12.875 C 33.957031 12.875 39.367188 15.773438 39.367188 15.773438 L 37.25 18.730469 C 37.25 18.730469 35.363281 15.3125 32.699219 14.703125 C 34.105469 15.753906 35.679688 17.136719 36.496094 19.128906 C 30.917969 16.949219 24.1875 15.796875 22.027344 15.542969 C 21.839844 16.339844 21.863281 17.480469 21.863281 17.480469 C 21.863281 17.480469 30.890625 19.144531 37.460938 22.90625 C 37.414063 31.125 28.460938 37.4375 27.226563 38.171875 Z M 35.777344 32.027344 C 35.777344 32.027344 38.578125 28.347656 38.535156 23.476563 C 38.535156 23.476563 43.0625 26.28125 43.0625 29.015625 C 43.0625 32.074219 35.777344 32.027344 35.777344 32.027344 Z"/></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/box.svg b/www/static/img/providers/box.svg
new file mode 100644
index 0000000000..26b0e0fdbb
--- /dev/null
+++ b/www/static/img/providers/box.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="1379" viewBox="0 0 444.893 245.414"><g fill="#0075C9"><path d="M239.038 72.43c-33.081 0-61.806 18.6-76.322 45.904-14.516-27.305-43.24-45.902-76.32-45.902-19.443 0-37.385 6.424-51.821 17.266V16.925h-.008C34.365 7.547 26.713 0 17.286 0 7.858 0 .208 7.547.008 16.925H0v143.333h.036c.768 47.051 39.125 84.967 86.359 84.967 33.08 0 61.805-18.603 76.32-45.908 14.517 27.307 43.241 45.906 76.321 45.906 47.715 0 86.396-38.684 86.396-86.396.001-47.718-38.682-86.397-86.394-86.397zM86.395 210.648c-28.621 0-51.821-23.201-51.821-51.82 0-28.623 23.201-51.823 51.821-51.823 28.621 0 51.822 23.2 51.822 51.823 0 28.619-23.201 51.82-51.822 51.82zm152.643 0c-28.622 0-51.821-23.201-51.821-51.822 0-28.623 23.2-51.821 51.821-51.821 28.619 0 51.822 23.198 51.822 51.821-.001 28.621-23.203 51.822-51.822 51.822z"/><path d="M441.651 218.033l-44.246-59.143 44.246-59.144-.008-.007c5.473-7.62 3.887-18.249-3.652-23.913-7.537-5.658-18.187-4.221-23.98 3.157l-.004-.002-38.188 51.047-38.188-51.047-.006.009c-5.793-7.385-16.441-8.822-23.981-3.16-7.539 5.664-9.125 16.293-3.649 23.911l-.008.005 44.245 59.144-44.245 59.143.008.005c-5.477 7.62-3.89 18.247 3.649 23.909 7.54 5.664 18.188 4.225 23.981-3.155l.006.007 38.188-51.049 38.188 51.049.004-.002c5.794 7.377 16.443 8.814 23.98 3.154 7.539-5.662 9.125-16.291 3.652-23.91l.008-.008z"/></g></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/discord.svg b/www/static/img/providers/discord.svg
new file mode 100644
index 0000000000..281dd3799d
--- /dev/null
+++ b/www/static/img/providers/discord.svg
@@ -0,0 +1 @@
+<svg width="2184" height="2500" viewBox="0 0 256 293" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M226.011 0H29.99C13.459 0 0 13.458 0 30.135v197.778c0 16.677 13.458 30.135 29.989 30.135h165.888l-7.754-27.063 18.725 17.408 17.7 16.384L256 292.571V30.135C256 13.458 242.542 0 226.011 0zm-56.466 191.05s-5.266-6.291-9.655-11.85c19.164-5.413 26.478-17.408 26.478-17.408-5.998 3.95-11.703 6.73-16.823 8.63-7.314 3.073-14.336 5.12-21.211 6.291-14.044 2.633-26.917 1.902-37.888-.146-8.339-1.61-15.507-3.95-21.504-6.29-3.365-1.317-7.022-2.926-10.68-4.974-.438-.293-.877-.439-1.316-.732-.292-.146-.439-.292-.585-.438-2.633-1.463-4.096-2.487-4.096-2.487s7.022 11.703 25.6 17.261c-4.388 5.56-9.801 12.142-9.801 12.142-32.33-1.024-44.617-22.235-44.617-22.235 0-47.104 21.065-85.285 21.065-85.285 21.065-15.799 41.106-15.36 41.106-15.36l1.463 1.756C80.75 77.53 68.608 89.088 68.608 89.088s3.218-1.755 8.63-4.242c15.653-6.876 28.088-8.777 33.208-9.216.877-.147 1.609-.293 2.487-.293a123.776 123.776 0 0 1 29.55-.292c13.896 1.609 28.818 5.705 44.031 14.043 0 0-11.556-10.971-36.425-18.578l2.048-2.34s20.041-.44 41.106 15.36c0 0 21.066 38.18 21.066 85.284 0 0-12.435 21.211-44.764 22.235zm-68.023-68.316c-8.338 0-14.92 7.314-14.92 16.237 0 8.924 6.728 16.238 14.92 16.238 8.339 0 14.921-7.314 14.921-16.238.147-8.923-6.582-16.237-14.92-16.237m53.394 0c-8.339 0-14.922 7.314-14.922 16.237 0 8.924 6.73 16.238 14.922 16.238 8.338 0 14.92-7.314 14.92-16.238 0-8.923-6.582-16.237-14.92-16.237" fill="#7289DA"/></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/facebook-2.svg b/www/static/img/providers/facebook-2.svg
new file mode 100644
index 0000000000..077bde6d92
--- /dev/null
+++ b/www/static/img/providers/facebook-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1298" height="2500" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z" fill="#3c5a9a"/></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/github-1.svg b/www/static/img/providers/github-1.svg
new file mode 100644
index 0000000000..0b10f82ea5
--- /dev/null
+++ b/www/static/img/providers/github-1.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve" fill="#3c5a9a">
+<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
+	c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
+	c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
+	c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
+	c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
+	c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
+	C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
+</svg>
diff --git a/www/static/img/providers/gitlab.svg b/www/static/img/providers/gitlab.svg
new file mode 100644
index 0000000000..ab63afd262
--- /dev/null
+++ b/www/static/img/providers/gitlab.svg
@@ -0,0 +1 @@
+<svg width="2500" height="2305" viewBox="0 0 256 236" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M128.075 236.075l47.104-144.97H80.97l47.104 144.97z" fill="#E24329"/><path d="M128.075 236.074L80.97 91.104H14.956l113.119 144.97z" fill="#FC6D26"/><path d="M14.956 91.104L.642 135.16a9.752 9.752 0 0 0 3.542 10.903l123.891 90.012-113.12-144.97z" fill="#FCA326"/><path d="M14.956 91.105H80.97L52.601 3.79c-1.46-4.493-7.816-4.492-9.275 0l-28.37 87.315z" fill="#E24329"/><path d="M128.075 236.074l47.104-144.97h66.015l-113.12 144.97z" fill="#FC6D26"/><path d="M241.194 91.104l14.314 44.056a9.752 9.752 0 0 1-3.543 10.903l-123.89 90.012 113.119-144.97z" fill="#FCA326"/><path d="M241.194 91.105h-66.015l28.37-87.315c1.46-4.493 7.816-4.492 9.275 0l28.37 87.315z" fill="#E24329"/></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/google-icon.svg b/www/static/img/providers/google-icon.svg
new file mode 100644
index 0000000000..06dc52f0aa
--- /dev/null
+++ b/www/static/img/providers/google-icon.svg
@@ -0,0 +1 @@
+<svg width="2443" height="2500" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/okta-3.svg b/www/static/img/providers/okta-3.svg
new file mode 100644
index 0000000000..9771d9b950
--- /dev/null
+++ b/www/static/img/providers/okta-3.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 2490.6 839.8" xml:space="preserve">
+<path fill="#007DC1" d="M704.3,418c0-129.5,0.2-259.1-0.3-388.5c0-18,11.9-29.2,29.9-29.2c33.3-0.2,66.8-0.3,100.1,0
+	c18.9,0.2,29.9,11.7,29.7,29.4c-0.5,114.6-0.3,229.4-0.3,344v6.3c0.2,12.7,5.8,22,17.5,27c11.3,4.8,21.9,2.3,31.1-7.5
+	c33.6-36,67.1-72.1,100.5-108.2c20.5-22.2,41.3-44.1,61.6-66.4c7.7-8.4,16.6-12.4,28.1-12.2c41.9,0.3,84,0.3,125.9,0
+	c12.4,0,22.2,3.8,27.4,15.3c5.3,11.9,2.8,22.5-6.1,32.2c-62.9,69.6-125.6,139.3-188.4,208.9c-5,5.6-9.9,11.4-13.8,17.8
+	c-7,11.3-7,22.4-0.5,33.9c7,12.4,16.9,22.4,26.7,32.5c76.1,78.2,152.4,156.4,228.7,234.4c9.2,9.5,11.9,19.9,7.3,32.1
+	c-4.4,11.4-13.1,16.6-27.4,16.6c-46.6,0-93.3-0.2-139.9,0c-10.5,0-18.6-3.3-26.1-11.3c-67.7-71.1-135.9-141.8-203.9-212.6
+	c-9.7-10.2-20.5-12.8-31.7-8.1c-11.3,4.5-17.2,14.1-17.2,28v174.3c0,18.8-9.5,28.5-28.1,28.6H732.7c-20.5,0-28.5-8.1-28.5-28.3
+	L704.3,418z M1339.7,287.7c0-85.7,0.3-171.5-0.3-257.2c-0.2-19.4,11.1-30.5,30.8-30.5c32.4,0.2,64.6,0,96.9,0
+	c18.9,0,29.7,10.6,29.7,29.4c0.2,50,0.2,100.1,0.3,150.1c0,21.6,11.1,32.8,32.5,32.8h134.5c14.2,0,23.5,7.7,26.3,21.6
+	c1.4,6.7,0.9,13.4,1.1,20.3v82.9c0,21.7-9.7,31.4-31.4,31.4c-43,0-86-0.2-129-0.2c-22,0-33.3,11.1-33.5,32.8
+	c-0.2,44.1-0.9,88-0.3,132.1c0.9,67.2,52.4,129.1,119.3,144.9c19.7,4.7,39.7,5.5,59.7,2.7c16.3-2.3,28.1,6.4,30,22.8
+	c4.1,34.9,7.8,69.9,11.4,104.8c1.4,13.3-8.3,25.5-22,27.7c-36.9,6.3-73.8,4.1-110.1-4.1C1456,803,1360.8,699.4,1342.2,568.1
+	c-1.9-13-2.5-26-2.5-38.9L1339.7,287.7z M2490.4,697.2c0-11.9-9.1-20.2-21-20.8c-8.1-0.3-16.1-0.6-24.2-1.3
+	c-41.4-3.1-62.7-22.5-70.2-63.3c-5.8-31.1-5.6-62.7-5.8-94.3c-0.3-90.7-0.2-181.4-0.2-272.1c0-2.7,0-5.2-0.2-7.8
+	c-1.1-14.7-11.7-25.2-26.6-25.2c-34.9-0.2-69.9-0.2-104.8,0c-15.8,0-27,11.3-27.7,26.9c-0.2,3.8,0,7.7,0,12.2
+	c-3-1.6-5.3-2.7-7.5-3.8c-63-33.1-129.8-43.8-200-32.1c-178.7,30-295.2,209-250.8,384.6c56.4,222.8,323.5,311.5,502.2,166.5
+	c4.2-3.4,5.9-3.3,9.2,1.3c18.4,26.3,42.7,45.3,72.9,56.8c33.3,12.7,68,14.4,103.2,11.9c12.5-0.9,24.9-2.7,36.3-8.4
+	c8.1-4.1,14.7-10.2,14.9-19.5C2490.8,771.6,2490.6,734.4,2490.4,697.2L2490.4,697.2z M2055.6,681.1c-86.9-0.3-156-71-155.7-159.6
+	c0.3-83.8,71.3-153.4,156.5-153.2c87.4,0.2,156.4,70.4,156.2,159.2C2212.3,611.2,2140.8,681.2,2055.6,681.1z M314,211.1
+	C148,211.4,3.8,339.6,0.1,517.7c-3.8,184.2,142.1,316,305,320.1c174.2,4.4,318.5-133.1,321.5-306.8C629.5,354.2,491,213.1,314,211.1
+	L314,211.1z M312.9,681.1c-85.7,0-156-70.4-156.2-156.4c-0.2-86.1,70-156.4,156.5-156.7c86.3-0.2,156.2,69.9,156.2,156.5
+	S399.5,681.1,312.9,681.1L312.9,681.1z"/>
+</svg>
diff --git a/www/static/img/providers/openid.svg b/www/static/img/providers/openid.svg
new file mode 100644
index 0000000000..7658bf7167
--- /dev/null
+++ b/www/static/img/providers/openid.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 25.573 25.573" style="enable-background:new 0 0 25.573 25.573;" xml:space="preserve">
+<g>
+	<g>
+		<polygon style="fill:#030104;" points="12.036,24.589 12.036,3.296 15.391,0.983 15.391,22.74 		"/>
+		<path style="fill:#030104;" d="M11.11,7.926v2.893c0,0-6.632,0.521-7.058,5.556c0,0-0.93,4.396,7.058,5.785v2.43
+			c0,0-11.226-1.155-11.109-8.331C0.001,16.258-0.115,8.968,11.11,7.926z"/>
+		<path style="fill:#030104;" d="M16.2,7.926v2.702c0,0,2.142-0.029,3.934,1.463l-1.964,0.807l7.403,1.855V8.967l-2.527,1.43
+			C23.046,10.397,20.889,8.13,16.2,7.926z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/www/static/img/providers/slack.svg b/www/static/img/providers/slack.svg
new file mode 100644
index 0000000000..69a4eb6a21
--- /dev/null
+++ b/www/static/img/providers/slack.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 2447.6 2452.5" viewBox="0 0 2447.6 2452.5" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0"/><path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d"/><path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e"/><path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a"/></g></svg>
\ No newline at end of file
diff --git a/www/static/img/providers/spotify.svg b/www/static/img/providers/spotify.svg
new file mode 100644
index 0000000000..fc3a68bd46
--- /dev/null
+++ b/www/static/img/providers/spotify.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="168px" width="168px" version="1.1" viewBox="0 0 168 168">
+ <path fill="#1ED760" d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"/>
+</svg>
diff --git a/www/static/img/providers/twitter.svg b/www/static/img/providers/twitter.svg
new file mode 100644
index 0000000000..c0364cc152
--- /dev/null
+++ b/www/static/img/providers/twitter.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="209px" viewBox="0 0 256 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M256,25.4500259 C246.580841,29.6272672 236.458451,32.4504868 225.834156,33.7202333 C236.678503,27.2198053 245.00583,16.9269929 248.927437,4.66307685 C238.779765,10.6812633 227.539325,15.0523376 215.57599,17.408298 C205.994835,7.2006971 192.34506,0.822 177.239197,0.822 C148.232605,0.822 124.716076,24.3375931 124.716076,53.3423116 C124.716076,57.4586875 125.181462,61.4673784 126.076652,65.3112644 C82.4258385,63.1210453 43.7257252,42.211429 17.821398,10.4359288 C13.3005011,18.1929938 10.710443,27.2151234 10.710443,36.8402889 C10.710443,55.061526 19.9835254,71.1374907 34.0762135,80.5557137 C25.4660961,80.2832239 17.3681846,77.9207088 10.2862577,73.9869292 C10.2825122,74.2060448 10.2825122,74.4260967 10.2825122,74.647085 C10.2825122,100.094453 28.3867003,121.322443 52.413563,126.14673 C48.0059695,127.347184 43.3661509,127.988612 38.5755734,127.988612 C35.1914554,127.988612 31.9009766,127.659938 28.694773,127.046602 C35.3777973,147.913145 54.7742053,163.097665 77.7569918,163.52185 C59.7820257,177.607983 37.1354036,186.004604 12.5289147,186.004604 C8.28987161,186.004604 4.10888474,185.75646 0,185.271409 C23.2431033,200.173139 50.8507261,208.867532 80.5109185,208.867532 C177.116529,208.867532 229.943977,128.836982 229.943977,59.4326002 C229.943977,57.1552968 229.893412,54.8901664 229.792282,52.6381454 C240.053257,45.2331635 248.958338,35.9825545 256,25.4500259" fill="#55acee"></path>
+    </g>
+</svg>
\ No newline at end of file