feat(client): introduce NEXTAUTH_URL_INTERNAL (#1449)

Co-authored-by: @gergelyke

.github/stale.yml

@@ -7,6 +7,7 @@ exemptLabels:
   - pinned
   - security
   - priority
+  - bug
 # Label to use when marking an issue as stale
 staleLabel: stale
 # Comment to post when marking an issue as stale. Set to `false` to disable

components/header.js

@@ -100,6 +100,11 @@ export default function Header () {
               <a>Credentials</a>
             </Link>
           </li>
+          <li className={styles.navItem}>
+            <Link href='/email'>
+              <a>Email</a>
+            </Link>
+          </li>
         </ul>
       </nav>
     </header>

package.json

@@ -106,13 +106,15 @@
       "next-env.d.ts"
     ],
     "globals": [
+      "localStorage",
+      "location",
       "fetch"
     ]
   },
   "funding": [
     {
-      "type" : "github",
-      "url" : "https://github.com/sponsors/balazsorban44"
+      "type": "github",
+      "url": "https://github.com/sponsors/balazsorban44"
     }
   ]
 }

pages/email.js

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { signIn, signOut, useSession } from 'next-auth/client'
+import Layout from 'components/layout'
+
+export default function Page () {
+  const [response, setResponse] = React.useState(null)
+  const [email, setEmail] = React.useState('')
+
+  const handleChange = (event) => {
+    setEmail(event.target.value)
+  }
+
+  const handleLogin = (options) => async (event) => {
+    event.preventDefault()
+
+    if (options.redirect) {
+      return signIn('email', options)
+    }
+    const response = await signIn('email', options)
+    setResponse(response)
+  }
+
+  const handleLogout = (options) => async (event) => {
+    if (options.redirect) {
+      return signOut(options)
+    }
+    const response = await signOut(options)
+    setResponse(response)
+  }
+
+  const [session] = useSession()
+
+  if (session) {
+    return (
+      <Layout>
+        <h1>Test different flows for Email logout</h1>
+        <span className='spacing'>Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button><br />
+        <span className='spacing'>No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button><br />
+        <p>Response:</p>
+        <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout>
+      <h1>Test different flows for Email login</h1>
+      <label className='spacing'>
+        Email address:{' '}
+        <input type='text' id='email' name='email' value={email} onChange={handleChange} />
+      </label><br />
+      <form onSubmit={handleLogin({ redirect: true, email })}>
+        <span className='spacing'>Default:</span>
+        <button type='submit'>Sign in with Email</button>
+      </form>
+      <form onSubmit={handleLogin({ redirect: false, email })}>
+        <span className='spacing'>No redirect:</span>
+        <button type='submit'>Sign in with Email</button>
+      </form>
+      <p>Response:</p>
+      <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+    </Layout>
+  )
+}

src/client/index.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react'
+import { GetServerSidePropsContext } from 'next'
+
+interface DefaultSession {
+  user: {
+    name: string | null
+    email: string | null
+    image: string | null
+  }
+  expires: Date | string
+}
+
+interface BroadcastMessage {
+  event?: 'session'
+  data?: {
+    trigger?: 'signout' | 'getSession'
+  }
+  clientId: string
+  timestamp: number
+}
+
+type GetSession<S extends Record<string, unknown> = DefaultSession> = (options: {
+  ctx?: GetServerSidePropsContext
+  req?: GetServerSidePropsContext['req']
+  event?: 'storage' | 'timer' | 'hidden' | string
+  triggerEvent?: boolean
+}) => Promise<S>
+
+export interface NextAuthConfig {
+  baseUrl: string
+  basePath: string
+  baseUrlServer: string
+  basePathServer: string
+  /** 0 means disabled (don't send); 60 means send every 60 seconds */
+  keepAlive: number
+  /** 0 means disabled (only use cache); 60 means sync if last checked > 60 seconds ago */
+  clientMaxAge: number
+  /** Used for timestamp since last sycned (in seconds) */
+  _clientLastSync: number
+  /** Stores timer for poll interval */
+  _clientSyncTimer: ReturnType<typeof setTimeout>
+  /** Tracks if event listeners have been added */
+  _eventListenersAdded: boolean
+  /** Stores last session response from hook */
+  _clientSession: DefaultSession | null | undefined
+  /** Used to store to function export by getSession() hook */
+  _getSession: any
+}
+
+export type GetCsrfToken = (
+  ctxOrReq: GetServerSidePropsContext & GetServerSidePropsContext['req']
+) => Promise<string | null>
+
+export interface SessionOptions {
+  baseUrl?: string
+  basePath?: string
+  clientMaxAge?: number
+  keepAlive?: number
+}
+
+export type Provider<S extends Record<string, unknown> = DefaultSession > = (options: {
+  children: React.ReactNode
+  session: S
+  options: SessionOptions
+}) => React.ReactNode
+
+export type SetOptions = (options: SessionOptions) => void
+
+export type SessionContext = React.createContext<[DefaultSession | null, boolean]>
+
+export type UseSession = () => [any, boolean]
+
+export type GetProviders = () => Promise<any[]>
+
+// Sign in types
+
+export interface SignInOptions {
+  /** Defaults to the current URL. */
+  callbackUrl?: string
+  redirect?: boolean
+}
+export interface SignInResponse {
+  error: string | null
+  status: number
+  ok: boolean
+  url: string | null
+}
+
+export type SignIn<AuthorizationParams = Record<string, string>> = (
+  provider?: string,
+  options?: SignInOptions,
+  authorizationParams?: AuthorizationParams
+) => SignInResponse
+
+// Sign out types
+
+interface SignOutResponse<RedirectType extends boolean=true> {
+  /** Defaults to the current URL. */
+  callbackUrl?: string
+  redirect?: RedirectType
+}
+
+export type SignOut<RedirectType extends boolean = true> = (params: SignOutResponse<RedirectType>) => RedirectType extends true ? Promise<{url?: string} | undefined> : undefined

src/client/index.js

@@ -1,5 +1,3 @@
-/// 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
@@ -20,167 +18,76 @@ import parseUrl from '../lib/parse-url'
 //    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'.
+/** @type {import(".").NextAuthConfig} */
 const __NEXTAUTH = {
   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
+  baseUrlServer: parseUrl(process.env.NEXTAUTH_URL_INTERNAL || process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
+  basePathServer: parseUrl(process.env.NEXTAUTH_URL_INTERNAL || process.env.NEXTAUTH_URL).basePath,
+  keepAlive: 0,
+  clientMaxAge: 0,
   // 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
+  _clientLastSync: 0,
+  _clientSyncTimer: null,
+  _eventListenersAdded: false,
+  _clientSession: undefined,
   _getSession: () => {}
 }
 
 const logger = proxyLogger(_logger, __NEXTAUTH.basePath)
 
+const broadcast = BroadcastChannel()
+
 // Add event listners on load
-if (typeof window !== 'undefined') {
-  if (__NEXTAUTH._eventListenersAdded === false) {
-    __NEXTAUTH._eventListenersAdded = true
+if (typeof window !== 'undefined' && !__NEXTAUTH._eventListenersAdded) {
+  __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)
+  // Fetch new session data but tell it to not to fire another 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.
+  broadcast.receive(() => __NEXTAUTH._getSession({ event: 'storage' }))
 
-    // 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 === '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 document visibilitychange events
-    let hidden, visibilityChange
-    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
-      hidden = 'hidden'
-      visibilityChange = 'visibilitychange'
-    } else if (typeof document.msHidden !== 'undefined') {
-      hidden = 'msHidden'
-      visibilityChange = 'msvisibilitychange'
-    } else if (typeof document.webkitHidden !== 'undefined') {
-      hidden = 'webkitHidden'
-      visibilityChange = 'webkitvisibilitychange'
-    }
-    const handleVisibilityChange = () => !document[hidden] && __NEXTAUTH._getSession({ event: visibilityChange })
-    document.addEventListener('visibilitychange', handleVisibilityChange, 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.
-const setOptions = ({
-  baseUrl,
-  basePath,
-  clientMaxAge,
-  keepAlive
-} = {}) => {
-  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)
-// 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.
-export async function getSession ({ ctx, req = ctx?.req, triggerEvent = true } = {}) {
-  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)
-// 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.
-async function getCsrfToken ({ ctx, req = ctx?.req } = {}) {
-  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`)
+  // Listen for document visibility change events and
+  // if visibility of the document changes, re-fetch the session.
+  document.addEventListener('visibilitychange', () => {
+    !document.hidden && __NEXTAUTH._getSession({ event: 'visibilitychange' })
+  }, false)
 }
 
 // Context to store session data globally
 const SessionContext = createContext()
 
-// Client side method
-export const useSession = (session) => {
-  // Try to use context if we can
-  const value = useContext(SessionContext)
-
-  // If we have no Provider in the tree, call the actual hook
-  if (value === undefined) {
-    return _useSessionHook(session)
-  }
-
-  return value
-}
-
-// Internal hook for getting session from the api.
-const _useSessionHook = (session) => {
-  const [data, setData] = useState(session)
-  const [loading, setLoading] = useState(true)
+/**
+ * React Hook that gives you access
+ * to the logged in user's session data.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#usesession)
+ * @type {import(".").UseSession}
+ */
+export function useSession (session) {
+  const context = useContext(SessionContext)
+  const [data, setData] = useState(context?.[0] ?? session)
+  const [loading, setLoading] = useState(!data)
 
   useEffect(() => {
-    const _getSession = async ({ event = null } = {}) => {
+    __NEXTAUTH._getSession = async ({ event = null } = {}) => {
       try {
-        const triggredByEvent = (event !== null)
-        const triggeredByStorageEvent = !!((event && event === 'storage'))
+        const triggredByEvent = event !== null
+        const triggeredByStorageEvent = event === 'storage'
 
         const clientMaxAge = __NEXTAUTH.clientMaxAge
         const clientLastSync = parseInt(__NEXTAUTH._clientLastSync)
-        const currentTime = Math.floor(new Date().getTime() / 1000)
+        const currentTime = _now()
         const clientSession = __NEXTAUTH._clientSession
 
         // 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 (!triggeredByStorageEvent && 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
@@ -204,43 +111,81 @@ const _useSessionHook = (session) => {
         // 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)
+        __NEXTAUTH._clientLastSync = _now()
 
         // 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 })
+        const newClientSessionData = await getSession({
+          triggerEvent: !triggeredByStorageEvent
+        })
 
         // 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)
+      } finally {
+        setLoading(false)
       }
     }
 
-    __NEXTAUTH._getSession = _getSession
-
-    _getSession()
+    __NEXTAUTH._getSession()
   })
+
   return [data, loading]
 }
 
+/**
+ * Can be called client or server side to return a session asynchronously.
+ * It calls `/api/auth/session` and returns a promise with a session object,
+ * or null if no session exists.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#getsession)
+ * @type {import(".").GetSession}
+ */
+export async function getSession (ctx) {
+  const session = await _fetchData('session', ctx)
+  if (ctx?.triggerEvent ?? true) {
+    broadcast.post({ event: 'session', data: { trigger: 'getSession' } })
+  }
+  return session
+}
+
+/**
+ * Returns the current Cross Site Request Forgery Token (CSRF Token)
+ * required to make POST requests (e.g. for signing in and signing out).
+ * You likely only need to use this if you are not using the built-in
+ * `signIn()` and `signOut()` methods.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#getcsrftoken)
+ * @type {import(".").GetCsrfToken}
+ */
+async function getCsrfToken (ctx) {
+  return (await _fetchData('csrf', ctx))?.csrfToken
+}
+
+/**
+ * It calls `/api/auth/providers` and returns
+ * a list of the currently configured authentication providers.
+ * It can be useful if you are creating a dynamic custom sign in page.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#getproviders)
+ * @type {import(".").GetProviders}
+ */
+export async function getProviders () {
+  return _fetchData('providers')
+}
+
 /**
  * Client-side method to initiate a signin flow
  * or send the user to the signin page listing all possible providers.
- * (Automatically adds the CSRF token to the request)
- * @see https://next-auth.js.org/getting-started/client#signin
- * @param {string} [provider]
- * @param {SignInOptions} [options]
- * @param {object} [authorizationParams]
- * @return {Promise<SignInResponse | undefined>}
- * @typedef {{callbackUrl?: string; redirect?: boolean}} SignInOptions
- * @typedef {{error: string | null; status: number; ok: boolean}} SignInResponse
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signin)
+ * @type {import(".").SignIn}
  */
 export async function signIn (provider, options = {}, authorizationParams = {}) {
   const {
@@ -258,6 +203,9 @@ export async function signIn (provider, options = {}, authorizationParams = {})
     return
   }
   const isCredentials = providers[provider].type === 'credentials'
+  const isEmail = providers[provider].type === 'email'
+  const canRedirectBeDisabled = isCredentials || isEmail
+
   const signInUrl = isCredentials
     ? `${baseUrl}/callback/${provider}`
     : `${baseUrl}/signin/${provider}`
@@ -279,7 +227,7 @@ export async function signIn (provider, options = {}, authorizationParams = {})
   const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
   const res = await fetch(_signInUrl, fetchOptions)
   const data = await res.json()
-  if (redirect || !isCredentials) {
+  if (redirect || !canRedirectBeDisabled) {
     const url = data.url ?? callbackUrl
     window.location = url
     // If url contains a hash, the browser does not reload the page. We reload manually
@@ -304,10 +252,10 @@ export async function signIn (provider, options = {}, authorizationParams = {})
 
 /**
  * Signs the user out, by removing the session cookie.
- * (Automatically adds the CSRF token to the request)
- * @param {SignOutOptions} [options]
- * @returns {Promise<{url?: string} | undefined>}
- * @typedef {{callbackUrl?: string; redirect?: boolean;}} SignOutOptions
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signout)
+ * @type {import(".").SignOut}
  */
 export async function signOut (options = {}) {
   const {
@@ -328,7 +276,7 @@ export async function signOut (options = {}) {
   }
   const res = await fetch(`${baseUrl}/signout`, fetchOptions)
   const data = await res.json()
-  _sendMessage({ event: 'session', data: { trigger: 'signout' } })
+  broadcast.post({ event: 'session', data: { trigger: 'signout' } })
   if (redirect) {
     const url = data.url ?? callbackUrl
     window.location = url
@@ -342,40 +290,118 @@ export async function signOut (options = {}) {
   return data
 }
 
-// Provider to wrap the app in to make session data available globally
-export const Provider = ({ children, session, options }) => {
-  setOptions(options)
-  return createElement(SessionContext.Provider, { value: useSession(session) }, children)
-}
+// 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.
+/** @type {import(".").SetOptions} */
+export function setOptions ({ baseUrl, basePath, clientMaxAge, keepAlive } = {}) {
+  if (baseUrl) __NEXTAUTH.baseUrl = baseUrl
+  if (basePath) __NEXTAUTH.basePath = basePath
+  if (clientMaxAge) __NEXTAUTH.clientMaxAge = clientMaxAge
+  if (keepAlive) {
+    __NEXTAUTH.keepAlive = keepAlive
+    if (typeof window === 'undefined') return
 
-const _fetchData = async (url, options = {}) => {
-  try {
-    const res = await fetch(url, options)
-    const data = await res.json()
-    return Promise.resolve(Object.keys(data).length > 0 ? data : null) // Return null if data empty
-  } catch (error) {
-    logger.error('CLIENT_FETCH_ERROR', url, error)
-    return Promise.resolve(null)
+    // 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) return
+      await __NEXTAUTH._getSession({ event: 'timer' })
+    }, keepAlive * 1000)
   }
 }
 
-const _apiBaseUrl = () => {
+/**
+ * Provider to wrap the app in to make session data available globally.
+ * Can also be used to throttle the number of requests to the endpoint
+ * `/api/auth/session`.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#provider)
+ * @type {import(".").Provider}
+ */
+export function Provider ({ children, session, options }) {
+  setOptions(options)
+  return createElement(
+    SessionContext.Provider,
+    { value: useSession(session) },
+    children
+  )
+}
+
+/**
+ * If passed 'appContext' via getInitialProps() in _app.js
+ * then get the req object from ctx and use that for the
+ * req value to allow _fetchData to
+ * work seemlessly in getInitialProps() on server side
+ * pages *and* in _app.js.
+ */
+async function _fetchData (path, { ctx, req = ctx?.req } = {}) {
+  try {
+    const baseUrl = await _apiBaseUrl()
+    const options = req ? { headers: { cookie: req.headers.cookie } } : {}
+    const res = await fetch(`${baseUrl}/${path}`, options)
+    const data = await res.json()
+    return Object.keys(data).length > 0 ? data : null // Return null if data empty
+  } catch (error) {
+    logger.error('CLIENT_FETCH_ERROR', path, error)
+    return null
+  }
+}
+
+function _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') }
+    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
+    return `${__NEXTAUTH.baseUrlServer}${__NEXTAUTH.basePathServer}`
   }
+  // Return relative path when called client side
+  return __NEXTAUTH.basePath
 }
 
-const _sendMessage = (message) => {
-  if (typeof localStorage !== 'undefined') {
-    const timestamp = Math.floor(new Date().getTime() / 1000)
-    localStorage.setItem('nextauth.message', JSON.stringify({ ...message, clientId: __NEXTAUTH._clientId, timestamp })) // eslint-disable-line
+/** Returns the number of seconds elapsed since January 1, 1970 00:00:00 UTC. */
+function _now () {
+  return Math.floor(Date.now() / 1000)
+}
+
+/**
+ * Inspired by [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
+ * Only not using it directly, because Safari does not support it.
+ *
+ * https://caniuse.com/?search=broadcastchannel
+ */
+function BroadcastChannel (name = 'nextauth.message') {
+  return {
+    /**
+     * Get notified by other tabs/windows.
+     * @param {(message: import(".").BroadcastMessage) => void} onReceive
+     */
+    receive (onReceive) {
+      if (typeof window === 'undefined') return
+      window.addEventListener('storage', async (event) => {
+        if (event.key !== name) return
+        /** @type {import(".").BroadcastMessage} */
+        const message = JSON.parse(event.newValue)
+        if (message?.event !== 'session' || !message?.data) return
+
+        onReceive(message)
+      })
+    },
+    /** Notify other tabs/windows. */
+    post (message) {
+      if (typeof localStorage === 'undefined') return
+      localStorage.setItem(name,
+        JSON.stringify({ ...message, timestamp: _now() })
+      )
+    }
   }
 }
 

src/lib/logger.d.ts

@@ -3,3 +3,8 @@ export interface LoggerInstance {
   error: (code?: string, ...message: unknown[]) => void
   debug: (code?: string, ...message: unknown[]) => void
 }
+
+export declare function proxyLogger (logger: LoggerInstance, basePath: string): LoggerInstance
+
+const _logger: LoggerInstance
+export default _logger

src/providers/index.js

@@ -18,6 +18,7 @@ import GitHub from './github'
 import GitLab from './gitlab'
 import Google from './google'
 import IdentityServer4 from './identity-server4'
+import Instagram from './instagram'
 import LINE from './line'
 import LinkedIn from './linkedin'
 import MailRu from './mailru'
@@ -55,6 +56,7 @@ export default {
   GitLab,
   Google,
   IdentityServer4,
+  Instagram,
   LINE,
   LinkedIn,
   MailRu,

src/providers/instagram.js

@@ -0,0 +1,50 @@
+/**
+ * @param {import("../server").Provider} options
+ * @example
+ *
+ * ```js
+ * // pages/api/auth/[...nextauth].js
+ * import Providers from `next-auth/providers`
+ * ...
+ * providers: [
+ *   Providers.Instagram({
+ *     clientId: process.env.INSTAGRAM_CLIENT_ID,
+ *     clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
+ *   })
+ * ]
+ * ...
+ *
+ * // pages/index
+ * import { signIn } from "next-auth/client"
+ * ...
+ * <button onClick={() => signIn("instagram")}>
+ *   Sign in
+ * </button>
+ * ...
+ * ```
+ * *Resources:*
+ * - [NextAuth.js Documentation](https://next-auth.js.org/providers/instagram)
+ * - [Instagram Documentation](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)
+ * - [Configuration](https://developers.facebook.com/apps)
+ */
+export default function Instagram (options) {
+  return {
+    id: 'instagram',
+    name: 'Instagram',
+    type: 'oauth',
+    version: '2.0',
+    scope: 'user_profile',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: 'https://api.instagram.com/oauth/access_token',
+    authorizationUrl: 'https://api.instagram.com/oauth/authorize?response_type=code',
+    profileUrl: 'https://graph.instagram.com/me?fields=id,username,account_type,name',
+    async profile (profile) {
+      return {
+        id: profile.id,
+        name: profile.username,
+        email: null,
+        image: null
+      }
+    }
+  }
+}

src/server/routes/callback.js

@@ -72,7 +72,7 @@ export default async function callback (req, res) {
           }
         } catch (error) {
           if (error instanceof Error) {
-            return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+            return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
           }
           // TODO: Remove in a future major release
           logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
@@ -168,7 +168,7 @@ export default async function callback (req, res) {
         }
       } catch (error) {
         if (error instanceof Error) {
-          return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+          return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
         }
         // TODO: Remove in a future major release
         logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
@@ -239,7 +239,7 @@ export default async function callback (req, res) {
       }
     } catch (error) {
       if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
       }
       return res.redirect(error)
     }
@@ -254,7 +254,7 @@ export default async function callback (req, res) {
       }
     } catch (error) {
       if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
       }
       return res.redirect(error)
     }

www/docs/configuration/databases.md

@@ -136,17 +136,44 @@ Install module:
 database: 'mariadb://username:password@127.0.0.1:3306/database_name'
 ```
 
-### Postgres
+### Postgres / CockroachDB
 
 Install module:
 `npm i pg`
 
 #### Example
 
+PostgresDB
 ```js
 database: 'postgres://username:password@127.0.0.1:5432/database_name'
 ```
 
+CockroachDB
+```js
+database: 'postgres://username:password@127.0.0.1:26257/database_name'
+```
+
+If the node is using Self-signed cert
+
+```js
+database: {
+    type: "cockroachdb",
+    host: process.env.DATABASE_HOST,
+    port: 26257,
+    username: process.env.DATABASE_USER,
+    password: process.env.DATABASE_PASSWORD,
+    database: process.env.DATABASE_NAME,
+    ssl: {
+      rejectUnauthorized: false,
+      ca: fs.readFileSync('/path/to/server-certificates/root.crt').toString()
+    },
+  },
+```
+
+Read more: [https://node-postgres.com/features/ssl](https://node-postgres.com/features/ssl)
+
+---
+
 ### Microsoft SQL Server
 
 Install module:
@@ -166,7 +193,7 @@ Install module:
 #### Example
 
 ```js
-database: 'mongodb://username:password@127.0.0.1:27017/database_name'
+database: 'mongodb://username:password@127.0.0.1:3306/database_name'
 ```
 
 ### SQLite
@@ -182,9 +209,6 @@ Install module:
 database: 'sqlite://localhost/:memory:'
 ```
 
-
----
-
 ## Other databases
 
 See the [documentation for adapters](/schemas/adapters) for more information on advanced configuration, including how to use NextAuth.js with other databases using a [custom adapter](/tutorials/creating-a-database-adapter).

www/docs/configuration/options.md

@@ -21,6 +21,14 @@ _e.g. `NEXTAUTH_URL=https://example.com/custom-route/api/auth`_
 To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `now env` command.
 :::
 
+### NEXTAUTH_URL_INTERNAL
+
+If provided, server-side calls will use this instead of `NEXTAUTH_URL`. Useful in environments when the server doesn't have access to the canonical URL of your site. Defaults to `NEXTAUTH_URL`.
+
+```
+NEXTAUTH_URL_INTERNAL=http://10.240.8.16
+```
+
 ---
 
 ## Options

www/docs/configuration/pages.md

@@ -42,9 +42,9 @@ export default function SignIn({ providers }) {
   )
 }
 
-SignIn.getInitialProps = async (context) => {
+SignIn.getInitialProps = async () => {
   return {
-    providers: await providers(context)
+    providers: await providers()
   }
 }
 ```

www/docs/getting-started/client.md

@@ -212,7 +212,18 @@ The URL must be considered valid by the [redirect callback handler](/configurati
 
 #### Using the redirect: false option
 
-When you use the `credentials` provider, you might not want the user to redirect to an error page if an error occurs, so you can handle any errors (like wrong credentials given by the user) on the same page. For that, you can pass `redirect: false` in the second parameter object. `signIn` then will return a Promise, that resolves to the following:
+:::note
+The redirect option is only available for `credentials` and `email` providers.
+:::
+
+In some cases, you might want to deal with the sign in response on the same page and disable the default redirection. For example, if an error occurs (like wrong credentials given by the user), you might want to handle the error on the same page. For that, you can pass `redirect: false` in the second parameter object.
+
+e.g.
+
+- `signIn('credentials', { redirect: false, password: 'password' })`
+- `signIn('email', { redirect: false, email: 'bill@fillmurray.com' })`
+
+`signIn` will then return a Promise, that resolves to the following:
 
 ```ts
 {

www/docs/providers/instagram.md

@@ -0,0 +1,42 @@
+---
+id: instagram
+title: Instagram
+---
+
+## Documentation
+
+https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
+
+## Configuration
+
+https://developers.facebook.com/apps/
+
+## Example
+
+```jsx
+// pages/api/auth/[...nextauth].js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.Instagram({
+    clientId: process.env.INSTAGRAM_CLIENT_ID,
+    clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
+  })
+]
+...
+// pages/index.jsx
+import { signIn } from "next-auth/client"
+...
+<button onClick={() => signIn("instagram")}>
+  Sign in
+</button>
+...
+```
+
+:::warning
+Email address is not returned by the Instagram API.
+:::
+
+:::tip
+Instagram display app required callback URL to be configured in your Facebook app and Facebook required you to use **https** even for localhost! In order to do that, you either need to [add an SSL to your localhost](https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/) or use a proxy such as [ngrock](https://ngrok.com/docs).
+:::

www/package-lock.json

@@ -10900,9 +10900,9 @@
       "integrity": "sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug=="
     },
     "prismjs": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.22.0.tgz",
-      "integrity": "sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
+      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
       "requires": {
         "clipboard": "^2.0.0"
       }

www/package.json

@@ -11,16 +11,16 @@
     "generate-providers": "node ./scripts/generate-providers.js"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.66",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.66",
+    "@docusaurus/core": "^2.0.0-alpha.70",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.70",
     "classnames": "^2.2.6",
-    "docusaurus-lunr-search": "^2.1.7",
+    "docusaurus-lunr-search": "^2.1.10",
     "jose": "^2.0.2",
     "lodash.times": "^4.3.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-marquee-slider": "^1.1.2",
-    "styled-components": "^5.2.0"
+    "styled-components": "^5.2.1"
   },
   "browserslist": {
     "production": [
@@ -35,6 +35,6 @@
     ]
   },
   "devDependencies": {
-    "standard": "^15.0.0"
+    "standard": "^16.0.3"
   }
 }