Iron-session doesn't work on Safari browser.

[yeskyu12]

I wanted to use iron-session in next.js.
I saved user data in iron-session in api route and tried to use that data on server side.
It works fine on Chrome browser, but not on Safari browser.
How can I use iron-session on both Chrome browser and Safari browser?

Here is my code.

// package.json
"dependencies": {
  "axios": "^1.3.3",
  "iron-session": "^6.3.1",
  "next": "^13.1.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
},
"devDependencies": {
  "@types/node": "^17.0.34",
  "@types/react": "^18.0.9",
  "@types/react-dom": "^18.0.4",
  "typescript": "^4.6.4"
}

// src/pages/api/auth/sms/index.js
// API Route
import axios from 'axios'
import { withSessionRoute } from '@lib/withSession'

const sendSmsRoute = async (req, res) => {
  const params = await req.body

  await axios.post(`${BASE_URL}/auth/sms`)

  const user = {
    phone: params.phone,
  }

  req.session.user = user
  await req.session.save()
  // log result
  console.log('saved session:', JSON.stringify(req.session, null, 2))
  res.send('sms sent')
}

export default withSessionRoute(sendSmsRoute)

// src/pages/verify-sms.�jsx
import VerifySms from '@features/VerifySms'
import { withSessionSsr } from '@lib/withSession'

const VerifySmsPage = ({ phone }) => {
  return <VerifySms phone={phone} />
}

export const getServerSideProps = withSessionSsr(async ({ req }) => {
  // I want to use iron-session here.
  const { user } = req.session
  // log result
  console.log('session in server side:', JSON.stringify(req.session, null, 2))
  return {
    props: { phone: user.phone },
  }
})

export default VerifySmsPage

// Result on Chrome browser
saved session: {
  "user": {
    "phone": "01012345678"
  }
}

session in server side: {
  "user": {
    "phone": "01012345678"
  }
}

// Result on Safari browser
saved session: {
  "user": {
    "phone": "01012345678"
  }
}

session in server side: {}

[yeskyu12]

Previously , I set secure in cookieOptions true.

But now I changed that option false and it works on Safari browser.

export const sessionOptions = {
  password: SESSION_PASSWORD,
  cookieName: COOKIE_NAME,
  cookieOptions: {
    secure: false,
  },
}

I want to use iron-session with secure option set to true on Safari browser.
Can anyone help me?

[julesjanssen]

Serve your site over HTTPS.
See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts

[yeskyu12]

It works..!! Thanks for your answer!