Improve CSRF security for all routes

Includes breaking changes for v3 and updates to documentation.

If using the client, the only required change should be setting the NEXTAUTH_URL environment variable.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-auth",
-  "version": "2.2.0",
+  "version": "3.0.0-beta.0",
   "description": "An authentication library for Next.js",
   "repository": "https://github.com/iaincollins/next-auth.git",
   "author": "Iain Collins <[email protected]>",

src/client/index.js

@@ -3,14 +3,23 @@
 import { useState, useEffect, useContext, createContext, createElement } from 'react'
 import logger from '../lib/logger'
 
+// 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
+  site: (typeof window === 'undefined')
+    ? process.env.NEXTAUTH_URL || process.env.VERCEL_URL || 'http://localhost:3000'
+    : '',
+  basePath: (typeof window === 'undefined')
+    ? process.env.NEXTAUTH_BASE_PATH|| '/api/auth'
+    : '/api/auth',
+  clientMaxAge: 0, // e.g. 0 == disabled, 60 == 60 seconds
+  eventListenerAdded: false
 }
 
-let __NEXTAUTH_EVENT_LISTENER_ADDED = false
-
 // 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.
@@ -31,23 +40,24 @@ const getSession = async ({ req, ctx } = {}) => {
   }
 
   const baseUrl = _baseUrl()
-  const options = req ? { headers: { cookie: req.headers.cookie } } : {}
-  const session = await _fetchData(`${baseUrl}/session`, options)
+  const fetchOptions = req ? { headers: { cookie: req.headers.cookie } } : {}
+  const session = await _fetchData(`${baseUrl}/session`, fetchOptions)
   _sendMessage({ event: 'session', data: { trigger: 'getSession' } })
   return session
 }
 
 // Universal method (client + server)
