Authenticate using REST for client application

[dev-foa]

Question 💬

How to set CORS for the next-auth request ?
Is it even possible currently?

How to reproduce ☕️

I am trying to connect my axios instance (from another backend) to an API route authenticated by next-auth. The axios instance gets the set-cookie header, but doesn't actually set it in the header for the next request (doesn't maintain the session). withCredential is true.

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { wrapper } from 'axios-cookiejar-support'
import { CookieJar } from 'tough-cookie'
import querystring from 'querystring'

axios.defaults.withCredentials = true
axios.interceptors.request.use((x) => {
  // replace console with our logger of choice
  console.log('logging: req', x)
  return x
})

axios.interceptors.response.use((x) => {
  console.log('logging: res', x)
  return x
})

const APP_URL = process.env.APP_URL
const APP_APIKEY = process.env.APP_APIKEY

async function authenticate(axiosInstance: AxiosInstance, jar: CookieJar) {
  // console.log('1 - Jar', jar.toJSON()
  axiosInstance.interceptors.request.use((x) => {
    // replace console with our logger of choice
    console.log('req url', x.url)
    console.log('req method', x.method)
    console.log('req header', x.headers)
    console.log('req withCredentials', x.withCredentials)

    console.log('req jar', x.jar?.toJSON())
    console.log('req data', x.data)
    console.log('\n\n')
    return x
  })
  axiosInstance.interceptors.response.use((x) => {
    console.log('res header', x.headers)
    // console.log('logging: res', x)
    return x
  })
  axiosInstance.defaults.withCredentials = true

  let csrfResponse = await axiosInstance.get('/api/auth/csrf', {
    withCredentials: true,
  })

  // console.log('csrfheaders', csrfResponse .headers)


  const authReq = { ...csrfResponse.data, apikey: APP_APIKEY }
  function getAuthCookies(jar: CookieJar) {
    console.log('\n\n***** json jar',jar.toJSON().cookies)
    let cookies = jar.toJSON().cookies
    let result = cookies.map((e)=> { return `${e.key}=${e.value}`}).join()
    console.log(result)
    return result
  }
  const config: AxiosRequestConfig = {
    jar: jar,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'content-type': 'application/x-www-form-urlencoded',
      cookie: getAuthCookies(jar),
    },
    method: 'POST',
    withCredentials: true,
  }

  axiosInstance.post(
    '/api/auth/callback/credentials',
    querystring.stringify(authReq),
    config
  )
  .then((response: AxiosResponse) => {
    console.log(response.headers)
    // console.log(response.config)

    // console.log(response.status)
    return response
  })
 

  // console.log('authheaders', authResponse.headers, '\n\n')

  // console.log(authResponse.data)

  return axiosInstance
}

const jar = new CookieJar()

const instance = wrapper(
  axios.create({
    baseURL: `${APP_URL}`,
    withCredentials: true,
    jar: jar,
  })
)
const authenticatedClient = authenticate(instance, jar)
export default authenticatedClient

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

next-auth doesn't need axios, also not sure where you would need this. If you want to create your own set of axios-based functions for some reason, here is the overview of our REST endpoints https://next-auth.js.org/getting-started/rest-api

[dev-foa]

I am trying to connect another application to my nextjs app that is authenticated using nextauth, like in the diagram below:

Here is what my [...nextauth].ts on the nextjs app looks like (it's simple for the sake of this question) .

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.Credentials({
      name: 'apikey',
      credentials: {
        apikey: { label: 'API key', type: 'password' },
      },
      async authorize(credentials, req) {
        if (credentials.apikey === process.env.CLIENT_API_KEY) {
          return {
            name: 'Automated Process',
            email: '[email protected]',
          }
        } else {
          return null
        }
      },
    }),
  ],
  session: {
    jwt: true,
    maxAge: 6 * 60 * 60,
  },
  jwt: {
    encryption: true,
    encryptionKey: process.env.JWT_ENCRYPTION_KEY,
    signingKey: process.env.JWT_SIGNING_KEY,
  },
  pages: {
    // signIn: '/auth',
    signOut: '/auth',
    error: '/auth',
    verifyRequest: '/auth',
    newUser: '/auth',
  },
})

I tried to use an axios instance like the following (on the other application), but the axios instance doesn't set the cookies correctly on the requests.

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { wrapper } from 'axios-cookiejar-support'
import { CookieJar } from 'tough-cookie'
import querystring from 'querystring'

const APP_URL = process.env.APP_URL
const APP_APIKEY = process.env.APP_APIKEY

async function authenticate(axiosInstance: AxiosInstance, jar: CookieJar) {
  // console.log('1 - Jar', jar.toJSON()
  axiosInstance.interceptors.request.use((x) => {
    // replace console with our logger of choice
    console.log('req url', x.url)
    console.log('req method', x.method)
    console.log('req header', x.headers)
    console.log('req withCredentials', x.withCredentials)
    console.log('req jar', x.jar?.toJSON())
    return x
  })
  axiosInstance.interceptors.response.use((x) => {
    console.log('res header', x.headers)
    // console.log('logging: res', x)
    return x
  })
  axiosInstance.defaults.withCredentials = true

  let csrfResponse = await axiosInstance.get('/api/auth/csrf', {
    withCredentials: true,
  })

  // console.log('csrfheaders', csrfResponse .headers)


  const authReq = { ...csrfResponse.data, apikey: APP_APIKEY }
  function getAuthCookies(jar: CookieJar) {
    let cookies = jar.toJSON().cookies
    let result = cookies.map((e)=> { return `${e.key}=${e.value}`}).join()
    console.log(result)
    return result
  }
  const config: AxiosRequestConfig = {
    jar: jar,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'content-type': 'application/x-www-form-urlencoded',
      cookie: getAuthCookies(jar),
    },
    method: 'POST',
    withCredentials: true,
  }

  axiosInstance.post(
    '/api/auth/callback/credentials',
    querystring.stringify(authReq),
    config
  )
  .then((response: AxiosResponse) => {
    console.log(response.headers)
    // console.log(response.config)

    // console.log(response.status)
    return response
  })
 

  // console.log('authheaders', authResponse.headers, '\n\n')

  // console.log(authResponse.data)

  return axiosInstance
}

const jar = new CookieJar()

const instance = wrapper(
  axios.create({
    baseURL: `${APP_URL}`,
    withCredentials: true,
    jar: jar,
  })
)
const authenticatedClient = authenticate(instance, jar)
export default authenticatedClient

I also tried to create a session using python, and this works perfectly fine. All the requests through the session object work.

def __authenticated_session(self):
        session = requests.Session()
        print(f'1.{session.cookies=}\n\n')
        csrf = session.get(f"{APP_URL}/api/auth/csrf")
        csrf_j = csrf.json()
        print(f'{csrf.headers=}\n\n')
        print(f'2. {session.cookies=}\n\n')
        csrf_j['apikey'] = APP_API_KEY
        print(f'{csrf_j=}')
        res = session.post(
            f"{ARCHIVE_URL}/api/auth/callback/credentials", data=csrf_j)
        print(f'{res.headers=}\n\n')

        print(f'3. {session.cookies=}\n\n')
        return session