-const getProviders = async () => {
+const getCsrfToken = async ({ req }) => {
   const baseUrl = _baseUrl()
-  return _fetchData(`${baseUrl}/providers`)
+  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)
-const getCsrfToken = async () => {
+// Universal method (client + server); does not require request headers
+const getProviders = async () => {
   const baseUrl = _baseUrl()
-  const data = await _fetchData(`${baseUrl}/csrf`)
-  return data && data.csrfToken ? data.csrfToken : null
+  return _fetchData(`${baseUrl}/providers`)
 }
 
 // Context to store session data globally
@@ -80,8 +90,8 @@ const useSessionData = (session) => {
         _sendMessage({ event: 'session', data: { trigger: 'useSessionData' } })
       }
 
-      if (typeof window !== 'undefined' && __NEXTAUTH_EVENT_LISTENER_ADDED === false) {
-        __NEXTAUTH_EVENT_LISTENER_ADDED = true
+      if (typeof window !== 'undefined' && __NEXTAUTH.eventListenerAdded === false) {
+        __NEXTAUTH.eventListenerAdded = true
         window.addEventListener('storage', async (event) => {
           if (event.key === 'nextauth.message') {
             const message = JSON.parse(event.newValue)
@@ -102,9 +112,7 @@ const useSessionData = (session) => {
 
       // If CLIENT_MAXAGE is greater than zero, trigger auto re-fetching session
       if (clientMaxAge > 0) {
-        setTimeout(async (session) => {
-          await _getSession()
-        }, clientMaxAge)
+        setTimeout(async () => { await _getSession() }, clientMaxAge)
       }
     } catch (error) {
       logger.error('CLIENT_USE_SESSION_ERROR', error)
@@ -115,44 +123,44 @@ const useSessionData = (session) => {
 }
 
 // Client side method
-const signin = async (provider, args) => {
+const signIn = async (provider, args) => {
+  const baseUrl = _baseUrl()  
   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)
+    // If is any other provider type, POST to provider URL with CSRF Token,
+    // callback URL and any other parameters supplied.
+    //
+    // We pass 'json: true' to request a response in JSON instead of HTTP
+    // as redirect URLs on other domains are not returned when accessed using
+    // the fetch API in the browser, and we need to ask the end point 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).
     const options = {
       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(`${baseUrl}/signin/${provider}`, options)
+    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()
@@ -190,7 +198,24 @@ const _fetchData = async (url, options = {}) => {
   }
 }
 
-const _baseUrl = () => `${__NEXTAUTH.site}${__NEXTAUTH.basePath}`
+const _baseUrl = () => {
+  // NEXTAUTH_URL should always be set explicitly to support server side calls
+  if (typeof window === 'undefined' && !process.env.NEXTAUTH_URL) {
+    logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set')
+  }
+
+  let site = __NEXTAUTH.site
+
+  // If site value exists but does not start with http or https protocol, add it here
+  if (site.length > 0 && !site.startsWith('https://') && !site.startsWith('http://')) {
+    site = `https://${site}`
+  }
+
+  // Remove trailing slash from site if there is one
+  site = site.replace(/\/$/, '')
+
+  return `${site}${__NEXTAUTH.basePath}`
+}
 
 const _encodedForm = (formData) => {
   return Object.keys(formData).map((key) => {
@@ -205,22 +230,23 @@ const _sendMessage = (message) => {
 }
 
 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,
   Provider,
-  signin,
-  signout
+  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,
 }

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
       )
     }

src/server/index.js

@@ -12,9 +12,21 @@ import callback from './routes/callback'
 import session from './routes/session'
 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'
+// @TODO Refactor internal site / url variable names internally once we have
+//       tests in place, as the 'site' name feels a bit ambigous.
+//       I don't want to change it until we have tests as refactoring might
+//       involve changes in dozen files or so and too easy to break accidentally.
+const DEFAULT_SITE = process.env.NEXTAUTH_URL || process.env.VERCEL_URL || 'http://localhost:3000'
+const DEFAULT_BASE_PATH =  process.env.NEXTAUTH_BASE_PATH || '/api/auth'
+
+// While we can run locally without this value being set, to work properly in
+// production with OAuth providers the NEXTAUTH_URL environment variable should
+// 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
@@ -40,7 +52,16 @@ export default async (req, res, userSuppliedOptions) => {
     } = body
 
     // Allow site name, path prefix to be overriden
-    const site = userSuppliedOptions.site || DEFAULT_SITE
+    let site = userSuppliedOptions.site || DEFAULT_SITE
+
+    // If site value does not start with http or https protocol, add it here
+    if (!site.startsWith('https://') && !site.startsWith('http://')) {
+      site = `https://${site}`
+    }
+
+    // Remove trailing slash from site if there is one
+    site = site.replace(/\/$/, '')
+
     const basePath = userSuppliedOptions.basePath || DEFAULT_BASE_PATH
     const baseUrl = `${site}${basePath}`
 
@@ -190,7 +211,6 @@ export default async (req, res, userSuppliedOptions) => {
       cookies,
       secret,
       csrfToken,
-      csrfTokenVerified,
       providers: parseProviders(userSuppliedOptions.providers, baseUrl),
       session: sessionOption,
       jwt: jwtOptions,
@@ -205,9 +225,16 @@ export default async (req, res, userSuppliedOptions) => {
     // Get / Set callback URL based on query param / cookie + validation
     options.callbackUrl = await callbackUrlHandler(req, res, options)
 
+    // Helper method for handling redirects
     const redirect = (redirectUrl) => {
-      res.status(302).setHeader('Location', redirectUrl)
-      res.end()
+      const reponseAsJson = (req.body && req.body.json === 'true') ? true : false
+
+      if (reponseAsJson) {
+        res.json({ url: redirectUrl })
+      } else {
+        res.status(302).setHeader('Location', redirectUrl)
+        res.end()
+      }
       return done()
     }
 
@@ -223,13 +250,9 @@ export default async (req, res, userSuppliedOptions) => {
           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', { site, 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}`) }
@@ -261,17 +284,31 @@ 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}/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}/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}/signin?csrf=true`)
+            }
+
             callback(req, res, options, done)
           } else {
             res.status(400).end(`Error: HTTP POST is not supported for ${url}`)

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()
@@ -18,6 +20,18 @@ export default async (req, provider, callback) => {
   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 'useState: false' as a provider option (defaults to true).
+    if (!Object.prototype.hasOwnProperty.call(provider, 'useState') || provider.useState === 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') {
       try {
         const body = JSON.parse(JSON.stringify(req.body))